mnfst 0.5.57 → 0.5.59

package/lib/manifest.tooltips.js

@@ -1,360 +1,311 @@
-/* Manifest Tooltips */
+/* Manifest Tooltips — singleton architecture.
+ *
+ * Instead of creating one <div popover="hint"> per x-tooltip trigger, this plugin
+ * maintains ONE tooltip element per popover host (usually just document.body plus
+ * optionally one per open popover). Every trigger with x-tooltip becomes a
+ * lightweight content provider that asks the shared controller to show its text,
+ * anchored to that trigger.
+ *
+ * Why: N triggers × 1 tooltip each = N extra DOM nodes that are empty 99% of the
+ * time. For dense UIs like colorpicker libraries (~300+ swatches × 20 pickers),
+ * this is the difference between a usable page and a laggy one.
+ */
 
-// Get tooltip hover delay from CSS variable
+// Hover delay from CSS var (with time-unit parsing). Defaults to 500ms.
 function getTooltipHoverDelay(element) {
-    // Try to get the value from the element first, then from document root
     let computedStyle = getComputedStyle(element);
     let delayValue = computedStyle.getPropertyValue('--tooltip-hover-delay').trim();
-
     if (!delayValue) {
-        // If not found on element, check document root
         computedStyle = getComputedStyle(document.documentElement);
         delayValue = computedStyle.getPropertyValue('--tooltip-hover-delay').trim();
     }
-
-    if (!delayValue) {
-        return 500; // Default to 500ms if not set
-    }
-
-    // Parse CSS time value (supports various time units)
+    if (!delayValue) return 500;
     const timeValue = parseFloat(delayValue);
-
-    if (delayValue.endsWith('s')) {
-        return timeValue * 1000; // Convert seconds to milliseconds
-    } else if (delayValue.endsWith('ms')) {
-        return timeValue; // Already in milliseconds
-    } else if (delayValue.endsWith('m')) {
-        return timeValue * 60 * 1000; // Convert minutes to milliseconds
-    } else if (delayValue.endsWith('h')) {
-        return timeValue * 60 * 60 * 1000; // Convert hours to milliseconds
-    } else if (delayValue.endsWith('min')) {
-        return timeValue * 60 * 1000; // Convert minutes to milliseconds
-    } else if (delayValue.endsWith('sec')) {
-        return timeValue * 1000; // Convert seconds to milliseconds
-    } else if (delayValue.endsWith('second')) {
-        return timeValue * 1000; // Convert seconds to milliseconds
-    } else if (delayValue.endsWith('minute')) {
-        return timeValue * 60 * 1000; // Convert minutes to milliseconds
-    } else if (delayValue.endsWith('hour')) {
-        return timeValue * 60 * 60 * 1000; // Convert hours to milliseconds
-    } else {
-        // If no unit, assume milliseconds (backward compatibility)
-        return timeValue;
-    }
+    if (delayValue.endsWith('ms')) return timeValue;
+    if (delayValue.endsWith('s')) return timeValue * 1000;
+    if (delayValue.endsWith('min') || delayValue.endsWith('m') || delayValue.endsWith('minute')) return timeValue * 60 * 1000;
+    if (delayValue.endsWith('h') || delayValue.endsWith('hour')) return timeValue * 60 * 60 * 1000;
+    if (delayValue.endsWith('sec') || delayValue.endsWith('second')) return timeValue * 1000;
+    return timeValue; // unitless → ms
 }
 
