mnfst 0.5.123 → 0.5.125

package/lib/manifest.code.js

@@ -714,8 +714,10 @@ async function setupCodeGroup(group) {
         // That way the tablist can have its own overflow-x scrolling (when
         // there are too many tabs to fit) without dragging sibling header
         // content into the scroll region. CSS targets the inner element via
-        // [role="tablist"] — no extra class needed.
+        // [role="tablist"]. The unstyle class opts out of the generic tab
+        // bar styling in manifest.form.css; manifest.code.css styles it.
         tablist = document.createElement('div');
+        tablist.className = 'unstyle';
         tablist.setAttribute('role', 'tablist');
         tablist.setAttribute('aria-label', 'Code examples');
         header.appendChild(tablist);

package/lib/manifest.css

@@ -2360,8 +2360,9 @@
 
 @layer components {
 
-    /* Group wrapper */
-    :where([role=group]:has(button, input, select)):not(.unstyle) {
+    /* Group & tab bar wrappers */
+    :where([role=group]:has(button, [role=button], input, select),
+        [role=tablist]:not(:has(>:not(button, a, [role=button], [role=tab], template)))):not(.unstyle) {
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
@@ -2378,20 +2379,6 @@
             }
         }
 
-        &>*:first-child {
-            border-start-end-radius: 0;
-            border-end-end-radius: 0
-        }
-
-        &>*:not(:first-child):not(:last-child) {
-            border-radius: 0
-        }
-
-        &>*:last-child {
-            border-start-start-radius: 0;
-            border-end-start-radius: 0
-        }
-
         &.even>* {
             flex-shrink: initial;
             width: 100%
@@ -2400,6 +2387,80 @@
         & input {
             width: fit-content
         }
+
+        /* Groups connect children with shared borders */
+        &:where([role=group]) {
+
+            &>*:first-child {
+                border-start-end-radius: 0;
+                border-end-end-radius: 0
+            }
+
+            &>*:not(:first-child):not(:last-child) {
+                border-radius: 0
+            }
+
+            &>*:last-child {
+                border-start-start-radius: 0;
+                border-end-start-radius: 0
+            }
+        }
+
+        /* Tab bar track */
+        &[role=tablist] {
+            position: relative;
+            isolation: isolate;
+            gap: calc(var(--spacing, 0.25rem) * 0.5);
+            height: var(--spacing-field-height, calc(var(--spacing) * 9));
+            padding: calc(var(--spacing, 0.25rem) / 2);
+            background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
+            border-radius: var(--radius, 0.5rem);
+            anchor-scope: --selected-tab;
+
+            /* Concentric corners */
+            &>* {
+                height: 100%;
+                background-color: transparent;
+                border-radius: max(calc(var(--radius, 0.5rem) - var(--spacing, 0.25rem) / 2), 0px);
+
+                &:hover:not(.selected, [aria-selected=true], [aria-current]) {
+                    background-color: color-mix(in oklch, var(--color-field-surface-hover, oklch(37.1% 0 0)) 40%, transparent)
+                }
+            }
+
+            /* Selected tab */
+            &>:is(.selected, [aria-selected=true], [aria-current]) {
+                background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 75%, var(--color-field-inverse, oklch(43.9% 0 0)));
+                box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+            }
+
+            /* Background slider for selected tab) */
+            @supports (anchor-scope: --tab) {
+
+                &>:is(.selected, [aria-selected=true], [aria-current]) {
+                    /* --co-anchor lets inline anchor-name writers (e.g. tooltips) compose with the slider anchor */
+                    anchor-name: --selected-tab;
+                    --co-anchor: --selected-tab;
+                    background-color: transparent;
+                    box-shadow: none;
+                }
+
+                &:has(>:is(.selected, [aria-selected=true], [aria-current]))::before {
+                    content: "";
+                    position: absolute;
+                    z-index: -1;
+                    position-anchor: --selected-tab;
+                    top: anchor(top);
+                    left: anchor(left);
+                    width: anchor-size(width);
+                    height: anchor-size(height);
+                    background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 75%, var(--color-field-inverse, oklch(43.9% 0 0)));
+                    border-radius: max(calc(var(--radius, 0.5rem) - var(--spacing, 0.25rem) / 2), 0px);
+                    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+                    transition: all 0.15s ease-in-out;
+                }
+            }
+        }
     }
 
     :where(form):not(.unstyle) {

package/lib/manifest.data.js

@@ -10177,49 +10177,27 @@ function registerFilesDirective() {
         let cleanupCallbacks = [];
         let watchCreated = false; // Track if watch has been created to prevent duplicates
 
-        // CRITICAL: Always create a NEW isolated x-data scope for this directive element
-        // This ensures complete isolation - each directive instance has its own scope
-        // We MUST do this even if a parent scope exists, to prevent property conflicts
         const directiveInstanceId = `directive-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 
-        // Create a unique x-data object for this directive instance
-        // This ensures Alpine creates a completely new scope for this element
+        // Isolated reactive scope for this directive instance. Alpine never
+        // re-reads x-data attributes on initialized elements, so editing the
+        // attribute would resolve $data(el) to the ANCESTOR scope and pollute
+        // it — addScopeToNode attaches a fresh scope layer to this node.
         const isolatedData = Alpine.reactive({
             files: [],
             loadingFiles: false,
             filesError: null
         });
+        const removeIsolatedScope = Alpine.addScopeToNode(el, isolatedData);
+        cleanupCallbacks.push(removeIsolatedScope);
 
-        // Set x-data attribute with a unique object reference
-        // Alpine will create a new scope from this, completely isolated from parent scopes
-        el.setAttribute('x-data', `{}`);
-
-        // Get the scope AFTER setting x-data (Alpine creates it when x-data is set)
-        let scope;
-        try {
-            scope = Alpine.$data(el);
-        } catch (e) {
-            // If Alpine hasn't initialized yet, create scope manually
-            scope = {};
-            Alpine.initTree(el);
-            scope = Alpine.$data(el);
-        }
-
-        // CRITICAL: Directly assign properties to the scope object
-        // Since this is a NEW isolated scope, we can safely assign directly without conflicts
-        scope.files = isolatedData.files;
-        scope.loadingFiles = isolatedData.loadingFiles;
-        scope.filesError = isolatedData.filesError;
+        // Merged scope view: writes to files/loadingFiles/filesError land on
+        // isolatedData (top of stack), magics like $watch resolve from ancestors
+        const scope = Alpine.$data(el);
 
         // Store reference in WeakMap for access in closures
         dataFilesNamespaces.set(el, isolatedData);
 
-        // DIAGNOSTIC: Log scope identity and element info
-        const scopeId = `scope-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        scope._debugScopeId = scopeId;
-        scope._debugDirectiveId = directiveInstanceId;
-        scope._debugElement = el;
-
         // Initialize local references
         files = isolatedData.files;
         loadingFiles = isolatedData.loadingFiles;
@@ -10584,7 +10562,6 @@ function registerFilesDirective() {
                     watchCreated = true; // Mark watch as created to prevent duplicates
                     const projectId = currentProjectId; // Capture project ID for closure
                     let isProcessing = false; // Guard against multiple simultaneous updates
-                    let isInitializing = true; // Skip first evaluation (initialization)
 
                     // Initialize lastFileIds with current value from the store to prevent false positives
                     const store = Alpine.store('data');
@@ -10616,12 +10593,6 @@ function registerFilesDirective() {
                             return JSON.stringify(currentProject.fileIds || []);
                         },
                         (currentFileIdsJson) => {
-                            // Skip first evaluation (initialization) - we already loaded files above
-                            if (isInitializing) {
-                                isInitializing = false;
-                                return;
-                            }
-
                             // Guard against processing multiple updates simultaneously
                             if (isProcessing) {
                                 return;

package/lib/manifest.dropdowns.js

@@ -10,11 +10,13 @@ document.addEventListener('pointerdown', () => { lastInputModality = 'mouse'; },
 
 // Initialize plugin when either DOM is ready or Alpine is ready
 function initializeDropdownPlugin() {
-    // Ensure Alpine.js context exists for directives to work
+    // Ensure Alpine.js context exists for directives to work. Keep the scope
+    // empty — seeding properties here collides with author state and the
+    // tabs plugin's page-level `tab` property.
     function ensureAlpineContext() {
         const body = document.body;
         if (!body.hasAttribute('x-data')) {
-            body.setAttribute('x-data', '{ tab: \'local-data\' }');
+            body.setAttribute('x-data', '{}');
         }
     }
 

package/lib/manifest.form.css

@@ -2,8 +2,9 @@
 
 @layer components {
 
-    /* Group wrapper */
-    :where([role=group]:has(button, input, select)):not(.unstyle) {
+    /* Group & tab bar wrappers */
+    :where([role=group]:has(button, [role=button], input, select),
+        [role=tablist]:not(:has(>:not(button, a, [role=button], [role=tab], template)))):not(.unstyle) {
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
@@ -20,20 +21,6 @@
             }
         }
 
-        &>*:first-child {
-            border-start-end-radius: 0;
-            border-end-end-radius: 0
-        }
-
-        &>*:not(:first-child):not(:last-child) {
-            border-radius: 0
-        }
-
-        &>*:last-child {
-            border-start-start-radius: 0;
-            border-end-start-radius: 0
-        }
-
         &.even>* {
             flex-shrink: initial;
             width: 100%
@@ -42,6 +29,80 @@
         & input {
             width: fit-content
         }
+
+        /* Groups connect children with shared borders */
+        &:where([role=group]) {
+
+            &>*:first-child {
+                border-start-end-radius: 0;
+                border-end-end-radius: 0
+            }
+
+            &>*:not(:first-child):not(:last-child) {
+                border-radius: 0
+            }
+
+            &>*:last-child {
+                border-start-start-radius: 0;
+                border-end-start-radius: 0
+            }
+        }
+
+        /* Tab bar track */
+        &[role=tablist] {
+            position: relative;
+            isolation: isolate;
+            gap: calc(var(--spacing, 0.25rem) * 0.5);
+            height: var(--spacing-field-height, calc(var(--spacing) * 9));
+            padding: calc(var(--spacing, 0.25rem) / 2);
+            background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
+            border-radius: var(--radius, 0.5rem);
+            anchor-scope: --selected-tab;
+
+            /* Concentric corners */
+            &>* {
+                height: 100%;
+                background-color: transparent;
+                border-radius: max(calc(var(--radius, 0.5rem) - var(--spacing, 0.25rem) / 2), 0px);
+
+                &:hover:not(.selected, [aria-selected=true], [aria-current]) {
+                    background-color: color-mix(in oklch, var(--color-field-surface-hover, oklch(37.1% 0 0)) 40%, transparent)
+                }
+            }
+
+            /* Selected tab */
+            &>:is(.selected, [aria-selected=true], [aria-current]) {
+                background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 75%, var(--color-field-inverse, oklch(43.9% 0 0)));
+                box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+            }
+
+            /* Background slider for selected tab) */
+            @supports (anchor-scope: --tab) {
+
+                &>:is(.selected, [aria-selected=true], [aria-current]) {
+                    /* --co-anchor lets inline anchor-name writers (e.g. tooltips) compose with the slider anchor */
+                    anchor-name: --selected-tab;
+                    --co-anchor: --selected-tab;
+                    background-color: transparent;
+                    box-shadow: none;
+                }
+
+                &:has(>:is(.selected, [aria-selected=true], [aria-current]))::before {
+                    content: "";
+                    position: absolute;
+                    z-index: -1;
+                    position-anchor: --selected-tab;
+                    top: anchor(top);
+                    left: anchor(left);
+                    width: anchor-size(width);
+                    height: anchor-size(height);
+                    background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 75%, var(--color-field-inverse, oklch(43.9% 0 0)));
+                    border-radius: max(calc(var(--radius, 0.5rem) - var(--spacing, 0.25rem) / 2), 0px);
+                    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+                    transition: all 0.15s ease-in-out;
+                }
+            }
+        }
     }
 
     :where(form):not(.unstyle) {

package/lib/manifest.integrity.json

@@ -3,13 +3,13 @@
   "manifest.appwrite.data.js": "sha384-00ulLT+GAIuPHA/rRT9p98vYlsyDzkyKXtg86BDQ6FGQa5vVVN+W6kuforniBAsz",
   "manifest.appwrite.presence.js": "sha384-uxRpx9/Jj0kGtklH5QmUlAzD3zdSvFRfK6bcJQqxl+Bsf5tOo4zgwqJTQgtZoHQP",
   "manifest.charts.js": "sha384-k4nJoXhwjdAg2LzM8uLsE8SMGDczYnUee1kR7OCzBOcX2N5UQ1v78Pndv9JrvCqq",
-  "manifest.code.js": "sha384-0uQckfvrEyDVV1Er8SpciZM5egnBzgJG4QFl7ZNdFOWiNLkENeLcRjJKzPLlQO6G",
+  "manifest.code.js": "sha384-nP6DncLx/UuJtloyVKMCOXwIBAq32DshTb/Lc0vVRBWX7kSbxiBnY5aEyqqvK8Kg",
   "manifest.color.js": "sha384-Z9G/lzt0vVMxjz4wkPuGG1X9mmQAJR15aOoGX3ephf7r2wnlUWet5GLgkUMtT4vt",
   "manifest.colorpicker.js": "sha384-Wqz0ZIbeIi7KarqqqSLsQk+7E/fMaKhb32hrq5/eWzX1yjqMrpPZKH8y+jZ3mfg+",
   "manifest.components.js": "sha384-73CB1A+LAGfNexkd7aT69APFSHMzix8irse9uzOkYehHHio4px3oR8JHJeaMH+jI",
-  "manifest.data.js": "sha384-AAdxm3uR/K3GKztxqbLNK+eMSXvAD6nQWdmSMJeSGQ05mcp4tnjLRI4zPMkmBTxa",
+  "manifest.data.js": "sha384-PZiaRsDV4nnRGvmT8y2jEZV+BolcEZGJXbMJU75YqWGXI8b3y/L93zhhllovf4Go",
   "manifest.datepicker.js": "sha384-ZKSSEm04AoMBpra/R0guKGUrLMMqmo3nqPvVb2b3akfDQeirPfYTHOMzAw+6KIGE",
-  "manifest.dropdowns.js": "sha384-oT+pTLJg3PzPCVAj7AC44hbTmmsq4+uHd9VrkG27RVrDH4ms0Vnf1MKak9sG81dX",
+  "manifest.dropdowns.js": "sha384-PFn6K1PCD3ict0j7yN25EH4EhMfpRsfR51B0GJB75jM9J7NlXquJkbY6s7SxXlib",
   "manifest.export.js": "sha384-RsTGzsPCBw3yO4+TdAGd4F+o3FnzUNlqnMBqtnn/kUfv7axpzRdPc2AnsExV/93c",
   "manifest.icons.js": "sha384-uOkboYrovjCpl22eey3Jaxpey+pOnot5NDnRRumcRxiR7IOVaRh1i20gYnWXR5dW",
   "manifest.localization.js": "sha384-M3HRb2Ma8PemfFeqq9rgWgw/+Vdb/8d5LGW2MFbVsXaWUPqr/mPuxWtl5Pv8wolL",
@@ -20,11 +20,11 @@
   "manifest.slides.js": "sha384-3uRTkyK9XPLmnxI2+igZlpi4EyPlU/7IHj5j3BZJJ2KN455vXyk99fiXV3feO/XY",
   "manifest.status.js": "sha384-7cEl+Nh729ncqy5GtRYMqo5R4d257QPsoFm/hx9Znp9uV/D85pjxVzQ1fhiD+sO6",
   "manifest.svg.js": "sha384-wPfasscODIO6pyMFNIqZ7/C12cR4QYDnVl/wYNhwBO7gFNBGrhimNzL18VTpMPIL",
-  "manifest.tabs.js": "sha384-v6Ti0zHfdLhkFHbTMg0FH6uMrThuBvZrL2PQgVBeeXhDjuN7x4MtoNWogPbAQTaD",
+  "manifest.tabs.js": "sha384-7Kb1EHIbqh1NOl8J1NMp087lcF1gVmwm55QNM3s7JamV6sYiH/WZbdnknAZFtsfW",
   "manifest.tailwind.js": "sha384-aHLvl2oSuUgy06VaBqhhByn5wWxqvnqxw6KCwehakKUS00F/s/Nb62umeASS6Y4P",
   "manifest.toasts.js": "sha384-ytd5rDbax/Ou9z23uedFXPZbxDPsk2E/pxCTq4WLvfv+os1qTI6kELp0kPp07g24",
-  "manifest.tooltips.js": "sha384-Hhip5ZN66xhDw3m0XBrKLKLpcVRz3Z9RszPKqo6xvFF0mrUgQBVZ+mZjZsXgOOjS",
+  "manifest.tooltips.js": "sha384-59szmOO26KgSq3ea//8LKy+pUzO1SkRUREjCmAUN4KVI5UTX/lKkJnJaIU888M/B",
   "manifest.url.parameters.js": "sha384-FIufiClqDx1rJpU/QUc9z/D43qClQ6Qm8rBahipbJl9BDHUvhrOsUDegmTWW7Tuf",
   "manifest.utilities.js": "sha384-+cS3BJdncunt8zYHWzGQMcNzr70GLRWkjUNavoTYj0566qStZkqVRB6BfTOlkBEJ",
-  "manifest.js": "sha384-Bj2o6IIME2mQW71aOXIUiWS/yQera+0GzS4RlE8qIZ8SAPxSoVcF6T2IsgZ3Q4Hm"
+  "manifest.js": "sha384-cAO4OK7ec8QQUhy3xd8MlFR0XPde+3LZHMrgTKs30tgxt3vXCJDL4ysZ7JUAroV4"
 }

package/lib/manifest.js

@@ -38,15 +38,6 @@
 		const prerenderMeta = document.querySelector('meta[name="manifest:prerendered"]');
 		if (!prerenderMeta || prerenderMeta.getAttribute('content') === '0') return;
 
-		// Remove baked x-for/x-if clones the prerender kept for crawlers.  Their
-		// <template> is still live, so Alpine re-renders the list/conditional on
-		// boot; dropping the baked copies first (before Alpine runs) avoids a
-		// duplicate render.  data-hydrate islands keep their baked DOM.
-		document.querySelectorAll('[data-mnfst-prerender-clone]').forEach((el) => {
-			if (el.closest && el.closest('[data-hydrate]')) return;
-			el.remove();
-		});
-
 		const blob = document.getElementById('__manifest_hydrate__');
 		if (!blob) return;
 		let entries;
@@ -149,6 +140,31 @@
 		blob.remove();
 	}
 
+	/*
+	 * Remove baked x-for/x-if clones the prerender kept for crawlers.  Their
+	 * <template> is still live, so Alpine re-renders the list/conditional on
+	 * boot; dropping the baked copies first avoids a duplicate render.
+	 * data-hydrate islands keep their baked DOM.
+	 *
+	 * Deliberately NOT part of hydratePrerenderedPage(): this wipe is
+	 * destructive, so it runs at the last safe moment — `alpine:init`, which
+	 * Alpine dispatches after its script has arrived and executed but BEFORE
+	 * it walks the DOM and re-renders x-for/x-if from their live templates.
+	 * If Alpine never arrives (CDN failure, offline), the listener never
+	 * fires and the page keeps its complete baked content instead of losing
+	 * the clones with nothing to re-render them.
+	 */
+	function removePrerenderClones() {
+		if (typeof document === 'undefined' || !document.querySelectorAll) return;
+		document.querySelectorAll('[data-mnfst-prerender-clone]').forEach((el) => {
+			if (el.closest && el.closest('[data-hydrate]')) return;
+			el.remove();
+		});
+	}
+	if (typeof document !== 'undefined') {
+		document.addEventListener('alpine:init', removePrerenderClones, { once: true });
+	}
+
 	// Run hydration BEFORE Alpine's deferred script executes.
 	//
 	// Timing: `<script defer>` runs AFTER HTML parsing finishes but BEFORE
@@ -284,32 +300,67 @@
 		return `https://cdn.jsdelivr.net/npm/alpinejs@${dataAlpine}/dist/cdn.min.js`;
 	}
 
-	// Load Alpine.js from CDN.  Called by the loader AFTER all plugin scripts
-	// have finished loading and registered their directives/magics.  We do
-	// NOT use `defer` here — defer fires at DOMContentLoaded, which may race
-	// the plugin loads; instead we wait for every plugin script's load event
-	// explicitly and then append Alpine synchronously (the script downloads
-	// but Alpine's `auto-start` hooks DOMContentLoaded if still loading, or
-	// runs immediately if past it).
-	function loadAlpine(alpineUrl = ALPINE_CDN_URL) {
-		// Fast check: Alpine already initialized
-		if (window.Alpine) {
-			return;
-		}
+	// Has DOMContentLoaded already fired?  readyState alone can't tell:
+	// 'interactive' covers both "deferred scripts still running" (DCL pending)
+	// and "DCL done, subresources still loading".  Disambiguate via the
+	// navigation timing entry, which records the event the moment it runs.
+	function domContentLoadedFired() {
+		if (document.readyState === 'complete') return true;
+		if (document.readyState === 'loading') return false;
+		try {
+			const nav = performance.getEntriesByType('navigation')[0];
+			if (nav) return nav.domContentLoadedEventEnd > 0;
+		} catch (_) { /* fall through */ }
+		return false;
+	}
 
-		// Fallback: if an existing Alpine <script> tag is already in the DOM
-		// (e.g. the fixture explicitly added one), wait for it — don't inject
-		// a second copy.
-		const existingAlpine = document.querySelector('script[src*="alpinejs"]');
-		if (existingAlpine) {
+	// Run fn once the document's deferred scripts have all executed (i.e. at
+	// or after DOMContentLoaded).  The window 'load' listener is a belt-and-
+	// braces fallback for environments where the navigation entry is missing.
+	function whenDomReady(fn) {
+		if (domContentLoadedFired()) {
+			fn();
 			return;
 		}
+		let done = false;
+		const run = () => { if (!done) { done = true; fn(); } };
+		document.addEventListener('DOMContentLoaded', run, { once: true });
+		window.addEventListener('load', run, { once: true });
+	}
 
-		const script = document.createElement('script');
-		script.src = alpineUrl;
-		// No `defer` — we're already past plugin registration, so Alpine
-		// should load and execute as soon as it arrives.
-		document.head.appendChild(script);
+	// Load Alpine.js from CDN.  Called by the loader AFTER all plugin scripts
+	// have finished loading and registered their directives/magics.
+	//
+	// Gated on DOMContentLoaded: the page's own deferred scripts register
+	// x-data components and magics via `alpine:init`, and the defer queue
+	// spins the event loop while a script is still in flight — so on a warm
+	// cache an injected Alpine script can load and EXECUTE between two
+	// deferred scripts, firing `alpine:init` before the page's registrations
+	// exist.  Waiting for DCL (which fires only after every deferred script
+	// has run) makes the ordering deterministic.  In the common cold-cache
+	// case DCL has long passed by the time the plugin loads settle, so the
+	// gate adds no delay.
+	function loadAlpine(alpineUrl = ALPINE_CDN_URL) {
+		whenDomReady(() => {
+			// Fast check: Alpine already initialized
+			if (window.Alpine) {
+				return;
+			}
+
+			// Fallback: if an existing Alpine <script> tag is already in the DOM
+			// (e.g. the fixture explicitly added one), wait for it — don't inject
+			// a second copy.
+			const existingAlpine = document.querySelector('script[src*="alpinejs"]');
+			if (existingAlpine) {
+				return;
+			}
+
+			const script = document.createElement('script');
+			script.src = alpineUrl;
+			// No `defer` — we're past plugin registration and past DCL, so
+			// Alpine should load and execute as soon as it arrives.
+			document.head.appendChild(script);
+		});
 	}
 
 	// Add a script tag to the head and wait for it to load and execute