mnfst 0.5.203 → 0.5.204

package/lib/manifest.appwrite.data.js

@@ -2,7 +2,7 @@
 
 (function () {
 
-const MANIFEST_BUILD_VERSION = '0.5.203';
+const MANIFEST_BUILD_VERSION = '0.5.204';
 
 /* Manifest Data Sources - Appwrite Integration */
 

package/lib/manifest.data.js

@@ -2,7 +2,7 @@
 
 (function () {
 
-const MANIFEST_BUILD_VERSION = '0.5.203';
+const MANIFEST_BUILD_VERSION = '0.5.204';
 
 /* Manifest Data Sources - Configuration */
 

package/lib/manifest.integrity.json

@@ -1,6 +1,6 @@
 {
   "manifest.appwrite.auth.js": "sha384-HMJmRXnvdDBWyuteXL+DTxWM2llSCdjl4EDamEI7iHNAVlqeOCE4GDTm8ZHipPRj",
-  "manifest.appwrite.data.js": "sha384-GWqV1tsC6nmAReFVHu/Ks/0BGFrP/dx4kl1Us0p+c4V5JRzgt64+hRlkhqE03EKC",
+  "manifest.appwrite.data.js": "sha384-4mU2U/aADGu/axzp+8iGdn2Ckz0vpnPb6dLVkbkU+SN2MKE8Td8Ayj+jsIa4lnfg",
   "manifest.appwrite.presences.js": "sha384-JyVDWFT69b7Svq8J8p9tNWe2v9PZNQBY5UyhtOl1vnuHFAX0CRQ3MA9SiKq5wzNh",
   "manifest.bindings.js": "sha384-lPtMf8Ykaic9gNVZKq8Scia1881ZeMAyxer3WCIkUNwwrgzGBWto1OXADUwjvORF",
   "manifest.charts.js": "sha384-qQrjhWkIDi4oU5uQrpy8DdlMjY+gfiivBuX6mssNiFdkawgkVBvKneGgp+nd3PYJ",
@@ -11,7 +11,7 @@
   "manifest.combobox.js": "sha384-SN3XHumoebxcduFQqx5zt65/Cd10y8nuf9Gkco6UnsZ42sadRd+gvVLfWPdkkuPH",
   "manifest.components.js": "sha384-DLGSqCbnGkS87AWJ8GpKoAFP4nCosgC5SFSg6C10hH/nWu/MxI+0ntHlnFEfs++u",
   "manifest.computed.js": "sha384-GYML/e81gQfN+iDbqhPUgny8bINCyL+SrbTofoGk4hlCnLLjv51mCv42JMqq+ku5",
-  "manifest.data.js": "sha384-9g/81jTkiYnBiRW3e1s0wxmtTTUYeGcrch3ry7ki7S/Gv6B3IMEtB7F9N4zk4U9H",
+  "manifest.data.js": "sha384-xbpINo3TIpOj+PcdJ3bjNLFq+OFJWn7+F7RIRYOzrk9SJj9cmZpUfe5LLI+NS3j8",
   "manifest.datepicker.js": "sha384-8vTJYkLqqvgXgm1w1becuaRR/jUEpiLBjBJ6RsRbUr+ZkypvspD6EsssuDrX4SQq",
   "manifest.defer.js": "sha384-wXa60M2OHigi5rBurXQ7Oa8eyr5WTKs7EUn2GOru62KMdfs/LDyNegxCc9MNJFSe",
   "manifest.device.js": "sha384-g+txmrEszYtuOvRelTp/c1wSNR2AtllVI9rx5NPPD7DzhVUnMNughonZykv2xlBW",
@@ -28,14 +28,14 @@
   "manifest.slides.js": "sha384-3uRTkyK9XPLmnxI2+igZlpi4EyPlU/7IHj5j3BZJJ2KN455vXyk99fiXV3feO/XY",
   "manifest.status.js": "sha384-nwvUSbT+gpRMqhYx6MeBYswUMH72rY92mjgxv0vrSG7Ht7l83XYpEB6fCTbXjjfK",
   "manifest.svg.js": "sha384-qr/8H9+2cIhSXNbRWRtIdrDlTOxKlNJqwEefHvCYoiBNW/kKhPTFa109Orv/EBnb",
-  "manifest.sw.js": "sha384-Te2cSGBZQmK79BME5Zg5i7Hle5ncBSvJFI94CiGduupVSuDdBBTUstBTXpqp/QgY",
+  "manifest.sw.js": "sha384-8hvTjUEMILGzSsus1RfsHDgkpre+UFp7pr7vN0gCtw1fzTrvPauDokRuuoGur6pt",
   "manifest.tabs.js": "sha384-OIIcyaQnGS0eNYk4zgAFEDboNYect7THvUd9D0V6nqCeDOxQcoiqLrBEmmWVTTet",
   "manifest.tailwind.js": "sha384-r/Jvqb+Piz21jUts10BbVAJoKkShOdJRVFpywyi4HPIi/OfOJq5CtPyWAPbdkMgt",
   "manifest.text.edit.js": "sha384-pfhc4IPKNJokj6ldlgD+KwGLN4UoM21CNeVf2sVq/34X1Un2PUhEuyTg5itmtsXS",
   "manifest.toasts.js": "sha384-/OV32LLMJl0Iw8NoNQJ+5lgntLxjIJq/YNj5JAKS/+nUhVx4MMB9h1FOqP7zuj2M",
   "manifest.tooltips.js": "sha384-uXVVQADl6pY2Pj9i/UaSclZN7dzbKhLkmevv7Ad0+wXR8LgqodALNFrc5jZJjlwm",
   "manifest.url.parameters.js": "sha384-J2aSVBOPsoqsbafHndrWLHEDpKb4AKJAoQnVmKA4gZh5P/8HHjFWHO/lkusmG84l",
-  "manifest.utilities.js": "sha384-frvYhLP8Arx+smhzQr1nCvxuVfnjRhoG+ce8pI0H0iYqJwO7km1/3QLdBYt3uKol",
+  "manifest.utilities.js": "sha384-3PdKl/ARgpezheDE9thLyrN3sEuacROPmBALAuo/SKGHDHDBqQzXBD6ilvoMn95F",
   "manifest.virtual.js": "sha384-YwwmAsZNddajnAkLhBWtrK8edHMJOhD7cJkQi3qmm5o1Thg0wbtDU0dsfrCHKTIQ",
-  "manifest.js": "sha384-z6bjoNHfkJwD3bRcjChzuzM3y/3LrWVfc8nsApLtSXcshgJc8L4+Vz7XaV3MN6N8"
+  "manifest.js": "sha384-jH0veyUdnBMoGwHxgUQ9Yjs0UneDMI/fYIsg1U58YPZwriKJ6Rv/aoA7RbLepoGa"
 }

package/lib/manifest.js

@@ -187,6 +187,11 @@
 	// Configuration
 	const DEFAULT_VERSION = 'latest';
 
+	// The version the page booted with (data-version). Every later load —
+	// Manifest.loadPlugin(), usage sniffing — resolves against it, so a runtime
+	// load can't pull a second copy of the framework at another version.
+	let RESOLVED_VERSION = DEFAULT_VERSION;
+
 	// CDN fallback chain (first-party first). Each origin serves the npm scheme
 	// `<origin>/<pkg>@<version>/<path>`. Override order with `data-cdn`
 	// (comma-separated origins).
@@ -298,7 +303,7 @@
 	// candidate per CDN host, tried in order.
 	let _pluginBase = null;
 	function setPluginBase(b) { _pluginBase = b || null; }
-	function getPluginUrlCandidates(pluginName, version = DEFAULT_VERSION) {
+	function getPluginUrlCandidates(pluginName, version = RESOLVED_VERSION) {
 		// Hyphenated API name → dotted file name (`appwrite-auth` → appwrite.auth).
 		const fileName = pluginName.replace(/-/g, '.');
 		if (_pluginBase) {
@@ -307,7 +312,7 @@
 		}
 		return CDN_HOSTS.map(h => `${getBaseUrl(version, h)}/${hostFile(h, `manifest.${fileName}.min.js`)}`);
 	}
-	function getPluginUrl(pluginName, version = DEFAULT_VERSION) {
+	function getPluginUrl(pluginName, version = RESOLVED_VERSION) {
 		return getPluginUrlCandidates(pluginName, version)[0];
 	}
 
@@ -388,14 +393,8 @@
 		return false;
 	}
 
-	// One fetch per URL: concurrent callers share the first call's promise
-	const inflightScripts = new Map();
-
 	function injectScript(url) {
-		const shared = inflightScripts.get(url);
-		if (shared) return shared;
-
-		const promise = new Promise((resolve, reject) => {
+		return new Promise((resolve, reject) => {
 			// Same src already in the DOM (author tag, prerendered HTML, second loader run)
 			const existing = document.querySelector(`script[src="${url}"]`);
 			if (existing) {
@@ -418,16 +417,12 @@
 			script.onerror = () => { script.removeAttribute('data-mnfst-loading'); script.remove(); reject(new Error(`Failed to load ${url}`)); };
 			document.head.appendChild(script);
 		});
-
-		inflightScripts.set(url, promise);
-		promise.then(() => inflightScripts.delete(url), () => inflightScripts.delete(url));   // dedupe only while in flight
-		return promise;
 	}
 
 	// Load a plugin, falling through the CDN chain on error. A fallback insert
 	// lands after already-inserted scripts, so strict cross-plugin execution
 	// order is traded for availability in the (already degraded) fallback case.
-	async function addScript(pluginName, version = DEFAULT_VERSION) {
+	async function fetchPluginScript(pluginName, version) {
 		const urls = getPluginUrlCandidates(pluginName, version);
 		let lastErr = null;
 		for (const url of urls) {
@@ -441,6 +436,26 @@
 		throw lastErr || new Error(`Failed to load ${pluginName}`);
 	}
 
+	// One execution per plugin per page. injectScript dedupes by URL, which two
+	// versions of the same plugin slip past — and a second copy of a plugin that
+	// owns page-level state (utilities' style element and its order observer)
+	// fights the first. A failed load is forgotten so a retry can still run.
+	const pluginLoads = new Map();
+
+	async function addScript(pluginName, version = RESOLVED_VERSION) {
+		const prior = pluginLoads.get(pluginName);
+		if (prior) {
+			if (prior.version !== version) {
+				console.warn(`[Manifest Loader] ${pluginName} already loaded at ${prior.version} — ignoring request for ${version}`);
+			}
+			return prior.promise;
+		}
+		const promise = fetchPluginScript(pluginName, version);
+		pluginLoads.set(pluginName, { version, promise });
+		promise.catch(() => pluginLoads.delete(pluginName));
+		return promise;
+	}
+
 	// Resolve plugin dependencies (auto-inject required dependencies)
 	function resolveDependencies(pluginList) {
 		const resolved = [];
@@ -635,8 +650,26 @@
 		};
 	}
 
+	// A publish/render bake stamps `data-mnfst-utilities-complete` on its
+	// `<style data-mnfst-utilities>` sheet once it has verified every class
+	// scanned from the page's own HTML got a rule (Manifest's + the baked
+	// Tailwind pass — see compileUtilities in manifest.utilities.node.mjs).
+	// Only the inline `<style>` case is checked: it's synchronous, so this can
+	// run before deciding whether to fetch the Tailwind engine at all — a
+	// `<link>` sheet would need an async load first, so it's left alone
+	// (fail open: Tailwind still loads). No flag, no attribute, any read
+	// error → false, so this never skips loading the engine speculatively.
+	function staticUtilitiesFullyCovered() {
+		try {
+			const el = document.querySelector('style[data-mnfst-utilities][data-mnfst-utilities-complete]');
+			return !!el;
+		} catch (e) {
+			return false;
+		}
+	}
+
 	// Load custom Tailwind CDN script, falling through the CDN chain on error
-	async function loadTailwind(version = DEFAULT_VERSION) {
+	async function loadTailwind(version = RESOLVED_VERSION) {
 		const urls = CDN_HOSTS.map(h => `${getBaseUrl(version, h)}/${hostFile(h, 'manifest.tailwind.min.js')}`);
 		let lastErr = null;
 		for (const url of urls) {
@@ -652,7 +685,7 @@
 
 	// Expose API
 	window.Manifest = {
-		loadPlugin: function (pluginName, version = DEFAULT_VERSION) {
+		loadPlugin: function (pluginName, version = RESOLVED_VERSION) {
 			const allPlugins = [...AVAILABLE_PLUGINS, ...APPWRITE_PLUGINS, ...AUTHORING_PLUGINS, 'payments', 'chat', 'device'];
 			if (!allPlugins.includes(pluginName)) {
 				console.warn(`[Manifest Loader] Unknown plugin: ${pluginName}`);
@@ -780,6 +813,7 @@
 
 	// Parse config and load plugins
 	const config = parseDataAttributes();
+	if (config && config.version) RESOLVED_VERSION = config.version;
 	if (config && config.pluginBase) setPluginBase(config.pluginBase);
 	if (config && config.cdn) setCdnHosts(config.cdn);
 	armServiceWorker(config);
@@ -890,7 +924,7 @@
 					console.warn(`[Manifest Loader] Failed to load plugin ${pluginName}:`, error);
 				});
 			});
-			if (config.tailwind) {
+			if (config.tailwind && !staticUtilitiesFullyCovered()) {
 				pluginPromises.push(loadTailwind(config.version).catch(() => { }));
 			}
 			await Promise.all(pluginPromises);

package/lib/manifest.sw.js

@@ -16,7 +16,7 @@
 
 // Build stamps the published version here; unstamped (dev) falls back to the
 // registration URL's `v`, then 'dev'.
-const BUILD_VERSION = '0.5.203';
+const BUILD_VERSION = '0.5.204';
 const CACHE_PREFIX = 'mnfst-sw:';
 const META_CACHE = CACHE_PREFIX + 'meta';
 const SWR_CAP = 200;

package/lib/manifest.utilities.js

@@ -558,8 +558,10 @@ class TailwindCompiler {
 
         // Read any publish/render-provided static utilities sheet before the
         // first compile — its classes are skipped rather than regenerated.
+        // Fails open (never "everything covered") until this resolves —
+        // compile()'s first run awaits it, capped at 2s (see static.js).
         this.staticUtilitiesCoveredClasses = null;
-        this.detectStaticUtilitiesSheet();
+        this.staticUtilitiesReady = this.detectStaticUtilitiesSheet();
 
         // Add critical styles IMMEDIATELY - don't wait for anything
         this.addCriticalBlockingStylesSync();
@@ -1488,9 +1490,8 @@ TailwindCompiler.prototype.scanStaticClasses = async function () {
 
 // Extract classes from HTML content
 TailwindCompiler.prototype.extractClassesFromHTML = function (html, classSet) {
-    // Plain class attributes only — the leading boundary excludes Alpine's
-    // :class / x-bind:class bindings (JS expressions, not token lists)
-    const classRegex = /(?:^|[\s"'`>/])(?:[a-zA-Z][\w.-]*-)?class=["']([^"']+)["']/g;
+    // Match class attributes: class="..." or class='...'
+    const classRegex = /class=["']([^"']+)["']/g;
     let match;
 
     while ((match = classRegex.exec(html)) !== null) {
@@ -1701,8 +1702,11 @@ TailwindCompiler.prototype.fetchThemeContent = async function () {
 TailwindCompiler.prototype.extractThemeVariables = function (cssText) {
     const variables = new Map();
 
-    // Extract ALL CSS custom properties from ANY declaration block
-    const varRegex = /--([\w-]+):\s*([^;]+);/g;
+    // Extract ALL CSS custom properties from ANY declaration block. Terminator
+    // is a lookahead (`;` or `}`) rather than a consumed `;` so the last
+    // declaration in a block still matches when the author omits the
+    // trailing semicolon (valid CSS, e.g. `:root{--x:1rem}`).
+    const varRegex = /--([\w-]+):\s*([^;}]+)(?=[;}])/g;
 
     let varMatch;
     while ((varMatch = varRegex.exec(cssText)) !== null) {
@@ -3180,6 +3184,11 @@ TailwindCompiler.prototype.compile = async function () {
         if (!this.hasScannedStatic) {
             await this.scanStaticClasses();
 
+            // Wait for the static utilities sheet's covered-class read to
+            // settle (capped at 2s in detectStaticUtilitiesSheet) so this
+            // first compile decision isn't a guess — see static.js.
+            if (this.staticUtilitiesReady) await this.staticUtilitiesReady;
+
             // Fetch CSS content once for initial compilation
             const themeCss = await this.fetchThemeContent();
             if (themeCss) {
@@ -3429,40 +3438,70 @@ TailwindCompiler.prototype.classNamesFromCssText = function (cssText) {
     return classSet;
 };
 
-// Read the static sheet's covered classes once. Same-origin `<link>`/`<style>`
-// rules are read synchronously via CSSOM; if the sheet isn't accessible yet
-// (cross-origin, or not finished loading) this falls back to fetching the
-// `href` as text and re-populating the covered set when it resolves.
+// Attempt a synchronous CSSOM read of the static link's rules. Returns a Set
+// of covered classes, or null when nothing could be read — a security error
+// (cross-origin), an exception, a missing sheet, or zero rules (the link
+// hasn't finished loading, or its sheet is genuinely empty). null is never
+// distinguished from "empty": both fail open in filterStaticallyCoveredClasses
+// / stripCoveredRulesFromCss, and neither is ever treated as "everything
+// covered".
+TailwindCompiler.prototype.readStaticUtilitiesRules = function (el) {
+    try {
+        const sheet = Array.from(document.styleSheets).find(s => s.ownerNode === el);
+        const rules = sheet && sheet.cssRules;
+        if (rules && rules.length > 0) {
+            const cssText = Array.from(rules).map(r => r.cssText).join('\n');
+            return this.classNamesFromCssText(cssText);
+        }
+    } catch (e) {
+        // Cross-origin, or not yet parsed.
+    }
+    return null;
+};
+
+// Read the static sheet's covered classes once per page load. `<style>` and
+// an already-loaded `<link>` resolve synchronously. A `<link>` that hasn't
+// finished loading (or whose sheet can't be read yet) is awaited via its
+// `load`/`error` event, capped at 2s, then re-read once more; the caller
+// (compile()'s first run) awaits the returned promise so the very first
+// compile decision sees an accurate covered set rather than a guess. Fails
+// open the whole time — staticUtilitiesCoveredClasses stays null (nothing
+// covered) until a read actually succeeds, never cached as "covered".
 TailwindCompiler.prototype.detectStaticUtilitiesSheet = function () {
     this.staticUtilitiesCoveredClasses = null;
     const el = this.findStaticUtilitiesElement();
-    if (!el) return;
+    if (!el) return Promise.resolve();
 
     if (el.tagName === 'STYLE') {
         this.staticUtilitiesCoveredClasses = this.classNamesFromCssText(el.textContent || '');
-        return;
+        return Promise.resolve();
     }
 
-    try {
-        const sheet = Array.from(document.styleSheets).find(s => s.ownerNode === el);
-        const rules = sheet && sheet.cssRules;
-        if (rules && rules.length > 0) {
-            const cssText = Array.from(rules).map(r => r.cssText).join('\n');
-            this.staticUtilitiesCoveredClasses = this.classNamesFromCssText(cssText);
-            return;
-        }
-    } catch (e) {
-        // Cross-origin (or not yet parsed) — fall through to fetch.
+    const covered = this.readStaticUtilitiesRules(el);
+    if (covered) {
+        this.staticUtilitiesCoveredClasses = covered;
+        return Promise.resolve();
     }
 
-    // Placeholder so callers treat "not yet known" as "nothing covered" rather
-    // than null, until the fetch below resolves and replaces it.
-    this.staticUtilitiesCoveredClasses = new Set();
-    const href = el.getAttribute('href');
-    if (!href || typeof fetch !== 'function') return;
-    fetch(href).then(r => (r.ok ? r.text() : '')).then(text => {
-        if (text) this.staticUtilitiesCoveredClasses = this.classNamesFromCssText(text);
-    }).catch(() => {});
+    return new Promise((resolve) => {
+        let settled = false;
+        const finish = () => {
+            if (settled) return;
+            settled = true;
+            clearTimeout(timer);
+            el.removeEventListener('load', onLoad);
+            el.removeEventListener('error', onError);
+            // staticUtilitiesCoveredClasses stays null (fail open) if this
+            // still can't be read — e.g. a cross-origin sheet without CORS.
+            this.staticUtilitiesCoveredClasses = this.readStaticUtilitiesRules(el);
+            resolve();
+        };
+        const onLoad = () => finish();
+        const onError = () => finish();
+        const timer = setTimeout(finish, 2000);
+        el.addEventListener('load', onLoad, { once: true });
+        el.addEventListener('error', onError, { once: true });
+    });
 };
 
 // Drop classes already covered by the static sheet before generating rules
@@ -3831,8 +3870,13 @@ function injectTailwindVariants() {
 }
 injectTailwindVariants();
 
-// Initialize immediately without waiting for DOMContentLoaded
-const compiler = new TailwindCompiler();
+// One compiler per page: a second copy would own a rival #manifest-styles and
+// the two order observers would re-append their own style to <head> forever.
+// A compiler whose style element left the document is stale, so it is rebuilt.
+const existingCompiler = window.ManifestUtilities;
+const compiler = (existingCompiler && existingCompiler.styleElement && existingCompiler.styleElement.isConnected)
+    ? existingCompiler
+    : new TailwindCompiler();
 
 // Expose utilities compiler for optional integration
 window.ManifestUtilities = compiler;
@@ -3856,11 +3900,14 @@ if ('PerformanceObserver' in window) {
 }
 
 // Recompile on DOMContentLoaded for late-added elements
-document.addEventListener('DOMContentLoaded', () => {
-    if (!compiler.usesStaticPrerenderUtilities && !compiler.isCompiling) {
-        compiler.compile();
-    }
-});
+if (!compiler.__mnfstDomReadyBound) {
+    compiler.__mnfstDomReadyBound = true;
+    document.addEventListener('DOMContentLoaded', () => {
+        if (!compiler.usesStaticPrerenderUtilities && !compiler.isCompiling) {
+            compiler.compile();
+        }
+    });
+}
 
 
 

package/lib/manifest.utilities.node.mjs

@@ -1,5 +1,25 @@
 /* manifest.utilities.node.mjs — built from scripts/utilities/ (DOM-free) */
 
+if (typeof globalThis.window === 'undefined') globalThis.window = globalThis;
+if (typeof globalThis.document === 'undefined') {
+    const inertElement = () => ({ style: {}, textContent: '', classList: { add(){}, remove(){}, contains: () => false }, setAttribute(){}, appendChild(){}, insertBefore(){} });
+    globalThis.document = {
+        documentElement: { outerHTML: '' },
+        head: { firstChild: null, lastElementChild: null, innerHTML: '', appendChild(){}, insertBefore(){} },
+        querySelectorAll: () => [],
+        querySelector: () => null,
+        getElementById: () => null,
+        getElementsByTagName: () => [],
+        createElement: inertElement,
+        addEventListener(){},
+        styleSheets: []
+    };
+}
+if (typeof globalThis.getComputedStyle === 'undefined') globalThis.getComputedStyle = () => ({ getPropertyValue: () => '' });
+if (typeof globalThis.localStorage === 'undefined') globalThis.localStorage = { getItem: () => null, setItem(){}, removeItem(){} };
+if (typeof globalThis.performance === 'undefined') globalThis.performance = { now: () => Date.now() };
+if (typeof globalThis.requestAnimationFrame === 'undefined') globalThis.requestAnimationFrame = (cb) => setTimeout(cb, 0);
+
 // Utility generators
 // Functions that generate CSS utilities from CSS variable suffixes
 
@@ -556,8 +576,10 @@ class TailwindCompiler {
 
         // Read any publish/render-provided static utilities sheet before the
         // first compile — its classes are skipped rather than regenerated.
+        // Fails open (never "everything covered") until this resolves —
+        // compile()'s first run awaits it, capped at 2s (see static.js).
         this.staticUtilitiesCoveredClasses = null;
-        this.detectStaticUtilitiesSheet();
+        this.staticUtilitiesReady = this.detectStaticUtilitiesSheet();
 
         // Add critical styles IMMEDIATELY - don't wait for anything
         this.addCriticalBlockingStylesSync();
@@ -902,9 +924,8 @@ TailwindCompiler.prototype.scanStaticClasses = async function () {
 
 // Extract classes from HTML content
 TailwindCompiler.prototype.extractClassesFromHTML = function (html, classSet) {
-    // Plain class attributes only — the leading boundary excludes Alpine's
-    // :class / x-bind:class bindings (JS expressions, not token lists)
-    const classRegex = /(?:^|[\s"'`>/])(?:[a-zA-Z][\w.-]*-)?class=["']([^"']+)["']/g;
+    // Match class attributes: class="..." or class='...'
+    const classRegex = /class=["']([^"']+)["']/g;
     let match;
 
     while ((match = classRegex.exec(html)) !== null) {
@@ -1115,8 +1136,11 @@ TailwindCompiler.prototype.fetchThemeContent = async function () {
 TailwindCompiler.prototype.extractThemeVariables = function (cssText) {
     const variables = new Map();
 
-    // Extract ALL CSS custom properties from ANY declaration block
-    const varRegex = /--([\w-]+):\s*([^;]+);/g;
+    // Extract ALL CSS custom properties from ANY declaration block. Terminator
+    // is a lookahead (`;` or `}`) rather than a consumed `;` so the last
+    // declaration in a block still matches when the author omits the
+    // trailing semicolon (valid CSS, e.g. `:root{--x:1rem}`).
+    const varRegex = /--([\w-]+):\s*([^;}]+)(?=[;}])/g;
 
     let varMatch;
     while ((varMatch = varRegex.exec(cssText)) !== null) {
@@ -2594,6 +2618,11 @@ TailwindCompiler.prototype.compile = async function () {
         if (!this.hasScannedStatic) {
             await this.scanStaticClasses();
 
+            // Wait for the static utilities sheet's covered-class read to
+            // settle (capped at 2s in detectStaticUtilitiesSheet) so this
+            // first compile decision isn't a guess — see static.js.
+            if (this.staticUtilitiesReady) await this.staticUtilitiesReady;
+
             // Fetch CSS content once for initial compilation
             const themeCss = await this.fetchThemeContent();
             if (themeCss) {
@@ -2775,6 +2804,13 @@ TailwindCompiler.prototype.compile = async function () {
 // buildUtilitiesNodeModule) with the DOM-free subset of the browser plugin's
 // subscripts (generators, variants, main, helpers, compile) so this exports
 // the exact same generation logic the browser JIT runs, with no document.
+//
+// compileUtilities() also runs the real `tailwindcss` engine (see the
+// "Tailwind engine pass" section below) — a real, lazily-imported dependency
+// used only there, via Node's fs/require by default, or via the `tailwind`
+// option for runtimes (e.g. Workers) that bundle the engine/CSS themselves
+// instead; every other export in this file stays dependency-free and
+// DOM-free as before.
 
 /** A bare TailwindCompiler instance carrying only what the pure generation
  * methods (generateUtilitiesFromVars, generateCustomUtilities, parseClassName,
@@ -2798,23 +2834,190 @@ function createNodeCompiler() {
     return instance;
 }
 
+// --- Tailwind engine pass -------------------------------------------------
+// Bakes the plain Tailwind-style utilities (flex, gap-2, rounded-full,
+// w-[37px], md:, hover:, …) that the runtime's bundled Tailwind engine
+// (lib/manifest.tailwind.js — a Tailwind v4 "Play CDN" browser build) would
+// otherwise generate live. Uses the real `tailwindcss` package's compile()/
+// build() — the same core compiler that browser build wraps, not a fork —
+// which is pure JS with no native binding and no DOM requirement.
+//
+// The browser engine reads only `<style type="text/tailwindcss">` tags
+// (default: `@import "tailwindcss";` plus whatever such tags are on the
+// page) and derives its candidates from `document.querySelectorAll("[class]")`
+// — it does not see Manifest's theme vars, so this mirrors that: no bridging
+// of `themeCss` into Tailwind's `@theme`. The custom variants below mirror
+// injectTailwindVariants() in manifest.utilities.init.js — keep both in sync.
+const TAILWIND_CUSTOM_VARIANTS = [
+    '@custom-variant touch (@media (pointer: coarse));',
+    '@custom-variant cursor (@media (pointer: fine) and (hover: hover));',
+    '@custom-variant pointer (@media (any-pointer: fine));',
+    '@custom-variant mac (&:where([data-os="macos"] *));',
+    '@custom-variant windows (&:where([data-os="windows"] *));',
+    '@custom-variant linux (&:where([data-os="linux"] *));',
+    '@custom-variant ios (&:where([data-os="ios"] *));',
+    '@custom-variant android (&:where([data-os="android"] *));',
+    '@custom-variant apple (&:where([data-os="macos"] *, [data-os="ios"] *));',
+    '@custom-variant online (&:where([data-online="true"] *));',
+    '@custom-variant offline (&:where([data-online="false"] *));',
+    '@custom-variant standalone (&:where([data-standalone] *));',
+    '@custom-variant native (&:where([data-native] *));',
+    '@custom-variant web (&:where(html:not([data-native]) *));'
+].join('\n');
+
+/** Balanced-brace extraction of a top-level `@layer <name> { ... }` body —
+ * the compiled CSS nests braces (media queries, `&:hover`), so a regex can't
+ * safely find the matching close brace. Returns '' when the layer is absent. */
+function extractLayerBody(css, layerName) {
+    const marker = `@layer ${layerName} {`;
+    const start = css.indexOf(marker);
+    if (start === -1) return '';
+    let depth = 1;
+    let i = start + marker.length;
+    const bodyStart = i;
+    for (; i < css.length && depth > 0; i++) {
+        if (css[i] === '{') depth++;
+        else if (css[i] === '}') depth--;
+    }
+    return css.slice(bodyStart, i - 1).trim();
+}
+
+let _tailwindEnginePromise = null;
+/** Lazily loads tailwindcss's compile() plus its theme.css/utilities.css text
+ * — the expensive, reusable I/O (dynamic import, two fs reads). Cached
+ * across calls; resolves to null (fail open) when the package or Node's
+ * fs/require aren't available in this runtime (e.g. a bare Workers isolate),
+ * so callers degrade to Manifest-only utilities rather than throwing.
+ *
+ * `injected`, when given, skips the fs/require path entirely: a caller that
+ * already has the engine and CSS in hand (a bundler-built Workers isolate,
+ * which has no `fs`/`require` — see the `tailwind` param on compileUtilities)
+ * supplies `{ engine, themeCss, utilitiesCss }`, where `engine` is the
+ * imported `tailwindcss` module namespace (its `compile` export is used).
+ * Not cached on `_tailwindEnginePromise`: cheap (no I/O, just wrapping
+ * already-resident values) and the caller owns the instance's lifetime.
+ *
+ * Deliberately skips tailwindcss/preflight.css: the browser engine's own
+ * default `@import "tailwindcss"` — see `jo`/`Io` in lib/manifest.tailwind.js
+ * — wires up only theme.css and utilities.css and leaves preflight empty, so
+ * matching it means never importing preflight here either (Manifest ships
+ * its own reset; the runtime never asks Tailwind for one). */
+function loadTailwindEngine(injected) {
+    if (injected) {
+        const { engine, themeCss, utilitiesCss } = injected;
+        if (!engine || typeof engine.compile !== 'function' || !themeCss || !utilitiesCss) {
+            return Promise.resolve(null);
+        }
+        return Promise.resolve({ compile: engine.compile, base: '/', themeCss, utilitiesCss });
+    }
+    if (_tailwindEnginePromise) return _tailwindEnginePromise;
+    _tailwindEnginePromise = (async () => {
+        try {
+            const { compile } = await import('tailwindcss');
+            const fs = await import('node:fs');
+            const path = await import('node:path');
+            const { createRequire } = await import('node:module');
+            const req = createRequire(import.meta.url);
+            const themePath = req.resolve('tailwindcss/theme.css');
+            const utilitiesPath = req.resolve('tailwindcss/utilities.css');
+            const themeCss = fs.readFileSync(themePath, 'utf8');
+            const utilitiesCss = fs.readFileSync(utilitiesPath, 'utf8');
+            const base = path.dirname(themePath);
+            return { compile, base, themeCss, utilitiesCss };
+        } catch (e) {
+            return null;
+        }
+    })();
+    return _tailwindEnginePromise;
+}
+
+/** Runs the real Tailwind engine over exactly `classes`, returning its
+ * (tree-shaken, used-only) `theme` and `utilities` layer bodies as a single
+ * CSS chunk. Returns '' when Tailwind can't be loaded here, or produced no
+ * utility rules for these classes (the default theme's font/spacing tokens
+ * would otherwise show up even for a class list with no real Tailwind match
+ * — e.g. Manifest's own `.row`/`.col` — since they're always defined; only
+ * emit the theme chunk alongside actual utility output).
+ *
+ * `injected` is passed straight through to loadTailwindEngine — see there.
+ *
+ * A fresh compiler is built per call (~a few ms — see loadTailwindEngine for
+ * the cached, reusable part): tailwindcss's compiler.build() is an
+ * incremental/watch-mode API that accumulates every candidate it has ever
+ * seen, so reusing one compiler across calls with different class lists
+ * would leak earlier calls' classes into later output — the same reason the
+ * browser engine tracks its own "already seen" set (see the header comment)
+ * before calling build(). */
+async function compileTailwindPass(classes, injected) {
+    if (!classes.length) return '';
+    const engine = await loadTailwindEngine(injected);
+    if (!engine) return '';
+    try {
+        const { compile, base, themeCss, utilitiesCss } = engine;
+        const input = `@layer theme, base, components, utilities;\n@import "tailwindcss/theme" layer(theme);\n@import "tailwindcss/utilities" layer(utilities);\n${TAILWIND_CUSTOM_VARIANTS}\n`;
+        const compiler = await compile(input, {
+            base,
+            loadStylesheet: async (id) => {
+                if (id === 'tailwindcss/theme') return { base, content: themeCss };
+                if (id === 'tailwindcss/utilities') return { base, content: utilitiesCss };
+                throw new Error(`manifest utilities: cannot load "${id}" for Tailwind bake`);
+            },
+            loadModule: async () => { throw new Error('manifest utilities: Tailwind plugins unsupported in bake'); }
+        });
+        const css = compiler.build(classes);
+        const utilities = extractLayerBody(css, 'utilities');
+        if (!utilities) return '';
+        const theme = extractLayerBody(css, 'theme');
+        const parts = [];
+        if (theme) parts.push(`@layer theme {\n${theme}\n}`);
+        parts.push(`@layer utilities {\n${utilities}\n}`);
+        return parts.join('\n\n');
+    } catch (e) {
+        return '';
+    }
+}
+
 /**
- * Compile the utility CSS the browser plugin would produce for exactly
- * `classes` — variants, theme-variable-driven utilities (generateUtilitiesFromVars)
- * and custom utilities (generateCustomUtilities) discovered in `themeCss`/`baseCss`.
+ * Compile the utility CSS the browser plugin (Manifest's own generators) plus
+ * the framework's bundled Tailwind engine would together produce for exactly
+ * `classes`. Manifest side: variants, theme-variable-driven utilities
+ * (generateUtilitiesFromVars) and custom utilities (generateCustomUtilities)
+ * discovered in `themeCss`/`baseCss`. Tailwind side: whatever real Tailwind
+ * utilities (`flex`, `gap-2`, `rounded-full`, arbitrary values like
+ * `w-[37px]`, and their variants) the class list resolves to, via the actual
+ * `tailwindcss` compiler (see compileTailwindPass above) — not a fork.
  * Deterministic for a given (classes, themeCss, baseCss) triple.
  *
- * @param {{classes?: string[], themeCss?: string, baseCss?: string}} options
+ * `baseCss` should include the framework's own utility CSS (lib/manifest.css)
+ * whenever the caller isn't already loading it: the browser plugin's compile()
+ * finds it for free via discoverCssFiles() scanning the page's own
+ * stylesheets, so generateCustomUtilities() recognises Manifest's semantic
+ * utilities (.row, .col, .center, …) and bakes variants like `md:row` or
+ * `hover:col-wrap`. Without it those variants are silently skipped here —
+ * scripts/utilities-static.mjs loads it automatically for this reason.
+ *
+ * `tailwind`, when given, is passed to the Tailwind engine pass instead of
+ * its default lazy `fs`/`require` load — `{ engine, themeCss, utilitiesCss }`
+ * where `engine` is the imported `tailwindcss` module namespace and the two
+ * CSS strings are the contents of `tailwindcss/theme.css` and
+ * `tailwindcss/utilities.css`. For runtimes that can statically import
+ * `tailwindcss` and inline its CSS at bundle time but have no `fs`/`require`
+ * to read them from node_modules at runtime (e.g. a Cloudflare Workers
+ * isolate) — see loadTailwindEngine. Omit it (the default) to keep using the
+ * Node/CLI fs-based load.
+ *
+ * @param {{classes?: string[], themeCss?: string, baseCss?: string, tailwind?: {engine: object, themeCss: string, utilitiesCss: string}}} options
  * @returns {Promise<string>}
  */
-export async function compileUtilities({ classes = [], themeCss = '', baseCss = '' } = {}) {
+export async function compileUtilities({ classes = [], themeCss = '', baseCss = '', tailwind = null } = {}) {
     const compiler = createNodeCompiler();
     const cssText = [baseCss, themeCss].filter(Boolean).join('\n');
+    const uniqueClasses = Array.from(new Set(classes));
 
     const discovered = compiler.extractCustomUtilities(cssText);
     for (const [name, value] of discovered) compiler.customUtilities.set(name, value);
 
-    const usedData = { classes: Array.from(new Set(classes)), variableSuffixes: [] };
+    const usedData = { classes: uniqueClasses, variableSuffixes: [] };
 
     const varUtilities = compiler.generateUtilitiesFromVars(cssText, usedData);
     const customUtilities = compiler.generateCustomUtilities(usedData);
@@ -2822,7 +3025,10 @@ export async function compileUtilities({ classes = [], themeCss = '', baseCss =
     let allUtilities = [varUtilities, customUtilities].filter(Boolean).join('\n\n');
     allUtilities = compiler.sortUtilities(allUtilities);
 
-    return allUtilities ? `@layer utilities {\n${allUtilities}\n}` : '';
+    const manifestLayer = allUtilities ? `@layer utilities {\n${allUtilities}\n}` : '';
+    const tailwindLayer = await compileTailwindPass(uniqueClasses, tailwind);
+
+    return [manifestLayer, tailwindLayer].filter(Boolean).join('\n\n');
 }
 
 // `class:token=` (per-class conditional binding) and the `:class="..."`

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mnfst",
-    "version": "0.5.203",
+    "version": "0.5.204",
     "private": false,
     "workspaces": [
         "templates/starter",
@@ -20,6 +20,9 @@
         "README.md",
         "LICENSE"
     ],
+    "dependencies": {
+        "tailwindcss": "^4.2.4"
+    },
     "scripts": {
         "clean": "rimraf src/styles/manifest.css src/styles/manifest.min.css src/styles/manifest.theme.css src/styles/manifest.code.css src/styles/manifest.code.min.css lib",
         "build": "cd src && node scripts/build.mjs",
@@ -58,7 +61,6 @@
         "puppeteer": "^24.15.0",
         "rimraf": "^5.0.0",
         "rollup": "^4.24.2",
-        "tailwindcss": "^4.2.4",
         "vitest": "^4.1.2"
     },
     "keywords": [