@sc4rfurryx/proteusjs 1.0.0 → 1.1.0

package/dist/proteus.js

@@ -1,7 +1,7 @@
 /*!
- * ProteusJS v1.0.0
+ * ProteusJS v1.1.0
  * Shape-shifting responsive design that adapts like the sea god himself
- * (c) 2024 sc4rfurry
+ * (c) 2025 sc4rfurry
  * Released under the MIT License
  */
 (function (global, factory) {
@@ -15164,7 +15164,7 @@
     /**
      * Check if the current environment supports ProteusJS features
      */
-    function isSupported() {
+    function isSupported$1() {
         const support = getSupportInfo();
         return support.resizeObserver && support.intersectionObserver;
     }
@@ -15231,7 +15231,7 @@
     /**
      * Version utilities for ProteusJS
      */
-    const version = '1.0.0';
+    const version = '1.1.0';
 
     /**
      * ProteusJS - Main library class
@@ -15363,7 +15363,7 @@
                 return this;
             }
             // Check browser support
-            if (!isSupported()) {
+            if (!isSupported$1()) {
                 logger.error('Browser not supported. Missing required APIs.');
                 return this;
             }
@@ -15734,7 +15734,7 @@
          * Check if browser is supported
          */
         static isSupported() {
-            return isSupported();
+            return isSupported$1();
         }
         /**
          * Get or create global instance
@@ -15995,23 +15995,2343 @@
     ProteusJS.instance = null;
 
     /**
-     * ProteusJS - Dynamic Responsive Design Library
+     * @sc4rfurryx/proteusjs/transitions
+     * View Transitions API wrapper with safe fallbacks
+     *
+     * @version 1.1.0
+     * @author sc4rfurry
+     * @license MIT
+     */
+    /**
+     * One API for animating DOM state changes and cross-document navigations
+     * using the View Transitions API with safe fallbacks.
+     */
+    async function transition(run, opts = {}) {
+        const { name, duration = 300, onBefore, onAfter, allowInterrupt = true } = opts;
+        // Check for View Transitions API support
+        const hasViewTransitions = 'startViewTransition' in document;
+        if (onBefore) {
+            onBefore();
+        }
+        if (!hasViewTransitions) {
+            // Fallback: run immediately without transitions
+            try {
+                await run();
+            }
+            finally {
+                if (onAfter) {
+                    onAfter();
+                }
+            }
+            return;
+        }
+        // Use native View Transitions API
+        try {
+            const viewTransition = document.startViewTransition(async () => {
+                await run();
+            });
+            // Add CSS view-transition-name if name provided
+            if (name) {
+                const style = document.createElement('style');
+                style.textContent = `
+        ::view-transition-old(${name}),
+        ::view-transition-new(${name}) {
+          animation-duration: ${duration}ms;
+        }
+      `;
+                document.head.appendChild(style);
+                // Clean up style after transition
+                viewTransition.finished.finally(() => {
+                    style.remove();
+                });
+            }
+            await viewTransition.finished;
+        }
+        catch (error) {
+            console.warn('View transition failed, falling back to immediate execution:', error);
+            await run();
+        }
+        finally {
+            if (onAfter) {
+                onAfter();
+            }
+        }
+    }
+    /**
+     * MPA-friendly navigation with view transitions when supported
+     */
+    async function navigate(url, opts = {}) {
+        const { name, prerender = false } = opts;
+        // Optional prerender hint (basic implementation)
+        if (prerender && 'speculation' in HTMLScriptElement.prototype) {
+            const script = document.createElement('script');
+            script.type = 'speculationrules';
+            script.textContent = JSON.stringify({
+                prerender: [{ where: { href_matches: url } }]
+            });
+            document.head.appendChild(script);
+        }
+        // Check for View Transitions API support
+        const hasViewTransitions = 'startViewTransition' in document;
+        if (!hasViewTransitions) {
+            // Fallback: normal navigation
+            window.location.href = url;
+            return;
+        }
+        try {
+            // Use view transitions for navigation
+            const viewTransition = document.startViewTransition(() => {
+                window.location.href = url;
+            });
+            if (name) {
+                const style = document.createElement('style');
+                style.textContent = `
+        ::view-transition-old(${name}),
+        ::view-transition-new(${name}) {
+          animation-duration: 300ms;
+        }
+      `;
+                document.head.appendChild(style);
+            }
+            await viewTransition.finished;
+        }
+        catch (error) {
+            console.warn('View transition navigation failed, falling back to normal navigation:', error);
+            window.location.href = url;
+        }
+    }
+    // Export default object for convenience
+    var index$g = {
+        transition,
+        navigate
+    };
+
+    var index$h = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: index$g,
+        navigate: navigate,
+        transition: transition
+    });
+
+    /**
+     * @sc4rfurryx/proteusjs/scroll
+     * Scroll-driven animations with CSS Scroll-Linked Animations
+     *
+     * @version 1.1.0
+     * @author sc4rfurry
+     * @license MIT
+     */
+    /**
+     * Zero-boilerplate setup for CSS Scroll-Linked Animations with fallbacks
+     */
+    function scrollAnimate(target, opts) {
+        const targetEl = typeof target === 'string' ? document.querySelector(target) : target;
+        if (!targetEl) {
+            throw new Error('Target element not found');
+        }
+        const { keyframes, range = ['0%', '100%'], timeline = {}, fallback = 'io' } = opts;
+        const { axis = 'block', start = '0%', end = '100%' } = timeline;
+        // Check for CSS Scroll-Linked Animations support
+        const hasScrollTimeline = 'CSS' in window && CSS.supports('animation-timeline', 'scroll()');
+        // Check for reduced motion preference
+        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (prefersReducedMotion) {
+            // Respect user preference - either disable or reduce animation
+            if (fallback === false)
+                return;
+            // Apply only the end state for reduced motion
+            const endKeyframe = keyframes[keyframes.length - 1];
+            Object.assign(targetEl.style, endKeyframe);
+            return;
+        }
+        if (hasScrollTimeline) {
+            // Use native CSS Scroll-Linked Animations
+            const timelineName = `scroll-timeline-${Math.random().toString(36).substr(2, 9)}`;
+            // Create scroll timeline
+            const style = document.createElement('style');
+            style.textContent = `
+      @scroll-timeline ${timelineName} {
+        source: nearest;
+        orientation: ${axis};
+        scroll-offsets: ${start}, ${end};
+      }
+      
+      .scroll-animate-${timelineName} {
+        animation-timeline: ${timelineName};
+        animation-duration: 1ms; /* Required but ignored */
+        animation-fill-mode: both;
+      }
+    `;
+            document.head.appendChild(style);
+            // Apply animation class
+            targetEl.classList.add(`scroll-animate-${timelineName}`);
+            // Create Web Animations API animation
+            const animation = targetEl.animate(keyframes, {
+                duration: 1, // Required but ignored with scroll timeline
+                fill: 'both'
+            });
+            // Set scroll timeline (when supported)
+            if ('timeline' in animation) {
+                animation.timeline = new window.ScrollTimeline({
+                    source: document.scrollingElement,
+                    orientation: axis,
+                    scrollOffsets: [
+                        { target: targetEl, edge: 'start', threshold: parseFloat(start) / 100 },
+                        { target: targetEl, edge: 'end', threshold: parseFloat(end) / 100 }
+                    ]
+                });
+            }
+        }
+        else if (fallback === 'io') {
+            // Fallback using Intersection Observer
+            let animation = null;
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    const progress = Math.max(0, Math.min(1, entry.intersectionRatio));
+                    if (!animation) {
+                        animation = targetEl.animate(keyframes, {
+                            duration: 1000,
+                            fill: 'both'
+                        });
+                        animation.pause();
+                    }
+                    // Update animation progress based on intersection
+                    animation.currentTime = progress * 1000;
+                });
+            }, {
+                threshold: Array.from({ length: 101 }, (_, i) => i / 100) // 0 to 1 in 0.01 steps
+            });
+            observer.observe(targetEl);
+            // Store cleanup function
+            targetEl._scrollAnimateCleanup = () => {
+                observer.disconnect();
+                if (animation) {
+                    animation.cancel();
+                }
+            };
+        }
+    }
+    /**
+     * Create a scroll-triggered animation that plays once when element enters viewport
+     */
+    function scrollTrigger(target, keyframes, options = {}) {
+        const targetEl = typeof target === 'string' ? document.querySelector(target) : target;
+        if (!targetEl) {
+            throw new Error('Target element not found');
+        }
+        // Check for reduced motion preference
+        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (prefersReducedMotion) {
+            // Apply end state immediately
+            const endKeyframe = keyframes[keyframes.length - 1];
+            Object.assign(targetEl.style, endKeyframe);
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    // Play animation
+                    targetEl.animate(keyframes, {
+                        duration: 600,
+                        easing: 'ease-out',
+                        fill: 'forwards',
+                        ...options
+                    });
+                    // Disconnect observer after first trigger
+                    observer.disconnect();
+                }
+            });
+        }, {
+            threshold: 0.1,
+            rootMargin: '0px 0px -10% 0px'
+        });
+        observer.observe(targetEl);
+    }
+    /**
+     * Parallax effect using scroll-driven animations
+     */
+    function parallax(target, speed = 0.5) {
+        const targetEl = typeof target === 'string' ? document.querySelector(target) : target;
+        if (!targetEl) {
+            throw new Error('Target element not found');
+        }
+        // Check for reduced motion preference
+        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (prefersReducedMotion)
+            return;
+        const keyframes = [
+            { transform: `translateY(${ -100 * speed}px)` },
+            { transform: `translateY(${100 * speed}px)` }
+        ];
+        scrollAnimate(targetEl, {
+            keyframes,
+            range: ['0%', '100%'],
+            timeline: { axis: 'block' },
+            fallback: 'io'
+        });
+    }
+    /**
+     * Cleanup function to remove scroll animations
+     */
+    function cleanup$2(target) {
+        const targetEl = typeof target === 'string' ? document.querySelector(target) : target;
+        if (!targetEl)
+            return;
+        // Call stored cleanup function if it exists
+        if (targetEl._scrollAnimateCleanup) {
+            targetEl._scrollAnimateCleanup();
+            delete targetEl._scrollAnimateCleanup;
+        }
+        // Remove animation classes
+        targetEl.classList.forEach(className => {
+            if (className.startsWith('scroll-animate-')) {
+                targetEl.classList.remove(className);
+            }
+        });
+        // Cancel any running animations
+        const animations = targetEl.getAnimations();
+        animations.forEach(animation => animation.cancel());
+    }
+    // Export default object for convenience
+    var index$e = {
+        scrollAnimate,
+        scrollTrigger,
+        parallax,
+        cleanup: cleanup$2
+    };
+
+    var index$f = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        cleanup: cleanup$2,
+        default: index$e,
+        parallax: parallax,
+        scrollAnimate: scrollAnimate,
+        scrollTrigger: scrollTrigger
+    });
+
+    /**
+     * @sc4rfurryx/proteusjs/anchor
+     * CSS Anchor Positioning utilities with robust JS fallback
+     *
+     * @version 1.1.0
+     * @author sc4rfurry
+     * @license MIT
+     */
+    /**
+     * Declarative tethers (tooltips, callouts) via CSS Anchor Positioning when available;
+     * robust JS fallback with flip/collision detection
+     */
+    function tether(floating, opts) {
+        const floatingEl = typeof floating === 'string' ? document.querySelector(floating) : floating;
+        const anchorEl = typeof opts.anchor === 'string' ? document.querySelector(opts.anchor) : opts.anchor;
+        if (!floatingEl || !anchorEl) {
+            throw new Error('Both floating and anchor elements must exist');
+        }
+        const { placement = 'bottom', align = 'center', offset = 8, strategy = 'absolute' } = opts;
+        // Check for CSS Anchor Positioning support
+        const hasAnchorPositioning = CSS.supports('anchor-name', 'test');
+        let isDestroyed = false;
+        let resizeObserver = null;
+        const setupCSSAnchorPositioning = () => {
+            if (!hasAnchorPositioning)
+                return false;
+            // Generate unique anchor name
+            const anchorName = `anchor-${Math.random().toString(36).substring(2, 11)}`;
+            // Set anchor name on anchor element
+            anchorEl.style.setProperty('anchor-name', anchorName);
+            // Position floating element using CSS anchor positioning
+            const floatingStyle = floatingEl;
+            floatingStyle.style.position = strategy;
+            floatingStyle.style.setProperty('position-anchor', anchorName);
+            // Set position based on placement
+            switch (placement) {
+                case 'top':
+                    floatingStyle.style.bottom = `anchor(bottom, ${offset}px)`;
+                    break;
+                case 'bottom':
+                    floatingStyle.style.top = `anchor(bottom, ${offset}px)`;
+                    break;
+                case 'left':
+                    floatingStyle.style.right = `anchor(left, ${offset}px)`;
+                    break;
+                case 'right':
+                    floatingStyle.style.left = `anchor(right, ${offset}px)`;
+                    break;
+            }
+            // Set alignment
+            if (placement === 'top' || placement === 'bottom') {
+                switch (align) {
+                    case 'start':
+                        floatingStyle.style.left = 'anchor(left)';
+                        break;
+                    case 'center':
+                        floatingStyle.style.left = 'anchor(center)';
+                        floatingStyle.style.transform = 'translateX(-50%)';
+                        break;
+                    case 'end':
+                        floatingStyle.style.right = 'anchor(right)';
+                        break;
+                }
+            }
+            else {
+                switch (align) {
+                    case 'start':
+                        floatingStyle.style.top = 'anchor(top)';
+                        break;
+                    case 'center':
+                        floatingStyle.style.top = 'anchor(center)';
+                        floatingStyle.style.transform = 'translateY(-50%)';
+                        break;
+                    case 'end':
+                        floatingStyle.style.bottom = 'anchor(bottom)';
+                        break;
+                }
+            }
+            return true;
+        };
+        const calculatePosition = () => {
+            const anchorRect = anchorEl.getBoundingClientRect();
+            const floatingRect = floatingEl.getBoundingClientRect();
+            const viewport = {
+                width: window.innerWidth,
+                height: window.innerHeight
+            };
+            let finalPlacement = placement;
+            let x = 0;
+            let y = 0;
+            // Calculate base position
+            switch (finalPlacement) {
+                case 'top':
+                    x = anchorRect.left;
+                    y = anchorRect.top - floatingRect.height - offset;
+                    break;
+                case 'bottom':
+                    x = anchorRect.left;
+                    y = anchorRect.bottom + offset;
+                    break;
+                case 'left':
+                    x = anchorRect.left - floatingRect.width - offset;
+                    y = anchorRect.top;
+                    break;
+                case 'right':
+                    x = anchorRect.right + offset;
+                    y = anchorRect.top;
+                    break;
+                case 'auto': {
+                    // Choose best placement based on available space
+                    const spaces = {
+                        top: anchorRect.top,
+                        bottom: viewport.height - anchorRect.bottom,
+                        left: anchorRect.left,
+                        right: viewport.width - anchorRect.right
+                    };
+                    const bestPlacement = Object.entries(spaces).reduce((a, b) => spaces[a[0]] > spaces[b[0]] ? a : b)[0];
+                    finalPlacement = bestPlacement;
+                    return calculatePosition(); // Recursive call with determined placement
+                }
+            }
+            // Apply alignment
+            if (finalPlacement === 'top' || finalPlacement === 'bottom') {
+                switch (align) {
+                    case 'start':
+                        // x already set correctly
+                        break;
+                    case 'center':
+                        x = anchorRect.left + (anchorRect.width - floatingRect.width) / 2;
+                        break;
+                    case 'end':
+                        x = anchorRect.right - floatingRect.width;
+                        break;
+                }
+            }
+            else {
+                switch (align) {
+                    case 'start':
+                        // y already set correctly
+                        break;
+                    case 'center':
+                        y = anchorRect.top + (anchorRect.height - floatingRect.height) / 2;
+                        break;
+                    case 'end':
+                        y = anchorRect.bottom - floatingRect.height;
+                        break;
+                }
+            }
+            // Collision detection and adjustment
+            if (x < 0)
+                x = 8;
+            if (y < 0)
+                y = 8;
+            if (x + floatingRect.width > viewport.width) {
+                x = viewport.width - floatingRect.width - 8;
+            }
+            if (y + floatingRect.height > viewport.height) {
+                y = viewport.height - floatingRect.height - 8;
+            }
+            return { x, y };
+        };
+        const updatePosition = () => {
+            if (isDestroyed)
+                return;
+            if (!hasAnchorPositioning) {
+                const { x, y } = calculatePosition();
+                const floatingStyle = floatingEl;
+                floatingStyle.style.position = strategy;
+                floatingStyle.style.left = `${x}px`;
+                floatingStyle.style.top = `${y}px`;
+            }
+        };
+        const setupJSFallback = () => {
+            updatePosition();
+            // Set up observers for position updates
+            resizeObserver = new ResizeObserver(updatePosition);
+            resizeObserver.observe(anchorEl);
+            resizeObserver.observe(floatingEl);
+            window.addEventListener('scroll', updatePosition, { passive: true });
+            window.addEventListener('resize', updatePosition, { passive: true });
+        };
+        const destroy = () => {
+            isDestroyed = true;
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+                resizeObserver = null;
+            }
+            window.removeEventListener('scroll', updatePosition);
+            window.removeEventListener('resize', updatePosition);
+            // Clean up CSS anchor positioning
+            if (hasAnchorPositioning) {
+                anchorEl.style.removeProperty('anchor-name');
+                const floatingStyle = floatingEl;
+                floatingStyle.style.removeProperty('position-anchor');
+                floatingStyle.style.position = '';
+            }
+        };
+        // Initialize
+        if (!setupCSSAnchorPositioning()) {
+            setupJSFallback();
+        }
+        return {
+            destroy
+        };
+    }
+    // Export default object for convenience
+    var index$c = {
+        tether
+    };
+
+    var index$d = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        default: index$c,
+        tether: tether
+    });
+
+    /**
+     * @sc4rfurryx/proteusjs/popover
+     * HTML Popover API wrapper with robust focus/inert handling
+     *
+     * @version 1.1.0
+     * @author sc4rfurry
+     * @license MIT
+     */
+    /**
+     * Unified API for menus, tooltips, and dialogs using the native Popover API
+     * with robust focus/inert handling
+     */
+    function attach(trigger, panel, opts = {}) {
+        const triggerEl = typeof trigger === 'string' ? document.querySelector(trigger) : trigger;
+        const panelEl = typeof panel === 'string' ? document.querySelector(panel) : panel;
+        if (!triggerEl || !panelEl) {
+            throw new Error('Both trigger and panel elements must exist');
+        }
+        const { type = 'menu', trapFocus = type === 'dialog', restoreFocus = true, closeOnEscape = true, onOpen, onClose } = opts;
+        let isOpen = false;
+        let previousFocus = null;
+        let focusTrap = null;
+        // Check for native Popover API support
+        const hasPopoverAPI = 'popover' in HTMLElement.prototype;
+        // Set up ARIA attributes
+        const setupAria = () => {
+            const panelId = panelEl.id || `popover-${Math.random().toString(36).substr(2, 9)}`;
+            panelEl.id = panelId;
+            triggerEl.setAttribute('aria-expanded', 'false');
+            triggerEl.setAttribute('aria-controls', panelId);
+            if (type === 'menu') {
+                triggerEl.setAttribute('aria-haspopup', 'menu');
+                panelEl.setAttribute('role', 'menu');
+            }
+            else if (type === 'dialog') {
+                triggerEl.setAttribute('aria-haspopup', 'dialog');
+                panelEl.setAttribute('role', 'dialog');
+                panelEl.setAttribute('aria-modal', 'true');
+            }
+            else if (type === 'tooltip') {
+                triggerEl.setAttribute('aria-describedby', panelId);
+                panelEl.setAttribute('role', 'tooltip');
+            }
+        };
+        // Set up native popover if supported
+        const setupNativePopover = () => {
+            if (hasPopoverAPI) {
+                panelEl.popover = type === 'dialog' ? 'manual' : 'auto';
+                triggerEl.setAttribute('popovertarget', panelEl.id);
+            }
+        };
+        // Focus trap implementation
+        class FocusTrap {
+            constructor(container) {
+                this.container = container;
+                this.focusableElements = [];
+                this.handleKeyDown = (e) => {
+                    if (e.key !== 'Tab')
+                        return;
+                    const firstElement = this.focusableElements[0];
+                    const lastElement = this.focusableElements[this.focusableElements.length - 1];
+                    if (e.shiftKey) {
+                        if (document.activeElement === firstElement) {
+                            e.preventDefault();
+                            lastElement.focus();
+                        }
+                    }
+                    else {
+                        if (document.activeElement === lastElement) {
+                            e.preventDefault();
+                            firstElement.focus();
+                        }
+                    }
+                };
+                this.updateFocusableElements();
+            }
+            updateFocusableElements() {
+                const selector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+                this.focusableElements = Array.from(this.container.querySelectorAll(selector));
+            }
+            activate() {
+                this.updateFocusableElements();
+                if (this.focusableElements.length > 0) {
+                    this.focusableElements[0].focus();
+                }
+                document.addEventListener('keydown', this.handleKeyDown);
+            }
+            deactivate() {
+                document.removeEventListener('keydown', this.handleKeyDown);
+            }
+        }
+        const open = () => {
+            if (isOpen)
+                return;
+            if (restoreFocus) {
+                previousFocus = document.activeElement;
+            }
+            if (hasPopoverAPI) {
+                panelEl.showPopover();
+            }
+            else {
+                panelEl.style.display = 'block';
+                panelEl.setAttribute('data-popover-open', 'true');
+            }
+            triggerEl.setAttribute('aria-expanded', 'true');
+            isOpen = true;
+            if (trapFocus) {
+                focusTrap = new FocusTrap(panelEl);
+                focusTrap.activate();
+            }
+            if (onOpen) {
+                onOpen();
+            }
+        };
+        const close = () => {
+            if (!isOpen)
+                return;
+            if (hasPopoverAPI) {
+                panelEl.hidePopover();
+            }
+            else {
+                panelEl.style.display = 'none';
+                panelEl.removeAttribute('data-popover-open');
+            }
+            triggerEl.setAttribute('aria-expanded', 'false');
+            isOpen = false;
+            if (focusTrap) {
+                focusTrap.deactivate();
+                focusTrap = null;
+            }
+            if (restoreFocus && previousFocus) {
+                previousFocus.focus();
+                previousFocus = null;
+            }
+            if (onClose) {
+                onClose();
+            }
+        };
+        const toggle = () => {
+            if (isOpen) {
+                close();
+            }
+            else {
+                open();
+            }
+        };
+        const handleKeyDown = (e) => {
+            if (closeOnEscape && e.key === 'Escape' && isOpen) {
+                e.preventDefault();
+                close();
+            }
+        };
+        const handleClick = (e) => {
+            e.preventDefault();
+            toggle();
+        };
+        const destroy = () => {
+            triggerEl.removeEventListener('click', handleClick);
+            document.removeEventListener('keydown', handleKeyDown);
+            if (focusTrap) {
+                focusTrap.deactivate();
+            }
+            if (isOpen) {
+                close();
+            }
+        };
+        // Initialize
+        setupAria();
+        setupNativePopover();
+        triggerEl.addEventListener('click', handleClick);
+        document.addEventListener('keydown', handleKeyDown);
+        return {
+            open,
+            close,
+            toggle,
+            destroy
+        };
+    }
+    // Export default object for convenience
+    var index$a = {
+        attach
+    };
+
+    var index$b = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        attach: attach,
+        default: index$a
+    });
+
+    /**
+     * @sc4rfurryx/proteusjs/container
+     * Container/Style Query helpers with visualization devtools
+     *
+     * @version 1.1.0
+     * @author sc4rfurry
+     * @license MIT
+     */
+    /**
+     * Sugar on native container queries with dev visualization
+     */
+    function defineContainer(target, name, opts = {}) {
+        const targetEl = typeof target === 'string' ? document.querySelector(target) : target;
+        if (!targetEl) {
+            throw new Error('Target element not found');
+        }
+        const { type = 'size', inlineSize: _inlineSize = true } = opts;
+        const containerName = name || `container-${Math.random().toString(36).substring(2, 11)}`;
+        // Apply container properties
+        const element = targetEl;
+        element.style.containerName = containerName;
+        element.style.containerType = type;
+        // Warn if containment settings are missing
+        const computedStyle = getComputedStyle(element);
+        if (!computedStyle.contain || computedStyle.contain === 'none') {
+            console.warn(`Container "${containerName}" may need explicit containment settings for optimal performance`);
+        }
+        // Dev overlay (only in development)
+        if (process.env['NODE_ENV'] === 'development' || window.__PROTEUS_DEV__) {
+            createDevOverlay(element, containerName);
+        }
+    }
+    /**
+     * Create development overlay showing container bounds and breakpoints
+     */
+    function createDevOverlay(element, name) {
+        const overlay = document.createElement('div');
+        overlay.className = 'proteus-container-overlay';
+        overlay.style.cssText = `
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    border: 2px dashed rgba(255, 0, 255, 0.5);
+    background: rgba(255, 0, 255, 0.05);
+    z-index: 9999;
+    font-family: monospace;
+    font-size: 12px;
+    color: #ff00ff;
+  `;
+        const label = document.createElement('div');
+        label.style.cssText = `
+    position: absolute;
+    top: -20px;
+    left: 0;
+    background: rgba(255, 0, 255, 0.9);
+    color: white;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 10px;
+    white-space: nowrap;
+  `;
+        label.textContent = `Container: ${name}`;
+        const sizeInfo = document.createElement('div');
+        sizeInfo.style.cssText = `
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 2px 4px;
+    border-radius: 2px;
+    font-size: 10px;
+  `;
+        overlay.appendChild(label);
+        overlay.appendChild(sizeInfo);
+        // Position overlay relative to container
+        if (getComputedStyle(element).position === 'static') {
+            element.style.position = 'relative';
+        }
+        element.appendChild(overlay);
+        // Update size info
+        const updateSizeInfo = () => {
+            const rect = element.getBoundingClientRect();
+            sizeInfo.textContent = `${Math.round(rect.width)}×${Math.round(rect.height)}`;
+        };
+        updateSizeInfo();
+        // Update on resize
+        if ('ResizeObserver' in window) {
+            const resizeObserver = new ResizeObserver(updateSizeInfo);
+            resizeObserver.observe(element);
+        }
+        // Store cleanup function
+        element._proteusContainerCleanup = () => {
+            overlay.remove();
+        };
+    }
+    /**
+     * Helper to create container query CSS rules
+     */
+    function createContainerQuery(containerName, condition, styles) {
+        const cssRules = Object.entries(styles)
+            .map(([property, value]) => `  ${property}: ${value};`)
+            .join('\n');
+        return `@container ${containerName} (${condition}) {\n${cssRules}\n}`;
+    }
+    /**
+     * Apply container query styles dynamically
+     */
+    function applyContainerQuery(containerName, condition, styles) {
+        const css = createContainerQuery(containerName, condition, styles);
+        const styleElement = document.createElement('style');
+        styleElement.textContent = css;
+        styleElement.setAttribute('data-proteus-container', containerName);
+        document.head.appendChild(styleElement);
+    }
+    /**
+     * Remove container query styles
+     */
+    function removeContainerQuery(containerName) {
+        const styleElements = document.querySelectorAll(`style[data-proteus-container="${containerName}"]`);
+        styleElements.forEach(element => element.remove());
+    }
+    /**
+     * Get container size information
+     */
+    function getContainerSize(target) {
+        const targetEl = typeof target === 'string' ? document.querySelector(target) : target;
+        if (!targetEl) {
+            throw new Error('Target element not found');
+        }
+        const rect = targetEl.getBoundingClientRect();
+        return {
+            width: rect.width,
+            height: rect.height
+        };
+    }
+    /**
+     * Check if container queries are supported
+     */
+    function isSupported() {
+        return CSS.supports('container-type', 'size');
+    }
+    /**
+     * Cleanup container overlays and observers
+     */
+    function cleanup$1(target) {
+        const targetEl = typeof target === 'string' ? document.querySelector(target) : target;
+        if (!targetEl)
+            return;
+        // Call stored cleanup function if it exists
+        const elementWithCleanup = targetEl;
+        if (elementWithCleanup._proteusContainerCleanup) {
+            elementWithCleanup._proteusContainerCleanup();
+            delete elementWithCleanup._proteusContainerCleanup;
+        }
+    }
+    /**
+     * Toggle dev overlay visibility
+     */
+    function toggleDevOverlay(visible) {
+        const overlays = document.querySelectorAll('.proteus-container-overlay');
+        overlays.forEach(overlay => {
+            const element = overlay;
+            if (visible !== undefined) {
+                element.style.display = visible ? 'block' : 'none';
+            }
+            else {
+                element.style.display = element.style.display === 'none' ? 'block' : 'none';
+            }
+        });
+    }
+    // Export default object for convenience
+    var index$8 = {
+        defineContainer,
+        createContainerQuery,
+        applyContainerQuery,
+        removeContainerQuery,
+        getContainerSize,
+        isSupported,
+        cleanup: cleanup$1,
+        toggleDevOverlay
+    };
+
+    var index$9 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        applyContainerQuery: applyContainerQuery,
+        cleanup: cleanup$1,
+        createContainerQuery: createContainerQuery,
+        default: index$8,
+        defineContainer: defineContainer,
+        getContainerSize: getContainerSize,
+        isSupported: isSupported,
+        removeContainerQuery: removeContainerQuery,
+        toggleDevOverlay: toggleDevOverlay
+    });
+
+    /**
+     * @sc4rfurryx/proteusjs/typography
+     * Fluid typography with CSS-first approach
+     *
+     * @version 1.1.0
+     * @author sc4rfurry
+     * @license MIT
+     */
+    /**
+     * Generate pure-CSS clamp() rules for fluid typography
+     */
+    function fluidType(minRem, maxRem, options = {}) {
+        const { minViewportPx = 320, maxViewportPx = 1200, lineHeight, containerUnits = false } = options;
+        // Convert rem to px for calculations (assuming 16px base)
+        const minPx = minRem * 16;
+        const maxPx = maxRem * 16;
+        // Calculate slope and y-intercept for linear interpolation
+        const slope = (maxPx - minPx) / (maxViewportPx - minViewportPx);
+        const yIntercept = minPx - slope * minViewportPx;
+        // Generate clamp() function
+        const viewportUnit = containerUnits ? 'cqw' : 'vw';
+        const clampValue = `clamp(${minRem}rem, ${yIntercept / 16}rem + ${slope * 100}${viewportUnit}, ${maxRem}rem)`;
+        let css = `font-size: ${clampValue};`;
+        // Add line-height if specified
+        if (lineHeight) {
+            css += `\nline-height: ${lineHeight};`;
+        }
+        return { css };
+    }
+    /**
+     * Apply fluid typography to elements
+     */
+    function applyFluidType(selector, minRem, maxRem, options = {}) {
+        const { css } = fluidType(minRem, maxRem, options);
+        const styleElement = document.createElement('style');
+        styleElement.textContent = `${selector} {\n  ${css.replace(/\n/g, '\n  ')}\n}`;
+        styleElement.setAttribute('data-proteus-typography', selector);
+        document.head.appendChild(styleElement);
+    }
+    /**
+     * Create a complete typographic scale
+     */
+    function createTypographicScale(baseSize = 1, ratio = 1.25, steps = 6, options = {}) {
+        const scale = {};
+        for (let i = -2; i <= steps - 3; i++) {
+            const size = baseSize * Math.pow(ratio, i);
+            const minSize = size * 0.8; // 20% smaller at min viewport
+            const maxSize = size * 1.2; // 20% larger at max viewport
+            const stepName = i <= 0 ? `small${Math.abs(i)}` : `large${i}`;
+            scale[stepName] = fluidType(minSize, maxSize, options);
+        }
+        return scale;
+    }
+    /**
+     * Generate CSS custom properties for a typographic scale
+     */
+    function generateScaleCSS(scale, prefix = '--font-size') {
+        const cssVars = Object.entries(scale)
+            .map(([name, result]) => `  ${prefix}-${name}: ${result.css.replace('font-size: ', '').replace(';', '')};`)
+            .join('\n');
+        return `:root {\n${cssVars}\n}`;
+    }
+    /**
+     * Optimize line height for readability
+     */
+    function optimizeLineHeight(fontSize, measure = 65) {
+        // Optimal line height based on font size and measure (characters per line)
+        // Smaller fonts need more line height, larger fonts need less
+        const baseLineHeight = 1.4;
+        const sizeAdjustment = Math.max(0.1, Math.min(0.3, (1 - fontSize) * 0.5));
+        const measureAdjustment = Math.max(-0.1, Math.min(0.1, (65 - measure) * 0.002));
+        return baseLineHeight + sizeAdjustment + measureAdjustment;
+    }
+    /**
+     * Calculate optimal font size for container width
+     */
+    function calculateOptimalSize(containerWidth, targetCharacters = 65, baseCharWidth = 0.5) {
+        // Calculate font size to achieve target characters per line
+        const optimalFontSize = containerWidth / (targetCharacters * baseCharWidth);
+        // Clamp to reasonable bounds (12px to 24px)
+        return Math.max(0.75, Math.min(1.5, optimalFontSize));
+    }
+    /**
+     * Apply responsive typography to an element
+     */
+    function makeResponsive(target, options = {}) {
+        const targetEl = typeof target === 'string' ? document.querySelector(target) : target;
+        if (!targetEl) {
+            throw new Error('Target element not found');
+        }
+        const { minSize = 0.875, maxSize = 1.25, targetCharacters = 65, autoLineHeight = true } = options;
+        // Apply fluid typography
+        const { css } = fluidType(minSize, maxSize);
+        const element = targetEl;
+        // Parse and apply CSS
+        const styles = css.split(';').filter(Boolean);
+        styles.forEach(style => {
+            const [property, value] = style.split(':').map(s => s.trim());
+            if (property && value) {
+                element.style.setProperty(property, value);
+            }
+        });
+        // Auto line height if enabled
+        if (autoLineHeight) {
+            const updateLineHeight = () => {
+                const computedStyle = getComputedStyle(element);
+                const fontSize = parseFloat(computedStyle.fontSize);
+                const containerWidth = element.getBoundingClientRect().width;
+                const charactersPerLine = containerWidth / (fontSize * 0.5);
+                const optimalLineHeight = optimizeLineHeight(fontSize / 16, charactersPerLine);
+                element.style.lineHeight = optimalLineHeight.toString();
+            };
+            updateLineHeight();
+            // Update on resize
+            if ('ResizeObserver' in window) {
+                const resizeObserver = new ResizeObserver(updateLineHeight);
+                resizeObserver.observe(element);
+                // Store cleanup function
+                element._proteusTypographyCleanup = () => {
+                    resizeObserver.disconnect();
+                };
+            }
+        }
+    }
+    /**
+     * Remove applied typography styles
+     */
+    function cleanup(target) {
+        if (target) {
+            const targetEl = typeof target === 'string' ? document.querySelector(target) : target;
+            if (targetEl && targetEl._proteusTypographyCleanup) {
+                targetEl._proteusTypographyCleanup();
+                delete targetEl._proteusTypographyCleanup;
+            }
+        }
+        else {
+            // Remove all typography style elements
+            const styleElements = document.querySelectorAll('style[data-proteus-typography]');
+            styleElements.forEach(element => element.remove());
+        }
+    }
+    /**
+     * Check if container query units are supported
+     */
+    function supportsContainerUnits() {
+        return CSS.supports('width', '1cqw');
+    }
+    // Export default object for convenience
+    var index$6 = {
+        fluidType,
+        applyFluidType,
+        createTypographicScale,
+        generateScaleCSS,
+        optimizeLineHeight,
+        calculateOptimalSize,
+        makeResponsive,
+        cleanup,
+        supportsContainerUnits
+    };
+
+    var index$7 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        applyFluidType: applyFluidType,
+        calculateOptimalSize: calculateOptimalSize,
+        cleanup: cleanup,
+        createTypographicScale: createTypographicScale,
+        default: index$6,
+        fluidType: fluidType,
+        generateScaleCSS: generateScaleCSS,
+        makeResponsive: makeResponsive,
+        optimizeLineHeight: optimizeLineHeight,
+        supportsContainerUnits: supportsContainerUnits
+    });
+
+    /**
+     * @sc4rfurryx/proteusjs/a11y-audit
+     * Accessibility audits for development (dev-only)
+     *
+     * @version 1.1.0
+     * @author sc4rfurry
+     * @license MIT
+     */
+    /**
+     * Run accessibility audits with actionable output
+     * DEV-ONLY: This module should be tree-shaken in production
+     */
+    async function audit(target = document, options = {}) {
+        // Ensure this only runs in development
+        if (process.env['NODE_ENV'] === 'production') {
+            console.warn('a11y-audit should not be used in production');
+            return {
+                violations: [],
+                passes: 0,
+                incomplete: 0,
+                timestamp: Date.now(),
+                url: window.location.href
+            };
+        }
+        const { rules = ['color-contrast', 'heading-order', 'image-alt', 'label', 'link-name', 'button-name'], format = 'console', openInBrowser = false } = options;
+        const violations = [];
+        let passes = 0;
+        let incomplete = 0;
+        // Basic accessibility checks
+        const checks = {
+            'color-contrast': checkColorContrast,
+            'heading-order': checkHeadingOrder,
+            'image-alt': checkImageAlt,
+            'label': checkFormLabels,
+            'link-name': checkLinkNames,
+            'button-name': checkButtonNames,
+            'focus-visible': checkFocusVisible,
+            'aria-labels': checkAriaLabels,
+            'landmark-roles': checkLandmarkRoles,
+            'skip-links': checkSkipLinks
+        };
+        // Run selected checks
+        for (const ruleId of rules) {
+            if (checks[ruleId]) {
+                try {
+                    const result = await checks[ruleId](target);
+                    if (result.violations.length > 0) {
+                        violations.push(...result.violations);
+                    }
+                    else {
+                        passes++;
+                    }
+                }
+                catch (error) {
+                    incomplete++;
+                    console.warn(`Failed to run accessibility check: ${ruleId}`, error);
+                }
+            }
+        }
+        const report = {
+            violations,
+            passes,
+            incomplete,
+            timestamp: Date.now(),
+            url: window.location.href
+        };
+        // Output results
+        if (format === 'console') {
+            outputToConsole(report);
+        }
+        if (openInBrowser) {
+            openReportInBrowser(report);
+        }
+        return report;
+    }
+    // Individual check functions
+    async function checkColorContrast(target) {
+        const violations = [];
+        const elements = target.querySelectorAll('*');
+        elements.forEach(element => {
+            const style = getComputedStyle(element);
+            const color = style.color;
+            const backgroundColor = style.backgroundColor;
+            // Simple contrast check (would need more sophisticated implementation)
+            if (color && backgroundColor && color !== 'rgba(0, 0, 0, 0)' && backgroundColor !== 'rgba(0, 0, 0, 0)') {
+                const contrast = calculateContrast(color, backgroundColor);
+                if (contrast < 4.5) {
+                    violations.push({
+                        id: 'color-contrast',
+                        impact: 'serious',
+                        nodes: 1,
+                        help: 'Elements must have sufficient color contrast',
+                        fix: `Increase contrast ratio to at least 4.5:1. Current: ${contrast.toFixed(2)}:1`,
+                        elements: [element]
+                    });
+                }
+            }
+        });
+        return { violations };
+    }
+    async function checkHeadingOrder(target) {
+        const violations = [];
+        const headings = target.querySelectorAll('h1, h2, h3, h4, h5, h6');
+        let lastLevel = 0;
+        headings.forEach(heading => {
+            const level = parseInt(heading.tagName.charAt(1));
+            if (level > lastLevel + 1) {
+                violations.push({
+                    id: 'heading-order',
+                    impact: 'moderate',
+                    nodes: 1,
+                    help: 'Heading levels should only increase by one',
+                    fix: `Change ${heading.tagName} to H${lastLevel + 1} or add intermediate headings`,
+                    elements: [heading]
+                });
+            }
+            lastLevel = level;
+        });
+        return { violations };
+    }
+    async function checkImageAlt(target) {
+        const violations = [];
+        const images = target.querySelectorAll('img');
+        images.forEach(img => {
+            if (!img.hasAttribute('alt')) {
+                violations.push({
+                    id: 'image-alt',
+                    impact: 'critical',
+                    nodes: 1,
+                    help: 'Images must have alternative text',
+                    fix: 'Add alt attribute with descriptive text or alt="" for decorative images',
+                    elements: [img]
+                });
+            }
+        });
+        return { violations };
+    }
+    async function checkFormLabels(target) {
+        const violations = [];
+        const inputs = target.querySelectorAll('input, select, textarea');
+        inputs.forEach(input => {
+            const hasLabel = input.hasAttribute('aria-label') ||
+                input.hasAttribute('aria-labelledby') ||
+                target.querySelector(`label[for="${input.id}"]`) ||
+                input.closest('label');
+            if (!hasLabel) {
+                violations.push({
+                    id: 'label',
+                    impact: 'critical',
+                    nodes: 1,
+                    help: 'Form elements must have labels',
+                    fix: 'Add a label element, aria-label, or aria-labelledby attribute',
+                    elements: [input]
+                });
+            }
+        });
+        return { violations };
+    }
+    async function checkLinkNames(target) {
+        const violations = [];
+        const links = target.querySelectorAll('a[href]');
+        links.forEach(link => {
+            const text = link.textContent?.trim();
+            const ariaLabel = link.getAttribute('aria-label');
+            if (!text && !ariaLabel) {
+                violations.push({
+                    id: 'link-name',
+                    impact: 'serious',
+                    nodes: 1,
+                    help: 'Links must have discernible text',
+                    fix: 'Add descriptive text content or aria-label attribute',
+                    elements: [link]
+                });
+            }
+        });
+        return { violations };
+    }
+    async function checkButtonNames(target) {
+        const violations = [];
+        const buttons = target.querySelectorAll('button, input[type="button"], input[type="submit"]');
+        buttons.forEach(button => {
+            const text = button.textContent?.trim();
+            const ariaLabel = button.getAttribute('aria-label');
+            const value = button.getAttribute('value');
+            if (!text && !ariaLabel && !value) {
+                violations.push({
+                    id: 'button-name',
+                    impact: 'serious',
+                    nodes: 1,
+                    help: 'Buttons must have discernible text',
+                    fix: 'Add text content, aria-label, or value attribute',
+                    elements: [button]
+                });
+            }
+        });
+        return { violations };
+    }
+    async function checkFocusVisible(target) {
+        const violations = [];
+        const focusableElements = target.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        focusableElements.forEach(element => {
+            const styles = getComputedStyle(element);
+            const hasVisibleFocus = styles.outline !== 'none' && styles.outline !== '0px' &&
+                styles.outline !== '0' && styles.outlineWidth !== '0px';
+            // Check if element has custom focus styles
+            const hasCustomFocus = styles.boxShadow.includes('inset') ||
+                styles.border !== styles.borderColor ||
+                element.hasAttribute('data-focus-visible');
+            if (!hasVisibleFocus && !hasCustomFocus) {
+                violations.push({
+                    id: 'focus-visible',
+                    impact: 'serious',
+                    nodes: 1,
+                    help: 'Interactive elements must have visible focus indicators',
+                    fix: 'Add outline, box-shadow, or other visible focus styles',
+                    elements: [element]
+                });
+            }
+        });
+        return { violations };
+    }
+    async function checkAriaLabels(target) {
+        const violations = [];
+        // Check for aria-labelledby pointing to non-existent elements
+        const elementsWithLabelledBy = target.querySelectorAll('[aria-labelledby]');
+        elementsWithLabelledBy.forEach(element => {
+            const labelledBy = element.getAttribute('aria-labelledby');
+            if (labelledBy) {
+                const labelIds = labelledBy.split(' ');
+                const missingIds = labelIds.filter(id => !target.querySelector(`#${id}`));
+                if (missingIds.length > 0) {
+                    violations.push({
+                        id: 'aria-labelledby-invalid',
+                        impact: 'serious',
+                        nodes: 1,
+                        help: 'aria-labelledby must reference existing elements',
+                        fix: `Fix or remove references to missing IDs: ${missingIds.join(', ')}`,
+                        elements: [element]
+                    });
+                }
+            }
+        });
+        // Check for aria-describedby pointing to non-existent elements
+        const elementsWithDescribedBy = target.querySelectorAll('[aria-describedby]');
+        elementsWithDescribedBy.forEach(element => {
+            const describedBy = element.getAttribute('aria-describedby');
+            if (describedBy) {
+                const descriptionIds = describedBy.split(' ');
+                const missingIds = descriptionIds.filter(id => !target.querySelector(`#${id}`));
+                if (missingIds.length > 0) {
+                    violations.push({
+                        id: 'aria-describedby-invalid',
+                        impact: 'moderate',
+                        nodes: 1,
+                        help: 'aria-describedby must reference existing elements',
+                        fix: `Fix or remove references to missing IDs: ${missingIds.join(', ')}`,
+                        elements: [element]
+                    });
+                }
+            }
+        });
+        return { violations };
+    }
+    async function checkLandmarkRoles(target) {
+        const violations = [];
+        // Check for missing main landmark
+        const mainElements = target.querySelectorAll('main, [role="main"]');
+        if (mainElements.length === 0) {
+            violations.push({
+                id: 'landmark-main-missing',
+                impact: 'moderate',
+                nodes: 0,
+                help: 'Page should have a main landmark',
+                fix: 'Add a <main> element or role="main" to identify the main content area'
+            });
+        }
+        else if (mainElements.length > 1) {
+            violations.push({
+                id: 'landmark-main-multiple',
+                impact: 'moderate',
+                nodes: mainElements.length,
+                help: 'Page should have only one main landmark',
+                fix: 'Ensure only one main element or role="main" exists per page',
+                elements: Array.from(mainElements)
+            });
+        }
+        // Check for navigation landmarks without labels when multiple exist
+        const navElements = target.querySelectorAll('nav, [role="navigation"]');
+        if (navElements.length > 1) {
+            navElements.forEach(nav => {
+                const hasLabel = nav.hasAttribute('aria-label') ||
+                    nav.hasAttribute('aria-labelledby') ||
+                    nav.querySelector('h1, h2, h3, h4, h5, h6');
+                if (!hasLabel) {
+                    violations.push({
+                        id: 'landmark-nav-unlabeled',
+                        impact: 'moderate',
+                        nodes: 1,
+                        help: 'Multiple navigation landmarks should be labeled',
+                        fix: 'Add aria-label or aria-labelledby to distinguish navigation areas',
+                        elements: [nav]
+                    });
+                }
+            });
+        }
+        return { violations };
+    }
+    async function checkSkipLinks(target) {
+        const violations = [];
+        // Check for skip links in documents with navigation
+        const navElements = target.querySelectorAll('nav, [role="navigation"]');
+        const mainElement = target.querySelector('main, [role="main"]');
+        if (navElements.length > 0 && mainElement) {
+            const skipLinks = target.querySelectorAll('a[href^="#"]');
+            const hasSkipToMain = Array.from(skipLinks).some(link => {
+                const href = link.getAttribute('href');
+                return href && (href === '#main' ||
+                    href === `#${mainElement.id}` ||
+                    link.textContent?.toLowerCase().includes('skip to main') ||
+                    link.textContent?.toLowerCase().includes('skip to content'));
+            });
+            if (!hasSkipToMain) {
+                violations.push({
+                    id: 'skip-link-missing',
+                    impact: 'moderate',
+                    nodes: 0,
+                    help: 'Page with navigation should have skip links',
+                    fix: 'Add a skip link to the main content area for keyboard users'
+                });
+            }
+        }
+        // Check that skip links are properly positioned (should be first focusable element)
+        const firstFocusable = target.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        if (firstFocusable && firstFocusable.tagName === 'A') {
+            const href = firstFocusable.getAttribute('href');
+            if (!href?.startsWith('#')) {
+                violations.push({
+                    id: 'skip-link-not-first',
+                    impact: 'minor',
+                    nodes: 1,
+                    help: 'Skip links should be the first focusable elements',
+                    fix: 'Move skip links to the beginning of the document',
+                    elements: [firstFocusable]
+                });
+            }
+        }
+        return { violations };
+    }
+    // Utility functions
+    function calculateContrast(color1, color2) {
+        // Convert colors to RGB values
+        const rgb1 = parseColor(color1);
+        const rgb2 = parseColor(color2);
+        if (!rgb1 || !rgb2)
+            return 4.5; // Fallback if parsing fails
+        // Calculate relative luminance
+        const l1 = getRelativeLuminance(rgb1);
+        const l2 = getRelativeLuminance(rgb2);
+        // Calculate contrast ratio
+        const lighter = Math.max(l1, l2);
+        const darker = Math.min(l1, l2);
+        return (lighter + 0.05) / (darker + 0.05);
+    }
+    function parseColor(color) {
+        // Handle rgb() format
+        const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+        if (rgbMatch && rgbMatch[1] && rgbMatch[2] && rgbMatch[3]) {
+            return {
+                r: parseInt(rgbMatch[1], 10),
+                g: parseInt(rgbMatch[2], 10),
+                b: parseInt(rgbMatch[3], 10)
+            };
+        }
+        // Handle hex format
+        const hexMatch = color.match(/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
+        if (hexMatch && hexMatch[1] && hexMatch[2] && hexMatch[3]) {
+            return {
+                r: parseInt(hexMatch[1], 16),
+                g: parseInt(hexMatch[2], 16),
+                b: parseInt(hexMatch[3], 16)
+            };
+        }
+        // Handle named colors (basic set)
+        const namedColors = {
+            'black': { r: 0, g: 0, b: 0 },
+            'white': { r: 255, g: 255, b: 255 },
+            'red': { r: 255, g: 0, b: 0 },
+            'green': { r: 0, g: 128, b: 0 },
+            'blue': { r: 0, g: 0, b: 255 }
+        };
+        return namedColors[color.toLowerCase()] || null;
+    }
+    function getRelativeLuminance(rgb) {
+        const { r, g, b } = rgb;
+        // Convert to sRGB
+        const rsRGB = r / 255;
+        const gsRGB = g / 255;
+        const bsRGB = b / 255;
+        // Apply gamma correction
+        const rLinear = rsRGB <= 0.03928 ? rsRGB / 12.92 : Math.pow((rsRGB + 0.055) / 1.055, 2.4);
+        const gLinear = gsRGB <= 0.03928 ? gsRGB / 12.92 : Math.pow((gsRGB + 0.055) / 1.055, 2.4);
+        const bLinear = bsRGB <= 0.03928 ? bsRGB / 12.92 : Math.pow((bsRGB + 0.055) / 1.055, 2.4);
+        // Calculate relative luminance
+        return 0.2126 * rLinear + 0.7152 * gLinear + 0.0722 * bLinear;
+    }
+    function outputToConsole(report) {
+        console.group('🔍 Accessibility Audit Results');
+        if (report.violations.length === 0) {
+            console.log('✅ No accessibility violations found!');
+        }
+        else {
+            console.log(`❌ Found ${report.violations.length} accessibility violations:`);
+            report.violations.forEach(violation => {
+                const emoji = violation.impact === 'critical' ? '🚨' :
+                    violation.impact === 'serious' ? '⚠️' :
+                        violation.impact === 'moderate' ? '⚡' : 'ℹ️';
+                console.group(`${emoji} ${violation.help}`);
+                console.log(`Impact: ${violation.impact}`);
+                console.log(`Fix: ${violation.fix}`);
+                if (violation.elements) {
+                    console.log('Elements:', violation.elements);
+                }
+                console.groupEnd();
+            });
+        }
+        console.log(`✅ ${report.passes} checks passed`);
+        if (report.incomplete > 0) {
+            console.log(`⚠️ ${report.incomplete} checks incomplete`);
+        }
+        console.groupEnd();
+    }
+    function openReportInBrowser(report) {
+        const html = generateHTMLReport(report);
+        const blob = new Blob([html], { type: 'text/html' });
+        const url = URL.createObjectURL(blob);
+        const newWindow = window.open(url, '_blank');
+        if (!newWindow) {
+            console.warn('Could not open report in new window. Please check popup blocker settings.');
+            // Fallback: download the report
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = `proteus-a11y-report-${Date.now()}.html`;
+            link.click();
+        }
+        // Clean up the blob URL after a delay
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+    }
+    function generateHTMLReport(report) {
+        const violationsList = report.violations.map(violation => `
+    <div class="violation violation--${violation.impact}">
+      <h3>${violation.help}</h3>
+      <p><strong>Impact:</strong> ${violation.impact}</p>
+      <p><strong>Fix:</strong> ${violation.fix}</p>
+      <p><strong>Affected elements:</strong> ${violation.nodes}</p>
+    </div>
+  `).join('');
+        return `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ProteusJS Accessibility Report</title>
+    <style>
+        body { font-family: system-ui, sans-serif; margin: 2rem; line-height: 1.6; }
+        .header { border-bottom: 2px solid #e5e7eb; padding-bottom: 1rem; margin-bottom: 2rem; }
+        .summary { background: #f3f4f6; padding: 1rem; border-radius: 8px; margin-bottom: 2rem; }
+        .violation { border-left: 4px solid #ef4444; padding: 1rem; margin-bottom: 1rem; background: #fef2f2; }
+        .violation--critical { border-color: #dc2626; background: #fef2f2; }
+        .violation--serious { border-color: #ea580c; background: #fff7ed; }
+        .violation--moderate { border-color: #d97706; background: #fffbeb; }
+        .violation--minor { border-color: #65a30d; background: #f7fee7; }
+        .violation h3 { margin-top: 0; color: #374151; }
+        .no-violations { text-align: center; color: #059669; font-size: 1.25rem; padding: 2rem; }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>🌊 ProteusJS Accessibility Report</h1>
+        <p>Generated on ${new Date(report.timestamp).toLocaleString()}</p>
+        <p>URL: ${report.url}</p>
+    </div>
+
+    <div class="summary">
+        <h2>Summary</h2>
+        <p><strong>Violations:</strong> ${report.violations.length}</p>
+        <p><strong>Checks passed:</strong> ${report.passes}</p>
+        <p><strong>Incomplete checks:</strong> ${report.incomplete}</p>
+    </div>
+
+    ${report.violations.length === 0 ?
+        '<div class="no-violations">✅ No accessibility violations found!</div>' :
+        `<h2>Violations</h2>${violationsList}`}
+</body>
+</html>`;
+    }
+    // Export default object for convenience
+    var index$4 = {
+        audit
+    };
+
+    var index$5 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        audit: audit,
+        default: index$4
+    });
+
+    /**
+     * @sc4rfurryx/proteusjs/a11y-primitives
+     * Headless accessibility patterns (no styles)
+     *
+     * @version 1.1.0
+     * @author sc4rfurry
+     * @license MIT
+     */
+    /**
+     * Dialog primitive with proper ARIA and focus management
+     */
+    function dialog(root, opts = {}) {
+        const rootEl = typeof root === 'string' ? document.querySelector(root) : root;
+        if (!rootEl)
+            throw new Error('Dialog root element not found');
+        const { modal = true, restoreFocus = true } = opts;
+        let isOpen = false;
+        const setup = () => {
+            rootEl.setAttribute('role', 'dialog');
+            if (modal) {
+                rootEl.setAttribute('aria-modal', 'true');
+            }
+            // Ensure dialog is initially hidden
+            if (!rootEl.hasAttribute('hidden')) {
+                rootEl.setAttribute('hidden', '');
+            }
+        };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape' && isOpen) ;
+        };
+        setup();
+        document.addEventListener('keydown', handleKeyDown);
+        return {
+            destroy: () => {
+                document.removeEventListener('keydown', handleKeyDown);
+            }
+        };
+    }
+    /**
+     * Tooltip primitive with delay and proper ARIA
+     */
+    function tooltip(trigger, panel, opts = {}) {
+        const triggerEl = typeof trigger === 'string' ? document.querySelector(trigger) : trigger;
+        const panelEl = typeof panel === 'string' ? document.querySelector(panel) : panel;
+        if (!triggerEl || !panelEl) {
+            throw new Error('Both trigger and panel elements must exist');
+        }
+        const { delay = 500 } = opts;
+        let timeoutId = null;
+        let isVisible = false;
+        const setup = () => {
+            const tooltipId = panelEl.id || `tooltip-${Math.random().toString(36).substring(2, 11)}`;
+            panelEl.id = tooltipId;
+            panelEl.setAttribute('role', 'tooltip');
+            triggerEl.setAttribute('aria-describedby', tooltipId);
+            // Initially hidden
+            panelEl.style.display = 'none';
+        };
+        const show = () => {
+            if (isVisible)
+                return;
+            panelEl.style.display = 'block';
+            isVisible = true;
+        };
+        const hide = () => {
+            if (!isVisible)
+                return;
+            panelEl.style.display = 'none';
+            isVisible = false;
+        };
+        const handleMouseEnter = () => {
+            if (timeoutId)
+                clearTimeout(timeoutId);
+            timeoutId = window.setTimeout(show, delay);
+        };
+        const handleMouseLeave = () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+            hide();
+        };
+        const handleFocus = () => {
+            show();
+        };
+        const handleBlur = () => {
+            hide();
+        };
+        setup();
+        triggerEl.addEventListener('mouseenter', handleMouseEnter);
+        triggerEl.addEventListener('mouseleave', handleMouseLeave);
+        triggerEl.addEventListener('focus', handleFocus);
+        triggerEl.addEventListener('blur', handleBlur);
+        return {
+            destroy: () => {
+                if (timeoutId)
+                    clearTimeout(timeoutId);
+                triggerEl.removeEventListener('mouseenter', handleMouseEnter);
+                triggerEl.removeEventListener('mouseleave', handleMouseLeave);
+                triggerEl.removeEventListener('focus', handleFocus);
+                triggerEl.removeEventListener('blur', handleBlur);
+                hide();
+            }
+        };
+    }
+    /**
+     * Listbox primitive with keyboard navigation
+     */
+    function listbox(root, opts = {}) {
+        const rootEl = typeof root === 'string' ? document.querySelector(root) : root;
+        if (!rootEl)
+            throw new Error('Listbox root element not found');
+        const { multiselect = false } = opts;
+        let currentIndex = -1;
+        const setup = () => {
+            rootEl.setAttribute('role', 'listbox');
+            if (multiselect) {
+                rootEl.setAttribute('aria-multiselectable', 'true');
+            }
+            // Set up options
+            const options = rootEl.querySelectorAll('[role="option"]');
+            options.forEach((option, _index) => {
+                option.setAttribute('aria-selected', 'false');
+                option.setAttribute('tabindex', '-1');
+            });
+            if (options.length > 0) {
+                options[0]?.setAttribute('tabindex', '0');
+                currentIndex = 0;
+            }
+        };
+        const getOptions = () => rootEl.querySelectorAll('[role="option"]');
+        const setCurrentIndex = (index) => {
+            const options = getOptions();
+            if (index < 0 || index >= options.length)
+                return;
+            // Remove tabindex from all options
+            options.forEach(option => option.setAttribute('tabindex', '-1'));
+            // Set current option
+            currentIndex = index;
+            options[currentIndex]?.setAttribute('tabindex', '0');
+            options[currentIndex]?.focus();
+        };
+        const selectOption = (index) => {
+            const options = getOptions();
+            if (index < 0 || index >= options.length)
+                return;
+            if (multiselect) {
+                const isSelected = options[index]?.getAttribute('aria-selected') === 'true';
+                options[index]?.setAttribute('aria-selected', (!isSelected).toString());
+            }
+            else {
+                // Single select - clear all others
+                options.forEach(option => option.setAttribute('aria-selected', 'false'));
+                options[index]?.setAttribute('aria-selected', 'true');
+            }
+        };
+        const handleKeyDown = (e) => {
+            const keyEvent = e;
+            const options = getOptions();
+            switch (keyEvent.key) {
+                case 'ArrowDown':
+                    keyEvent.preventDefault();
+                    setCurrentIndex(Math.min(currentIndex + 1, options.length - 1));
+                    break;
+                case 'ArrowUp':
+                    keyEvent.preventDefault();
+                    setCurrentIndex(Math.max(currentIndex - 1, 0));
+                    break;
+                case 'Home':
+                    keyEvent.preventDefault();
+                    setCurrentIndex(0);
+                    break;
+                case 'End':
+                    keyEvent.preventDefault();
+                    setCurrentIndex(options.length - 1);
+                    break;
+                case 'Enter':
+                case ' ':
+                    keyEvent.preventDefault();
+                    selectOption(currentIndex);
+                    break;
+            }
+        };
+        const handleClick = (e) => {
+            const target = e.target;
+            const option = target.closest('[role="option"]');
+            if (!option)
+                return;
+            const options = Array.from(getOptions());
+            const index = options.indexOf(option);
+            if (index >= 0) {
+                setCurrentIndex(index);
+                selectOption(index);
+            }
+        };
+        setup();
+        rootEl.addEventListener('keydown', handleKeyDown);
+        rootEl.addEventListener('click', handleClick);
+        return {
+            destroy: () => {
+                rootEl.removeEventListener('keydown', handleKeyDown);
+                rootEl.removeEventListener('click', handleClick);
+            }
+        };
+    }
+    /**
+     * Combobox primitive with filtering and multiselect
+     */
+    function combobox(root, opts = {}) {
+        const rootEl = typeof root === 'string' ? document.querySelector(root) : root;
+        if (!rootEl)
+            throw new Error('Combobox root element not found');
+        const { multiselect = false, filtering: _filtering } = opts;
+        let isOpen = false;
+        const setup = () => {
+            rootEl.setAttribute('role', 'combobox');
+            rootEl.setAttribute('aria-expanded', 'false');
+            if (multiselect) {
+                rootEl.setAttribute('aria-multiselectable', 'true');
+            }
+        };
+        const handleKeyDown = (e) => {
+            const keyEvent = e;
+            switch (keyEvent.key) {
+                case 'ArrowDown':
+                    keyEvent.preventDefault();
+                    if (!isOpen) {
+                        isOpen = true;
+                        rootEl.setAttribute('aria-expanded', 'true');
+                    }
+                    // Navigate options logic would go here
+                    break;
+                case 'Escape':
+                    keyEvent.preventDefault();
+                    isOpen = false;
+                    rootEl.setAttribute('aria-expanded', 'false');
+                    break;
+            }
+        };
+        setup();
+        rootEl.addEventListener('keydown', handleKeyDown);
+        return {
+            destroy: () => {
+                rootEl.removeEventListener('keydown', handleKeyDown);
+            }
+        };
+    }
+    /**
+     * Tabs primitive with keyboard navigation
+     */
+    function tabs(root) {
+        const rootEl = typeof root === 'string' ? document.querySelector(root) : root;
+        if (!rootEl)
+            throw new Error('Tabs root element not found');
+        let currentIndex = 0;
+        const setup = () => {
+            const tabList = rootEl.querySelector('[role="tablist"]');
+            const tabs = rootEl.querySelectorAll('[role="tab"]');
+            const panels = rootEl.querySelectorAll('[role="tabpanel"]');
+            if (!tabList) {
+                rootEl.setAttribute('role', 'tablist');
+            }
+            tabs.forEach((tab, index) => {
+                tab.setAttribute('tabindex', index === 0 ? '0' : '-1');
+                tab.setAttribute('aria-selected', index === 0 ? 'true' : 'false');
+            });
+            panels.forEach((panel, index) => {
+                panel.setAttribute('hidden', index === 0 ? '' : 'true');
+            });
+        };
+        const handleKeyDown = (e) => {
+            const keyEvent = e;
+            const tabs = Array.from(rootEl.querySelectorAll('[role="tab"]'));
+            switch (keyEvent.key) {
+                case 'ArrowRight':
+                    keyEvent.preventDefault();
+                    currentIndex = (currentIndex + 1) % tabs.length;
+                    activateTab(currentIndex);
+                    break;
+                case 'ArrowLeft':
+                    keyEvent.preventDefault();
+                    currentIndex = currentIndex === 0 ? tabs.length - 1 : currentIndex - 1;
+                    activateTab(currentIndex);
+                    break;
+            }
+        };
+        const activateTab = (index) => {
+            const tabs = rootEl.querySelectorAll('[role="tab"]');
+            const panels = rootEl.querySelectorAll('[role="tabpanel"]');
+            tabs.forEach((tab, i) => {
+                tab.setAttribute('tabindex', i === index ? '0' : '-1');
+                tab.setAttribute('aria-selected', i === index ? 'true' : 'false');
+                if (i === index) {
+                    tab.focus();
+                }
+            });
+            panels.forEach((panel, i) => {
+                if (i === index) {
+                    panel.removeAttribute('hidden');
+                }
+                else {
+                    panel.setAttribute('hidden', 'true');
+                }
+            });
+        };
+        setup();
+        rootEl.addEventListener('keydown', handleKeyDown);
+        return {
+            destroy: () => {
+                rootEl.removeEventListener('keydown', handleKeyDown);
+            }
+        };
+    }
+    /**
+     * Menu primitive with keyboard navigation
+     */
+    function menu(root) {
+        const rootEl = typeof root === 'string' ? document.querySelector(root) : root;
+        if (!rootEl)
+            throw new Error('Menu root element not found');
+        let currentIndex = -1;
+        const setup = () => {
+            rootEl.setAttribute('role', 'menu');
+            const items = rootEl.querySelectorAll('[role="menuitem"]');
+            items.forEach((item, index) => {
+                item.setAttribute('tabindex', index === 0 ? '0' : '-1');
+            });
+            if (items.length > 0) {
+                currentIndex = 0;
+            }
+        };
+        const handleKeyDown = (e) => {
+            const keyEvent = e;
+            const items = Array.from(rootEl.querySelectorAll('[role="menuitem"]'));
+            switch (keyEvent.key) {
+                case 'ArrowDown':
+                    keyEvent.preventDefault();
+                    currentIndex = (currentIndex + 1) % items.length;
+                    setCurrentItem(currentIndex);
+                    break;
+                case 'ArrowUp':
+                    keyEvent.preventDefault();
+                    currentIndex = currentIndex === 0 ? items.length - 1 : currentIndex - 1;
+                    setCurrentItem(currentIndex);
+                    break;
+                case 'Enter':
+                case ' ':
+                    keyEvent.preventDefault();
+                    if (items[currentIndex]) {
+                        items[currentIndex].click();
+                    }
+                    break;
+            }
+        };
+        const setCurrentItem = (index) => {
+            const items = rootEl.querySelectorAll('[role="menuitem"]');
+            items.forEach((item, i) => {
+                item.setAttribute('tabindex', i === index ? '0' : '-1');
+                if (i === index) {
+                    item.focus();
+                }
+            });
+        };
+        setup();
+        rootEl.addEventListener('keydown', handleKeyDown);
+        return {
+            destroy: () => {
+                rootEl.removeEventListener('keydown', handleKeyDown);
+            }
+        };
+    }
+    /**
+     * Focus trap utility
+     */
+    function focusTrap(root) {
+        const rootEl = typeof root === 'string' ? document.querySelector(root) : root;
+        if (!rootEl)
+            throw new Error('Focus trap root element not found');
+        let isActive = false;
+        let focusableElements = [];
+        const updateFocusableElements = () => {
+            const selector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+            focusableElements = Array.from(rootEl.querySelectorAll(selector));
+        };
+        const handleKeyDown = (e) => {
+            if (!isActive || e.key !== 'Tab')
+                return;
+            updateFocusableElements();
+            if (focusableElements.length === 0)
+                return;
+            const firstElement = focusableElements[0];
+            const lastElement = focusableElements[focusableElements.length - 1];
+            if (e.shiftKey) {
+                if (document.activeElement === firstElement) {
+                    e.preventDefault();
+                    lastElement.focus();
+                }
+            }
+            else {
+                if (document.activeElement === lastElement) {
+                    e.preventDefault();
+                    firstElement.focus();
+                }
+            }
+        };
+        const activate = () => {
+            if (isActive)
+                return;
+            isActive = true;
+            updateFocusableElements();
+            if (focusableElements.length > 0) {
+                focusableElements[0].focus();
+            }
+            document.addEventListener('keydown', handleKeyDown);
+        };
+        const deactivate = () => {
+            if (!isActive)
+                return;
+            isActive = false;
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+        return {
+            activate,
+            deactivate
+        };
+    }
+    // Export all functions
+    var index$2 = {
+        dialog,
+        tooltip,
+        combobox,
+        listbox,
+        tabs,
+        menu,
+        focusTrap
+    };
+
+    var index$3 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        combobox: combobox,
+        default: index$2,
+        dialog: dialog,
+        focusTrap: focusTrap,
+        listbox: listbox,
+        menu: menu,
+        tabs: tabs,
+        tooltip: tooltip
+    });
+
+    /**
+     * @sc4rfurryx/proteusjs/perf
+     * Performance guardrails and CWV-friendly patterns
+     *
+     * @version 1.1.0
+     * @author sc4rfurry
+     * @license MIT
+     */
+    /**
+     * Apply content-visibility for performance optimization
+     */
+    function contentVisibility(selector, mode = 'auto', opts = {}) {
+        const elements = typeof selector === 'string'
+            ? document.querySelectorAll(selector)
+            : [selector];
+        const { containIntrinsicSize = '1000px 400px' } = opts;
+        elements.forEach(element => {
+            const el = element;
+            el.style.contentVisibility = mode;
+            if (mode === 'auto') {
+                el.style.containIntrinsicSize = containIntrinsicSize;
+            }
+        });
+    }
+    /**
+     * Set fetch priority for resources
+     */
+    function fetchPriority(selector, priority) {
+        const elements = typeof selector === 'string'
+            ? document.querySelectorAll(selector)
+            : [selector];
+        elements.forEach(element => {
+            if (element instanceof HTMLImageElement ||
+                element instanceof HTMLLinkElement ||
+                element instanceof HTMLScriptElement) {
+                element.fetchPriority = priority;
+            }
+        });
+    }
+    /**
+     * Set up speculation rules for prerendering and prefetching
+     */
+    function speculate(opts) {
+        const { prerender = [], prefetch = [], sameOriginOnly = true } = opts;
+        // Check for Speculation Rules API support
+        if (!('supports' in HTMLScriptElement && HTMLScriptElement.supports('speculationrules'))) {
+            console.warn('Speculation Rules API not supported');
+            return;
+        }
+        const rules = {};
+        if (prerender.length > 0) {
+            rules.prerender = prerender.map(url => {
+                const rule = { where: { href_matches: url } };
+                if (sameOriginOnly) {
+                    rule.where.href_matches = new URL(url, window.location.origin).href;
+                }
+                return rule;
+            });
+        }
+        if (prefetch.length > 0) {
+            rules.prefetch = prefetch.map(url => {
+                const rule = { where: { href_matches: url } };
+                if (sameOriginOnly) {
+                    rule.where.href_matches = new URL(url, window.location.origin).href;
+                }
+                return rule;
+            });
+        }
+        if (Object.keys(rules).length === 0)
+            return;
+        // Create and inject speculation rules script
+        const script = document.createElement('script');
+        script.type = 'speculationrules';
+        script.textContent = JSON.stringify(rules);
+        document.head.appendChild(script);
+    }
+    /**
+     * Yield to browser using scheduler.yield or postTask when available
+     */
+    async function yieldToBrowser() {
+        // Use scheduler.yield if available (Chrome 115+)
+        if ('scheduler' in window && 'yield' in window.scheduler) {
+            return window.scheduler.yield();
+        }
+        // Use scheduler.postTask if available
+        if ('scheduler' in window && 'postTask' in window.scheduler) {
+            return new Promise(resolve => {
+                window.scheduler.postTask(resolve, { priority: 'user-blocking' });
+            });
+        }
+        // Fallback to setTimeout
+        return new Promise(resolve => {
+            setTimeout(resolve, 0);
+        });
+    }
+    /**
+     * Optimize images with loading and decoding hints
+     */
+    function optimizeImages(selector = 'img') {
+        const images = typeof selector === 'string'
+            ? document.querySelectorAll(selector)
+            : [selector];
+        images.forEach(img => {
+            if (!(img instanceof HTMLImageElement))
+                return;
+            // Set loading attribute if not already set
+            if (!img.hasAttribute('loading')) {
+                const rect = img.getBoundingClientRect();
+                const isAboveFold = rect.top < window.innerHeight;
+                img.loading = isAboveFold ? 'eager' : 'lazy';
+            }
+            // Set decoding hint
+            if (!img.hasAttribute('decoding')) {
+                img.decoding = 'async';
+            }
+            // Set fetch priority for above-fold images
+            if (!img.hasAttribute('fetchpriority')) {
+                const rect = img.getBoundingClientRect();
+                const isAboveFold = rect.top < window.innerHeight;
+                if (isAboveFold) {
+                    img.fetchPriority = 'high';
+                }
+            }
+        });
+    }
+    /**
+     * Preload critical resources
+     */
+    function preloadCritical(resources) {
+        resources.forEach(({ href, as, type }) => {
+            // Check if already preloaded
+            const existing = document.querySelector(`link[rel="preload"][href="${href}"]`);
+            if (existing)
+                return;
+            const link = document.createElement('link');
+            link.rel = 'preload';
+            link.href = href;
+            link.as = as;
+            if (type) {
+                link.type = type;
+            }
+            document.head.appendChild(link);
+        });
+    }
+    /**
+     * Measure and report Core Web Vitals
+     */
+    function measureCWV() {
+        return new Promise(resolve => {
+            const metrics = {};
+            let metricsCount = 0;
+            const totalMetrics = 3;
+            const checkComplete = () => {
+                metricsCount++;
+                if (metricsCount >= totalMetrics) {
+                    resolve(metrics);
+                }
+            };
+            // LCP (Largest Contentful Paint)
+            if ('PerformanceObserver' in window) {
+                try {
+                    const lcpObserver = new PerformanceObserver(list => {
+                        const entries = list.getEntries();
+                        const lastEntry = entries[entries.length - 1];
+                        metrics.lcp = lastEntry.startTime;
+                    });
+                    lcpObserver.observe({ entryTypes: ['largest-contentful-paint'] });
+                    // Stop observing after 10 seconds
+                    setTimeout(() => {
+                        lcpObserver.disconnect();
+                        checkComplete();
+                    }, 10000);
+                }
+                catch {
+                    checkComplete();
+                }
+                // FID (First Input Delay)
+                try {
+                    const fidObserver = new PerformanceObserver(list => {
+                        const entries = list.getEntries();
+                        entries.forEach((entry) => {
+                            metrics.fid = entry.processingStart - entry.startTime;
+                        });
+                        fidObserver.disconnect();
+                        checkComplete();
+                    });
+                    fidObserver.observe({ entryTypes: ['first-input'] });
+                    // If no input after 10 seconds, consider FID as 0
+                    setTimeout(() => {
+                        if (metrics.fid === undefined) {
+                            metrics.fid = 0;
+                            fidObserver.disconnect();
+                            checkComplete();
+                        }
+                    }, 10000);
+                }
+                catch {
+                    checkComplete();
+                }
+                // CLS (Cumulative Layout Shift)
+                try {
+                    let clsValue = 0;
+                    const clsObserver = new PerformanceObserver(list => {
+                        list.getEntries().forEach((entry) => {
+                            if (!entry.hadRecentInput) {
+                                clsValue += entry.value;
+                            }
+                        });
+                        metrics.cls = clsValue;
+                    });
+                    clsObserver.observe({ entryTypes: ['layout-shift'] });
+                    // Stop observing after 10 seconds
+                    setTimeout(() => {
+                        clsObserver.disconnect();
+                        checkComplete();
+                    }, 10000);
+                }
+                catch {
+                    checkComplete();
+                }
+            }
+            else {
+                // Fallback if PerformanceObserver is not supported
+                setTimeout(() => resolve(metrics), 100);
+            }
+        });
+    }
+    // Export boost object to match usage examples in upgrade spec
+    const boost = {
+        contentVisibility,
+        fetchPriority,
+        speculate,
+        yieldToBrowser,
+        optimizeImages,
+        preloadCritical,
+        measureCWV
+    };
+    // Export all functions as named exports and default object
+    var index = {
+        contentVisibility,
+        fetchPriority,
+        speculate,
+        yieldToBrowser,
+        optimizeImages,
+        preloadCritical,
+        measureCWV,
+        boost
+    };
+
+    var index$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        boost: boost,
+        contentVisibility: contentVisibility,
+        default: index,
+        fetchPriority: fetchPriority,
+        measureCWV: measureCWV,
+        optimizeImages: optimizeImages,
+        preloadCritical: preloadCritical,
+        speculate: speculate,
+        yieldToBrowser: yieldToBrowser
+    });
+
+    /**
+     * ProteusJS - Native-first Web Development Primitives
      * Shape-shifting responsive design that adapts like the sea god himself
      *
-     * @version 1.0.0
-     * @author ProteusJS Team
+     * @version 1.1.0
+     * @author sc4rfurry
      * @license MIT
      */
-    // Core exports
+    // Core exports (legacy compatibility)
     // Constants
-    const VERSION = '1.0.0';
+    const VERSION = '1.1.0';
     const LIBRARY_NAME = 'ProteusJS';
 
     exports.LIBRARY_NAME = LIBRARY_NAME;
     exports.ProteusJS = ProteusJS;
     exports.VERSION = VERSION;
+    exports.a11yAudit = index$5;
+    exports.a11yPrimitives = index$3;
+    exports.anchor = index$d;
+    exports.container = index$9;
     exports.default = ProteusJS;
-    exports.isSupported = isSupported;
+    exports.isSupported = isSupported$1;
+    exports.perf = index$1;
+    exports.popover = index$b;
+    exports.scroll = index$f;
+    exports.transitions = index$h;
+    exports.typography = index$7;
     exports.version = version;
 
     Object.defineProperty(exports, '__esModule', { value: true });