-/** Keep anchor-name on the trigger long after hide so position-anchor stays valid through any close transition/layout. */
-const ANCHOR_RESTORE_DELAY_MS = 2000;
-
-/**
- * DOM parent for the tooltip popover. Must be the same popover subtree as the trigger when the trigger
- * lives inside menu/dialog/etc.; otherwise CSS anchor positioning cannot resolve (tooltip in body + anchor
- * inside top-layer popover → invalid position-anchor, jump to origin).
- */
+// Popover host for anchor positioning: the closest top-layer popover ancestor, or body.
 function getTooltipHostForTrigger(triggerEl) {
     return triggerEl.closest('[popover]') || document.body;
 }
 
 function initializeTooltipPlugin() {
 
-    Alpine.directive('tooltip', (el, { modifiers, expression }, { effect, evaluateLater }) => {
-
-        let getTooltipContent;
-
-        // If it starts with $x, handle content loading
-        if (expression.startsWith('$x.')) {
-            const path = expression.substring(3); // Remove '$x.'
-            const [contentType, ...pathParts] = path.split('.');
-
-            // Create evaluator that uses the $x magic method
-            getTooltipContent = evaluateLater(expression);
+    // Chain mode: if another tooltip was dismissed this recently, the next one
+    // shows immediately (no hover delay). Also used to skip the hide-show flicker
+    // when gliding across many triggers — the singleton just re-anchors.
+    const TOOLTIP_CHAIN_GRACE_MS = 250;
+    let _lastTooltipHideTime = 0;
+    const markTooltipHidden = () => { _lastTooltipHideTime = Date.now(); };
+    const isInChainWindow = () => (Date.now() - _lastTooltipHideTime) < TOOLTIP_CHAIN_GRACE_MS;
+
+    // ---- Singletons per host ----
+    //
+    // Most pages only need one singleton (under document.body). Open popovers (menus,
+    // dialogs) require their own singleton because CSS anchor positioning can't resolve
+    // across the top-layer boundary. We create them lazily on first use and keep them
+    // (small, hidden <div>s) for the life of the host.
+    const _singletons = new WeakMap();
+
+    function getSingleton(host) {
+        let s = _singletons.get(host);
+        if (s) return s;
+        const el = document.createElement('div');
+        el.setAttribute('popover', 'hint');
+        el.className = 'tooltip';
+        host.appendChild(el);
+        s = {
+            el,
+            host,
+            activeTrigger: null,
+            currentPositions: [],
+            currentAnchorName: null
+        };
+        _singletons.set(host, s);
+        return s;
+    }
 
-            // Ensure content is loaded before showing tooltip
-            effect(() => {
-                const store = Alpine.store('collections');
-                if (store && typeof store.loadCollection === 'function' && !store[contentType]) {
-                    store.loadCollection(contentType);
-                }
-            });
-        } else {
-            // Check if expression contains HTML tags (indicating rich content)
-            if (expression.includes('<') && expression.includes('>')) {
-                // Treat as literal HTML string - escape any quotes to prevent syntax errors
-                const escapedExpression = expression.replace(/'/g, "\\'");
-                getTooltipContent = evaluateLater(`'${escapedExpression}'`);
-            } else if (expression.includes('+') || expression.includes('`') || expression.includes('${')) {
-                // Try to evaluate as a dynamic expression
-                getTooltipContent = evaluateLater(expression);
+    // Restore a trigger's original anchor-name (captured before we overrode it).
+    // Scheduled with a long delay so the anchor stays valid through popover transitions.
+    const _pendingAnchorRestores = new WeakMap();  // trigger → timeoutId
+    const ANCHOR_RESTORE_DELAY_MS = 2000;
+
+    function scheduleAnchorRestore(trigger) {
+        const existing = _pendingAnchorRestores.get(trigger);
+        if (existing) clearTimeout(existing);
+        const id = setTimeout(() => {
+            _pendingAnchorRestores.delete(trigger);
+            if (trigger._tooltipOriginalAnchor) {
+                trigger.style.setProperty('anchor-name', trigger._tooltipOriginalAnchor);
             } else {
-                // Use as static string
-                getTooltipContent = evaluateLater(`'${expression}'`);
-            }
-        }
-
-        effect(() => {
-            // Generate a unique ID for the tooltip
-            const tooltipCode = Math.random().toString(36).substr(2, 9);
-            const tooltipId = `tooltip-${tooltipCode}`;
-
-            // Store the original popovertarget if it exists, or check for x-dropdown
-            let originalTarget = el.getAttribute('popovertarget');
-
-            // If no popovertarget but has x-dropdown, that will become the target
-            if (!originalTarget && el.hasAttribute('x-dropdown')) {
-                originalTarget = el.getAttribute('x-dropdown');
+                trigger.style.removeProperty('anchor-name');
             }
+        }, ANCHOR_RESTORE_DELAY_MS);
+        _pendingAnchorRestores.set(trigger, id);
+    }
+    function cancelAnchorRestore(trigger) {
+        const id = _pendingAnchorRestores.get(trigger);
+        if (id) { clearTimeout(id); _pendingAnchorRestores.delete(trigger); }
+    }
 
-            // Create the tooltip element (hint popovers coexist with auto menus/dialogs)
-            const tooltip = document.createElement('div');
-            tooltip.setAttribute('popover', 'hint');
-            tooltip.setAttribute('id', tooltipId);
-            tooltip.setAttribute('class', 'tooltip');
+    // ---- Controller ----
+    //
+    // Single pending-show timer shared across the whole plugin. If a trigger arms a
+    // show and the user moves to another trigger before it fires, the first timer is
+    // cancelled in favor of the new one. If the singleton is already visible, the new
+    // trigger updates it in place (chain mode) — no hide/show flicker.
+
+    let _showTimer = null;
+    let _pendingTrigger = null;
+    // Hide is deferred briefly so an incoming show on a different trigger can take
+    // over (chain-mode glide) instead of producing a hide/show flicker.
+    let _hideTimer = null;
+    const HIDE_DEFER_MS = 60;
+
+    function cancelPendingShow() {
+        if (_showTimer) { clearTimeout(_showTimer); _showTimer = null; }
+        _pendingTrigger = null;
+    }
+    function cancelPendingHide() {
+        if (_hideTimer) { clearTimeout(_hideTimer); _hideTimer = null; }
+    }
 
-            // Store the original anchor name if it exists
-            const originalAnchorName = el.style.getPropertyValue('anchor-name');
-            const tooltipAnchor = `--tooltip-${tooltipCode}`;
 
-            // Store original anchor name for restoration
-            if (originalAnchorName) {
-                el._originalAnchorName = originalAnchorName;
-            }
+    // Update the singleton to point at a trigger (anchor, content, classes) and show it.
+    // Switches between triggers happen by re-anchoring — no positional animation. Any
+    // previous transform state is cleared so the tooltip sits squarely at its anchor.
+    function showSingletonFor(trigger, contentHtml, positions) {
+        const host = getTooltipHostForTrigger(trigger);
+        const s = getSingleton(host);
 
-            // Handle positioning modifiers - preserve exact order and build class names like dropdown CSS
-            const validPositions = ['top', 'bottom', 'start', 'end', 'center', 'corner'];
-            const positions = modifiers.filter(mod => validPositions.includes(mod));
+        // Clear any residual transform state (defensive — should already be clean)
+        s.el.style.transition = '';
+        s.el.style.translate = '';
 
-            if (positions.length > 0) {
-                // Build class name by joining modifiers with dashes (preserves original order)
-                const positionClass = positions.join('-');
-                tooltip.classList.add(positionClass);
-            }
+        // Capture the trigger's original anchor-name so we can restore it later.
+        if (!trigger._tooltipOriginalAnchorCaptured) {
+            trigger._tooltipOriginalAnchor = trigger.style.getPropertyValue('anchor-name') || '';
+            trigger._tooltipOriginalAnchorCaptured = true;
+        }
+        cancelAnchorRestore(trigger);
 
-            // Mount under the same popover as the trigger when applicable (see getTooltipHostForTrigger)
-            getTooltipHostForTrigger(el).appendChild(tooltip);
-
-            // State variables for managing tooltip behavior
-            let showTimeout;
-            let restoreAnchorTimeout = null;
-            let anchorRestoreGeneration = 0;
-            let isMouseDown = false;
-            let isDynamic = expression.includes('+') || expression.includes('`') || expression.includes('${') || expression.startsWith('$x.');
-            let isUpdatingContent = false;
-
-            function restoreOriginalAnchor() {
-                if (el._originalAnchorName) {
-                    el.style.setProperty('anchor-name', el._originalAnchorName);
-                } else {
-                    el.style.removeProperty('anchor-name');
-                }
-            }
+        // Update position classes on the singleton. These drive the CSS positioning
+        // variants (top, bottom-end, etc.) defined in manifest.tooltip.css.
+        if (s.currentPositions.length) s.el.classList.remove(s.currentPositions.join('-'));
+        if (positions.length) s.el.classList.add(positions.join('-'));
+        s.currentPositions = positions;
 
-            function cancelScheduledAnchorRestore() {
-                anchorRestoreGeneration += 1;
-                if (restoreAnchorTimeout !== null) {
-                    clearTimeout(restoreAnchorTimeout);
-                    restoreAnchorTimeout = null;
-                }
-            }
+        s.el.innerHTML = contentHtml || '';
 
-            function scheduleAnchorRestoreAfterTooltipDismissal(restoreFn) {
-                cancelScheduledAnchorRestore();
-                const gen = anchorRestoreGeneration;
-                const run = () => {
-                    if (gen !== anchorRestoreGeneration) return;
-                    restoreAnchorTimeout = null;
-                    restoreFn();
-                };
-                restoreAnchorTimeout = setTimeout(run, ANCHOR_RESTORE_DELAY_MS);
-            }
+        // Anchor binding: give the trigger a unique anchor-name, point the singleton at it.
+        if (!trigger._tooltipAnchorName) {
+            const code = Math.random().toString(36).slice(2, 9);
+            trigger._tooltipAnchorName = `--tooltip-trigger-${code}`;
+        }
+        const anchorName = trigger._tooltipAnchorName;
+        trigger.style.setProperty('anchor-name', anchorName);
+        void trigger.offsetHeight; // reflow so anchor-name registers
+        s.el.style.setProperty('position-anchor', anchorName);
 
-            function scheduleRestoreAnchorAfterClose() {
-                scheduleAnchorRestoreAfterTooltipDismissal(() => restoreOriginalAnchor());
-            }
+        s.activeTrigger = trigger;
+        s.currentAnchorName = anchorName;
 
-            function ensureTooltipHostMatchesTrigger() {
-                const host = getTooltipHostForTrigger(el);
-                if (tooltip.parentNode !== host) {
-                    host.appendChild(tooltip);
-                }
-            }
+        if (!s.el.matches(':popover-open')) s.el.showPopover();
+    }
 
-            // Function to update tooltip content - prevents double updates
-            const updateTooltipContent = () => {
-                // Prevent concurrent updates that cause flicker
-                if (isUpdatingContent) return;
-                isUpdatingContent = true;
-
-                getTooltipContent(content => {
-                    tooltip.innerHTML = content || '';
-                    // Use requestAnimationFrame to ensure DOM update completes before allowing next update
-                    requestAnimationFrame(() => {
-                        isUpdatingContent = false;
-                    });
-                });
-            };
+    // Hide the singleton that's currently showing (if any), regardless of host.
+    function hideAnySingleton() {
+        document.querySelectorAll('.tooltip[popover="hint"]:popover-open').forEach(el => {
+            try { el.hidePopover(); } catch {}
+        });
+        markTooltipHidden();
+    }
 
-            // For static content, set it once immediately to avoid delay
-            // For dynamic content, set it only when showing to prevent double updates from reactivity
-            if (!isDynamic) {
-                updateTooltipContent();
-            }
+    // ---- Directive ----
 
-            el.addEventListener('mouseenter', () => {
-                cancelScheduledAnchorRestore();
-                clearTimeout(showTimeout);
-                if (!isMouseDown) {
-                    const hoverDelay = getTooltipHoverDelay(el);
-                    showTimeout = setTimeout(() => {
-                        // Check if user is actively interacting with other popovers
-                        const hasOpenPopover = originalTarget && document.getElementById(originalTarget)?.matches(':popover-open');
-
-                        if (!isMouseDown && !tooltip.matches(':popover-open') && !hasOpenPopover) {
-                            // For dynamic content, update right before showing to ensure current value
-                            // The isUpdatingContent flag prevents the reactive callback from causing double updates
-                            if (isDynamic) {
-                                updateTooltipContent();
-                            }
-
-                            ensureTooltipHostMatchesTrigger();
-
-                            // Only manage anchor-name if element has other popover functionality
-                            if (originalTarget) {
-                                // Store current anchor name (dropdown may have set it by now)
-                                const currentAnchorName = el.style.getPropertyValue('anchor-name');
-                                if (currentAnchorName && currentAnchorName !== tooltipAnchor) {
-                                    el._originalAnchorName = currentAnchorName;
-                                }
-                            }
-
-                            // Set anchor-name on element first
-                            el.style.setProperty('anchor-name', tooltipAnchor);
-
-                            // Force a reflow to ensure anchor is registered before setting position-anchor
-                            void el.offsetHeight;
-
-                            // Set position-anchor on tooltip
-                            tooltip.style.setProperty('position-anchor', tooltipAnchor);
-
-                            // Show tooltip without changing popovertarget
-                            tooltip.showPopover();
-                        }
-                    }, hoverDelay);
-                }
-            });
+    Alpine.directive('tooltip', (el, { modifiers, expression }, { effect, evaluateLater }) => {
 
-            el.addEventListener('mouseleave', () => {
-                clearTimeout(showTimeout);
-                if (tooltip.matches(':popover-open')) {
-                    tooltip.hidePopover();
-                    scheduleRestoreAnchorAfterClose();
-                }
-            });
+        // --- Content evaluator ---
+        let getContent;
+        const isDynamic =
+            expression.startsWith('$x.') ||
+            (expression.includes('+') || expression.includes('`') || expression.includes('${'));
 
-            el.addEventListener('mousedown', () => {
-                isMouseDown = true;
-                clearTimeout(showTimeout);
-                if (tooltip.matches(':popover-open')) {
-                    tooltip.hidePopover();
+        if (expression.startsWith('$x.')) {
+            const path = expression.substring(3);
+            const [contentType] = path.split('.');
+            getContent = evaluateLater(expression);
+            effect(() => {
+                const store = Alpine.store('collections');
+                if (store && typeof store.loadCollection === 'function' && !store[contentType]) {
+                    store.loadCollection(contentType);
                 }
-                scheduleRestoreAnchorAfterClose();
             });
+        } else if (expression.includes('<') && expression.includes('>')) {
+            // Literal HTML string
+            const escaped = expression.replace(/'/g, "\\'");
+            getContent = evaluateLater(`'${escaped}'`);
+        } else if (expression.includes('+') || expression.includes('`') || expression.includes('${')) {
+            getContent = evaluateLater(expression);
+        } else {
+            // Static literal — wrap in quotes so evaluateLater returns it verbatim
+            getContent = evaluateLater(`'${expression}'`);
+        }
 
-            el.addEventListener('mouseup', () => {
-                isMouseDown = false;
-            });
+        // --- Positioning modifiers ---
+        const validPositions = ['top', 'bottom', 'start', 'end', 'center', 'corner'];
+        const positions = modifiers.filter(m => validPositions.includes(m));
 
-            // Handle click events - hide tooltip but delay anchor restoration
-            el.addEventListener('click', (e) => {
-                clearTimeout(showTimeout);
+        // For non-dynamic content, cache once to avoid re-evaluating every show.
+        let cachedContent = null;
+        if (!isDynamic) {
+            getContent(v => { cachedContent = v; });
+        }
 
-                // Hide tooltip if open
-                if (tooltip.matches(':popover-open')) {
-                    tooltip.hidePopover();
+        // Resolves the content to show, calling the provided callback with the HTML string.
+        const resolveContent = (cb) => {
+            if (!isDynamic && cachedContent != null) { cb(cachedContent); return; }
+            getContent(v => cb(v));
+        };
+
+        // --- Event handlers ---
+        const requestShow = () => {
+            cancelPendingShow();
+            cancelPendingHide(); // incoming show cancels the deferred hide — this is the glide takeover
+            _pendingTrigger = el;
+            // Chain mode: if the singleton is still open (hide was deferred, about to
+            // happen), or was just dismissed within the grace window, show now.
+            const anyOpen = document.querySelector('.tooltip[popover="hint"]:popover-open');
+            const delay = (anyOpen || isInChainWindow()) ? 0 : getTooltipHoverDelay(el);
+            _showTimer = setTimeout(() => {
+                _showTimer = null;
+                if (_pendingTrigger !== el) return;
+                const triggerTargetId = el.getAttribute('popovertarget') || el.getAttribute('x-dropdown');
+                if (triggerTargetId) {
+                    const t = document.getElementById(triggerTargetId);
+                    if (t && t.matches && t.matches(':popover-open')) return;
                 }
-
-                // After computed transition time: restore anchor only if no popover opened from this click
-                scheduleAnchorRestoreAfterTooltipDismissal(() => {
-                    if (originalTarget) {
-                        const targetPopover = document.getElementById(originalTarget);
-                        const isPopoverOpen = targetPopover?.matches(':popover-open');
-                        if (!targetPopover || !isPopoverOpen) {
-                            restoreOriginalAnchor();
-                        }
-                    } else {
-                        restoreOriginalAnchor();
-                    }
+                resolveContent(html => {
+                    showSingletonFor(el, html, positions);
                 });
-            });
-
-            // Listen for other popovers opening and close tooltip if needed
-            const handlePopoverOpen = (event) => {
-                // If another popover opens and it's not our tooltip, close our tooltip
-                if (event.target !== tooltip && tooltip.matches(':popover-open')) {
-                    tooltip.hidePopover();
-                    scheduleRestoreAnchorAfterClose();
-                }
-            };
-
-            // Add global listener for popover events (only if not already added)
-            if (!el._tooltipPopoverListener) {
-                document.addEventListener('toggle', handlePopoverOpen);
-                el._tooltipPopoverListener = handlePopoverOpen;
-            }
-
-            // Cleanup function for when element is removed
-            const cleanup = () => {
-                cancelScheduledAnchorRestore();
-                if (el._tooltipPopoverListener) {
-                    document.removeEventListener('toggle', el._tooltipPopoverListener);
-                    delete el._tooltipPopoverListener;
-                }
-                if (tooltip && tooltip.parentElement) {
-                    tooltip.remove();
+            }, delay);
+        };
+
+        const requestHide = () => {
+            cancelPendingShow();
+            // Defer the actual hide briefly so an incoming show on a different trigger
+            // can take over (chain mode: immediate show) rather than flicker-close.
+            cancelPendingHide();
+            _hideTimer = setTimeout(() => {
+                _hideTimer = null;
+                const host = getTooltipHostForTrigger(el);
+                const s = _singletons.get(host);
+                if (s && s.activeTrigger === el && s.el.matches(':popover-open')) {
+                    s.el.hidePopover();
+                    s.activeTrigger = null;
+                    markTooltipHidden();
+                    scheduleAnchorRestore(el);
                 }
-            };
-
-            // Store cleanup function for manual cleanup if needed
-            el._tooltipCleanup = cleanup;
-        });
+            }, HIDE_DEFER_MS);
+        };
+
+        // Mouse interactions
+        el.addEventListener('mouseenter', requestShow);
+        el.addEventListener('mouseleave', requestHide);
+
+        // Mousedown/click: always hide immediately; scheduleAnchorRestore so the
+        // trigger's anchor-name stays valid long enough for any dropdown popover
+        // it launches to position itself correctly.
+        const hideAndScheduleRestore = () => {
+            cancelPendingShow();
+            hideAnySingleton();
+            scheduleAnchorRestore(el);
+        };
+        el.addEventListener('mousedown', hideAndScheduleRestore);
+        el.addEventListener('click', hideAndScheduleRestore);
     });
+
+    // Global: when ANY other popover opens, close the singleton(s). Dropdowns and
+    // dialogs take precedence over tooltips.
+    document.addEventListener('toggle', (event) => {
+        if (event.newState !== 'open') return;
+        const t = event.target;
+        if (t.classList && t.classList.contains('tooltip') && t.getAttribute('popover') === 'hint') return;
+        hideAnySingleton();
+    }, true);
 }
 
-// Track initialization to prevent duplicates
+// ---- Plugin init boilerplate ----
+
 let tooltipPluginInitialized = false;
 
 function ensureTooltipPluginInitialized() {
     if (tooltipPluginInitialized) return;
     if (!window.Alpine || typeof window.Alpine.directive !== 'function') return;
-
     tooltipPluginInitialized = true;
     initializeTooltipPlugin();
-    // Do not call Alpine.initTree() on [x-tooltip] elements here. That initializes
-    // them in isolation and breaks scope (e.g. "tab is not defined"). Alpine will
-    // process the full tree from the root, so [x-tooltip] elements get the correct
-    // scope. Dynamically loaded components are already initialized by the component
-    // processor with initTree on the swapped-in root.
 }
 
-// Expose on window for loader to call if needed
 window.ensureTooltipPluginInitialized = ensureTooltipPluginInitialized;
 
-// Handle both DOMContentLoaded and alpine:init
 if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', ensureTooltipPluginInitialized);
 }
-
 document.addEventListener('alpine:init', ensureTooltipPluginInitialized);
 
-// If Alpine is already initialized when this script loads, initialize immediately
 if (window.Alpine && typeof window.Alpine.directive === 'function') {
     setTimeout(ensureTooltipPluginInitialized, 0);
 } else if (document.readyState === 'complete') {
-    // If document is already loaded but Alpine isn't ready yet, wait for it
     const checkAlpine = setInterval(() => {
         if (window.Alpine && typeof window.Alpine.directive === 'function') {
             clearInterval(checkAlpine);
             ensureTooltipPluginInitialized();
         }
-    }, 10);
+    }, 50);
     setTimeout(() => clearInterval(checkAlpine), 5000);
-} 
+}

package/lib/manifest.utilities.css

@@ -85,7 +85,7 @@
 
     /* Selected */
     :where(.selected) {
-        background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 25%, transparent);
+        background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26))
     }
 
     /* Transparent */
@@ -173,6 +173,20 @@
         }
     }
 
+    /* No spinners */
+    .no-spinner {
+        -moz-appearance: textfield !important;
+        appearance: textfield !important;
+
+        &::-webkit-inner-spin-button,
+        &::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            appearance: none;
+            display: none;
+            margin: 0;
+        }
+    }
+
     /* Banner overlays */
     :where(.overlay-dark, .overlay-light) {
         position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mnfst",
-    "version": "0.5.57",
+    "version": "0.5.59",
     "private": false,
     "workspaces": [
         "templates/starter",