@maizzle/framework 6.0.14 → 6.1.0

package/dist/plugins/postcss/flattenGradients.d.ts

@@ -0,0 +1,14 @@
+import { Plugin } from "postcss";
+//#region src/plugins/postcss/flattenGradients.d.ts
+/** A gradient combo found on a DOM element. */
+interface GradientCombo {
+  /** Generated class name to emit the flat rule for. */
+  className: string;
+  /** The gradient utility class tokens present on the element. */
+  classes: string[];
+}
+declare const _default: (combos?: GradientCombo[]) => Plugin;
+declare const postcss = true;
+//#endregion
+export { GradientCombo, _default as default, postcss };
+//# sourceMappingURL=flattenGradients.d.ts.map

package/dist/plugins/postcss/flattenGradients.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flattenGradients.d.ts","names":[],"sources":["../../../src/plugins/postcss/flattenGradients.ts"],"mappings":";;;UA6BiB;;EAEf;;EAEA;;cAuCc,WAAA,SAAQ,oBAAuB;cA4HlC"}

package/dist/plugins/postcss/flattenGradients.js

@@ -0,0 +1,144 @@
+import { Rule } from "postcss";
+//#region src/plugins/postcss/flattenGradients.ts
+/**
+* postcss-flatten-gradients
+*
+* Tailwind v4 renders gradients as CSS-variable machinery split across
+* separate utility rules (`bg-linear-*`, `from-*`, `via-*`, `to-*`),
+* combining only on the element that carries every class. Email clients
+* don't support `var()` and Maizzle inlines styles, so the variables
+* never resolve and the gradient renders nothing.
+*
+* Given the per-element gradient combos (computed from the DOM by the
+* tailwindcss transformer), this plugin reads the `--tw-gradient-*`
+* values off the utility rules and emits a single flat rule per combo:
+*
+*   .bg-linear-gradient-to-bl-from-indigo-50-to-indigo-600 {
+*     background-image: linear-gradient(to bottom left,
+*       var(--color-indigo-50), var(--color-indigo-600));
+*   }
+*
+* Colors stay as `var(--color-*)` (or literals) so the downstream
+* resolveProps + lightningcss steps convert them to hex, exactly like
+* every other Tailwind color. The dead utility rules are then removed.
+*/
+const PLUGIN_NAME = "postcss-flatten-gradients";
+const GRADIENT_UTILITY_RE = /^(from|via|to)-|^bg-(linear|radial|conic)\b/;
+const GENERATED_RE = /^bg-(linear|radial|conic)-gradient-/;
+/**
+* Color-interpolation method Tailwind appends to the position (e.g.
+* `in oklab`, `in oklch longer hue`). It always trails the direction and
+* is unsupported in email, so strip from `in <space>` to the end.
+*/
+const INTERP_RE = /(?:^|\s+)in\s+\S.*$/i;
+/** Turn a single-class selector into its raw class token (`.from-\[\#f00\]` -> `from-[#f00]`). */
+function selectorToClass(selector) {
+	const match = selector.match(/^\.((?:\\.|[^\s,>+~.])+)$/);
+	if (!match) return null;
+	return match[1].replace(/\\(.)/g, "$1");
+}
+/** Strip the interpolation method so `to top in oklab` becomes `to top`. */
+function stripInterpolation(position) {
+	return position.replace(INTERP_RE, "").trim();
+}
+var flattenGradients_default = (combos = []) => {
+	return {
+		postcssPlugin: PLUGIN_NAME,
+		Once(root) {
+			if (!combos.length) return;
+			const utilities = /* @__PURE__ */ new Map();
+			root.walkRules((rule) => {
+				const cls = selectorToClass(rule.selector);
+				if (!cls || !GRADIENT_UTILITY_RE.test(cls)) return;
+				const info = utilities.get(cls) ?? {};
+				rule.each((node) => {
+					if (node.type !== "decl") return;
+					switch (node.prop) {
+						case "--tw-gradient-position":
+							info.position = node.value;
+							break;
+						case "--tw-gradient-from":
+							info.from = node.value;
+							break;
+						case "--tw-gradient-via":
+							info.via = node.value;
+							break;
+						case "--tw-gradient-to":
+							info.to = node.value;
+							break;
+						case "--tw-gradient-from-position":
+							info.fromPosition = node.value;
+							break;
+						case "--tw-gradient-via-position":
+							info.viaPosition = node.value;
+							break;
+						case "--tw-gradient-to-position":
+							info.toPosition = node.value;
+							break;
+						case "background-image": {
+							const fn = node.value.match(/^(linear|radial|conic)-gradient\(/);
+							if (fn) info.fn = fn[1];
+							break;
+						}
+					}
+				});
+				info.rule = rule;
+				utilities.set(cls, info);
+			});
+			for (const combo of combos) {
+				const fnClass = combo.classes.find((c) => /^bg-(linear|radial|conic)\b/.test(c));
+				if (!fnClass) continue;
+				const fnInfo = utilities.get(fnClass);
+				const fn = fnInfo?.fn;
+				if (!fn) continue;
+				let from;
+				let via;
+				let to;
+				let fromPosition;
+				let viaPosition;
+				let toPosition;
+				for (const cls of combo.classes) {
+					const info = utilities.get(cls);
+					if (!info) continue;
+					if (info.from !== void 0) from = info.from;
+					if (info.via !== void 0) via = info.via;
+					if (info.to !== void 0) to = info.to;
+					if (info.fromPosition !== void 0) fromPosition = info.fromPosition;
+					if (info.viaPosition !== void 0) viaPosition = info.viaPosition;
+					if (info.toPosition !== void 0) toPosition = info.toPosition;
+				}
+				from = from ?? "transparent";
+				to = to ?? "transparent";
+				const direction = fnInfo?.position ? stripInterpolation(fnInfo.position) : "";
+				const stops = [];
+				stops.push(fromPosition && fromPosition !== "0%" ? `${from} ${fromPosition}` : from);
+				if (via !== void 0) stops.push(viaPosition && viaPosition !== "50%" ? `${via} ${viaPosition}` : via);
+				stops.push(toPosition && toPosition !== "100%" ? `${to} ${toPosition}` : to);
+				const args = direction ? `${direction}, ${stops.join(", ")}` : stops.join(", ");
+				const generated = new Rule({ selector: `.${combo.className}` });
+				generated.append({
+					prop: "background-image",
+					value: `${fn}-gradient(${args})`
+				});
+				/**
+				* Insert at the position of the source utility rule (still present
+				* — removal happens below) so the gradient keeps that rule's place
+				* in the cascade. Appending to the root would move it past any
+				* later author CSS that should override it.
+				*/
+				const anchor = fnInfo?.rule;
+				if (anchor?.parent) anchor.before(generated);
+				else root.append(generated);
+			}
+			root.walkRules((rule) => {
+				const cls = selectorToClass(rule.selector);
+				if (cls && !GENERATED_RE.test(cls) && GRADIENT_UTILITY_RE.test(cls)) rule.remove();
+			});
+		}
+	};
+};
+const postcss = true;
+//#endregion
+export { flattenGradients_default as default, postcss };
+
+//# sourceMappingURL=flattenGradients.js.map

package/dist/plugins/postcss/flattenGradients.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flattenGradients.js","names":[],"sources":["../../../src/plugins/postcss/flattenGradients.ts"],"sourcesContent":["/**\n * postcss-flatten-gradients\n *\n * Tailwind v4 renders gradients as CSS-variable machinery split across\n * separate utility rules (`bg-linear-*`, `from-*`, `via-*`, `to-*`),\n * combining only on the element that carries every class. Email clients\n * don't support `var()` and Maizzle inlines styles, so the variables\n * never resolve and the gradient renders nothing.\n *\n * Given the per-element gradient combos (computed from the DOM by the\n * tailwindcss transformer), this plugin reads the `--tw-gradient-*`\n * values off the utility rules and emits a single flat rule per combo:\n *\n *   .bg-linear-gradient-to-bl-from-indigo-50-to-indigo-600 {\n *     background-image: linear-gradient(to bottom left,\n *       var(--color-indigo-50), var(--color-indigo-600));\n *   }\n *\n * Colors stay as `var(--color-*)` (or literals) so the downstream\n * resolveProps + lightningcss steps convert them to hex, exactly like\n * every other Tailwind color. The dead utility rules are then removed.\n */\n\nimport { Rule } from 'postcss'\nimport type { Plugin, Root } from 'postcss'\n\nconst PLUGIN_NAME = 'postcss-flatten-gradients'\n\n/** A gradient combo found on a DOM element. */\nexport interface GradientCombo {\n  /** Generated class name to emit the flat rule for. */\n  className: string\n  /** The gradient utility class tokens present on the element. */\n  classes: string[]\n}\n\ntype GradientFn = 'linear' | 'radial' | 'conic'\n\ninterface UtilityInfo {\n  fn?: GradientFn\n  position?: string\n  from?: string\n  via?: string\n  to?: string\n  fromPosition?: string\n  viaPosition?: string\n  toPosition?: string\n  /** The source rule, used to anchor the generated rule in the cascade. */\n  rule?: Rule\n}\n\nconst GRADIENT_UTILITY_RE = /^(from|via|to)-|^bg-(linear|radial|conic)\\b/\nconst GENERATED_RE = /^bg-(linear|radial|conic)-gradient-/\n/**\n * Color-interpolation method Tailwind appends to the position (e.g.\n * `in oklab`, `in oklch longer hue`). It always trails the direction and\n * is unsupported in email, so strip from `in <space>` to the end.\n */\nconst INTERP_RE = /(?:^|\\s+)in\\s+\\S.*$/i\n\n/** Turn a single-class selector into its raw class token (`.from-\\[\\#f00\\]` -> `from-[#f00]`). */\nfunction selectorToClass(selector: string): string | null {\n  const match = selector.match(/^\\.((?:\\\\.|[^\\s,>+~.])+)$/)\n  if (!match) return null\n  return match[1].replace(/\\\\(.)/g, '$1')\n}\n\n/** Strip the interpolation method so `to top in oklab` becomes `to top`. */\nfunction stripInterpolation(position: string): string {\n  return position.replace(INTERP_RE, '').trim()\n}\n\nexport default (combos: GradientCombo[] = []): Plugin => {\n  return {\n    postcssPlugin: PLUGIN_NAME,\n\n    Once(root: Root) {\n      if (!combos.length) return\n\n      // Index every single-class gradient utility rule by its class token.\n      const utilities = new Map<string, UtilityInfo>()\n\n      root.walkRules((rule) => {\n        const cls = selectorToClass(rule.selector)\n        if (!cls || !GRADIENT_UTILITY_RE.test(cls)) return\n\n        const info = utilities.get(cls) ?? {}\n\n        // Only read declarations directly on the rule, skipping the\n        // nested @supports overrides Tailwind adds for oklab.\n        rule.each((node) => {\n          if (node.type !== 'decl') return\n          switch (node.prop) {\n            case '--tw-gradient-position':\n              info.position = node.value\n              break\n            case '--tw-gradient-from':\n              info.from = node.value\n              break\n            case '--tw-gradient-via':\n              info.via = node.value\n              break\n            case '--tw-gradient-to':\n              info.to = node.value\n              break\n            case '--tw-gradient-from-position':\n              info.fromPosition = node.value\n              break\n            case '--tw-gradient-via-position':\n              info.viaPosition = node.value\n              break\n            case '--tw-gradient-to-position':\n              info.toPosition = node.value\n              break\n            case 'background-image': {\n              const fn = node.value.match(/^(linear|radial|conic)-gradient\\(/)\n              if (fn) info.fn = fn[1] as GradientFn\n              break\n            }\n          }\n        })\n\n        info.rule = rule\n        utilities.set(cls, info)\n      })\n\n      // Emit one flat rule per combo.\n      for (const combo of combos) {\n        const fnClass = combo.classes.find(c => /^bg-(linear|radial|conic)\\b/.test(c))\n        if (!fnClass) continue\n\n        const fnInfo = utilities.get(fnClass)\n        const fn = fnInfo?.fn\n        if (!fn) continue\n\n        let from: string | undefined\n        let via: string | undefined\n        let to: string | undefined\n        let fromPosition: string | undefined\n        let viaPosition: string | undefined\n        let toPosition: string | undefined\n\n        for (const cls of combo.classes) {\n          const info = utilities.get(cls)\n          if (!info) continue\n          if (info.from !== undefined) from = info.from\n          if (info.via !== undefined) via = info.via\n          if (info.to !== undefined) to = info.to\n          if (info.fromPosition !== undefined) fromPosition = info.fromPosition\n          if (info.viaPosition !== undefined) viaPosition = info.viaPosition\n          if (info.toPosition !== undefined) toPosition = info.toPosition\n        }\n\n        // Tailwind defaults an unset from/to to transparent (#0000).\n        from = from ?? 'transparent'\n        to = to ?? 'transparent'\n\n        const direction = fnInfo?.position ? stripInterpolation(fnInfo.position) : ''\n\n        const stops: string[] = []\n        stops.push(fromPosition && fromPosition !== '0%' ? `${from} ${fromPosition}` : from)\n        if (via !== undefined) {\n          stops.push(viaPosition && viaPosition !== '50%' ? `${via} ${viaPosition}` : via)\n        }\n        stops.push(toPosition && toPosition !== '100%' ? `${to} ${toPosition}` : to)\n\n        const args = direction ? `${direction}, ${stops.join(', ')}` : stops.join(', ')\n\n        const generated = new Rule({ selector: `.${combo.className}` })\n        generated.append({ prop: 'background-image', value: `${fn}-gradient(${args})` })\n\n        /**\n         * Insert at the position of the source utility rule (still present\n         * — removal happens below) so the gradient keeps that rule's place\n         * in the cascade. Appending to the root would move it past any\n         * later author CSS that should override it.\n         */\n        const anchor = fnInfo?.rule\n        if (anchor?.parent) {\n          anchor.before(generated)\n        } else {\n          root.append(generated)\n        }\n      }\n\n      // Remove the now-dead gradient utility rules.\n      root.walkRules((rule) => {\n        const cls = selectorToClass(rule.selector)\n        if (cls && !GENERATED_RE.test(cls) && GRADIENT_UTILITY_RE.test(cls)) {\n          rule.remove()\n        }\n      })\n    },\n  }\n}\n\nexport const postcss = true\n"],"mappings":"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"}

package/dist/server/ui/.vite/deps/_metadata.json

@@ -1,67 +1,67 @@
 {
-  "hash": "23747cad",
-  "configHash": "0b6de85b",
+  "hash": "d911c788",
+  "configHash": "f30e72cc",
   "lockfileHash": "e3b0c442",
-  "browserHash": "8b48d1b3",
+  "browserHash": "e06e436e",
   "optimized": {
     "@lucide/vue": {
       "src": "../../../../../node_modules/@lucide/vue/dist/esm/lucide-vue.mjs",
       "file": "@lucide_vue.js",
-      "fileHash": "50377f8c",
+      "fileHash": "9aa466eb",
       "needsInterop": false
     },
     "@vueuse/core": {
       "src": "../../../../../node_modules/@vueuse/core/dist/index.js",
       "file": "@vueuse_core.js",
-      "fileHash": "d92a36c7",
+      "fileHash": "ab3d1d06",
       "needsInterop": false
     },
     "@vueuse/shared": {
       "src": "../../../../../node_modules/@vueuse/shared/dist/index.js",
       "file": "@vueuse_shared.js",
-      "fileHash": "aecbfdf5",
+      "fileHash": "45075773",
       "needsInterop": false
     },
     "class-variance-authority": {
       "src": "../../../../../node_modules/class-variance-authority/dist/index.mjs",
       "file": "class-variance-authority.js",
-      "fileHash": "f5f51e55",
+      "fileHash": "16ab9b85",
       "needsInterop": false
     },
     "clsx": {
       "src": "../../../../../node_modules/clsx/dist/clsx.mjs",
       "file": "clsx.js",
-      "fileHash": "51424891",
+      "fileHash": "30b50a06",
       "needsInterop": false
     },
     "culori": {
       "src": "../../../../../node_modules/culori/src/index.js",
       "file": "culori.js",
-      "fileHash": "701d4061",
+      "fileHash": "06b22b9a",
       "needsInterop": false
     },
     "reka-ui": {
       "src": "../../../../../node_modules/reka-ui/dist/index.js",
       "file": "reka-ui.js",
-      "fileHash": "13c97ce1",
+      "fileHash": "e2455ae5",
       "needsInterop": false
     },
     "tailwind-merge": {
       "src": "../../../../../node_modules/tailwind-merge/dist/bundle-cjs.js",
       "file": "tailwind-merge.js",
-      "fileHash": "2480ed27",
+      "fileHash": "d658c1c9",
       "needsInterop": true
     },
     "vue-router": {
       "src": "../../../../../node_modules/vue-router/dist/vue-router.js",
       "file": "vue-router.js",
-      "fileHash": "ae39d1fb",
+      "fileHash": "47dd3c59",
       "needsInterop": false
     },
     "vue": {
       "src": "../../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "f2da2c76",
+      "fileHash": "b53353fd",
       "needsInterop": false
     }
   },

package/dist/server/ui/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch, watchEffect } from 'vue'
+import { ref, computed, nextTick, onMounted, onUnmounted, watch, watchEffect } from 'vue'
 import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
 import { Monitor, CodeXml, Smartphone, ChevronDown, ArrowUp, ArrowDown, CornerDownLeft, Check, Search, FileCode, FileText, Code, BookText, MailQuestion, Moon, Sun } from '@lucide/vue'
 import SidebarClose from '@/components/SidebarClose.vue'
@@ -129,16 +129,22 @@ watch(sidebarOpen, (open) => {
   localStorage.setItem('maizzle:sidebar', open ? 'open' : 'closed')
 })
 
-async function fetchTemplates() {
+async function fetchTemplates(revealActive = false) {
   const res = await fetch('/__maizzle/templates')
   templates.value = await res.json()
   loading.value = false
+  // On first load (e.g. after a dev-server restart) reveal the template being
+  // viewed so a restart doesn't leave you lost in a long sidebar.
+  if (revealActive && isPreviewRoute.value) {
+    await nextTick()
+    scrollSidebarToTemplate(route.path)
+  }
 }
 
-onMounted(fetchTemplates)
+onMounted(() => fetchTemplates(true))
 
 if ((import.meta as any).hot) {
-  (import.meta as any).hot.on('maizzle:templates-changed', fetchTemplates)
+  (import.meta as any).hot.on('maizzle:templates-changed', () => fetchTemplates())
 }
 
 const grouped = computed(() => {
@@ -169,13 +175,23 @@ const modKey = isMac ? '⌘' : 'Ctrl'
 const commandOpen = ref(false)
 const commandSearch = ref('')
 
-watch(commandOpen, (open) => {
-  if (!open) commandSearch.value = ''
-})
+/**
+ * The search survives closing the palette so you can refine a query instead
+ * of retyping it (handy when hunting through hundreds of emails). It is only
+ * cleared when an actual command runs; selecting a template keeps the query
+ * so you can come back to the same list.
+ *
+ * Reka resets its filter whenever an item is selected, which would wipe the
+ * query, so template selection restores it on the next tick.
+ */
+function closeCommandPalette(clear = false) {
+  commandOpen.value = false
+  if (clear) commandSearch.value = ''
+}
 
 
 async function copyHtml() {
-  commandOpen.value = false
+  closeCommandPalette(true)
   const slug = route.params.template as string
   if (!slug) return
   const res = await fetch(`/__maizzle/render/${slug}`)
@@ -183,7 +199,7 @@ async function copyHtml() {
 }
 
 async function copyPlaintext() {
-  commandOpen.value = false
+  closeCommandPalette(true)
   const slug = route.params.template as string
   if (!slug) return
   const res = await fetch(`/__maizzle/plaintext/${slug}`)
@@ -191,7 +207,7 @@ async function copyPlaintext() {
 }
 
 async function copySource() {
-  commandOpen.value = false
+  closeCommandPalette(true)
   const slug = route.params.template as string
   if (!slug) return
   const res = await fetch(`/__maizzle/vue-source/${slug}`)
@@ -201,44 +217,72 @@ async function copySource() {
   await navigator.clipboard.writeText(el.textContent || '')
 }
 
-const commandGrouped = computed(() => {
-  const groups: Record<string, Template[]> = {}
-
-  for (const t of templates.value) {
-    const parts = t.path.split('/')
-    const dir = parts.length > 1 ? parts.slice(0, -1).join('/') : '.'
-    if (!groups[dir]) groups[dir] = []
-    groups[dir].push(t)
-  }
-
-  return groups
-})
-
 const { contains } = useFilter({ sensitivity: 'base' })
 
-const filteredTemplatesCount = computed(() => {
+/**
+ * Cap how many template results render at once. Rendering every template as
+ * a CommandItem freezes the palette on the first keystroke in large projects
+ * (100s–1000s of templates), so we only render the matches, up to this many.
+ */
+const MAX_TEMPLATE_RESULTS = 50
+
+/**
+ * Match templates against the search in a single pass: count every match for
+ * the footer, but only group the first MAX_TEMPLATE_RESULTS for rendering.
+ */
+const templateResults = computed(() => {
+  const groups: Record<string, Template[]> = {}
   const tokens = commandSearch.value.split(/\s+/).filter(Boolean)
-  if (tokens.length === 0) return 0
-  let count = 0
+  if (tokens.length === 0) return { groups, total: 0 }
+  let total = 0
   for (const t of templates.value) {
-    const haystack = `${getFileName(t.path)} ${t.path.split('/').join(' ')}`
-    if (tokens.every(token => contains(haystack, token))) count++
+    // Include the raw path so slash-style queries (e.g. "marketing/headers")
+    // match, alongside the space-split path for whitespace tokens.
+    const haystack = `${getFileName(t.path)} ${t.path} ${t.path.split('/').join(' ')}`
+    if (!tokens.every(token => contains(haystack, token))) continue
+    total++
+    if (total <= MAX_TEMPLATE_RESULTS) {
+      const parts = t.path.split('/')
+      const dir = parts.length > 1 ? parts.slice(0, -1).join('/') : '.'
+      ;(groups[dir] ??= []).push(t)
+    }
   }
-  return count
+  return { groups, total }
 })
 
+const filteredCommandGrouped = computed(() => templateResults.value.groups)
+const filteredTemplatesCount = computed(() => templateResults.value.total)
+const templatesTruncated = computed(() => templateResults.value.total > MAX_TEMPLATE_RESULTS)
 
 function getFileName(path: string) {
   return path.split('/').pop() || path
 }
 
+/**
+ * Reveal a template in the sidebar. Jumping via the palette (or landing on a
+ * template after a dev-server restart) otherwise leaves the active item
+ * scrolled out of view in large projects.
+ */
+function scrollSidebarToTemplate(href: string) {
+  // CSS.escape the value — hrefs come from file paths and may contain
+  // characters that would otherwise break the attribute selector.
+  document.querySelector(`[data-sidebar-template=${CSS.escape(href)}]`)?.scrollIntoView({ block: 'center' })
+}
+
 function onCommandSelect(href: string) {
-  commandOpen.value = false
+  // Keep the query so navigating to a template doesn't lose the search;
+  // restore it after Reka's select-reset has wiped the filter.
+  const query = commandSearch.value
+  closeCommandPalette()
   router.push(href)
+  nextTick(() => {
+    commandSearch.value = query
+    scrollSidebarToTemplate(href)
+  })
 }
 
 function openExternal(url: string) {
-  commandOpen.value = false
+  closeCommandPalette(true)
   window.open(url, '_blank', 'noopener')
 }
 
@@ -286,7 +330,7 @@ function onWindowBlur() {
 }
 
 function toggleDarkMode() {
-  commandOpen.value = false
+  closeCommandPalette(true)
   darkMode.value = !darkMode.value
 }
 
@@ -364,8 +408,9 @@ onUnmounted(() => {
                     as-child
                     size="sm"
                     :is-active="isActive(t.href)"
+                    class="data-[active=true]:font-semibold"
                   >
-                    <RouterLink :to="t.href" class="truncate">
+                    <RouterLink :to="t.href" :data-sidebar-template="t.href" class="truncate">
                       <span class="mz-tpl-icon size-4 shrink-0 opacity-70" :class="t.path.endsWith('.md') ? 'mz-tpl-icon-md' : 'mz-tpl-icon-vue'" />
                       <span class="truncate">{{ t.name }}</span>
                     </RouterLink>
@@ -526,7 +571,7 @@ onUnmounted(() => {
 
         <!-- Templates -->
         <template v-if="commandSearch">
-          <CommandGroup v-for="(items, dir) in commandGrouped" :key="dir" :heading="String(dir)">
+          <CommandGroup v-for="(items, dir) in filteredCommandGrouped" :key="dir" :heading="String(dir)">
             <CommandItem
               v-for="t in items"
               :key="t.path"
@@ -535,7 +580,7 @@ onUnmounted(() => {
             >
               <span class="mz-tpl-icon size-3 shrink-0 opacity-70" :class="t.path.endsWith('.md') ? 'mz-tpl-icon-md' : 'mz-tpl-icon-vue'" />
               <span>{{ getFileName(t.path) }}</span>
-              <span class="sr-only">{{ ' ' + t.path.split('/').join(' ') }}</span>
+              <span class="sr-only">{{ ' ' + t.path + ' ' + t.path.split('/').join(' ') }}</span>
             </CommandItem>
           </CommandGroup>
         </template>
@@ -555,7 +600,8 @@ onUnmounted(() => {
           Close
         </span>
         <span v-if="commandSearch" class="ml-auto">
-          {{ filteredTemplatesCount }} {{ filteredTemplatesCount === 1 ? 'result' : 'results' }}
+          <template v-if="templatesTruncated">Showing {{ MAX_TEMPLATE_RESULTS }} of {{ filteredTemplatesCount }} — refine to narrow</template>
+          <template v-else>{{ filteredTemplatesCount }} {{ filteredTemplatesCount === 1 ? 'result' : 'results' }}</template>
         </span>
       </div>
     </CommandDialog>

package/dist/server/ui/components/ui/command/Command.vue

@@ -68,7 +68,10 @@ function filterItems() {
   filterState.filtered.count = itemCount
 }
 
-watch(() => filterState.search, () => {
+// Re-run on search change and whenever the item set changes, so a search
+// applied before items register (e.g. a restored query on re-open) filters
+// once those items mount instead of being stuck on "no results".
+watch([() => filterState.search, () => allItems.value.size], () => {
   filterItems()
 })
 

package/dist/server/ui/components/ui/command/CommandInput.vue

@@ -27,12 +27,13 @@ const forwardedProps = useForwardProps(delegatedProps)
 
 const { filterState } = useCommand()
 
-// Sync external v-model → internal filter
+// Sync external v-model → internal filter (immediate so a preset value
+// populates the filter when the palette re-opens)
 watch(() => props.modelValue, (val) => {
   if (val !== undefined && val !== filterState.search) {
     filterState.search = val
   }
-})
+}, { immediate: true })
 
 // Sync internal filter → external v-model
 watch(() => filterState.search, (val) => {

package/dist/transformers/tailwindcss.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tailwindcss.d.ts","names":[],"sources":["../../src/transformers/tailwindcss.ts"],"mappings":";;;;;;;;;;;;;;;;;;;iBA6EsB,YAAY,KAAK,aAAa,QAAQ,eAAe,oBAAoB,QAAQ"}
+{"version":3,"file":"tailwindcss.d.ts","names":[],"sources":["../../src/transformers/tailwindcss.ts"],"mappings":";;;;;;;;;;;;;;;;;;;iBA4JsB,YAAY,KAAK,aAAa,QAAQ,eAAe,oBAAoB,QAAQ"}

package/dist/transformers/tailwindcss.js

@@ -43,6 +43,66 @@ function buildSourceDirectives(dom, config, fromDir) {
 	if (classes.length) directives.push(`@source inline("${classes.join(" ")}");`);
 	return directives.join("\n");
 }
+const GRADIENT_FN_RE = /^bg-(linear|radial|conic)\b/;
+const GRADIENT_GENERATED_RE = /^bg-(linear|radial|conic)-gradient-/;
+const GRADIENT_STOP_RE = /^(from|via|to)-/;
+/** Rank a stop class so generated names are stable regardless of author order. */
+function stopRank(cls) {
+	const prefix = cls.startsWith("from-") ? 0 : cls.startsWith("via-") ? 1 : 2;
+	const isPosition = /^(from|via|to)-\d+%$/.test(cls) ? 1 : 0;
+	return prefix * 2 + isPosition;
+}
+/** Sanitize a class token into a valid, readable CSS class name fragment. */
+function sanitize(token) {
+	return token.replace(/[[\]#()]/g, "").replace(/[/,.%\s]+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+}
+/**
+* Detect Tailwind gradient class combinations on DOM elements.
+*
+* A gradient only works once its `bg-linear/radial/conic` direction class
+* combines with `from-*`/`via-*`/`to-*` stops on the same element. This
+* collects those per-element combos, rewrites each element to a single
+* readable class (e.g. `bg-linear-gradient-to-bl-from-indigo-50-to-indigo-600`),
+* and returns the combos so the flattenGradients plugin can emit one flat
+* `background-image` rule per unique combo.
+*/
+function collectGradientCombos(dom) {
+	const bySignature = /* @__PURE__ */ new Map();
+	const usedNames = /* @__PURE__ */ new Map();
+	walk(dom, (node) => {
+		const el = node;
+		const cls = el.attribs?.class;
+		if (!cls) return;
+		const tokens = cls.split(/\s+/).filter(Boolean);
+		const fnClass = tokens.find((t) => GRADIENT_FN_RE.test(t) && !GRADIENT_GENERATED_RE.test(t));
+		if (!fnClass) return;
+		const gradientClasses = tokens.filter((t) => GRADIENT_FN_RE.test(t) && !GRADIENT_GENERATED_RE.test(t) || GRADIENT_STOP_RE.test(t));
+		const stops = gradientClasses.filter((t) => t !== fnClass).sort((a, b) => stopRank(a) - stopRank(b) || a.localeCompare(b));
+		const ordered = [fnClass, ...stops];
+		const signature = ordered.join(" ");
+		let combo = bySignature.get(signature);
+		if (!combo) {
+			const fn = fnClass.match(GRADIENT_FN_RE)[1];
+			const parts = [fnClass.replace(new RegExp(`^bg-${fn}-?`), ""), ...stops].filter(Boolean).map(sanitize);
+			let name = `bg-${fn}-gradient${parts.length ? `-${parts.join("-")}` : ""}`;
+			const existing = usedNames.get(name);
+			if (existing && existing !== signature) {
+				let n = 2;
+				while (usedNames.has(`${name}-${n}`)) n++;
+				name = `${name}-${n}`;
+			}
+			usedNames.set(name, signature);
+			combo = {
+				className: name,
+				classes: ordered
+			};
+			bySignature.set(signature, combo);
+		}
+		const rest = tokens.filter((t) => !gradientClasses.includes(t));
+		el.attribs.class = [...rest, combo.className].join(" ");
+	});
+	return [...bySignature.values()];
+}
 /**
 * Tailwind CSS transformer.
 *
@@ -84,7 +144,16 @@ async function tailwindcss(dom, config, filePath) {
 	if (!styleTags.length) return dom;
 	const fromPath = filePath ?? resolve(process.cwd(), "template.vue");
 	const fromDir = dirname(fromPath);
-	const sourceDirectives = styleTags.some(({ cssContent }) => usesTailwind(cssContent)) ? buildSourceDirectives(dom, config, fromDir) : "";
+	const hasTailwindStyles = styleTags.some(({ cssContent }) => usesTailwind(cssContent));
+	const sourceDirectives = hasTailwindStyles ? buildSourceDirectives(dom, config, fromDir) : "";
+	/**
+	* Collect gradient combos and rewrite elements to single classes.
+	* Runs after source directives are built (so the utility classes are
+	* still scanned) and only feeds the first Tailwind style tag, whose
+	* `:root` holds the theme colors the flat rules reference.
+	*/
+	const gradientCombos = hasTailwindStyles ? collectGradientCombos(dom) : [];
+	const firstTailwindStyle = styleTags.findIndex(({ cssContent }) => usesTailwind(cssContent));
 	for (let i = 0; i < styleTags.length; i++) {
 		const { node, cssContent } = styleTags[i];
 		/**
@@ -93,10 +162,11 @@ async function tailwindcss(dom, config, filePath) {
 		* leave the directives unconsumed in the output.
 		*/
 		const fullCss = usesTailwind(cssContent) ? `${cssContent}\n${sourceDirectives}` : cssContent;
+		const combos = i === firstTailwindStyle ? gradientCombos : [];
 		try {
 			node.children = [{
 				type: "text",
-				data: await compileTailwindCss(fullCss, config, `${fromPath}?style=${i}`),
+				data: await compileTailwindCss(fullCss, config, `${fromPath}?style=${i}`, combos),
 				parent: node
 			}];
 		} catch {

package/dist/transformers/tailwindcss.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwindcss.js","names":[],"sources":["../../src/transformers/tailwindcss.ts"],"sourcesContent":["import { resolve, dirname, relative } from 'pathe'\nimport type { ChildNode, Element } from 'domhandler'\nimport { walk } from '../utils/ast/index.ts'\nimport { decodeStyleEntities } from '../utils/decodeStyleEntities.ts'\nimport { compileTailwindCss } from '../utils/compileTailwindCss.ts'\nimport type { MaizzleConfig } from '../types/config.ts'\n\n/**\n * Check if CSS content uses Tailwind features that require source scanning.\n *\n * Only CSS that imports Tailwind (or @maizzle/tailwindcss) needs @source\n * directives. Plain CSS without Tailwind imports doesn't need scanning\n * and would pass through @source directives unconsumed.\n */\nfunction usesTailwind(css: string): boolean {\n  return /((@import|@reference)\\s+[\"'](tailwindcss|@maizzle\\/tailwindcss)|@tailwind\\s)/.test(css)\n}\n\n/**\n * Build @source directives for Tailwind CSS scanning.\n *\n * Configures two types of sources:\n * 1. Exclusions for output dir and user-configured paths\n * 2. Inline source with all class attribute values from the rendered DOM,\n *    capturing classes from all components (built-in + user), dynamic\n *    expressions, and the template itself — Tailwind's scanner handles\n *    the actual class extraction from these raw values\n */\nfunction buildSourceDirectives(dom: ChildNode[], config: MaizzleConfig, fromDir: string): string {\n  const directives: string[] = []\n\n  // Exclude output dir and user-configured paths\n  const excludePaths = [\n    resolve(config.output?.path ?? 'dist'),\n    ...(config.css?.exclude ?? []).map(p => resolve(p)),\n  ]\n\n  for (const p of excludePaths) {\n    directives.push(`@source not \"${relative(fromDir, resolve(p))}\";`)\n  }\n\n  /**\n   * Inline source: collect all class attribute values from the rendered DOM.\n   * After Vue SSR, the DOM contains every class from every component\n   * (built-in framework components, user components, dynamic\n   * bindings). We pass these raw values to Tailwind's\n   * scanner via @source inline().\n   */\n  const classes: string[] = []\n  walk(dom, (n) => {\n    const cls = (n as Element).attribs?.class\n    if (cls) classes.push(cls)\n  })\n\n  if (classes.length) {\n    directives.push(`@source inline(\"${classes.join(' ')}\");`)\n  }\n\n  return directives.join('\\n')\n}\n\n/**\n * Tailwind CSS transformer.\n *\n * Compiles CSS inside <style> tags in the DOM using\n * @tailwindcss/postcss, then lowers modern CSS syntax with lightningcss.\n *\n * Configures Tailwind sources to scan:\n * - Rendered class attributes (via `@source inline`) for all classes from all components\n * - User project files (via Tailwind's auto-detection from base/from path)\n *\n * User `@source` and `@source not directives` in style tags are preserved.\n * Source directives are only added to style tags that import Tailwind.\n *\n * Runs as the first transformer in the pipeline so that subsequent\n * transformers (inliner, purge, etc.) work with fully compiled CSS.\n */\nexport async function tailwindcss(dom: ChildNode[], config: MaizzleConfig, filePath?: string): Promise<ChildNode[]> {\n  const styleTags: { node: Element; cssContent: string }[] = []\n\n  walk(dom, (node) => {\n    if ((node as Element).name !== 'style') return\n\n    const el = node as Element\n    const attrs = el.attribs\n\n    /**\n     * `raw` opts out of compilation entirely (marker is consumed here).\n     * `embed`/`data-embed` only signal \"preserve tag after inlining\"\n     * — they still need to go through compile so Tailwind/@apply\n     * resolves.\n     */\n    if ('raw' in attrs) {\n      delete el.attribs.raw\n      return\n    }\n\n    // Get text content from children and decode HTML entities\n    const rawContent = el.children\n      .filter(child => child.type === 'text')\n      .map(child => (child as any).data)\n      .join('')\n\n    if (!rawContent.trim()) return\n\n    styleTags.push({ node: el, cssContent: decodeStyleEntities(rawContent) })\n  })\n\n  if (!styleTags.length) return dom\n\n  const fromPath = filePath ?? resolve(process.cwd(), 'template.vue')\n  const fromDir = dirname(fromPath)\n\n  // Only compute source directives if at least one style tag uses Tailwind\n  const hasTailwindStyles = styleTags.some(({ cssContent }) => usesTailwind(cssContent))\n  const sourceDirectives = hasTailwindStyles\n    ? buildSourceDirectives(dom, config, fromDir)\n    : ''\n\n  for (let i = 0; i < styleTags.length; i++) {\n    const { node, cssContent } = styleTags[i]\n\n    /**\n     * Only add source directives to style tags that import Tailwind —\n     * plain CSS doesn't need them and @tailwindcss/postcss would\n     * leave the directives unconsumed in the output.\n     */\n    const fullCss = usesTailwind(cssContent)\n      ? `${cssContent}\\n${sourceDirectives}`\n      : cssContent\n\n    try {\n      const optimized = await compileTailwindCss(fullCss, config, `${fromPath}?style=${i}`)\n\n      // Replace the style tag's children with the compiled CSS\n      node.children = [{\n        type: 'text',\n        data: optimized,\n        parent: node,\n      } as any]\n    } catch {\n      /**\n       * If CSS processing fails, still replace with decoded content\n       * so HTML entities don't break the CSS.\n       */\n      node.children = [{\n        type: 'text',\n        data: cssContent,\n        parent: node,\n      } as any]\n    }\n  }\n\n  return dom\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAS,aAAa,KAAsB;CAC1C,OAAO,+EAA+E,KAAK,GAAG;AAChG;;;;;;;;;;;AAYA,SAAS,sBAAsB,KAAkB,QAAuB,SAAyB;CAC/F,MAAM,aAAuB,CAAC;CAG9B,MAAM,eAAe,CACnB,QAAQ,OAAO,QAAQ,QAAQ,MAAM,GACrC,IAAI,OAAO,KAAK,WAAW,CAAC,EAAA,CAAG,KAAI,MAAK,QAAQ,CAAC,CAAC,CACpD;CAEA,KAAK,MAAM,KAAK,cACd,WAAW,KAAK,gBAAgB,SAAS,SAAS,QAAQ,CAAC,CAAC,EAAE,GAAG;;;;;;;;CAUnE,MAAM,UAAoB,CAAC;CAC3B,KAAK,MAAM,MAAM;EACf,MAAM,MAAO,EAAc,SAAS;EACpC,IAAI,KAAK,QAAQ,KAAK,GAAG;CAC3B,CAAC;CAED,IAAI,QAAQ,QACV,WAAW,KAAK,mBAAmB,QAAQ,KAAK,GAAG,EAAE,IAAI;CAG3D,OAAO,WAAW,KAAK,IAAI;AAC7B;;;;;;;;;;;;;;;;;AAkBA,eAAsB,YAAY,KAAkB,QAAuB,UAAyC;CAClH,MAAM,YAAqD,CAAC;CAE5D,KAAK,MAAM,SAAS;EAClB,IAAK,KAAiB,SAAS,SAAS;EAExC,MAAM,KAAK;;;;;;;EASX,IAAI,SARU,GAAG,SAQG;GAClB,OAAO,GAAG,QAAQ;GAClB;EACF;EAGA,MAAM,aAAa,GAAG,SACnB,QAAO,UAAS,MAAM,SAAS,MAAM,CAAC,CACtC,KAAI,UAAU,MAAc,IAAI,CAAC,CACjC,KAAK,EAAE;EAEV,IAAI,CAAC,WAAW,KAAK,GAAG;EAExB,UAAU,KAAK;GAAE,MAAM;GAAI,YAAY,oBAAoB,UAAU;EAAE,CAAC;CAC1E,CAAC;CAED,IAAI,CAAC,UAAU,QAAQ,OAAO;CAE9B,MAAM,WAAW,YAAY,QAAQ,QAAQ,IAAI,GAAG,cAAc;CAClE,MAAM,UAAU,QAAQ,QAAQ;CAIhC,MAAM,mBADoB,UAAU,MAAM,EAAE,iBAAiB,aAAa,UAAU,CAC3C,IACrC,sBAAsB,KAAK,QAAQ,OAAO,IAC1C;CAEJ,KAAK,IAAI,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK;EACzC,MAAM,EAAE,MAAM,eAAe,UAAU;;;;;;EAOvC,MAAM,UAAU,aAAa,UAAU,IACnC,GAAG,WAAW,IAAI,qBAClB;EAEJ,IAAI;GAIF,KAAK,WAAW,CAAC;IACf,MAAM;IACN,MAAM,MALgB,mBAAmB,SAAS,QAAQ,GAAG,SAAS,SAAS,GAAG;IAMlF,QAAQ;GACV,CAAQ;EACV,QAAQ;;;;;GAKN,KAAK,WAAW,CAAC;IACf,MAAM;IACN,MAAM;IACN,QAAQ;GACV,CAAQ;EACV;CACF;CAEA,OAAO;AACT"}
+{"version":3,"file":"tailwindcss.js","names":[],"sources":["../../src/transformers/tailwindcss.ts"],"sourcesContent":["import { resolve, dirname, relative } from 'pathe'\nimport type { ChildNode, Element } from 'domhandler'\nimport { walk } from '../utils/ast/index.ts'\nimport { decodeStyleEntities } from '../utils/decodeStyleEntities.ts'\nimport { compileTailwindCss } from '../utils/compileTailwindCss.ts'\nimport type { GradientCombo } from '../plugins/postcss/flattenGradients.ts'\nimport type { MaizzleConfig } from '../types/config.ts'\n\n/**\n * Check if CSS content uses Tailwind features that require source scanning.\n *\n * Only CSS that imports Tailwind (or @maizzle/tailwindcss) needs @source\n * directives. Plain CSS without Tailwind imports doesn't need scanning\n * and would pass through @source directives unconsumed.\n */\nfunction usesTailwind(css: string): boolean {\n  return /((@import|@reference)\\s+[\"'](tailwindcss|@maizzle\\/tailwindcss)|@tailwind\\s)/.test(css)\n}\n\n/**\n * Build @source directives for Tailwind CSS scanning.\n *\n * Configures two types of sources:\n * 1. Exclusions for output dir and user-configured paths\n * 2. Inline source with all class attribute values from the rendered DOM,\n *    capturing classes from all components (built-in + user), dynamic\n *    expressions, and the template itself — Tailwind's scanner handles\n *    the actual class extraction from these raw values\n */\nfunction buildSourceDirectives(dom: ChildNode[], config: MaizzleConfig, fromDir: string): string {\n  const directives: string[] = []\n\n  // Exclude output dir and user-configured paths\n  const excludePaths = [\n    resolve(config.output?.path ?? 'dist'),\n    ...(config.css?.exclude ?? []).map(p => resolve(p)),\n  ]\n\n  for (const p of excludePaths) {\n    directives.push(`@source not \"${relative(fromDir, resolve(p))}\";`)\n  }\n\n  /**\n   * Inline source: collect all class attribute values from the rendered DOM.\n   * After Vue SSR, the DOM contains every class from every component\n   * (built-in framework components, user components, dynamic\n   * bindings). We pass these raw values to Tailwind's\n   * scanner via @source inline().\n   */\n  const classes: string[] = []\n  walk(dom, (n) => {\n    const cls = (n as Element).attribs?.class\n    if (cls) classes.push(cls)\n  })\n\n  if (classes.length) {\n    directives.push(`@source inline(\"${classes.join(' ')}\");`)\n  }\n\n  return directives.join('\\n')\n}\n\nconst GRADIENT_FN_RE = /^bg-(linear|radial|conic)\\b/\nconst GRADIENT_GENERATED_RE = /^bg-(linear|radial|conic)-gradient-/\nconst GRADIENT_STOP_RE = /^(from|via|to)-/\n\n/** Rank a stop class so generated names are stable regardless of author order. */\nfunction stopRank(cls: string): number {\n  const prefix = cls.startsWith('from-') ? 0 : cls.startsWith('via-') ? 1 : 2\n  const isPosition = /^(from|via|to)-\\d+%$/.test(cls) ? 1 : 0\n  return prefix * 2 + isPosition\n}\n\n/** Sanitize a class token into a valid, readable CSS class name fragment. */\nfunction sanitize(token: string): string {\n  return token\n    .replace(/[[\\]#()]/g, '')\n    .replace(/[/,.%\\s]+/g, '-')\n    .replace(/-+/g, '-')\n    .replace(/^-|-$/g, '')\n}\n\n/**\n * Detect Tailwind gradient class combinations on DOM elements.\n *\n * A gradient only works once its `bg-linear/radial/conic` direction class\n * combines with `from-*`/`via-*`/`to-*` stops on the same element. This\n * collects those per-element combos, rewrites each element to a single\n * readable class (e.g. `bg-linear-gradient-to-bl-from-indigo-50-to-indigo-600`),\n * and returns the combos so the flattenGradients plugin can emit one flat\n * `background-image` rule per unique combo.\n */\nfunction collectGradientCombos(dom: ChildNode[]): GradientCombo[] {\n  const bySignature = new Map<string, GradientCombo>()\n  const usedNames = new Map<string, string>()\n\n  walk(dom, (node) => {\n    const el = node as Element\n    const cls = el.attribs?.class\n    if (!cls) return\n\n    const tokens = cls.split(/\\s+/).filter(Boolean)\n    const fnClass = tokens.find(t => GRADIENT_FN_RE.test(t) && !GRADIENT_GENERATED_RE.test(t))\n    if (!fnClass) return\n\n    const gradientClasses = tokens.filter(\n      t => (GRADIENT_FN_RE.test(t) && !GRADIENT_GENERATED_RE.test(t)) || GRADIENT_STOP_RE.test(t),\n    )\n    const stops = gradientClasses.filter(t => t !== fnClass).sort((a, b) => stopRank(a) - stopRank(b) || a.localeCompare(b))\n    const ordered = [fnClass, ...stops]\n    const signature = ordered.join(' ')\n\n    let combo = bySignature.get(signature)\n    if (!combo) {\n      const fn = fnClass.match(GRADIENT_FN_RE)![1]\n      const dirRemainder = fnClass.replace(new RegExp(`^bg-${fn}-?`), '')\n      const parts = [dirRemainder, ...stops].filter(Boolean).map(sanitize)\n      let name = `bg-${fn}-gradient${parts.length ? `-${parts.join('-')}` : ''}`\n\n      // Guard against sanitize collisions from distinct combos.\n      const existing = usedNames.get(name)\n      if (existing && existing !== signature) {\n        let n = 2\n        while (usedNames.has(`${name}-${n}`)) n++\n        name = `${name}-${n}`\n      }\n      usedNames.set(name, signature)\n\n      combo = { className: name, classes: ordered }\n      bySignature.set(signature, combo)\n    }\n\n    // Replace the gradient utilities with the single generated class.\n    const rest = tokens.filter(t => !gradientClasses.includes(t))\n    el.attribs.class = [...rest, combo.className].join(' ')\n  })\n\n  return [...bySignature.values()]\n}\n\n/**\n * Tailwind CSS transformer.\n *\n * Compiles CSS inside <style> tags in the DOM using\n * @tailwindcss/postcss, then lowers modern CSS syntax with lightningcss.\n *\n * Configures Tailwind sources to scan:\n * - Rendered class attributes (via `@source inline`) for all classes from all components\n * - User project files (via Tailwind's auto-detection from base/from path)\n *\n * User `@source` and `@source not directives` in style tags are preserved.\n * Source directives are only added to style tags that import Tailwind.\n *\n * Runs as the first transformer in the pipeline so that subsequent\n * transformers (inliner, purge, etc.) work with fully compiled CSS.\n */\nexport async function tailwindcss(dom: ChildNode[], config: MaizzleConfig, filePath?: string): Promise<ChildNode[]> {\n  const styleTags: { node: Element; cssContent: string }[] = []\n\n  walk(dom, (node) => {\n    if ((node as Element).name !== 'style') return\n\n    const el = node as Element\n    const attrs = el.attribs\n\n    /**\n     * `raw` opts out of compilation entirely (marker is consumed here).\n     * `embed`/`data-embed` only signal \"preserve tag after inlining\"\n     * — they still need to go through compile so Tailwind/@apply\n     * resolves.\n     */\n    if ('raw' in attrs) {\n      delete el.attribs.raw\n      return\n    }\n\n    // Get text content from children and decode HTML entities\n    const rawContent = el.children\n      .filter(child => child.type === 'text')\n      .map(child => (child as any).data)\n      .join('')\n\n    if (!rawContent.trim()) return\n\n    styleTags.push({ node: el, cssContent: decodeStyleEntities(rawContent) })\n  })\n\n  if (!styleTags.length) return dom\n\n  const fromPath = filePath ?? resolve(process.cwd(), 'template.vue')\n  const fromDir = dirname(fromPath)\n\n  // Only compute source directives if at least one style tag uses Tailwind\n  const hasTailwindStyles = styleTags.some(({ cssContent }) => usesTailwind(cssContent))\n  const sourceDirectives = hasTailwindStyles\n    ? buildSourceDirectives(dom, config, fromDir)\n    : ''\n\n  /**\n   * Collect gradient combos and rewrite elements to single classes.\n   * Runs after source directives are built (so the utility classes are\n   * still scanned) and only feeds the first Tailwind style tag, whose\n   * `:root` holds the theme colors the flat rules reference.\n   */\n  const gradientCombos = hasTailwindStyles ? collectGradientCombos(dom) : []\n  const firstTailwindStyle = styleTags.findIndex(({ cssContent }) => usesTailwind(cssContent))\n\n  for (let i = 0; i < styleTags.length; i++) {\n    const { node, cssContent } = styleTags[i]\n\n    /**\n     * Only add source directives to style tags that import Tailwind —\n     * plain CSS doesn't need them and @tailwindcss/postcss would\n     * leave the directives unconsumed in the output.\n     */\n    const fullCss = usesTailwind(cssContent)\n      ? `${cssContent}\\n${sourceDirectives}`\n      : cssContent\n\n    const combos = i === firstTailwindStyle ? gradientCombos : []\n\n    try {\n      const optimized = await compileTailwindCss(fullCss, config, `${fromPath}?style=${i}`, combos)\n\n      // Replace the style tag's children with the compiled CSS\n      node.children = [{\n        type: 'text',\n        data: optimized,\n        parent: node,\n      } as any]\n    } catch {\n      /**\n       * If CSS processing fails, still replace with decoded content\n       * so HTML entities don't break the CSS.\n       */\n      node.children = [{\n        type: 'text',\n        data: cssContent,\n        parent: node,\n      } as any]\n    }\n  }\n\n  return dom\n}\n"],"mappings":"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"}

package/dist/utils/compileTailwindCss.d.ts

@@ -1,7 +1,8 @@
 import { MaizzleConfig } from "../types/config.js";
+import { GradientCombo } from "../plugins/postcss/flattenGradients.js";
 import postcss from "postcss";
 //#region src/utils/compileTailwindCss.d.ts
-declare function createTailwindProcessor(config: MaizzleConfig): postcss.Processor;
+declare function createTailwindProcessor(config: MaizzleConfig, gradientCombos?: GradientCombo[]): postcss.Processor;
 declare function lowerCssSyntax(css: string): string;
 declare function optimizeTailwindCss(css: string, config: MaizzleConfig): Promise<string>;
 /**
@@ -9,7 +10,7 @@ declare function optimizeTailwindCss(css: string, config: MaizzleConfig): Promis
  * runs @tailwindcss/postcss, lowers modern syntax via lightningcss,
  * then applies cleanup + media-query merging.
  */
-declare function compileTailwindCss(cssInput: string, config: MaizzleConfig, from: string): Promise<string>;
+declare function compileTailwindCss(cssInput: string, config: MaizzleConfig, from: string, gradientCombos?: GradientCombo[]): Promise<string>;
 //#endregion
 export { compileTailwindCss, createTailwindProcessor, lowerCssSyntax, optimizeTailwindCss };
 //# sourceMappingURL=compileTailwindCss.d.ts.map

package/dist/utils/compileTailwindCss.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compileTailwindCss.d.ts","names":[],"sources":["../../src/utils/compileTailwindCss.ts"],"mappings":";;;iBAagB,wBAAwB,QAAQ,gBAAa,QAAA;iBAe7C,eAAe;iBAWT,oBAAoB,aAAa,QAAQ,gBAAgB;;;;;;iBAgBzD,mBACpB,kBACA,QAAQ,eACR,eACC"}
+{"version":3,"file":"compileTailwindCss.d.ts","names":[],"sources":["../../src/utils/compileTailwindCss.ts"],"mappings":";;;;iBAcgB,wBAAwB,QAAQ,eAAe,iBAAgB,kBAAoB,QAAA;iBAkBnF,eAAe;iBAWT,oBAAoB,aAAa,QAAQ,gBAAgB;;;;;;iBAgBzD,mBACpB,kBACA,QAAQ,eACR,cACA,iBAAgB,kBACf"}

package/dist/utils/compileTailwindCss.js

@@ -1,5 +1,6 @@
 import resolveProps_default from "../plugins/postcss/resolveProps.js";
 import pruneVars_default from "../plugins/postcss/pruneVars.js";
+import flattenGradients_default from "../plugins/postcss/flattenGradients.js";
 import { tailwindCleanup } from "../plugins/postcss/tailwindCleanup.js";
 import { mergeMediaQueries } from "../plugins/postcss/mergeMediaQueries.js";
 import { quoteFontFamilies } from "../plugins/postcss/quoteFontFamilies.js";
@@ -10,7 +11,7 @@ import postcssCalc from "postcss-calc";
 import safeParser from "postcss-safe-parser";
 import { transform } from "lightningcss";
 //#region src/utils/compileTailwindCss.ts
-function createTailwindProcessor(config) {
+function createTailwindProcessor(config, gradientCombos = []) {
 	return postcss([
 		resolveMaizzleImports(),
 		tailwindcssPostcss({
@@ -18,6 +19,7 @@ function createTailwindProcessor(config) {
 			transformAssetUrls: false,
 			optimize: false
 		}),
+		flattenGradients_default(gradientCombos),
 		resolveProps_default(),
 		postcssCalc({}),
 		pruneVars_default()
@@ -43,8 +45,8 @@ async function optimizeTailwindCss(css, config) {
 * runs @tailwindcss/postcss, lowers modern syntax via lightningcss,
 * then applies cleanup + media-query merging.
 */
-async function compileTailwindCss(cssInput, config, from) {
-	return optimizeTailwindCss(lowerCssSyntax((await createTailwindProcessor(config).process(cssInput, {
+async function compileTailwindCss(cssInput, config, from, gradientCombos = []) {
+	return optimizeTailwindCss(lowerCssSyntax((await createTailwindProcessor(config, gradientCombos).process(cssInput, {
 		from,
 		parser: safeParser
 	})).css), config);

package/dist/utils/compileTailwindCss.js.map

@@ -1 +1 @@
-{"version":3,"file":"compileTailwindCss.js","names":["resolveProps","pruneVars"],"sources":["../../src/utils/compileTailwindCss.ts"],"sourcesContent":["import postcss from 'postcss'\nimport tailwindcssPostcss from '@tailwindcss/postcss'\nimport postcssCalc from 'postcss-calc'\nimport safeParser from 'postcss-safe-parser'\nimport { transform } from 'lightningcss'\nimport resolveProps from '../plugins/postcss/resolveProps.ts'\nimport pruneVars from '../plugins/postcss/pruneVars.ts'\nimport { tailwindCleanup } from '../plugins/postcss/tailwindCleanup.ts'\nimport { mergeMediaQueries } from '../plugins/postcss/mergeMediaQueries.ts'\nimport { quoteFontFamilies } from '../plugins/postcss/quoteFontFamilies.ts'\nimport { resolveMaizzleImports } from '../plugins/postcss/resolveMaizzleImports.ts'\nimport type { MaizzleConfig } from '../types/config.ts'\n\nexport function createTailwindProcessor(config: MaizzleConfig) {\n  return postcss([\n    // Must run before @tailwindcss/postcss so it sees absolute import paths\n    resolveMaizzleImports(),\n    tailwindcssPostcss({\n      base: config.css?.base,\n      transformAssetUrls: false,\n      optimize: false,\n    }),\n    resolveProps(),\n    postcssCalc({}),\n    pruneVars(),\n  ])\n}\n\nexport function lowerCssSyntax(css: string): string {\n  const result = transform({\n    filename: 'email.css',\n    code: new TextEncoder().encode(css),\n    minify: false,\n    targets: { ie: 4 << 5 },\n  })\n\n  return new TextDecoder().decode(result.code)\n}\n\nexport async function optimizeTailwindCss(css: string, config: MaizzleConfig): Promise<string> {\n  const plugins: postcss.Plugin[] = [...tailwindCleanup(config), quoteFontFamilies()]\n\n  const mediaPlugin = mergeMediaQueries(config)\n  if (mediaPlugin) plugins.push(mediaPlugin)\n\n  const result = await postcss(plugins).process(css, { from: undefined })\n\n  return result.css\n}\n\n/**\n * Compile a Tailwind CSS source string into final email-safe CSS:\n * runs @tailwindcss/postcss, lowers modern syntax via lightningcss,\n * then applies cleanup + media-query merging.\n */\nexport async function compileTailwindCss(\n  cssInput: string,\n  config: MaizzleConfig,\n  from: string,\n): Promise<string> {\n  const processor = createTailwindProcessor(config)\n  const result = await processor.process(cssInput, { from, parser: safeParser })\n  const lowered = lowerCssSyntax(result.css)\n  return optimizeTailwindCss(lowered, config)\n}\n"],"mappings":";;;;;;;;;;;;AAaA,SAAgB,wBAAwB,QAAuB;CAC7D,OAAO,QAAQ;EAEb,sBAAsB;EACtB,mBAAmB;GACjB,MAAM,OAAO,KAAK;GAClB,oBAAoB;GACpB,UAAU;EACZ,CAAC;EACDA,qBAAa;EACb,YAAY,CAAC,CAAC;EACdC,kBAAU;CACZ,CAAC;AACH;AAEA,SAAgB,eAAe,KAAqB;CAClD,MAAM,SAAS,UAAU;EACvB,UAAU;EACV,MAAM,IAAI,YAAY,CAAC,CAAC,OAAO,GAAG;EAClC,QAAQ;EACR,SAAS,EAAE,IAAI,IAAO;CACxB,CAAC;CAED,OAAO,IAAI,YAAY,CAAC,CAAC,OAAO,OAAO,IAAI;AAC7C;AAEA,eAAsB,oBAAoB,KAAa,QAAwC;CAC7F,MAAM,UAA4B,CAAC,GAAG,gBAAgB,MAAM,GAAG,kBAAkB,CAAC;CAElF,MAAM,cAAc,kBAAkB,MAAM;CAC5C,IAAI,aAAa,QAAQ,KAAK,WAAW;CAIzC,QAAO,MAFc,QAAQ,OAAO,CAAC,CAAC,QAAQ,KAAK,EAAE,MAAM,KAAA,EAAU,CAAC,EAAA,CAExD;AAChB;;;;;;AAOA,eAAsB,mBACpB,UACA,QACA,MACiB;CAIjB,OAAO,oBADS,gBAAe,MAFb,wBAAwB,MACb,CAAC,CAAC,QAAQ,UAAU;EAAE;EAAM,QAAQ;CAAW,CAAC,EAAA,CACvC,GACL,GAAG,MAAM;AAC5C"}
+{"version":3,"file":"compileTailwindCss.js","names":["flattenGradients","resolveProps","pruneVars"],"sources":["../../src/utils/compileTailwindCss.ts"],"sourcesContent":["import postcss from 'postcss'\nimport tailwindcssPostcss from '@tailwindcss/postcss'\nimport postcssCalc from 'postcss-calc'\nimport safeParser from 'postcss-safe-parser'\nimport { transform } from 'lightningcss'\nimport resolveProps from '../plugins/postcss/resolveProps.ts'\nimport pruneVars from '../plugins/postcss/pruneVars.ts'\nimport flattenGradients, { type GradientCombo } from '../plugins/postcss/flattenGradients.ts'\nimport { tailwindCleanup } from '../plugins/postcss/tailwindCleanup.ts'\nimport { mergeMediaQueries } from '../plugins/postcss/mergeMediaQueries.ts'\nimport { quoteFontFamilies } from '../plugins/postcss/quoteFontFamilies.ts'\nimport { resolveMaizzleImports } from '../plugins/postcss/resolveMaizzleImports.ts'\nimport type { MaizzleConfig } from '../types/config.ts'\n\nexport function createTailwindProcessor(config: MaizzleConfig, gradientCombos: GradientCombo[] = []) {\n  return postcss([\n    // Must run before @tailwindcss/postcss so it sees absolute import paths\n    resolveMaizzleImports(),\n    tailwindcssPostcss({\n      base: config.css?.base,\n      transformAssetUrls: false,\n      optimize: false,\n    }),\n    // Flatten Tailwind's gradient var machinery into email-safe declarations\n    // before the var()/color resolution steps run.\n    flattenGradients(gradientCombos),\n    resolveProps(),\n    postcssCalc({}),\n    pruneVars(),\n  ])\n}\n\nexport function lowerCssSyntax(css: string): string {\n  const result = transform({\n    filename: 'email.css',\n    code: new TextEncoder().encode(css),\n    minify: false,\n    targets: { ie: 4 << 5 },\n  })\n\n  return new TextDecoder().decode(result.code)\n}\n\nexport async function optimizeTailwindCss(css: string, config: MaizzleConfig): Promise<string> {\n  const plugins: postcss.Plugin[] = [...tailwindCleanup(config), quoteFontFamilies()]\n\n  const mediaPlugin = mergeMediaQueries(config)\n  if (mediaPlugin) plugins.push(mediaPlugin)\n\n  const result = await postcss(plugins).process(css, { from: undefined })\n\n  return result.css\n}\n\n/**\n * Compile a Tailwind CSS source string into final email-safe CSS:\n * runs @tailwindcss/postcss, lowers modern syntax via lightningcss,\n * then applies cleanup + media-query merging.\n */\nexport async function compileTailwindCss(\n  cssInput: string,\n  config: MaizzleConfig,\n  from: string,\n  gradientCombos: GradientCombo[] = [],\n): Promise<string> {\n  const processor = createTailwindProcessor(config, gradientCombos)\n  const result = await processor.process(cssInput, { from, parser: safeParser })\n  const lowered = lowerCssSyntax(result.css)\n  return optimizeTailwindCss(lowered, config)\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgB,wBAAwB,QAAuB,iBAAkC,CAAC,GAAG;CACnG,OAAO,QAAQ;EAEb,sBAAsB;EACtB,mBAAmB;GACjB,MAAM,OAAO,KAAK;GAClB,oBAAoB;GACpB,UAAU;EACZ,CAAC;EAGDA,yBAAiB,cAAc;EAC/BC,qBAAa;EACb,YAAY,CAAC,CAAC;EACdC,kBAAU;CACZ,CAAC;AACH;AAEA,SAAgB,eAAe,KAAqB;CAClD,MAAM,SAAS,UAAU;EACvB,UAAU;EACV,MAAM,IAAI,YAAY,CAAC,CAAC,OAAO,GAAG;EAClC,QAAQ;EACR,SAAS,EAAE,IAAI,IAAO;CACxB,CAAC;CAED,OAAO,IAAI,YAAY,CAAC,CAAC,OAAO,OAAO,IAAI;AAC7C;AAEA,eAAsB,oBAAoB,KAAa,QAAwC;CAC7F,MAAM,UAA4B,CAAC,GAAG,gBAAgB,MAAM,GAAG,kBAAkB,CAAC;CAElF,MAAM,cAAc,kBAAkB,MAAM;CAC5C,IAAI,aAAa,QAAQ,KAAK,WAAW;CAIzC,QAAO,MAFc,QAAQ,OAAO,CAAC,CAAC,QAAQ,KAAK,EAAE,MAAM,KAAA,EAAU,CAAC,EAAA,CAExD;AAChB;;;;;;AAOA,eAAsB,mBACpB,UACA,QACA,MACA,iBAAkC,CAAC,GAClB;CAIjB,OAAO,oBADS,gBAAe,MAFb,wBAAwB,QAAQ,cACrB,CAAC,CAAC,QAAQ,UAAU;EAAE;EAAM,QAAQ;CAAW,CAAC,EAAA,CACvC,GACL,GAAG,MAAM;AAC5C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "6.0.14",
+  "version": "6.1.0",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",