@sc4rfurryx/proteusjs 1.0.0 → 1.1.0

package/dist/adapters/svelte.esm.js

@@ -0,0 +1,908 @@
+/*!
+ * ProteusJS v1.1.0
+ * Shape-shifting responsive design that adapts like the sea god himself
+ * (c) 2025 sc4rfurry
+ * Released under the MIT License
+ */
+import { writable } from 'svelte/store';
+
+/**
+ * @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();
+        }
+    }
+}
+
+/**
+ * @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();
+            }
+        };
+    }
+}
+
+/**
+ * @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
+    };
+}
+
+/**
+ * @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
+    };
+}
+
+/**
+ * @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();
+    };
+}
+
+/**
+ * @sc4rfurryx/proteusjs/adapters/svelte
+ * Svelte actions and stores for ProteusJS
+ *
+ * @version 1.1.0
+ * @author sc4rfurry
+ * @license MIT
+ */
+/**
+ * Svelte action for scroll animations
+ */
+function proteusScroll(node, options) {
+    scrollAnimate(node, options);
+    return {
+        update(newOptions) {
+            // Re-apply with new options
+            scrollAnimate(node, newOptions);
+        },
+        destroy() {
+            // Cleanup handled by scroll module
+        }
+    };
+}
+/**
+ * Svelte action for container queries
+ */
+function proteusContainer(node, options = {}) {
+    const { name, containerOptions } = options;
+    defineContainer(node, name, containerOptions);
+    return {
+        update(newOptions) {
+            const { name: newName, containerOptions: newContainerOptions } = newOptions;
+            defineContainer(node, newName, newContainerOptions);
+        }
+    };
+}
+/**
+ * Svelte action for popover functionality
+ */
+function proteusPopover(node, options) {
+    let controller = null;
+    const { panel, popoverOptions } = options;
+    controller = attach(node, panel, popoverOptions);
+    return {
+        update(newOptions) {
+            if (controller) {
+                controller.destroy();
+            }
+            controller = attach(node, newOptions.panel, newOptions.popoverOptions);
+        },
+        destroy() {
+            if (controller) {
+                controller.destroy();
+            }
+        }
+    };
+}
+/**
+ * Svelte action for anchor positioning
+ */
+function proteusAnchor(node, options) {
+    let controller = null;
+    controller = tether(node, options);
+    return {
+        update(newOptions) {
+            if (controller) {
+                controller.destroy();
+            }
+            controller = tether(node, newOptions);
+        },
+        destroy() {
+            if (controller) {
+                controller.destroy();
+            }
+        }
+    };
+}
+/**
+ * Svelte action for performance optimizations
+ */
+function proteusPerf(node) {
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                node.style.contentVisibility = 'visible';
+            }
+            else {
+                node.style.contentVisibility = 'auto';
+            }
+        });
+    }, { rootMargin: '50px' });
+    observer.observe(node);
+    return {
+        destroy() {
+            observer.disconnect();
+        }
+    };
+}
+/**
+ * Svelte action for accessibility enhancements
+ */
+function proteusA11y(node, options = {}) {
+    const { announceChanges = false } = options;
+    // Enhance focus indicators
+    const focusableElements = node.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    const focusHandlers = new Map();
+    focusableElements.forEach(element => {
+        const htmlEl = element;
+        const focusHandler = () => {
+            htmlEl.style.outline = '2px solid #0066cc';
+            htmlEl.style.outlineOffset = '2px';
+        };
+        const blurHandler = () => {
+            htmlEl.style.outline = 'none';
+        };
+        htmlEl.addEventListener('focus', focusHandler);
+        htmlEl.addEventListener('blur', blurHandler);
+        focusHandlers.set(htmlEl, { focusHandler, blurHandler });
+    });
+    let mutationObserver = null;
+    if (announceChanges) {
+        mutationObserver = new MutationObserver(() => {
+            const announcement = document.createElement('div');
+            announcement.setAttribute('aria-live', 'polite');
+            announcement.style.position = 'absolute';
+            announcement.style.left = '-10000px';
+            announcement.textContent = 'Content updated';
+            document.body.appendChild(announcement);
+            setTimeout(() => {
+                document.body.removeChild(announcement);
+            }, 1000);
+        });
+        mutationObserver.observe(node, { childList: true, subtree: true });
+    }
+    return {
+        destroy() {
+            // Clean up focus handlers
+            focusHandlers.forEach(({ focusHandler, blurHandler }, element) => {
+                element.removeEventListener('focus', focusHandler);
+                element.removeEventListener('blur', blurHandler);
+            });
+            if (mutationObserver) {
+                mutationObserver.disconnect();
+            }
+        }
+    };
+}
+/**
+ * Store for managing popover state
+ */
+function createPopover(triggerSelector, panelSelector, options) {
+    const isOpen = writable(false);
+    let controller = null;
+    const initialize = () => {
+        const trigger = document.querySelector(triggerSelector);
+        const panel = document.querySelector(panelSelector);
+        if (trigger && panel) {
+            controller = attach(trigger, panel, {
+                ...options,
+                onOpen: () => {
+                    isOpen.set(true);
+                    options?.onOpen?.();
+                },
+                onClose: () => {
+                    isOpen.set(false);
+                    options?.onClose?.();
+                }
+            });
+        }
+    };
+    const open = () => controller?.open();
+    const close = () => controller?.close();
+    const toggle = () => controller?.toggle();
+    const destroy = () => {
+        if (controller) {
+            controller.destroy();
+            controller = null;
+        }
+    };
+    return {
+        isOpen,
+        initialize,
+        open,
+        close,
+        toggle,
+        destroy
+    };
+}
+/**
+ * Store for managing transition state
+ */
+function createTransition() {
+    const isTransitioning = writable(false);
+    const runTransition = async (run, opts) => {
+        isTransitioning.set(true);
+        try {
+            await transition(run, opts);
+        }
+        finally {
+            isTransitioning.set(false);
+        }
+    };
+    return {
+        isTransitioning,
+        runTransition
+    };
+}
+/**
+ * Utility function to create reactive container size store
+ */
+function createContainerSize(element) {
+    const size = writable({ width: 0, height: 0 });
+    if ('ResizeObserver' in window) {
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const { width, height } = entry.contentRect;
+                size.set({ width, height });
+            }
+        });
+        resizeObserver.observe(element);
+        return {
+            size,
+            destroy: () => resizeObserver.disconnect()
+        };
+    }
+    // Fallback for browsers without ResizeObserver
+    const updateSize = () => {
+        const rect = element.getBoundingClientRect();
+        size.set({ width: rect.width, height: rect.height });
+    };
+    updateSize();
+    window.addEventListener('resize', updateSize);
+    return {
+        size,
+        destroy: () => window.removeEventListener('resize', updateSize)
+    };
+}
+// Export all actions and utilities
+var svelte = {
+    proteusScroll,
+    proteusContainer,
+    proteusPopover,
+    proteusAnchor,
+    proteusPerf,
+    proteusA11y,
+    createPopover,
+    createTransition,
+    createContainerSize
+};
+
+export { createContainerSize, createPopover, createTransition, svelte as default, proteusA11y, proteusAnchor, proteusContainer, proteusPerf, proteusPopover, proteusScroll };
+//# sourceMappingURL=svelte.esm.js.map