mnfst 0.5.202 → 0.5.204

package/lib/manifest.appwrite.data.js

@@ -2,7 +2,7 @@
 
 (function () {
 
-const MANIFEST_BUILD_VERSION = '0.5.202';
+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.202';
+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-RVDH7r+lH+uw6OnE5kvgszmjJdlZjtbpYXc5+CZMtzo1gWViE0AG9AlpE+N3NvtH",
+  "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-WNojlmE9Z0vDcw+MgVQdUhQKdSjbz6ghJlHoQaJcGdaK1XCNmvx8G7kvEfozpaVl",
+  "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-zUBmvVs8MVFHnt/sNWQJ16vWTaLZUJc6egsmhU4EVpvYLvOqWo28KmusamAO/rfi",
+  "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-u8wB+Jf6SMVFSZs/Bbf15h4HpkKqWyqeri/xCCMgHbMqRu595Gu9wUBY5wafiJ87",
+  "manifest.utilities.js": "sha384-3PdKl/ARgpezheDE9thLyrN3sEuacROPmBALAuo/SKGHDHDBqQzXBD6ilvoMn95F",
   "manifest.virtual.js": "sha384-YwwmAsZNddajnAkLhBWtrK8edHMJOhD7cJkQi3qmm5o1Thg0wbtDU0dsfrCHKTIQ",
-  "manifest.js": "sha384-AmLBpm1v/K9B93ZBGNTje0ceJHA4qnlciTrPms0zjcGGRJV8f8wQ7Pcr+sOLO38w"
+  "manifest.js": "sha384-jH0veyUdnBMoGwHxgUQ9Yjs0UneDMI/fYIsg1U58YPZwriKJ6Rv/aoA7RbLepoGa"
 }

package/lib/manifest.js

@@ -650,6 +650,24 @@
 		};
 	}
 
+	// 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 = RESOLVED_VERSION) {
 		const urls = CDN_HOSTS.map(h => `${getBaseUrl(version, h)}/${hostFile(h, 'manifest.tailwind.min.js')}`);
@@ -906,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.202';
+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();
@@ -3182,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) {
@@ -3431,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

package/lib/manifest.utilities.node.mjs

@@ -576,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();
@@ -2616,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) {
@@ -2797,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,
@@ -2820,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);
@@ -2844,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.202",
+    "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": [