mnfst 0.5.52 → 0.5.54

package/lib/manifest.tooltips.js

@@ -43,6 +43,18 @@ function getTooltipHoverDelay(element) {
     }
 }
 
+/** 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).
+ */
+function getTooltipHostForTrigger(triggerEl) {
+    return triggerEl.closest('[popover]') || document.body;
+}
+
 function initializeTooltipPlugin() {
 
     Alpine.directive('tooltip', (el, { modifiers, expression }, { effect, evaluateLater }) => {
@@ -92,9 +104,9 @@ function initializeTooltipPlugin() {
                 originalTarget = el.getAttribute('x-dropdown');
             }
 
-            // Create the tooltip element
+            // Create the tooltip element (hint popovers coexist with auto menus/dialogs)
             const tooltip = document.createElement('div');
-            tooltip.setAttribute('popover', '');
+            tooltip.setAttribute('popover', 'hint');
             tooltip.setAttribute('id', tooltipId);
             tooltip.setAttribute('class', 'tooltip');
 
@@ -117,15 +129,55 @@ function initializeTooltipPlugin() {
                 tooltip.classList.add(positionClass);
             }
 
-            // Add the tooltip to the document
-            document.body.appendChild(tooltip);
+            // 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');
+                }
+            }
+
+            function cancelScheduledAnchorRestore() {
+                anchorRestoreGeneration += 1;
+                if (restoreAnchorTimeout !== null) {
+                    clearTimeout(restoreAnchorTimeout);
+                    restoreAnchorTimeout = null;
+                }
+            }
+
+            function scheduleAnchorRestoreAfterTooltipDismissal(restoreFn) {
+                cancelScheduledAnchorRestore();
+                const gen = anchorRestoreGeneration;
+                const run = () => {
+                    if (gen !== anchorRestoreGeneration) return;
+                    restoreAnchorTimeout = null;
+                    restoreFn();
+                };
+                restoreAnchorTimeout = setTimeout(run, ANCHOR_RESTORE_DELAY_MS);
+            }
+
+            function scheduleRestoreAnchorAfterClose() {
+                scheduleAnchorRestoreAfterTooltipDismissal(() => restoreOriginalAnchor());
+            }
+
+            function ensureTooltipHostMatchesTrigger() {
+                const host = getTooltipHostForTrigger(el);
+                if (tooltip.parentNode !== host) {
+                    host.appendChild(tooltip);
+                }
+            }
+
             // Function to update tooltip content - prevents double updates
             const updateTooltipContent = () => {
                 // Prevent concurrent updates that cause flicker
@@ -148,6 +200,8 @@ function initializeTooltipPlugin() {
             }
 
             el.addEventListener('mouseenter', () => {
+                cancelScheduledAnchorRestore();
+                clearTimeout(showTimeout);
                 if (!isMouseDown) {
                     const hoverDelay = getTooltipHoverDelay(el);
                     showTimeout = setTimeout(() => {
@@ -161,6 +215,8 @@ function initializeTooltipPlugin() {
                                 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)
@@ -190,10 +246,7 @@ function initializeTooltipPlugin() {
                 clearTimeout(showTimeout);
                 if (tooltip.matches(':popover-open')) {
                     tooltip.hidePopover();
-                    // Only restore anchor name if element has other popover functionality
-                    if (originalTarget) {
-                        restoreOriginalAnchor();
-                    }
+                    scheduleRestoreAnchorAfterClose();
                 }
             });
 
@@ -203,10 +256,7 @@ function initializeTooltipPlugin() {
                 if (tooltip.matches(':popover-open')) {
                     tooltip.hidePopover();
                 }
-                // Only restore anchor name if element has other popover functionality
-                if (originalTarget) {
-                    restoreOriginalAnchor();
-                }
+                scheduleRestoreAnchorAfterClose();
             });
 
             el.addEventListener('mouseup', () => {
@@ -222,43 +272,26 @@ function initializeTooltipPlugin() {
                     tooltip.hidePopover();
                 }
 
-                // Don't restore anchor immediately - let other click handlers run first
-                // This allows dropdown plugin to set its own anchor-name
-                setTimeout(() => {
-                    // Only restore anchor if no popover opened from this click
+                // 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();
                         }
-                        // If popover is open, keep current anchor (don't restore)
                     } else {
                         restoreOriginalAnchor();
                     }
-                }, 100); // Give other plugins time to set their anchors
+                });
             });
 
-            // Helper function to restore original anchor
-            function restoreOriginalAnchor() {
-                if (el._originalAnchorName) {
-                    // Restore the original anchor name
-                    el.style.setProperty('anchor-name', el._originalAnchorName);
-                } else {
-                    // Remove the tooltip anchor name so other plugins can set their own
-                    el.style.removeProperty('anchor-name');
-                }
-            }
-
             // 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();
-                    // Only restore anchor name if element has other popover functionality
-                    if (originalTarget) {
-                        restoreOriginalAnchor();
-                    }
+                    scheduleRestoreAnchorAfterClose();
                 }
             };
 
@@ -270,6 +303,7 @@ function initializeTooltipPlugin() {
 
             // Cleanup function for when element is removed
             const cleanup = () => {
+                cancelScheduledAnchorRestore();
                 if (el._tooltipPopoverListener) {
                     document.removeEventListener('toggle', el._tooltipPopoverListener);
                     delete el._tooltipPopoverListener;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mnfst",
-    "version": "0.5.52",
+    "version": "0.5.54",
     "private": false,
     "workspaces": [
         "templates/starter",
@@ -17,15 +17,16 @@
         "clean": "rimraf src/scripts/manifest.js src/scripts/manifest.render.mjs src/styles/manifest.css src/styles/manifest.min.css src/styles/manifest.code.min.css lib",
         "build": "cd src && node scripts/build.mjs",
         "build:docs": "echo 'Docs is a static website - no build needed'",
-        "start:src": "cd src && browser-sync start --config bs-config.js",
-        "start:docs": "cd docs && browser-sync start --config bs-config.js",
-        "start:starter": "cd templates/starter && browser-sync start --config bs-config.js --port 3001",
-        "start:dist": "cd src && browser-sync start --config dist-bs-config.js --port 5003",
+        "start:src": "node packages/run/serve.mjs src",
+        "start:docs": "node packages/run/serve.mjs docs",
+        "start:starter": "node packages/run/serve.mjs templates/starter --port 3001",
+        "start:dist": "node packages/run/serve.mjs src/test-prerender --port 5003",
         "prerender": "node src/scripts/manifest.render.mjs --root src",
         "prerender:docs": "node src/scripts/manifest.render.mjs --root docs",
         "prerender:starter": "node src/scripts/manifest.render.mjs --root templates/starter",
         "render": "node src/scripts/manifest.render.mjs --root src",
         "publish:starter": "cd packages/create-starter && npm publish --auth-type=web",
+        "publish:run": "cd packages/run && npm publish --auth-type=web",
         "publish:render": "cd packages/render && npm publish --auth-type=web",
         "prepublishOnly": "npm run build",
         "test": "vitest run",
@@ -35,7 +36,6 @@
         "@rollup/plugin-commonjs": "^28.0.1",
         "@rollup/plugin-node-resolve": "^15.3.0",
         "@rollup/plugin-terser": "^0.4.4",
-        "browser-sync": "^3.0.3",
         "cssnano": "^7.1.1",
         "glob": "^11.0.2",
         "puppeteer": "^24.15.0",