@xlabs-store/core 0.0.1

package/dist/cjs/portal-controller-CtYVbhXL.js

@@ -0,0 +1,504 @@
+'use strict';
+
+let activeAppInstance = null;
+/**
+ * Register the global app instance
+ */
+const registerApp = (instance) => {
+    activeAppInstance = instance;
+};
+/**
+ * Unregister the global app instance
+ */
+const unregisterApp = () => {
+    activeAppInstance = null;
+};
+/**
+ * Get the currently active global app instance
+ */
+const getAppInstance = () => {
+    return activeAppInstance;
+};
+
+/**
+ * Positioning utility inspired by Popper.js
+ * Handles positioning, collision detection, and auto-updates
+ */
+class PositioningEngine {
+    reference;
+    floating;
+    options;
+    cleanupFns = [];
+    scrollParents = [];
+    constructor(reference, floating, options = {}) {
+        this.reference = reference;
+        this.floating = floating;
+        this.options = this.resolveOptions(options);
+        // Initial sync update
+        this.update();
+        if (this.options.autoUpdate) {
+            this.setupAutoUpdate();
+        }
+    }
+    resolveOptions(options) {
+        const viewWidth = window.innerWidth || document.documentElement.clientWidth;
+        const viewHeight = window.innerHeight || document.documentElement.clientHeight;
+        const defaultBoundary = {
+            top: 0,
+            right: viewWidth,
+            bottom: viewHeight,
+            left: 0,
+        };
+        return {
+            placement: options.placement || 'bottom',
+            strategy: options.strategy || 'absolute',
+            offset: {
+                mainAxis: options.offset?.mainAxis ?? 0,
+                crossAxis: options.offset?.crossAxis ?? 0,
+            },
+            flip: options.flip !== false,
+            shift: options.shift !== false,
+            boundary: {
+                ...defaultBoundary,
+                ...options.boundary,
+            },
+            autoUpdate: options.autoUpdate !== false,
+            onPlacementChange: options.onPlacementChange,
+        };
+    }
+    setOptions(options) {
+        const oldAutoUpdate = this.options.autoUpdate;
+        this.options = { ...this.options, ...this.resolveOptions({ ...this.options, ...options }) };
+        if (oldAutoUpdate !== this.options.autoUpdate) {
+            if (this.options.autoUpdate)
+                this.setupAutoUpdate();
+            else
+                this.destroyEventListeners();
+        }
+        this.update();
+    }
+    getScrollParents(node) {
+        const scrollParents = [];
+        let currentNode = node;
+        while (currentNode && currentNode !== document.body && currentNode !== document) {
+            if (currentNode instanceof HTMLElement) {
+                const style = window.getComputedStyle(currentNode);
+                const overflow = style.overflow + style.overflowX + style.overflowY;
+                if (/auto|scroll|overlay|hidden/.test(overflow)) {
+                    // Additional check for actual scrollable content, 
+                    // but we usually bind to any container with overflow declarations.
+                    scrollParents.push(currentNode);
+                }
+            }
+            // Traversing up through Shadow DOM boundaries
+            if (currentNode instanceof ShadowRoot) {
+                currentNode = currentNode.host;
+            }
+            else if (currentNode instanceof Element && currentNode.assignedSlot) {
+                currentNode = currentNode.assignedSlot;
+            }
+            else {
+                currentNode = currentNode.parentNode;
+            }
+        }
+        scrollParents.push(window);
+        return scrollParents;
+    }
+    update() {
+        if (!this.isReferenceVisible()) {
+            this.hideFloating();
+            return;
+        }
+        const position = this.computePosition();
+        const placementChanged = position.placement !== this.options.placement;
+        this.applyPosition(position);
+        this.showFloating();
+        if (placementChanged && this.options.onPlacementChange) {
+            this.options.onPlacementChange(position.placement);
+        }
+    }
+    isReferenceVisible() {
+        const rect = this.reference.getBoundingClientRect();
+        const viewHeight = window.innerHeight || document.documentElement.clientHeight;
+        const viewWidth = window.innerWidth || document.documentElement.clientWidth;
+        // Check global viewport limits first
+        if (rect.bottom < 0 ||
+            rect.top > viewHeight ||
+            rect.right < 0 ||
+            rect.left > viewWidth) {
+            return false;
+        }
+        // Check scroll parents bounds
+        for (const parent of this.scrollParents) {
+            if (parent instanceof HTMLElement) {
+                const parentRect = parent.getBoundingClientRect();
+                if (rect.bottom < parentRect.top ||
+                    rect.top > parentRect.bottom ||
+                    rect.right < parentRect.left ||
+                    rect.left > parentRect.right) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+    hideFloating() {
+        this.floating.style.display = 'none';
+    }
+    showFloating() {
+        this.floating.style.display = 'block';
+    }
+    computePosition() {
+        const refRect = this.reference.getBoundingClientRect();
+        // Quick measurement without showing it to user
+        const originalVisibility = this.floating.style.visibility;
+        const originalPosition = this.floating.style.position;
+        const originalDisplay = this.floating.style.display;
+        this.floating.style.visibility = 'hidden';
+        this.floating.style.position = this.options.strategy;
+        this.floating.style.display = 'block';
+        const floatRect = this.floating.getBoundingClientRect();
+        this.floating.style.visibility = originalVisibility;
+        this.floating.style.position = originalPosition;
+        this.floating.style.display = originalDisplay;
+        let placement = this.options.placement;
+        let coords = this.getCoordinates(refRect, floatRect, placement);
+        // Apply offset
+        const offset = this.getOffsetForPlacement(placement);
+        coords.x += offset.x;
+        coords.y += offset.y;
+        // Enhanced Flip logic
+        if (this.options.flip) {
+            const collision = this.getCollisionOverflow(coords, floatRect);
+            const severity = this.calculateSeverity(collision);
+            if (severity > 5) { // Threshold to avoid micro-flips
+                const flipped = this.getFlippedPlacement(placement, collision);
+                if (flipped !== placement) {
+                    const flippedCoords = this.getCoordinates(refRect, floatRect, flipped);
+                    const flippedOffset = this.getOffsetForPlacement(flipped);
+                    const finalFlippedCoords = {
+                        x: flippedCoords.x + flippedOffset.x,
+                        y: flippedCoords.y + flippedOffset.y
+                    };
+                    const flippedCollision = this.getCollisionOverflow(finalFlippedCoords, floatRect);
+                    const flippedSeverity = this.calculateSeverity(flippedCollision);
+                    // Eager flip: if flipped position is better, take it
+                    if (flippedSeverity < severity) {
+                        placement = flipped;
+                        coords = finalFlippedCoords;
+                    }
+                }
+            }
+        }
+        // Shift logic
+        if (this.options.shift) {
+            coords = this.shiftWithinBoundary(coords, floatRect);
+        }
+        return { ...coords, placement, strategy: this.options.strategy };
+    }
+    getCoordinates(refRect, floatRect, placement) {
+        const scrollX = this.options.strategy === 'absolute' ? window.scrollX : 0;
+        const scrollY = this.options.strategy === 'absolute' ? window.scrollY : 0;
+        let x = 0;
+        let y = 0;
+        switch (placement) {
+            case 'top':
+                x = refRect.left + refRect.width / 2 - floatRect.width / 2;
+                y = refRect.top - floatRect.height;
+                break;
+            case 'topLeft':
+                x = refRect.left;
+                y = refRect.top - floatRect.height;
+                break;
+            case 'topRight':
+                x = refRect.right - floatRect.width;
+                y = refRect.top - floatRect.height;
+                break;
+            case 'bottom':
+                x = refRect.left + refRect.width / 2 - floatRect.width / 2;
+                y = refRect.bottom;
+                break;
+            case 'bottomLeft':
+                x = refRect.left;
+                y = refRect.bottom;
+                break;
+            case 'bottomRight':
+                x = refRect.right - floatRect.width;
+                y = refRect.bottom;
+                break;
+            case 'left':
+                x = refRect.left - floatRect.width;
+                y = refRect.top + refRect.height / 2 - floatRect.height / 2;
+                break;
+            case 'leftTop':
+                x = refRect.left - floatRect.width;
+                y = refRect.top;
+                break;
+            case 'leftBottom':
+                x = refRect.left - floatRect.width;
+                y = refRect.bottom - floatRect.height;
+                break;
+            case 'right':
+                x = refRect.right;
+                y = refRect.top + refRect.height / 2 - floatRect.height / 2;
+                break;
+            case 'rightTop':
+                x = refRect.right;
+                y = refRect.top;
+                break;
+            case 'rightBottom':
+                x = refRect.right;
+                y = refRect.bottom - floatRect.height;
+                break;
+        }
+        return { x: x + scrollX, y: y + scrollY };
+    }
+    getOffsetForPlacement(placement) {
+        const { mainAxis, crossAxis } = this.options.offset;
+        if (placement.startsWith('top'))
+            return { x: crossAxis, y: -mainAxis };
+        if (placement.startsWith('bottom'))
+            return { x: crossAxis, y: mainAxis };
+        if (placement.startsWith('left'))
+            return { x: -mainAxis, y: crossAxis };
+        if (placement.startsWith('right'))
+            return { x: mainAxis, y: crossAxis };
+        return { x: 0, y: 0 };
+    }
+    getCollisionOverflow(pos, rect) {
+        const { strategy, boundary } = this.options;
+        const scrollX = strategy === 'absolute' ? window.scrollX : 0;
+        const scrollY = strategy === 'absolute' ? window.scrollY : 0;
+        return {
+            top: Math.max(0, (boundary.top + scrollY) - pos.y),
+            right: Math.max(0, (pos.x + rect.width) - (boundary.right + scrollX)),
+            bottom: Math.max(0, (pos.y + rect.height) - (boundary.bottom + scrollY)),
+            left: Math.max(0, (boundary.left + scrollX) - pos.x)
+        };
+    }
+    calculateSeverity(overflow) {
+        return overflow.top + overflow.right + overflow.bottom + overflow.left;
+    }
+    getFlippedPlacement(placement, overflow) {
+        if (placement.startsWith('top') && overflow.top > 0)
+            return placement.replace('top', 'bottom');
+        if (placement.startsWith('bottom') && overflow.bottom > 0)
+            return placement.replace('bottom', 'top');
+        if (placement.startsWith('left') && overflow.left > 0)
+            return placement.replace('left', 'right');
+        if (placement.startsWith('right') && overflow.right > 0)
+            return placement.replace('right', 'left');
+        return placement;
+    }
+    shiftWithinBoundary(pos, rect) {
+        const { boundary, strategy } = this.options;
+        const scrollX = strategy === 'absolute' ? window.scrollX : 0;
+        const scrollY = strategy === 'absolute' ? window.scrollY : 0;
+        let { x, y } = pos;
+        if (x < boundary.left + scrollX)
+            x = boundary.left + scrollX;
+        else if (x + rect.width > boundary.right + scrollX)
+            x = boundary.right + scrollX - rect.width;
+        if (y < boundary.top + scrollY)
+            y = boundary.top + scrollY;
+        else if (y + rect.height > boundary.bottom + scrollY)
+            y = boundary.bottom + scrollY - rect.height;
+        return { x, y };
+    }
+    applyPosition(position) {
+        Object.assign(this.floating.style, {
+            position: position.strategy,
+            left: `${position.x}px`,
+            top: `${position.y}px`,
+            margin: '0',
+        });
+        this.floating.setAttribute('data-placement', position.placement);
+    }
+    setupAutoUpdate() {
+        this.destroyEventListeners();
+        const updateOnEvent = () => requestAnimationFrame(() => this.update());
+        window.addEventListener('resize', updateOnEvent);
+        this.cleanupFns.push(() => window.removeEventListener('resize', updateOnEvent));
+        this.scrollParents = this.getScrollParents(this.reference);
+        this.scrollParents.forEach(parent => {
+            parent.addEventListener('scroll', updateOnEvent, { passive: true, capture: true });
+            this.cleanupFns.push(() => parent.removeEventListener('scroll', updateOnEvent, { capture: true }));
+            // Also grab custom scroll events if emitted (like from x-content)
+            if (parent instanceof HTMLElement) {
+                parent.addEventListener('xScroll', updateOnEvent, { passive: true, capture: true });
+                this.cleanupFns.push(() => parent.removeEventListener('xScroll', updateOnEvent, { capture: true }));
+            }
+        });
+        if (typeof ResizeObserver !== 'undefined') {
+            const resizeObserver = new ResizeObserver(updateOnEvent);
+            resizeObserver.observe(this.reference);
+            resizeObserver.observe(this.floating);
+            this.cleanupFns.push(() => resizeObserver.disconnect());
+        }
+    }
+    destroyEventListeners() {
+        this.cleanupFns.forEach(cleanup => cleanup());
+        this.cleanupFns = [];
+    }
+    destroy() {
+        this.destroyEventListeners();
+    }
+}
+function createPositioning(reference, floating, options) {
+    const engine = new PositioningEngine(reference, floating, options);
+    return {
+        update: () => engine.update(),
+        setOptions: (opts) => engine.setOptions(opts),
+        destroy: () => engine.destroy(),
+    };
+}
+
+/**
+ * PortalController: Manages portal rendering to document.body
+ * Replaces <x-portal> component with imperative API
+ */
+class PortalController {
+    config;
+    portalEl = null;
+    portalContentEl = null;
+    positioningInstance = null;
+    constructor(config) {
+        this.config = {
+            placement: 'bottomLeft',
+            zIndex: 9999,
+            ...config,
+        };
+        this.render();
+    }
+    static create(config) {
+        return new PortalController(config);
+    }
+    update(config) {
+        this.config = { ...this.config, ...config };
+        this.render();
+    }
+    destroy() {
+        if (this.positioningInstance) {
+            this.positioningInstance.destroy();
+            this.positioningInstance = null;
+        }
+        if (this.portalEl && this.portalEl.parentNode) {
+            this.portalEl.parentNode.removeChild(this.portalEl);
+        }
+        this.portalEl = null;
+        this.portalContentEl = null;
+    }
+    getElement() {
+        return this.portalEl;
+    }
+    render() {
+        if (!this.config.open) {
+            this.destroy();
+            return;
+        }
+        if (!this.portalEl) {
+            this.portalEl = document.createElement('div');
+            this.portalEl.setAttribute('data-x-portal', '');
+            this.portalEl.style.display = 'none'; // Initially hidden, engine will show it
+            this.portalEl.style.width = 'max-content';
+            this.portalContentEl = document.createElement('div');
+            this.portalContentEl.setAttribute('data-x-portal-content', '');
+            this.portalEl.appendChild(this.portalContentEl);
+            const appInstance = getAppInstance();
+            if (appInstance) {
+                const appEl = document.querySelector('x-app');
+                if (appEl && typeof appEl.getContainer === 'function') {
+                    appEl.getContainer().then((container) => {
+                        if (this.portalEl) {
+                            container.appendChild(this.portalEl);
+                            this.initializePositioning();
+                        }
+                    });
+                }
+                else {
+                    document.body.appendChild(this.portalEl);
+                    this.initializePositioning();
+                }
+            }
+            else {
+                document.body.appendChild(this.portalEl);
+                this.initializePositioning();
+            }
+        }
+        else {
+            this.updateContent();
+            this.updatePosition();
+        }
+        if (this.portalEl) {
+            this.portalEl.style.zIndex = String(this.config.zIndex);
+            // If no target is provided, positioning engine won't run to show the portal
+            // so we must show it manually if it's open
+            if (!this.config.target) {
+                this.portalEl.style.display = 'block';
+            }
+        }
+    }
+    initializePositioning() {
+        this.updateContent();
+        this.updatePosition();
+    }
+    updatePosition() {
+        if (!this.portalEl || !this.config.target)
+            return;
+        let mainAxis = 4;
+        let crossAxis = 0;
+        if (typeof this.config.offset === 'number') {
+            mainAxis = this.config.offset;
+        }
+        else if (typeof this.config.offset === 'object') {
+            mainAxis = this.config.offset.mainAxis ?? 4;
+            crossAxis = this.config.offset.crossAxis ?? 0;
+        }
+        const options = {
+            placement: this.config.placement,
+            strategy: 'fixed',
+            offset: {
+                mainAxis,
+                crossAxis,
+            },
+            flip: this.config.flip !== false,
+            shift: this.config.shift !== false,
+            autoUpdate: true,
+            onPlacementChange: this.config.onPlacementChange,
+        };
+        if (this.positioningInstance) {
+            // Reuse existing instance to maintain internal state
+            this.positioningInstance.setOptions(options);
+        }
+        else {
+            // Create new instance only if it doesn't exist
+            this.positioningInstance = createPositioning(this.config.target, this.portalEl, options);
+        }
+        if (this.config.width) {
+            this.portalEl.style.width = this.config.width;
+        }
+    }
+    updateContent() {
+        if (!this.portalContentEl || !this.config.content)
+            return;
+        const content = this.config.content;
+        if (Array.isArray(content)) {
+            const allPresent = content.every(el => this.portalContentEl?.contains(el));
+            if (!allPresent) {
+                this.portalContentEl.innerHTML = '';
+                content.forEach(el => this.portalContentEl?.appendChild(el));
+            }
+        }
+        else {
+            if (!this.portalContentEl.contains(content)) {
+                this.portalContentEl.innerHTML = '';
+                this.portalContentEl.appendChild(content);
+            }
+        }
+    }
+}
+
+exports.PortalController = PortalController;
+exports.getAppInstance = getAppInstance;
+exports.registerApp = registerApp;
+exports.unregisterApp = unregisterApp;