@sc4rfurryx/proteusjs 1.0.0 → 1.1.1

package/dist/proteus.esm.js

@@ -1,7 +1,7 @@
 /*!
- * ProteusJS v1.0.0
+ * ProteusJS v1.1.1
  * Shape-shifting responsive design that adapts like the sea god himself
- * (c) 2024 sc4rfurry
+ * (c) 2025 sc4rfurry
  * Released under the MIT License
  */
 /**
@@ -15158,7 +15158,7 @@ class BrowserPolyfills {
 /**
  * Check if the current environment supports ProteusJS features
  */
-function isSupported() {
+function isSupported$1() {
     const support = getSupportInfo();
     return support.resizeObserver && support.intersectionObserver;
 }
@@ -15225,7 +15225,7 @@ function checkPassiveEventListenerSupport() {
 /**
  * Version utilities for ProteusJS
  */
-const version = '1.0.0';
+const version = '1.1.0';
 
 /**
  * ProteusJS - Main library class
@@ -15357,7 +15357,7 @@ class ProteusJS {
             return this;
         }
         // Check browser support
-        if (!isSupported()) {
+        if (!isSupported$1()) {
             logger.error('Browser not supported. Missing required APIs.');
             return this;
         }
@@ -15728,7 +15728,7 @@ class ProteusJS {
      * Check if browser is supported
      */
     static isSupported() {
-        return isSupported();
+        return isSupported$1();
     }
     /**
      * Get or create global instance
@@ -15989,17 +15989,1550 @@ class ProteusJS {
 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 {
+        update: updatePosition,
+        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
+ * Lightweight accessibility audits for development
+ *
+ * @version 1.1.0
+ * @author sc4rfurry
+ * @license MIT
+ */
+async function audit(target = document, options = {}) {
+    if (typeof window === 'undefined' || process.env['NODE_ENV'] === 'production') {
+        return { violations: [], passes: 0, timestamp: Date.now(), url: '' };
+    }
+    const { rules = ['images', 'headings', 'forms'], format = 'console' } = options;
+    const violations = [];
+    let passes = 0;
+    if (rules.includes('images')) {
+        const imgs = target.querySelectorAll('img:not([alt])');
+        if (imgs.length > 0) {
+            violations.push({
+                id: 'image-alt', impact: 'critical', nodes: imgs.length, help: 'Images need alt text'
+            });
+        }
+        passes += target.querySelectorAll('img[alt]').length;
+    }
+    if (rules.includes('headings')) {
+        const h1s = target.querySelectorAll('h1');
+        if (h1s.length !== 1) {
+            violations.push({
+                id: 'heading-structure', impact: 'moderate', nodes: h1s.length, help: 'Page should have exactly one h1'
+            });
+        }
+        else
+            passes++;
+    }
+    if (rules.includes('forms')) {
+        const unlabeled = target.querySelectorAll('input:not([aria-label]):not([aria-labelledby])');
+        if (unlabeled.length > 0) {
+            violations.push({
+                id: 'form-labels', impact: 'critical', nodes: unlabeled.length, help: 'Form inputs need labels'
+            });
+        }
+        passes += target.querySelectorAll('input[aria-label], input[aria-labelledby]').length;
+    }
+    const report = {
+        violations, passes, timestamp: Date.now(),
+        url: typeof window !== 'undefined' ? window.location.href : ''
+    };
+    if (format === 'console' && violations.length > 0) {
+        console.group('🔍 A11y Audit Results');
+        violations.forEach(v => console.warn(`${v.impact}: ${v.help}`));
+        console.groupEnd();
+    }
+    return report;
+}
+var index$4 = { audit };
+
+var index$5 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    audit: audit,
+    default: index$4
+});
+
+/**
+ * @sc4rfurryx/proteusjs/a11y-primitives
+ * Lightweight accessibility patterns
+ *
+ * @version 1.1.0
+ * @author sc4rfurry
+ * @license MIT
+ */
+function dialog(root, opts = {}) {
+    const el = typeof root === 'string' ? document.querySelector(root) : root;
+    if (!el)
+        throw new Error('Dialog element not found');
+    const { modal = true, restoreFocus = true } = opts;
+    const close = () => {
+    };
+    return { destroy: () => close() };
+}
+function tooltip(trigger, content, opts = {}) {
+    const { delay = 300 } = opts;
+    let timeout;
+    const show = () => {
+        clearTimeout(timeout);
+        timeout = window.setTimeout(() => {
+            content.setAttribute('role', 'tooltip');
+            trigger.setAttribute('aria-describedby', content.id || 'tooltip');
+            content.style.display = 'block';
+        }, delay);
+    };
+    const hide = () => {
+        clearTimeout(timeout);
+        content.style.display = 'none';
+        trigger.removeAttribute('aria-describedby');
+    };
+    trigger.addEventListener('mouseenter', show);
+    trigger.addEventListener('mouseleave', hide);
+    trigger.addEventListener('focus', show);
+    trigger.addEventListener('blur', hide);
+    return {
+        destroy: () => {
+            clearTimeout(timeout);
+            trigger.removeEventListener('mouseenter', show);
+            trigger.removeEventListener('mouseleave', hide);
+            trigger.removeEventListener('focus', show);
+            trigger.removeEventListener('blur', hide);
+        }
+    };
+}
+function focusTrap(container) {
+    const focusable = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+    const activate = () => {
+        const elements = container.querySelectorAll(focusable);
+        if (elements.length === 0)
+            return;
+        const first = elements[0];
+        const last = elements[elements.length - 1];
+        const handleTab = (e) => {
+            if (e.key !== 'Tab')
+                return;
+            if (e.shiftKey && document.activeElement === first) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === last) {
+                e.preventDefault();
+                first.focus();
+            }
+        };
+        container.addEventListener('keydown', handleTab);
+        first.focus();
+        return () => container.removeEventListener('keydown', handleTab);
+    };
+    let deactivate = () => { };
+    return {
+        activate: () => { deactivate = activate() || (() => { }); },
+        deactivate: () => deactivate()
+    };
+}
+function menu(container) {
+    const items = container.querySelectorAll('[role="menuitem"]');
+    let currentIndex = 0;
+    const navigate = (e) => {
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                currentIndex = (currentIndex + 1) % items.length;
+                items[currentIndex].focus();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                currentIndex = currentIndex === 0 ? items.length - 1 : currentIndex - 1;
+                items[currentIndex].focus();
+                break;
+            case 'Escape':
+                e.preventDefault();
+                container.dispatchEvent(new CustomEvent('menu:close'));
+                break;
+        }
+    };
+    container.setAttribute('role', 'menu');
+    container.addEventListener('keydown', navigate);
+    return {
+        destroy: () => container.removeEventListener('keydown', navigate)
+    };
+}
+var index$2 = { dialog, tooltip, focusTrap, menu };
+
+var index$3 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    default: index$2,
+    dialog: dialog,
+    focusTrap: focusTrap,
+    menu: menu,
+    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';
 
-export { LIBRARY_NAME, ProteusJS, VERSION, ProteusJS as default, isSupported, version };
+export { LIBRARY_NAME, ProteusJS, VERSION, index$5 as a11yAudit, index$3 as a11yPrimitives, index$d as anchor, index$9 as container, ProteusJS as default, isSupported$1 as isSupported, index$1 as perf, index$b as popover, index$f as scroll, index$h as transitions, index$7 as typography, version };
 //# sourceMappingURL=proteus.esm.js.map