@bamboocss/generator 1.14.0 → 1.16.0

package/dist/index.cjs

@@ -107,43 +107,13 @@ function generateConditions(ctx) {
 	};
 }
 //#endregion
-//#region src/artifacts/js/conditions.string-literal.ts
-function generateStringLiteralConditions(ctx) {
-	return {
-		js: outdent.default`
-    ${ctx.file.import("withoutSpace", "../helpers")}
-
-    export const isCondition = (val) => condRegex.test(val)
-
-    const condRegex = /^@|&|&$/
-    const selectorRegex = /&|@/
-
-    export const finalizeConditions = (paths) => {
-      return paths.map((path) => (selectorRegex.test(path) ? \`[\${withoutSpace(path.trim())}]\` : path))
-    }
-
-    export function sortConditions(paths){
-      return paths.sort((a, b) => {
-        const aa = isCondition(a)
-        const bb = isCondition(b)
-        if (aa && !bb) return 1
-        if (!aa && bb) return -1
-        return 0
-      })
-    }
-      `,
-		dts: outdent.default`
-  `
-	};
-}
-//#endregion
 //#region src/artifacts/js/css-fn.ts
 function generateCssFn(ctx) {
 	const { utility, hash, prefix, conditions } = ctx;
 	const { separator, getPropShorthands } = utility;
 	return {
 		dts: outdent.outdent`
-    ${ctx.file.importType("SystemStyleObject", "../types/index")}
+    ${ctx.file.importType("SystemStyleObject, ViewTransitionFn", "../types/index")}
 
     type Styles = SystemStyleObject | undefined | null | false
 
@@ -180,6 +150,24 @@ function generateCssFn(ctx) {
      */
     export declare function fallback(preferred: string | number, ...rest: Array<string | number>): \`fallback(\${string})\`;
 
+    /**
+     * Style the View Transitions API and get back one stable class for the bag.
+     *
+     * The class is applied through \`view-transition-class\`, so the same transition can be
+     * shared by any number of elements. You still set \`view-transition-name\` yourself —
+     * it has to be unique per element, so bamboo cannot share it for you.
+     *
+     * @example
+     * const slide = viewTransition({
+     *   group: { animationDuration: '0.4s' },
+     *   old: { animationName: 'slide-out' },
+     *   new: { animationName: 'slide-in' },
+     * })
+     *
+     * @see https://bamboocss.com/docs/concepts/view-transitions
+     */
+    export declare const viewTransition: ViewTransitionFn;
+
     /**
      * Internal. Emitted for the source transform, which rewrites a single dynamic style
      * leaf into a call to this. Not part of the authoring API.
@@ -187,8 +175,8 @@ function generateCssFn(ctx) {
     export declare const cssLeaf: (prefix: string, prop: string, value: unknown) => string;
     `,
 		js: outdent.outdent`
-    ${ctx.file.import("cloneStyles, createCss, createMergeCss, hypenateProperty, leafClass, memo, withoutSpace", "../helpers")}
-    ${ctx.file.import("sortConditions, finalizeConditions", "./conditions")}
+    ${ctx.file.import("cloneStyles, createCss, createMergeCss, hypenateProperty, leafClass, memo, viewTransitionClassName, withoutSpace", "../helpers")}
+    ${[ctx.file.import("sortConditions, finalizeConditions", "./conditions"), ctx.config.cssMode === "grouped" ? ctx.file.import("groups", "./groups") : ""].filter(Boolean).join("\n")}
 
     const utilities = "${utility.entries().map(([prop, className]) => {
 			const shorthandList = getPropShorthands(prop);
@@ -218,7 +206,7 @@ function generateCssFn(ctx) {
     `}
 
     const context = {
-      ${[hash.className && "hash: true,", ctx.config.cssMode === "grouped" && "grouped: true,"].filter(Boolean).join("\n      ")}
+      ${[hash.className && "hash: true,", ctx.config.cssMode === "grouped" && "grouped: true,\n      knownGroups: groups,"].filter(Boolean).join("\n      ")}
       conditions: {
         shift: sortConditions,
         finalize: finalizeConditions,
@@ -243,6 +231,7 @@ function generateCssFn(ctx) {
     // condition object would otherwise poison it for everyone after them.
     css.raw = (...styles) => cloneStyles(mergeCss(...styles))
 
+
     // Emitted for the source transform, which rewrites a single dynamic style leaf into a
     // call to this rather than leaving a \`css()\` behind. \`prefix\` is the class up to the
     // value, resolved at build time; \`prop\` is only used for the shapes \`leafClass\`
@@ -257,82 +246,30 @@ function generateCssFn(ctx) {
     // value reaching \`css()\` is the same literal either way.
     export const fallback = (...values) => \`fallback($\{values.join(', ')})\`
 
-    export const { mergeCss, assignCss } = createMergeCss(context)
-    `
-	};
-}
-//#endregion
-//#region src/artifacts/js/css-fn.string-literal.ts
-function generateStringLiteralCssFn(ctx) {
-	const { utility, hash, prefix } = ctx;
-	const { separator } = utility;
-	return {
-		dts: outdent.outdent`
-    ${ctx.file.importType("SystemStyleObject", "../types/index")}
-
-    type Styles =
-      | { raw: readonly string[] | ArrayLike<string> }
-      | SystemStyleObject
-      | boolean
-      | null
-      | undefined
-
-    interface CssRawFunction {
-      (...styles: Styles[]): SystemStyleObject
-    }
-
-    interface CssFunction {
-      (...styles: Styles[]): string
-
-      raw: CssRawFunction
-    }
-
-    export declare const css: CssFunction;
-    `,
-		js: outdent.outdent`
-    ${ctx.file.import("astish, cloneStyles, createCss, isObject, mergeProps, withoutSpace", "../helpers")}
-    ${ctx.file.import("finalizeConditions, sortConditions", "./conditions")}
-
-    function transform(prop, value) {
-      const className = \`$\{prop}${separator}$\{withoutSpace(value)}\`
-      return { className }
-    }
-
-    const context = {
-      hash: ${hash.className ? "true" : "false"},
-      conditions: {
-        shift: sortConditions,
-        finalize: finalizeConditions,
-        breakpoints: { keys: [] },
-      },
-      utility: {
-        prefix: ${prefix.className ? JSON.stringify(prefix.className) : void 0},
-        transform,
-        hasShorthand: false,
-        toHash: ${utility.toHash},
-        resolveShorthand(prop) {
-          return prop
-        },
-      }
-    }
-
-    const cssFn = createCss(context)
+    // The class is the whole return value — the CSS behind it was emitted at build time
+    // from the same options, hashed by this same function. A call the extractor never saw
+    // still returns a class, exactly as \`css()\` does for a value it never saw.
+    export const viewTransition = (options) => viewTransitionClassName(options, ${JSON.stringify(prefix.className ?? "")})
 
-    const fn = (style) => (isObject(style) ? style : astish(style[0]))
-    export const css = (...styles) => cssFn(mergeProps(...styles.filter(Boolean).map(fn)))
-    // Same independence guarantee as the object-syntax css.raw(), so the public
-    // API behaves identically across both syntaxes.
-    css.raw = (...styles) => cloneStyles(mergeProps(...styles.filter(Boolean).map(fn)))
+    export const { mergeCss, assignCss } = createMergeCss(context)
     `
 	};
 }
 //#endregion
 //#region src/artifacts/js/cva.ts
 function generateCvaFn(ctx) {
+	const { utility, hash, prefix } = ctx;
+	const withPrefix = prefix.className ? `(className) => className ? ${JSON.stringify(prefix.className)} + '-' + className : ${JSON.stringify(prefix.className)}` : `(className) => className`;
 	return {
 		js: outdent.outdent`
-    ${ctx.file.import("cloneStyles, compact, mergeProps, memo, splitProps, uniq", "../helpers")}
-    ${ctx.file.import("css, mergeCss", "./css")}
+    ${ctx.file.import("cloneStyles, compact, getRecipeClassNames, getRecipeIdentity, mergeProps, memo, splitProps, toHash, uniq", "../helpers")}
+    ${ctx.file.import("mergeCss", "./css")}
+
+    // What \`createCss\` does to a class name, for the recipe path: prefix it, and hash it
+    // when \`hash.className\` is set. The build applies the same two steps to the rules it
+    // emits — see \`checkNamingAgreement\`, which compares the results.
+    const withPrefix = ${withPrefix}
+    const formatRecipeClass = ${hash.className ? `(className) => withPrefix((${utility.toHash})([className], toHash))` : `withPrefix`}
 
     const defaults = (conf) => ({
       base: {},
@@ -346,6 +283,11 @@ function generateCvaFn(ctx) {
       const { base, variants, defaultVariants, compoundVariants } = defaults(config)
       const getVariantProps = (variants) => ({ ...defaultVariants, ...compact(variants) })
 
+      // Derived from the config, because the build derives it from the same config while
+      // emitting the stylesheet and the two never meet. \`className\` when the author set
+      // one, a hash of the styles otherwise.
+      const name = getRecipeIdentity(config)
+
       function resolve(props = {}) {
         const computedVariants = getVariantProps(props)
         let variantCss = { ...base }
@@ -354,6 +296,13 @@ function generateCvaFn(ctx) {
             variantCss = mergeCss(variantCss, variants[key][value])
           }
         }
+        // A recipe with no compound variants has nothing left to merge, and the merge is
+        // not free just because its second operand is empty: \`mergeCss\` is memoized on its
+        // arguments, so the call hashes the whole accumulated style object before finding
+        // there is nothing to do. Most recipes declare no compound variants at all, so
+        // this is the common shape rather than a special case.
+        if (compoundVariants.length === 0) return variantCss
+
         const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants)
         return mergeCss(variantCss, compoundVariantCss)
       }
@@ -378,10 +327,25 @@ function generateCvaFn(ctx) {
       //
       // \`raw\` still clones what it returns. The memoized object is shared, so handing it to a
       // caller that mutated it would poison every later call.
+      //
+      // A recipe whose variants are all boolean could index an array instead of hashing, and
+      // that was built and measured: +25% to +35% on \`raw()\`. It is not here because the
+      // trade is bad. Correctness needs the selection read from own enumerable keys only, and
+      // every variant to carry a boolean default so the merge order is pinned — and once that
+      // gate is honest, no \`cva\`/\`sva\` call site in this repo passes it, because real recipes
+      // mix a string variant in. The cost is unconditional: +289 B gzipped on that module for
+      // every consumer, qualifying or not.
       const resolveVariants = memo(resolve)
 
+      // The class names the build emitted rules for: the recipe's own class, plus one per
+      // selected variant. Not \`css(resolve(props))\` — that would name classes by property,
+      // and the stylesheet names this recipe's rules semantically, in the \`recipes\` layer.
+      //
+      // Compound variants are absent on purpose. Their rule selects on the variant classes
+      // already in this list — \`.btn--size_sm.btn--tone_a\` — so it applies without anything
+      // being added here, and adding a class for it would name a rule that does not exist.
       function cvaFn(props) {
-        return css(resolve(props))
+        return getRecipeClassNames(name, variants, getVariantProps(props), '${utility.separator}', formatRecipeClass)
       }
 
       const variantKeys = Object.keys(variants)
@@ -440,36 +404,55 @@ function generateCvaFn(ctx) {
 }
 //#endregion
 //#region src/artifacts/js/cx.ts
-const dts = outdent.default`
+/**
+* `cx` joins class names. It does not resolve conflicts between them, in any build.
+*
+* It used to, when the class names happened to carry a property to compare — atomic mode
+* with `hash.className` off. That made it a correctness tool in development and a plain
+* join in a hashed production build, from the same source, with no error either way. An
+* override that worked locally silently stopped working when it shipped.
+*
+* The two could not be reconciled by teaching the matcher to read hashed names.
+* `cssMode: 'grouped'` names a *whole call* with one class — `toHash(['grouped', groupId])`
+* — so there is no single property behind it to compare, whatever the naming scheme. As
+* long as grouped exists, some builds can never merge, and a `cx` that merges in the rest
+* is a behavioural difference keyed on a config flag.
+*
+* So precedence is decided where it can be decided the same way everywhere: by
+* {@link https://bamboocss.com/docs/concepts/cascade-layers cascade layers}. A component
+* whose styles a consumer will override belongs in `recipes` — write it with `cva`/`sva`,
+* not bare `css()` — and the consumer's `css()` in `utilities` wins by layer, in every
+* build. Two `css()` outputs joined with `cx` are in the same layer and resolve by source
+* order; when you own both, merge the style objects with `css(a, b)` instead.
+*/
+const declaration = outdent.default`
    type Argument = string | boolean | null | undefined | Argument[]
 
    /**
-    * Join classNames into a single string, with the last conflicting utility winning.
+    * Join classNames into a single string.
     *
-    * \`cx('px_4', 'px_2')\` is \`'px_2'\`: two classes that set the same property under the
-    * same conditions cannot both apply, and which one the browser picks would otherwise
-    * depend on their order in the stylesheet rather than on the order you passed them.
-    * Classes bamboo did not generate are left alone, duplicates included.
+    * This does **not** resolve conflicts between them: \`cx('px_4', 'px_2')\` keeps both, and
+    * the browser picks by their order in the stylesheet rather than by the order you passed
+    * them. That is true of every build — atomic, hashed and grouped alike.
+    *
+    * To override a style rather than append to it, let the cascade decide: styles from
+    * \`cva\`/\`sva\` sit in the \`recipes\` layer and \`css()\` in \`utilities\`, so a consumer's
+    * \`css()\` always wins. Between two \`css()\` calls you own, merge the objects instead —
+    * \`css(base, override)\` resolves per property before any class name exists.
     */
    export declare function cx(...args: Argument[]): string
   `;
-/**
-* The plain concatenating \`cx\`, for when the class names carry nothing to merge on.
-*
-* With \`hash.className\` every class is an opaque hash, so there is no property to compare
-* and no merge to do — emitting the matcher would only cost bytes on a path that runs in
-* the browser on every render.
-*/
-function concatOnly() {
-	return outdent.default`
+function generateCx() {
+	return {
+		js: outdent.default`
   function cx(...args) {
     let str = ''
 
     for (let i = 0; i < args.length; i++) {
       const arg = args[i]
       if (!arg) continue
-      // Arrays are part of the declared type, so this branch has to handle them even
-      // though it does no merging — returning '' for \`cx(['a', 'b'])\` would be a lie.
+      // Arrays are part of the declared type, so this branch has to handle them.
+      // Returning '' for \`cx(['a', 'b'])\` would be a lie.
       const part = Array.isArray(arg) ? cx(...arg) : typeof arg === 'string' ? arg : ''
       if (!part) continue
       str && (str += ' ')
@@ -479,185 +462,18 @@ function concatOnly() {
   }
 
   export { cx }
-`;
-}
-function generateCx(ctx) {
-	const { utility, hash, prefix } = ctx;
-	const separatorChar = utility.separator;
-	const utilityClassNames = [...new Set(utility.keys().map((key) => {
-		const withEmptyValue = utility.getClassName(utility.resolveShorthand(key), "");
-		return withEmptyValue.endsWith(separatorChar) ? withEmptyValue.slice(0, -separatorChar.length) : withEmptyValue;
-	}))].sort();
-	const recipeClassNames = [...new Set(ctx.recipes.details.map((node) => node.className))].filter(Boolean).sort();
-	if (hash.className || utilityClassNames.length === 0) return {
-		js: concatOnly(),
-		dts
-	};
-	return {
-		js: outdent.default`
-    const cxSeparator = ${JSON.stringify(utility.separator)}
-    const cxPrefix = ${prefix.className ? JSON.stringify(prefix.className + "-") : "''"}
-    const cxUtilities = new Set(${JSON.stringify(utilityClassNames.join(","))}.split(','))
-    const cxRecipes = ${recipeClassNames.length ? `new Set(${JSON.stringify(recipeClassNames.join(","))}.split(','))` : "null"}
-
-    /**
-     * The declaration a bamboo class sets: its condition path plus the property, without the
-     * value. Two classes sharing one are alternatives, and only the last can apply.
-     *
-     * \`null\` for anything that is not a bamboo class, which is then never merged.
-     */
-    function mergeKey(className) {
-      let end = className.length
-
-      // \`c_red\` and \`c_red!\` are the same declaration. Argument order decides between them,
-      // which is the point of this function — the cascade would always pick the important
-      // one no matter which the caller asked for.
-      if (end > 0 && className.charCodeAt(end - 1) === 33) end -= 1
-      if (end === 0) return null
-
-      // The last colon ends the condition path — but only one outside brackets, since an
-      // arbitrary selector carries its own: \`[&[data-x="a:b"]]:px_4\`.
-      let depth = 0
-      let lastColon = -1
-      for (let i = 0; i < end; i++) {
-        const code = className.charCodeAt(i)
-        if (code === 91) depth++
-        else if (code === 93) depth--
-        else if (code === 58 && depth === 0) lastColon = i
-      }
-
-      // Conditions come before the prefix — \`hover:bam-px_4\` — so the prefix is skipped
-      // after the condition path, not before it. When a prefix is configured every class
-      // bamboo emits carries it, so one that does not is by definition someone else's.
-      let propStart = lastColon + 1
-      if (cxPrefix) {
-        if (!className.startsWith(cxPrefix, propStart)) return null
-        propStart += cxPrefix.length
-      }
-
-      // A recipe owns its whole class, bare or with a \`--variant\` suffix, whatever it
-      // looks like to the utility matcher below.
-      if (cxRecipes !== null) {
-        const variantIdx = className.indexOf('--', propStart)
-        const base = variantIdx === -1 ? className.slice(propStart, end) : className.slice(propStart, variantIdx)
-        if (cxRecipes.has(base)) return null
-      }
-
-      // The longest registered utility name wins, not the first separator. Utility names
-      // contain the separator themselves under \`separator: '-'\` — \`bd-w\`, \`ov-x\`,
-      // \`translate-x\` — and their leading segment is often a utility too, so stopping at the
-      // first \`-\` would key \`bd-w-4px\` and \`bd-c-red\` both on \`bd\` and drop one of them.
-      let property = null
-      let sepIdx = className.indexOf(cxSeparator, propStart)
-      while (sepIdx > propStart && sepIdx < end) {
-        const candidate = className.slice(propStart, sepIdx)
-        if (cxUtilities.has(candidate)) property = candidate
-        sepIdx = className.indexOf(cxSeparator, sepIdx + 1)
-      }
-
-      // Only a class bamboo generated for a utility. A recipe class or a hand-written one
-      // may well contain the separator, and merging on the text before it would drop a
-      // class the caller meant to keep.
-      if (property === null) return null
-
-      return lastColon === -1 ? property : className.slice(0, lastColon) + ':' + property
-    }
-
-    function isClassWhitespace(code) {
-      return code === 32 || code === 9 || code === 10 || code === 12 || code === 13
-    }
-
-    function flattenParts(parts, out) {
-      for (let i = 0; i < parts.length; i++) {
-        const part = parts[i]
-        if (!part) continue
-        if (Array.isArray(part)) flattenParts(part, out)
-        else if (typeof part === 'string') out.push(part)
-      }
-    }
-
-    function mergeClassStrings(classes) {
-      const seen = new Map()
-      const order = []
-      let id = 0
-
-      for (let c = 0; c < classes.length; c++) {
-        const cls = classes[c]
-        let tokenStart = 0
-
-        for (let i = 0; i <= cls.length; i++) {
-          // The class attribute splits on all ASCII whitespace, not just the space, and a
-          // multi-line template literal is an ordinary way to write one.
-          if (i !== cls.length && !isClassWhitespace(cls.charCodeAt(i))) continue
-          if (i === tokenStart) {
-            tokenStart = i + 1
-            continue
-          }
-
-          const token = cls.slice(tokenStart, i)
-          tokenStart = i + 1
-
-          const key = mergeKey(token)
-          if (key !== null) {
-            // Keeps the first position and the last value, so a later override lands where
-            // the class it replaces already sat.
-            if (!seen.has(key)) order.push(key)
-            seen.set(key, token)
-          } else {
-            // Not ours to reason about — kept as written, duplicates and all.
-            const uniqueKey = '\\0' + id++
-            order.push(uniqueKey)
-            seen.set(uniqueKey, token)
-          }
-        }
-      }
-
-      if (order.length === 0) return ''
-      let str = seen.get(order[0])
-      for (let i = 1; i < order.length; i++) str += ' ' + seen.get(order[i])
-      return str
-    }
-
-    function cx() {
-      // Everything that produces a bamboo class string — \`css()\`, a recipe, a nested \`cx\` —
-      // emits one that is already conflict-free, so a lone string has nothing to merge and
-      // tokenizing it is pure cost. This is the hot path: \`cx(staticClasses, props.className)\`
-      // with no \`className\` passed.
-      if (arguments.length === 1) {
-        const only = arguments[0]
-        if (typeof only === 'string') return only
-        if (!only) return ''
-      }
-
-      const flat = []
-      flattenParts(arguments, flat)
-      if (flat.length === 0) return ''
-      if (flat.length === 1) return flat[0]
-      return mergeClassStrings(flat)
-    }
-
-    export { cx }
-  `,
-		dts
+`,
+		dts: declaration
 	};
 }
 //#endregion
-//#region src/artifacts/generated/astish.mjs.json
-var content$11 = "//#region src/astish.ts\nconst newRule = /(?:([\\u0080-\\uFFFF\\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\\s*)/g;\nconst ruleClean = /\\/\\*[^]*?\\*\\/|  +/g;\nconst ruleNewline = /\\n+/g;\nconst empty = \" \";\nconst astish = (val, tree = [{}]) => {\n	if (!val) return tree[0];\n	let block, left;\n	while (block = newRule.exec(val.replace(ruleClean, \"\"))) if (block[4]) tree.shift();\n	else if (block[3]) {\n		left = block[3].replace(ruleNewline, empty).trim();\n		if (!left.includes(\"&\") && !left.startsWith(\"@\")) left = \"& \" + left;\n		tree.unshift(tree[0][left] = tree[0][left] || {});\n	} else tree[0][block[1]] = block[2].replace(ruleNewline, empty).trim();\n	return tree[0];\n};\n//#endregion\nexport { astish };\n";
-//#endregion
 //#region src/artifacts/generated/helpers.mjs.json
-var content$10 = "//#region src/assert.ts\nfunction isObject(value) {\n	return typeof value === \"object\" && value != null && !Array.isArray(value);\n}\nconst isObjectOrArray = (obj) => typeof obj === \"object\" && obj !== null;\n//#endregion\n//#region src/condition.ts\nconst isBaseCondition = (v) => v === \"base\";\nfunction filterBaseConditions(c) {\n	return c.slice().filter((v) => !isBaseCondition(v));\n}\n//#endregion\n//#region src/hash.ts\nfunction toChar(code) {\n	return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n	let name = \"\";\n	let x;\n	for (x = Math.abs(code); x > 52; x = x / 52 | 0) name = toChar(x % 52) + name;\n	return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n	let i = x.length;\n	while (i) h = h * 33 ^ x.charCodeAt(--i);\n	return h;\n}\nfunction toHash(value) {\n	return toName(toPhash(5381, value) >>> 0);\n}\n//#endregion\n//#region src/important.ts\nconst importantRegex = /\\s*!(important)?/i;\nconst whitespaceRegex = /\\s/;\n/**\n* Collapse every run of whitespace to a single space, which is what the class name is\n* built from. Exported because `leafClass` has to reproduce this exact pipeline, and a\n* second copy of it would be free to drift from the one `createCss` runs.\n*/\nfunction sanitize(value) {\n	if (typeof value !== \"string\") return value;\n	const collapsed = whitespaceRegex.test(value) ? value.replaceAll(/[\\n\\s]+/g, \" \") : value;\n	return collapsed.includes(\"\\0\") ? collapsed.replaceAll(\"\\0\", \"\") : collapsed;\n}\nfunction isImportant(value) {\n	if (typeof value !== \"string\") return false;\n	return value.includes(\"!\") && importantRegex.test(value);\n}\nfunction withoutImportant(value) {\n	if (typeof value !== \"string\") return value;\n	if (!value.includes(\"!\")) return value.trim();\n	return value.replace(importantRegex, \"\").trim();\n}\nfunction withoutSpace(str) {\n	if (typeof str !== \"string\") return str;\n	return str.includes(\" \") ? str.replaceAll(\" \", \"_\") : str;\n}\n//#endregion\n//#region src/memo.ts\n/**\n* Bounded argument memo used by the generated runtime (`css`, patterns, `cva`, recipes).\n*\n* Two regimes, picked per call:\n*\n* - Arguments that are flat (objects of primitives) take a cheap structural hash\n*   and are confirmed with an exact comparison, so a hash collision can never\n*   serve the wrong result. This is the shape `css({ ... })` has.\n* - Anything nested falls back to `JSON.stringify`, which V8 does faster than a\n*   JS walk.\n*\n* The second point is the counter-intuitive one, and it has been measured rather\n* than assumed. Extending the structural hash to recurse — so nested styles could\n* take the fast path too — is *slower*, because it trades one native serialization\n* for two JS walks (hash, then the deep equality that confirms it). Over 10k\n* iterations per shape:\n*\n*     shape        stringify   recursive hash + deep equal\n*     flat            1.06ms   2.09ms\n*     _hover          1.00ms   2.16ms\n*     responsive      1.23ms   2.15ms\n*     realistic       2.32ms   5.84ms\n*     nested 3 deep   1.22ms   2.35ms\n*\n* So a nested `css()` call costing several times a flat one is not a defect here.\n* It is the floor for a value-keyed memo in JS, and the way to avoid it is to not\n* make the call — see the build-time fold in `@bamboocss/vite`.\n*\n* Both regimes key on *values*, never on object identity: mutating a style object\n* between calls changes its hash, so the next call misses and recomputes rather\n* than serving a stale class. Keying nested arguments on the identity of the inner\n* objects would skip serialization entirely, but it cannot detect a mutation, and\n* \"same object, different contents\" is exactly what a style object built per render\n* looks like.\n*\n* Both caches are bounded. An unbounded memo is a leak in any long-lived process\n* (SSR), where the set of distinct style objects grows without limit.\n*/\n/**\n* Distinct hashes held per memoized function before the cache rotates.\n*\n* This bounds *buckets*, not entries: a bucket keeps up to `MAX_BUCKET` colliding\n* argument lists, so the ceiling is `MAX_ENTRIES * MAX_BUCKET` live entries, and\n* twice that across both generations, since the previous one is retained until the\n* next rotation. Collisions are rare in practice, so the realistic figure is close\n* to `MAX_ENTRIES` — but the worst case is what matters when sizing a long-lived\n* process, so state it plainly.\n*\n* Rotation beats evicting the oldest key: single-key eviction is worst-case for a\n* working set that cycles, because it drops exactly the entry about to be needed.\n* Measured on a cycling set of 20k styles, one-at-a-time eviction cost ~719ns/op\n* against ~189ns unbounded, while rotation holds ~274ns. On realistic skewed\n* access rotation is at or below the unbounded cost.\n*/\nconst MAX_ENTRIES = 1e3;\n/** Entries kept per hash bucket, to bound the cost of a collision scan. */\nconst MAX_BUCKET = 8;\n/**\n* DJB2 over the arguments' own keys and primitive values.\n* Returns `null` for anything nested, which routes the call to the string key.\n*/\nconst flatHashOrNull = (args) => {\n	let h = 5381;\n	for (let a = 0; a < args.length; a++) {\n		const obj = args[a];\n		if (obj === null || typeof obj !== \"object\") {\n			const t = typeof obj;\n			if (t === \"string\") for (let i = 0; i < obj.length; i++) h = h * 33 ^ obj.charCodeAt(i);\n			else if (t === \"number\") h = h * 33 ^ (obj | 0);\n			else if (t === \"boolean\") h = h * 33 ^ (obj ? 991 : 997);\n			else h = h * 33 ^ 3;\n			continue;\n		}\n		if (Array.isArray(obj)) h = h * 33 ^ 7;\n		else {\n			const proto = Object.getPrototypeOf(obj);\n			if (proto !== Object.prototype && proto !== null) return null;\n		}\n		for (const k in obj) {\n			const v = obj[k];\n			const tv = typeof v;\n			if (v !== null && tv === \"object\") return null;\n			for (let i = 0; i < k.length; i++) h = h * 33 ^ k.charCodeAt(i);\n			if (tv === \"string\") for (let i = 0; i < v.length; i++) h = h * 33 ^ v.charCodeAt(i);\n			else if (tv === \"number\") h = h * 33 ^ (v | 0);\n			else if (tv === \"boolean\") h = h * 33 ^ (v ? 991 : 997);\n			else h = h * 33 ^ 2;\n		}\n	}\n	return h >>> 0;\n};\n/**\n* Value snapshot of the arguments, taken once at insert.\n*\n* The cache must not hold the caller's objects: a style object can capture a much\n* larger graph, and keeping it alive until the cache rotates changes GC behaviour\n* for code that never asked to be cached. Only the flat path reaches here, so a\n* shallow copy contains primitives only and retains nothing.\n*\n* Comparing against a copy also removes the last way a mutation could be missed.\n* Were the caller's own object stored, `oa === ob` would short-circuit the value\n* comparison, and a mutation that happened to preserve the hash would return the\n* stale entry. Against a copy that check can only ever be true for equal\n* primitives.\n*/\nconst snapshotArgs = (args) => {\n	const values = [];\n	const counts = [];\n	for (let i = 0; i < args.length; i++) {\n		const o = args[i];\n		if (o !== null && typeof o === \"object\") {\n			const copy = Array.isArray(o) ? [] : {};\n			let n = 0;\n			for (const k in o) {\n				copy[k] = o[k];\n				n++;\n			}\n			values.push(copy);\n			counts.push(n);\n		} else {\n			values.push(o);\n			counts.push(0);\n		}\n	}\n	return {\n		values,\n		counts\n	};\n};\n/**\n* Exact match, so a `flatHashOrNull` collision is resolved rather than trusted.\n* `bCounts` is the cached side's key count; comparing against it avoids the\n* `Object.keys()` allocation this would otherwise make on every cache hit.\n*/\nconst flatArgsEqual = (a, b, bCounts) => {\n	if (a.length !== b.length) return false;\n	for (let i = 0; i < a.length; i++) {\n		const oa = a[i];\n		const ob = b[i];\n		if (oa === ob) continue;\n		if (oa === null || ob === null || typeof oa !== \"object\" || typeof ob !== \"object\") return false;\n		if (Array.isArray(oa) !== Array.isArray(ob)) return false;\n		let n = 0;\n		for (const k in oa) {\n			if (oa[k] !== ob[k]) return false;\n			n++;\n		}\n		if (n !== bCounts[i]) return false;\n	}\n	return true;\n};\nconst memo = (fn) => {\n	let buckets = /* @__PURE__ */ new Map();\n	let priorBuckets = /* @__PURE__ */ new Map();\n	let strings = /* @__PURE__ */ new Map();\n	let priorStrings = /* @__PURE__ */ new Map();\n	/**\n	* One scalar argument, keyed directly.\n	*\n	* This is the shape of the hottest callers — `isCssProperty(prop)` runs per prop\n	* per render — and a plain map lookup beats hashing, bucket scanning and\n	* snapshotting for it. Distinct types stay distinct keys, so `1` and `'1'` do not\n	* share an entry.\n	*/\n	let scalars = /* @__PURE__ */ new Map();\n	let priorScalars = /* @__PURE__ */ new Map();\n	const scan = (bucket, args) => {\n		if (bucket) for (let i = 0; i < bucket.length; i++) {\n			const entry = bucket[i];\n			if (flatArgsEqual(args, entry.values, entry.counts)) return entry;\n		}\n	};\n	const get = (...args) => {\n		if (args.length === 1) {\n			const only = args[0];\n			if (only === null || typeof only !== \"object\") {\n				if (scalars.has(only)) return scalars.get(only);\n				if (priorScalars.has(only)) {\n					const promoted = priorScalars.get(only);\n					scalars.set(only, promoted);\n					return promoted;\n				}\n				const out = fn(only);\n				scalars.set(only, out);\n				if (scalars.size > MAX_ENTRIES) {\n					priorScalars = scalars;\n					scalars = /* @__PURE__ */ new Map();\n				}\n				return out;\n			}\n		}\n		const hash = flatHashOrNull(args);\n		if (hash !== null) {\n			let bucket = buckets.get(hash);\n			const hit = scan(bucket, args);\n			if (hit) return hit.out;\n			const priorHit = scan(priorBuckets.get(hash), args);\n			if (priorHit) {\n				if (!bucket) {\n					bucket = [];\n					buckets.set(hash, bucket);\n				}\n				bucket.push(priorHit);\n				if (bucket.length > MAX_BUCKET) bucket.shift();\n				return priorHit.out;\n			}\n			const snap = snapshotArgs(args);\n			const out = fn(...args);\n			if (!bucket) {\n				bucket = [];\n				buckets.set(hash, bucket);\n			}\n			bucket.push({\n				values: snap.values,\n				counts: snap.counts,\n				out\n			});\n			if (bucket.length > MAX_BUCKET) bucket.shift();\n			if (buckets.size > MAX_ENTRIES) {\n				priorBuckets = buckets;\n				buckets = /* @__PURE__ */ new Map();\n			}\n			return out;\n		}\n		const key = JSON.stringify(args);\n		if (strings.has(key)) return strings.get(key);\n		if (priorStrings.has(key)) {\n			const promoted = priorStrings.get(key);\n			strings.set(key, promoted);\n			return promoted;\n		}\n		const out = fn(...args);\n		strings.set(key, out);\n		if (strings.size > MAX_ENTRIES) {\n			priorStrings = strings;\n			strings = /* @__PURE__ */ new Map();\n		}\n		return out;\n	};\n	return get;\n};\n//#endregion\n//#region src/merge-props.ts\nconst MERGE_OMIT = new Set([\n	\"__proto__\",\n	\"constructor\",\n	\"prototype\"\n]);\nfunction mergeProps(...sources) {\n	return sources.reduce((prev, obj) => {\n		if (!obj) return prev;\n		Object.keys(obj).forEach((key) => {\n			if (MERGE_OMIT.has(key)) return;\n			const prevValue = prev[key];\n			const value = obj[key];\n			if (isObject(prevValue) && isObject(value)) prev[key] = mergeProps(prevValue, value);\n			else prev[key] = value;\n		});\n		return prev;\n	}, {});\n}\n//#endregion\n//#region src/walk-object.ts\nconst isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n	const { stop, getKey } = options;\n	function inner(value, path = []) {\n		if (isObjectOrArray(value)) {\n			const result = {};\n			for (const [prop, child] of Object.entries(value)) {\n				const key = getKey?.(prop, child) ?? prop;\n				const childPath = [...path, key];\n				if (stop?.(value, childPath)) return predicate(value, path);\n				const next = inner(child, childPath);\n				if (isNotNullish(next)) result[key] = next;\n			}\n			return result;\n		}\n		return predicate(value, path);\n	}\n	return inner(target);\n}\nfunction mapObject(obj, fn) {\n	if (Array.isArray(obj)) return obj.map((value) => fn(value));\n	if (!isObject(obj)) return fn(obj);\n	return walkObject(obj, (value) => fn(value));\n}\n//#endregion\n//#region src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n	return values.reduce((acc, current, index) => {\n		const key = breakpoints[index];\n		if (current != null) acc[key] = current;\n		return acc;\n	}, {});\n}\n/**\n* Whether walking the object would only rebuild it.\n*\n* Normalizing does three things: it renames a shorthand to its longhand, expands a responsive\n* array into a breakpoint object, and drops nullish leaves. A flat object of plain values\n* written in longhand needs none of them, and that is most of what `css()` is handed — but it\n* still paid for a full rebuild plus a path array per key.\n*\n* Every clause has to be exact, since a false positive returns an object the walk would have\n* changed. Nullish is one of them: a leaf the walk removes must not survive, or a later merge\n* would see it override the value beneath it. The array check is another, and it is on the\n* container as well as the values — `stop` is handed the container, so an array arriving at\n* the top level becomes a breakpoint object rather than being walked into.\n*\n* `for...in` reads inherited keys the walk ignores, which is safe in the only direction it can\n* be wrong — an extra key can send this to the slow path, never past it.\n*\n* It does read every value, as `compactStyles` and the argument memo already do, so an\n* accessor prop is read once more than before. Style props are values by the time they get\n* here and reading one has no effect, but it is the reason this cannot be reordered to read\n* lazily.\n*/\nfunction needsNoNormalizing(styles, resolveShorthand) {\n	if (Array.isArray(styles)) return false;\n	for (const key in styles) {\n		const value = styles[key];\n		if (value == null || typeof value === \"object\") return false;\n		if (resolveShorthand !== void 0 && resolveShorthand(key) !== key) return false;\n	}\n	return true;\n}\n/**\n* The result may be the argument itself rather than a fresh object, so callers have to treat\n* it as read-only. Every one of them does today: merging accumulates into its own object and\n* the two `raw()` helpers clone at the boundary.\n*/\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n	const { utility, conditions } = context;\n	const { hasShorthand, resolveShorthand } = utility;\n	if (needsNoNormalizing(styles, shorthand && hasShorthand ? resolveShorthand : void 0)) return styles;\n	return walkObject(styles, (value) => {\n		return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n	}, {\n		stop: (value) => Array.isArray(value),\n		getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n	});\n}\n//#endregion\n//#region src/classname.ts\nconst fallbackCondition = {\n	shift: (v) => v,\n	finalize: (v) => v,\n	breakpoints: { keys: [] }\n};\nconst ENTRY_SEP = \"]___[\";\nconst COND_SEP = \"<___>\";\nfunction createCss(context) {\n	const { utility, hash, grouped, conditions: conds = fallbackCondition } = context;\n	const { prefix } = utility;\n	const formatClassName = prefix ? (str) => str ? `${prefix}-${str}` : prefix : (str) => str || \"\";\n	const hashFn = (conditions, className) => {\n		if (hash) {\n			const baseArray = [...conds.finalize(conditions), className];\n			return formatClassName(utility.toHash(baseArray, toHash));\n		}\n		const finalized = conds.finalize(conditions);\n		if (finalized.length === 0) return formatClassName(className);\n		return [...finalized, formatClassName(className)].join(\":\");\n	};\n	if (grouped) return memo(({ base, ...styles } = {}) => {\n		const normalizedObject = normalizeStyleObject(Object.assign(styles, base), context);\n		const hashes = [];\n		walkObject(normalizedObject, (value, paths) => {\n			if (value == null) return;\n			const [prop, ...allConditions] = conds.shift(paths);\n			const conditions = filterBaseConditions(allConditions);\n			const parts = [`${prop}${ENTRY_SEP}value:${value}`];\n			if (conditions.length) parts.push(`cond:${conditions.join(COND_SEP)}`);\n			hashes.push(parts.join(ENTRY_SEP));\n		});\n		if (hashes.length === 0) return \"\";\n		hashes.sort();\n		const groupId = hashes.join(\"|\");\n		return formatClassName(utility.toHash([\"grouped\", groupId], toHash));\n	});\n	return memo(({ base, ...styles } = {}) => {\n		const normalizedObject = normalizeStyleObject(Object.assign(styles, base), context);\n		const classNames = /* @__PURE__ */ new Set();\n		walkObject(normalizedObject, (value, paths) => {\n			if (value == null) return;\n			const important = isImportant(value);\n			const [prop, ...allConditions] = conds.shift(paths);\n			let className = hashFn(filterBaseConditions(allConditions), utility.transform(prop, withoutImportant(sanitize(value))).className);\n			if (important) className = `${className}!`;\n			classNames.add(className);\n		});\n		return Array.from(classNames).join(\" \");\n	});\n}\n/**\n* Whether a style object carries anything `compact` would have kept.\n*\n* The question `compactStyles` asks is only ever \"is this empty once undefined values are\n* dropped\", but it used to answer it by building the compacted object and then a key array\n* for it, then throwing both away. `Object.keys` enumerates exactly what `compact`'s\n* `Object.entries` did — own, enumerable, string-keyed — so this is the same predicate\n* without the two allocations, and it stops at the first value that settles it.\n*/\nfunction hasDefinedValue(style) {\n	const keys = Object.keys(style);\n	for (let i = 0; i < keys.length; i++) if (style[keys[i]] !== void 0) return true;\n	return false;\n}\nfunction compactStyles(...styles) {\n	return styles.flat().filter((style) => isObject(style) && hasDefinedValue(style));\n}\nfunction createMergeCss(context) {\n	function resolve(styles) {\n		const allStyles = compactStyles(...styles);\n		if (allStyles.length === 1) return allStyles;\n		return allStyles.map((style) => normalizeStyleObject(style, context));\n	}\n	function mergeCss(...styles) {\n		return mergeProps(...resolve(styles));\n	}\n	function assignCss(...styles) {\n		return Object.assign({}, ...resolve(styles));\n	}\n	return {\n		mergeCss: memo(mergeCss),\n		assignCss\n	};\n}\n//#endregion\n//#region src/clone-styles.ts\nconst OMIT = new Set([\n	\"__proto__\",\n	\"constructor\",\n	\"prototype\"\n]);\n/**\n* Independent copy of a style object, nested condition blocks included.\n*\n* Merged style objects are cached, so anything handed to user code has to be\n* copied first: a caller mutating what it received would otherwise change what\n* every later caller reads back. `css.raw()` and `cva.raw()` are those boundaries.\n*\n* Kept separate from `mergeProps` deliberately. Merging is on the hot path — it\n* runs on every `css()` cache miss and on every render of a pattern component\n* under `jsxStyleProps: 'minimal'` — and copying there charges every caller for a\n* guarantee only the two `raw()` helpers need. Measured on a realistic style\n* object (5 base properties, 4 condition blocks) that was roughly twice the cost\n* of merging alone.\n*/\nfunction cloneStyles(styles) {\n	if (Array.isArray(styles)) return styles.map((value) => cloneStyles(value));\n	if (!isObject(styles)) return styles;\n	const out = {};\n	for (const key of Object.keys(styles)) {\n		if (OMIT.has(key)) continue;\n		out[key] = cloneStyles(styles[key]);\n	}\n	return out;\n}\n//#endregion\n//#region src/compact.ts\nfunction compact(value) {\n	return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value]) => value !== void 0));\n}\n//#endregion\n//#region src/leaf-class.ts\n/**\n* The class a single dynamic style leaf resolves to, given the prefix its property and\n* condition path produce.\n*\n* ## Why this can exist at all\n*\n* `css()` builds a class from the value alone — `utility.transform` is string\n* construction over a static map, and nothing consults which rules were actually emitted.\n* So `css({ color: tone })` already returns `c_<tone>` for a value the extractor never\n* saw, with no CSS behind it. Reproducing that string here cannot be less correct than\n* the call it replaces; it just skips the object literal, the merge and the memo.\n*\n* ## Why it is not a template literal\n*\n* Three shapes do not reduce to `prefix + value`, and all three return `undefined` so the\n* caller runs `css()` instead:\n*\n* - An array is expanded to a responsive object by `normalizeStyleObject`, so it produces\n*   one class per breakpoint rather than one class.\n* - An object is a condition block, walked into for the same reason.\n* - `null` and `undefined` are skipped by the walk entirely, which is an empty string\n*   rather than a class — that one is answered here, since it needs no `css()` call.\n*\n* ## Why the character scan\n*\n* The remaining work — collapsing whitespace, stripping `!important`, turning spaces into\n* underscores — is three regexes, and paying them per call makes this *slower* than a\n* memo hit. Almost no token value contains whitespace or `!`, so one scan for the\n* characters that make any of it necessary sends the common value straight to a\n* concatenation. A false positive only costs the slow path, so the scan errs wide.\n*/\nfunction leafClass(prefix, value) {\n	if (value == null) return \"\";\n	const type = typeof value;\n	if (type === \"number\" || type === \"boolean\") return `${prefix}${value}`;\n	if (type !== \"string\") return void 0;\n	const str = value;\n	for (let index = 0; index < str.length; index++) {\n		const code = str.charCodeAt(index);\n		if (code <= 33 || code === 160 || code === 5760 || code >= 8192) return slowLeaf(prefix, str);\n	}\n	return `${prefix}${str}`;\n}\n/** The full pipeline `createCss` runs, for a value that needs it. */\nfunction slowLeaf(prefix, value) {\n	const important = isImportant(value);\n	const className = `${prefix}${withoutSpace(withoutImportant(sanitize(value)))}`;\n	return important ? `${className}!` : className;\n}\n//#endregion\n//#region src/hypenate-property.ts\nconst wordRegex = /([A-Z])/g;\nconst msRegex = /^ms-/;\nconst hypenateProperty = memo((property) => {\n	if (property.startsWith(\"--\")) return property;\n	return property.replace(wordRegex, \"-$1\").replace(msRegex, \"-ms-\").toLowerCase();\n});\n//#endregion\n//#region src/is-css-function.ts\nconst fnRegExp = new RegExp(`^(${[\n	\"min\",\n	\"max\",\n	\"clamp\",\n	\"calc\"\n].join(\"|\")})\\\\(.*\\\\)`);\nconst isCssFunction = (v) => typeof v === \"string\" && fnRegExp.test(v);\n//#endregion\n//#region src/is-css-unit.ts\nconst lengthUnitsPattern = `(?:${\"cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%\".split(\",\").join(\"|\")})`;\nconst lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);\nconst isCssUnit = (v) => typeof v === \"string\" && lengthRegExp.test(v);\n//#endregion\n//#region src/is-css-var.ts\nconst isCssVar = (v) => typeof v === \"string\" && /^var\\(--.+\\)$/.test(v);\n//#endregion\n//#region src/pattern-fns.ts\nconst patternFns = {\n	map: mapObject,\n	isCssFunction,\n	isCssVar,\n	isCssUnit\n};\nconst getPatternStyles = (pattern, styles) => {\n	if (!pattern?.defaultValues) return styles;\n	const defaults = typeof pattern.defaultValues === \"function\" ? pattern.defaultValues(styles) : pattern.defaultValues;\n	return Object.assign({}, defaults, compact(styles));\n};\n//#endregion\n//#region src/slot.ts\nconst getSlotRecipes = (recipe = {}) => {\n	const init = (slot) => ({\n		className: [recipe.className, slot].filter(Boolean).join(\"__\"),\n		base: recipe.base?.[slot] ?? {},\n		variants: {},\n		defaultVariants: recipe.defaultVariants ?? {},\n		compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n	});\n	const recipeParts = (recipe.slots ?? []).map((slot) => [slot, init(slot)]);\n	for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) recipeParts.forEach(([slot, slotRecipe]) => {\n		slotRecipe.variants[variantsKey] ??= {};\n		slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n	});\n	return Object.fromEntries(recipeParts);\n};\nconst getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({\n	...compoundVariant,\n	css: compoundVariant.css[slotName]\n}));\n//#endregion\n//#region src/split-props.ts\n/**\n* Deal a props object into one bucket per key group, plus a final bucket for the rest.\n* A key goes to the first group that claims it.\n*\n* ## Why the descriptor is read per key rather than in bulk\n*\n* This used to call `Object.getOwnPropertyDescriptors` for the whole object and\n* `defineProperty` for every key it moved. Copying plain values instead is 2.4–2.9x faster\n* on the shapes that allow it, but it is only correct where props are data — and they are\n* not always. Solid compiles props to accessors, so reading one eagerly runs whatever it\n* wraps: splitting a component's props would construct its children before the surrounding\n* provider exists.\n*\n* So the descriptor is fetched per key, and the value path is taken only when it changes\n* nothing observable. An accessor keeps its laziness, a non-enumerable key keeps its\n* invisibility, and `__proto__` is defined rather than assigned so it stays an own\n* property instead of reaching the prototype setter.\n*\n* The one thing the value path drops is `writable`/`configurable`, so a bucket key taken\n* from frozen props is writable where it used to be frozen. Nothing here relies on that,\n* and preserving it would mean `defineProperty` on the common path — the cost this exists\n* to avoid. Keys that take the descriptor path keep theirs, so a bucket can be\n* inconsistent in that one respect.\n*\n* Key order within a bucket is preserved exactly. It is not cosmetic: `cva` merges\n* variant props in iteration order, and the parser reads the rest bucket as the style\n* props it encodes, so order reaches the emitted CSS.\n*/\nfunction splitProps(props, ...keys) {\n	const allKeys = Object.getOwnPropertyNames(props);\n	const own = new Set(allKeys);\n	const taken = /* @__PURE__ */ new Set();\n	const split = (group) => {\n		const clone = {};\n		for (let i = 0; i < group.length; i++) {\n			const key = group[i];\n			if (taken.has(key) || !own.has(key)) continue;\n			const descriptor = Object.getOwnPropertyDescriptor(props, key);\n			if (!descriptor) continue;\n			if (\"get\" in descriptor || \"set\" in descriptor || !descriptor.enumerable || key === \"__proto__\") Object.defineProperty(clone, key, descriptor);\n			else clone[key] = descriptor.value;\n			taken.add(key);\n		}\n		return clone;\n	};\n	/**\n	* The predicate is called with the key alone.\n	*\n	* Handing it to `filter` passes `(key, index, allKeys)`. A one-parameter predicate cannot\n	* see the extras, but a memoized one reads its whole argument list — and the predicates\n	* that arrive here are memoized, `isCssProperty` among them. So the memo hashed the entire\n	* key array once per prop, and keyed its cache on it: two elements with different prop sets\n	* shared no entry even for the same prop name.\n	*\n	* Worth ~9.7x on that path, and nothing at all on a plain predicate — which is why the\n	* bench below it needs a memoized case to see this at all.\n	*\n	* A loop rather than `filter((k) => key(k))` because the wrapper allocates a closure per\n	* group. The two measure the same to within noise; the loop just does not need one.\n	*/\n	const matching = (predicate) => {\n		const group = [];\n		for (let i = 0; i < allKeys.length; i++) {\n			const key = allKeys[i];\n			if (predicate(key)) group.push(key);\n		}\n		return group;\n	};\n	return keys.map((key) => split(Array.isArray(key) ? key : matching(key))).concat(split(allKeys));\n}\n//#endregion\n//#region src/uniq.ts\nconst uniq = (...items) => {\n	const set = items.reduce((acc, currItems) => {\n		if (currItems) currItems.forEach((item) => acc.add(item));\n		return acc;\n	}, /* @__PURE__ */ new Set([]));\n	return Array.from(set);\n};\n//#endregion\nexport { cloneStyles, compact, createCss, createMergeCss, filterBaseConditions, getPatternStyles, getSlotCompoundVariant, getSlotRecipes, hypenateProperty, isBaseCondition, isObject, leafClass, mapObject, memo, mergeProps, patternFns, splitProps, toHash, uniq, walkObject, withoutSpace };\n";
-//#endregion
-//#region src/artifacts/generated/normalize-html.mjs.json
-var content$9 = "//#region src/normalize-html.ts\nconst htmlProps = [\n	\"htmlSize\",\n	\"htmlTranslate\",\n	\"htmlWidth\",\n	\"htmlHeight\"\n];\nfunction convert(key) {\n	return htmlProps.includes(key) ? key.replace(\"html\", \"\").toLowerCase() : key;\n}\nfunction normalizeHTMLProps(props) {\n	return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));\n}\nnormalizeHTMLProps.keys = htmlProps;\n//#endregion\nexport { normalizeHTMLProps };\n";
+var content$8 = "//#region src/assert.ts\nfunction isObject(value) {\n	return typeof value === \"object\" && value != null && !Array.isArray(value);\n}\nconst isObjectOrArray = (obj) => typeof obj === \"object\" && obj !== null;\n//#endregion\n//#region src/condition.ts\nconst isBaseCondition = (v) => v === \"base\";\nfunction filterBaseConditions(c) {\n	return c.slice().filter((v) => !isBaseCondition(v));\n}\n//#endregion\n//#region src/hash.ts\nfunction toChar(code) {\n	return String.fromCharCode(code + (code > 25 ? 39 : 97));\n}\nfunction toName(code) {\n	let name = \"\";\n	let x;\n	for (x = Math.abs(code); x > 52; x = x / 52 | 0) name = toChar(x % 52) + name;\n	return toChar(x % 52) + name;\n}\nfunction toPhash(h, x) {\n	let i = x.length;\n	while (i) h = h * 33 ^ x.charCodeAt(--i);\n	return h;\n}\nfunction toHash(value) {\n	return toName(toPhash(5381, value) >>> 0);\n}\n//#endregion\n//#region src/important.ts\nconst importantRegex = /\\s*!(important)?/i;\nconst whitespaceRegex = /\\s/;\n/**\n* Collapse every run of whitespace to a single space, which is what the class name is\n* built from. Exported because `leafClass` has to reproduce this exact pipeline, and a\n* second copy of it would be free to drift from the one `createCss` runs.\n*/\nfunction sanitize(value) {\n	if (typeof value !== \"string\") return value;\n	const collapsed = whitespaceRegex.test(value) ? value.replaceAll(/[\\n\\s]+/g, \" \") : value;\n	return collapsed.includes(\"\\0\") ? collapsed.replaceAll(\"\\0\", \"\") : collapsed;\n}\nfunction isImportant(value) {\n	if (typeof value !== \"string\") return false;\n	return value.includes(\"!\") && importantRegex.test(value);\n}\nfunction withoutImportant(value) {\n	if (typeof value !== \"string\") return value;\n	if (!value.includes(\"!\")) return value.trim();\n	return value.replace(importantRegex, \"\").trim();\n}\nfunction withoutSpace(str) {\n	if (typeof str !== \"string\") return str;\n	return str.includes(\" \") ? str.replaceAll(\" \", \"_\") : str;\n}\n//#endregion\n//#region src/memo.ts\n/**\n* Bounded argument memo used by the generated runtime (`css`, patterns, `cva`, recipes).\n*\n* Two regimes, picked per call:\n*\n* - Arguments that are flat (objects of primitives) take a cheap structural hash\n*   and are confirmed with an exact comparison, so a hash collision can never\n*   serve the wrong result. This is the shape `css({ ... })` has.\n* - Anything nested falls back to `JSON.stringify`, which V8 does faster than a\n*   JS walk.\n*\n* The second point is the counter-intuitive one, and it has been measured rather\n* than assumed. Extending the structural hash to recurse — so nested styles could\n* take the fast path too — is *slower*, because it trades one native serialization\n* for two JS walks (hash, then the deep equality that confirms it). Over 10k\n* iterations per shape:\n*\n*     shape        stringify   recursive hash + deep equal\n*     flat            1.06ms   2.09ms\n*     _hover          1.00ms   2.16ms\n*     responsive      1.23ms   2.15ms\n*     realistic       2.32ms   5.84ms\n*     nested 3 deep   1.22ms   2.35ms\n*\n* So a nested `css()` call costing several times a flat one is not a defect here.\n* It is the floor for a value-keyed memo in JS, and the way to avoid it is to not\n* make the call — see the build-time fold in `@bamboocss/vite`.\n*\n* Both regimes key on *values*, never on object identity: mutating a style object\n* between calls changes its hash, so the next call misses and recomputes rather\n* than serving a stale class. Keying nested arguments on the identity of the inner\n* objects would skip serialization entirely, but it cannot detect a mutation, and\n* \"same object, different contents\" is exactly what a style object built per render\n* looks like.\n*\n* Both caches are bounded. An unbounded memo is a leak in any long-lived process\n* (SSR), where the set of distinct style objects grows without limit.\n*/\n/**\n* Distinct hashes held per memoized function before the cache rotates.\n*\n* This bounds *buckets*, not entries: a bucket keeps up to `MAX_BUCKET` colliding\n* argument lists, so the ceiling is `MAX_ENTRIES * MAX_BUCKET` live entries, and\n* twice that across both generations, since the previous one is retained until the\n* next rotation. Collisions are rare in practice, so the realistic figure is close\n* to `MAX_ENTRIES` — but the worst case is what matters when sizing a long-lived\n* process, so state it plainly.\n*\n* Rotation beats evicting the oldest key: single-key eviction is worst-case for a\n* working set that cycles, because it drops exactly the entry about to be needed.\n* Measured on a cycling set of 20k styles, one-at-a-time eviction cost ~719ns/op\n* against ~189ns unbounded, while rotation holds ~274ns. On realistic skewed\n* access rotation is at or below the unbounded cost.\n*/\nconst MAX_ENTRIES = 1e3;\n/** Entries kept per hash bucket, to bound the cost of a collision scan. */\nconst MAX_BUCKET = 8;\n/**\n* DJB2 over the arguments' own keys and primitive values.\n* Returns `null` for anything nested, which routes the call to the string key.\n*/\nconst flatHashOrNull = (args) => {\n	let h = 5381;\n	for (let a = 0; a < args.length; a++) {\n		const obj = args[a];\n		if (obj === null || typeof obj !== \"object\") {\n			const t = typeof obj;\n			if (t === \"string\") for (let i = 0; i < obj.length; i++) h = h * 33 ^ obj.charCodeAt(i);\n			else if (t === \"number\") h = h * 33 ^ (obj | 0);\n			else if (t === \"boolean\") h = h * 33 ^ (obj ? 991 : 997);\n			else h = h * 33 ^ 3;\n			continue;\n		}\n		if (Array.isArray(obj)) h = h * 33 ^ 7;\n		else {\n			const proto = Object.getPrototypeOf(obj);\n			if (proto !== Object.prototype && proto !== null) return null;\n		}\n		for (const k in obj) {\n			const v = obj[k];\n			const tv = typeof v;\n			if (v !== null && tv === \"object\") return null;\n			for (let i = 0; i < k.length; i++) h = h * 33 ^ k.charCodeAt(i);\n			if (tv === \"string\") for (let i = 0; i < v.length; i++) h = h * 33 ^ v.charCodeAt(i);\n			else if (tv === \"number\") h = h * 33 ^ (v | 0);\n			else if (tv === \"boolean\") h = h * 33 ^ (v ? 991 : 997);\n			else h = h * 33 ^ 2;\n		}\n	}\n	return h >>> 0;\n};\n/**\n* Value snapshot of the arguments, taken once at insert.\n*\n* The cache must not hold the caller's objects: a style object can capture a much\n* larger graph, and keeping it alive until the cache rotates changes GC behaviour\n* for code that never asked to be cached. Only the flat path reaches here, so a\n* shallow copy contains primitives only and retains nothing.\n*\n* Comparing against a copy also removes the last way a mutation could be missed.\n* Were the caller's own object stored, `oa === ob` would short-circuit the value\n* comparison, and a mutation that happened to preserve the hash would return the\n* stale entry. Against a copy that check can only ever be true for equal\n* primitives.\n*/\nconst snapshotArgs = (args) => {\n	const values = [];\n	const counts = [];\n	for (let i = 0; i < args.length; i++) {\n		const o = args[i];\n		if (o !== null && typeof o === \"object\") {\n			const copy = Array.isArray(o) ? [] : {};\n			let n = 0;\n			for (const k in o) {\n				copy[k] = o[k];\n				n++;\n			}\n			values.push(copy);\n			counts.push(n);\n		} else {\n			values.push(o);\n			counts.push(0);\n		}\n	}\n	return {\n		values,\n		counts\n	};\n};\n/**\n* Exact match, so a `flatHashOrNull` collision is resolved rather than trusted.\n* `bCounts` is the cached side's key count; comparing against it avoids the\n* `Object.keys()` allocation this would otherwise make on every cache hit.\n*/\nconst flatArgsEqual = (a, b, bCounts) => {\n	if (a.length !== b.length) return false;\n	for (let i = 0; i < a.length; i++) {\n		const oa = a[i];\n		const ob = b[i];\n		if (oa === ob) continue;\n		if (oa === null || ob === null || typeof oa !== \"object\" || typeof ob !== \"object\") return false;\n		if (Array.isArray(oa) !== Array.isArray(ob)) return false;\n		let n = 0;\n		for (const k in oa) {\n			if (oa[k] !== ob[k]) return false;\n			n++;\n		}\n		if (n !== bCounts[i]) return false;\n	}\n	return true;\n};\nconst memo = (fn) => {\n	let buckets = /* @__PURE__ */ new Map();\n	let priorBuckets = /* @__PURE__ */ new Map();\n	let strings = /* @__PURE__ */ new Map();\n	let priorStrings = /* @__PURE__ */ new Map();\n	/**\n	* One scalar argument, keyed directly.\n	*\n	* This is the shape of the hottest callers — `isCssProperty(prop)` runs per prop\n	* per render — and a plain map lookup beats hashing, bucket scanning and\n	* snapshotting for it. Distinct types stay distinct keys, so `1` and `'1'` do not\n	* share an entry.\n	*/\n	let scalars = /* @__PURE__ */ new Map();\n	let priorScalars = /* @__PURE__ */ new Map();\n	const scan = (bucket, args) => {\n		if (bucket) for (let i = 0; i < bucket.length; i++) {\n			const entry = bucket[i];\n			if (flatArgsEqual(args, entry.values, entry.counts)) return entry;\n		}\n	};\n	const get = (...args) => {\n		if (args.length === 1) {\n			const only = args[0];\n			if (only === null || typeof only !== \"object\") {\n				if (scalars.has(only)) return scalars.get(only);\n				if (priorScalars.has(only)) {\n					const promoted = priorScalars.get(only);\n					scalars.set(only, promoted);\n					return promoted;\n				}\n				const out = fn(only);\n				scalars.set(only, out);\n				if (scalars.size > MAX_ENTRIES) {\n					priorScalars = scalars;\n					scalars = /* @__PURE__ */ new Map();\n				}\n				return out;\n			}\n		}\n		const hash = flatHashOrNull(args);\n		if (hash !== null) {\n			let bucket = buckets.get(hash);\n			const hit = scan(bucket, args);\n			if (hit) return hit.out;\n			const priorHit = scan(priorBuckets.get(hash), args);\n			if (priorHit) {\n				if (!bucket) {\n					bucket = [];\n					buckets.set(hash, bucket);\n				}\n				bucket.push(priorHit);\n				if (bucket.length > MAX_BUCKET) bucket.shift();\n				return priorHit.out;\n			}\n			const snap = snapshotArgs(args);\n			const out = fn(...args);\n			if (!bucket) {\n				bucket = [];\n				buckets.set(hash, bucket);\n			}\n			bucket.push({\n				values: snap.values,\n				counts: snap.counts,\n				out\n			});\n			if (bucket.length > MAX_BUCKET) bucket.shift();\n			if (buckets.size > MAX_ENTRIES) {\n				priorBuckets = buckets;\n				buckets = /* @__PURE__ */ new Map();\n			}\n			return out;\n		}\n		const key = JSON.stringify(args);\n		if (strings.has(key)) return strings.get(key);\n		if (priorStrings.has(key)) {\n			const promoted = priorStrings.get(key);\n			strings.set(key, promoted);\n			return promoted;\n		}\n		const out = fn(...args);\n		strings.set(key, out);\n		if (strings.size > MAX_ENTRIES) {\n			priorStrings = strings;\n			strings = /* @__PURE__ */ new Map();\n		}\n		return out;\n	};\n	return get;\n};\n//#endregion\n//#region src/merge-props.ts\nconst MERGE_OMIT = new Set([\n	\"__proto__\",\n	\"constructor\",\n	\"prototype\"\n]);\nfunction mergeProps(...sources) {\n	return sources.reduce((prev, obj) => {\n		if (!obj) return prev;\n		Object.keys(obj).forEach((key) => {\n			if (MERGE_OMIT.has(key)) return;\n			const prevValue = prev[key];\n			const value = obj[key];\n			if (isObject(prevValue) && isObject(value)) prev[key] = mergeProps(prevValue, value);\n			else prev[key] = value;\n		});\n		return prev;\n	}, {});\n}\n//#endregion\n//#region src/walk-object.ts\nconst isNotNullish = (element) => element != null;\nfunction walkObject(target, predicate, options = {}) {\n	const { stop, getKey } = options;\n	function inner(value, path = []) {\n		if (isObjectOrArray(value)) {\n			const result = {};\n			for (const [prop, child] of Object.entries(value)) {\n				const key = getKey?.(prop, child) ?? prop;\n				const childPath = [...path, key];\n				if (stop?.(value, childPath)) return predicate(value, path);\n				const next = inner(child, childPath);\n				if (isNotNullish(next)) result[key] = next;\n			}\n			return result;\n		}\n		return predicate(value, path);\n	}\n	return inner(target);\n}\nfunction mapObject(obj, fn) {\n	if (Array.isArray(obj)) return obj.map((value) => fn(value));\n	if (!isObject(obj)) return fn(obj);\n	return walkObject(obj, (value) => fn(value));\n}\n//#endregion\n//#region src/normalize-style-object.ts\nfunction toResponsiveObject(values, breakpoints) {\n	return values.reduce((acc, current, index) => {\n		const key = breakpoints[index];\n		if (current != null) acc[key] = current;\n		return acc;\n	}, {});\n}\n/**\n* Whether walking the object would only rebuild it.\n*\n* Normalizing does three things: it renames a shorthand to its longhand, expands a responsive\n* array into a breakpoint object, and drops nullish leaves. A flat object of plain values\n* written in longhand needs none of them, and that is most of what `css()` is handed — but it\n* still paid for a full rebuild plus a path array per key.\n*\n* Every clause has to be exact, since a false positive returns an object the walk would have\n* changed. Nullish is one of them: a leaf the walk removes must not survive, or a later merge\n* would see it override the value beneath it. The array check is another, and it is on the\n* container as well as the values — `stop` is handed the container, so an array arriving at\n* the top level becomes a breakpoint object rather than being walked into.\n*\n* `for...in` reads inherited keys the walk ignores, which is safe in the only direction it can\n* be wrong — an extra key can send this to the slow path, never past it.\n*\n* It does read every value, as `compactStyles` and the argument memo already do, so an\n* accessor prop is read once more than before. Style props are values by the time they get\n* here and reading one has no effect, but it is the reason this cannot be reordered to read\n* lazily.\n*/\nfunction needsNoNormalizing(styles, resolveShorthand) {\n	if (Array.isArray(styles)) return false;\n	for (const key in styles) {\n		const value = styles[key];\n		if (value == null || typeof value === \"object\") return false;\n		if (resolveShorthand !== void 0 && resolveShorthand(key) !== key) return false;\n	}\n	return true;\n}\n/**\n* The result may be the argument itself rather than a fresh object, so callers have to treat\n* it as read-only. Every one of them does today: merging accumulates into its own object and\n* the two `raw()` helpers clone at the boundary.\n*/\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n	const { utility, conditions } = context;\n	const { hasShorthand, resolveShorthand } = utility;\n	if (needsNoNormalizing(styles, shorthand && hasShorthand ? resolveShorthand : void 0)) return styles;\n	return walkObject(styles, (value) => {\n		return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;\n	}, {\n		stop: (value) => Array.isArray(value),\n		getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0\n	});\n}\n//#endregion\n//#region src/classname.ts\nconst fallbackCondition = {\n	shift: (v) => v,\n	finalize: (v) => v,\n	breakpoints: { keys: [] }\n};\nconst ENTRY_SEP = \"]___[\";\nconst COND_SEP = \"<___>\";\n/**\n* The class a whole grouped `css()` call resolves to, given its group id.\n*\n* Shared with `StyleDecoder.collectGrouped` on purpose: both sides name this class, and\n* deriving it twice is what let `hash.className` re-hash on the build side only, leaving\n* every grouped element carrying a class no rule was emitted for.\n*\n* A group id already digests every declaration in the call, so it is hashed exactly once\n* and `hash.className` is deliberately not consulted — that option shortens *utility*\n* class names, and a grouped class is not one. The build `esc()`s the result for a\n* selector; the runtime does not. That asymmetry belongs to the callers.\n*/\nfunction groupClassName(groupId, toHashFn, formatClassName) {\n	return formatClassName(toHashFn([\"grouped\", groupId], toHash));\n}\nfunction createCss(context) {\n	const { utility, hash, grouped, conditions: conds = fallbackCondition } = context;\n	const { prefix } = utility;\n	const formatClassName = prefix ? (str) => str ? `${prefix}-${str}` : prefix : (str) => str || \"\";\n	const hashFn = (conditions, className) => {\n		if (hash) {\n			const baseArray = [...conds.finalize(conditions), className];\n			return formatClassName(utility.toHash(baseArray, toHash));\n		}\n		const finalized = conds.finalize(conditions);\n		if (finalized.length === 0) return formatClassName(className);\n		return [...finalized, formatClassName(className)].join(\":\");\n	};\n	/** One declaration, kept only when there is a fallback that might need to name it. */\n	const atomicName = (prop, value, conditions) => {\n		const important = isImportant(value);\n		const className = hashFn(conditions, utility.transform(prop, withoutImportant(sanitize(value))).className);\n		return important ? `${className}!` : className;\n	};\n	if (grouped) {\n		const { knownGroups } = context;\n		return memo(({ base, ...styles } = {}) => {\n			const normalizedObject = normalizeStyleObject(Object.assign(styles, base), context);\n			const hashes = [];\n			const leaves = knownGroups ? [] : void 0;\n			walkObject(normalizedObject, (value, paths) => {\n				if (value == null) return;\n				const [prop, ...allConditions] = conds.shift(paths);\n				const conditions = filterBaseConditions(allConditions);\n				const parts = [`${prop}${ENTRY_SEP}value:${value}`];\n				if (conditions.length) parts.push(`cond:${conditions.join(COND_SEP)}`);\n				hashes.push(parts.join(ENTRY_SEP));\n				leaves?.push([\n					prop,\n					value,\n					conditions\n				]);\n			});\n			if (hashes.length === 0) return \"\";\n			hashes.sort();\n			const className = groupClassName(hashes.join(\"|\"), utility.toHash, formatClassName);\n			if (!leaves || knownGroups.has(className)) return className;\n			const classNames = new Set([className]);\n			for (const [prop, value, conditions] of leaves) classNames.add(atomicName(prop, value, conditions));\n			return Array.from(classNames).join(\" \");\n		});\n	}\n	return memo(({ base, ...styles } = {}) => {\n		const normalizedObject = normalizeStyleObject(Object.assign(styles, base), context);\n		const classNames = /* @__PURE__ */ new Set();\n		walkObject(normalizedObject, (value, paths) => {\n			if (value == null) return;\n			const [prop, ...allConditions] = conds.shift(paths);\n			classNames.add(atomicName(prop, value, filterBaseConditions(allConditions)));\n		});\n		return Array.from(classNames).join(\" \");\n	});\n}\n/**\n* Whether a style object carries anything `compact` would have kept.\n*\n* The question `compactStyles` asks is only ever \"is this empty once undefined values are\n* dropped\", but it used to answer it by building the compacted object and then a key array\n* for it, then throwing both away. `Object.keys` enumerates exactly what `compact`'s\n* `Object.entries` did — own, enumerable, string-keyed — so this is the same predicate\n* without the two allocations, and it stops at the first value that settles it.\n*/\nfunction hasDefinedValue(style) {\n	const keys = Object.keys(style);\n	for (let i = 0; i < keys.length; i++) if (style[keys[i]] !== void 0) return true;\n	return false;\n}\nfunction compactStyles(...styles) {\n	return styles.flat().filter((style) => isObject(style) && hasDefinedValue(style));\n}\nfunction createMergeCss(context) {\n	function resolve(styles) {\n		const allStyles = compactStyles(...styles);\n		if (allStyles.length === 1) return allStyles;\n		return allStyles.map((style) => normalizeStyleObject(style, context));\n	}\n	function mergeCss(...styles) {\n		return mergeProps(...resolve(styles));\n	}\n	function assignCss(...styles) {\n		return Object.assign({}, ...resolve(styles));\n	}\n	return {\n		mergeCss: memo(mergeCss),\n		assignCss\n	};\n}\n//#endregion\n//#region src/clone-styles.ts\nconst OMIT = new Set([\n	\"__proto__\",\n	\"constructor\",\n	\"prototype\"\n]);\n/**\n* Independent copy of a style object, nested condition blocks included.\n*\n* Merged style objects are cached, so anything handed to user code has to be\n* copied first: a caller mutating what it received would otherwise change what\n* every later caller reads back. `css.raw()` and `cva.raw()` are those boundaries.\n*\n* Kept separate from `mergeProps` deliberately. Merging is on the hot path — it\n* runs on every `css()` cache miss and on every render of a pattern component\n* under `jsxStyleProps: 'minimal'` — and copying there charges every caller for a\n* guarantee only the two `raw()` helpers need. Measured on a realistic style\n* object (5 base properties, 4 condition blocks) that was roughly twice the cost\n* of merging alone.\n*/\nfunction cloneStyles(styles) {\n	if (Array.isArray(styles)) return styles.map((value) => cloneStyles(value));\n	if (!isObject(styles)) return styles;\n	const out = {};\n	for (const key of Object.keys(styles)) {\n		if (OMIT.has(key)) continue;\n		out[key] = cloneStyles(styles[key]);\n	}\n	return out;\n}\n//#endregion\n//#region src/compact.ts\nfunction compact(value) {\n	return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value]) => value !== void 0));\n}\n//#endregion\n//#region src/leaf-class.ts\n/**\n* The class a single dynamic style leaf resolves to, given the prefix its property and\n* condition path produce.\n*\n* ## Why this can exist at all\n*\n* `css()` builds a class from the value alone — `utility.transform` is string\n* construction over a static map, and nothing consults which rules were actually emitted.\n* So `css({ color: tone })` already returns `c_<tone>` for a value the extractor never\n* saw, with no CSS behind it. Reproducing that string here cannot be less correct than\n* the call it replaces; it just skips the object literal, the merge and the memo.\n*\n* ## Why it is not a template literal\n*\n* Three shapes do not reduce to `prefix + value`, and all three return `undefined` so the\n* caller runs `css()` instead:\n*\n* - An array is expanded to a responsive object by `normalizeStyleObject`, so it produces\n*   one class per breakpoint rather than one class.\n* - An object is a condition block, walked into for the same reason.\n* - `null` and `undefined` are skipped by the walk entirely, which is an empty string\n*   rather than a class — that one is answered here, since it needs no `css()` call.\n*\n* ## Why the character scan\n*\n* The remaining work — collapsing whitespace, stripping `!important`, turning spaces into\n* underscores — is three regexes, and paying them per call makes this *slower* than a\n* memo hit. Almost no token value contains whitespace or `!`, so one scan for the\n* characters that make any of it necessary sends the common value straight to a\n* concatenation. A false positive only costs the slow path, so the scan errs wide.\n*/\nfunction leafClass(prefix, value) {\n	if (value == null) return \"\";\n	const type = typeof value;\n	if (type === \"number\" || type === \"boolean\") return `${prefix}${value}`;\n	if (type !== \"string\") return void 0;\n	const str = value;\n	for (let index = 0; index < str.length; index++) {\n		const code = str.charCodeAt(index);\n		if (code <= 33 || code === 160 || code === 5760 || code >= 8192) return slowLeaf(prefix, str);\n	}\n	return `${prefix}${str}`;\n}\n/** The full pipeline `createCss` runs, for a value that needs it. */\nfunction slowLeaf(prefix, value) {\n	const important = isImportant(value);\n	const className = `${prefix}${withoutSpace(withoutImportant(sanitize(value)))}`;\n	return important ? `${className}!` : className;\n}\n//#endregion\n//#region src/hypenate-property.ts\nconst wordRegex = /([A-Z])/g;\nconst msRegex = /^ms-/;\nconst hypenateProperty = memo((property) => {\n	if (property.startsWith(\"--\")) return property;\n	return property.replace(wordRegex, \"-$1\").replace(msRegex, \"-ms-\").toLowerCase();\n});\n//#endregion\n//#region src/recipe-identity.ts\n/** The fields that decide what CSS a recipe produces. Anything else is metadata. */\nconst STYLE_FIELDS = [\n	\"base\",\n	\"variants\",\n	\"compoundVariants\",\n	\"defaultVariants\"\n];\n/**\n* A serialization that depends on the config's *content* and not on how it was written.\n*\n* Object keys are sorted, so reordering two variants in the source does not rename every\n* class the recipe emits. Arrays keep their order, because `compoundVariants` is precedence\n* ordered and two orderings are two different recipes.\n*\n* A function serializes to `null` rather than to its source. `JSON.stringify` already drops\n* them, and stringifying instead would key the name on whether the bundle was minified —\n* the same build-dependent divergence that `cx` was changed to avoid. Nothing that survives\n* static extraction is a function, so there is no real config this loses information about.\n*/\nconst stable = (value) => {\n	if (value === null || typeof value !== \"object\") return JSON.stringify(value) ?? \"null\";\n	if (Array.isArray(value)) return `[${value.map(stable).join(\",\")}]`;\n	const source = value;\n	return `{${Object.keys(source).sort().map((key) => `${JSON.stringify(key)}:${stable(source[key])}`).join(\",\")}}`;\n};\n/**\n* The name an inline `cva`/`sva` emits its classes under — `button--size_sm`, where this\n* returns the `button`.\n*\n* A config recipe gets its name from the key it is declared under. An inline one has no\n* such key, and the two places that need the name never meet: the build derives it while\n* emitting the stylesheet, the runtime derives it again in the browser. So it has to come\n* from something both of them see, which leaves the config object itself.\n*\n* Deriving it from the *binding* — `const button = cva(...)` — was the obvious alternative\n* and does not work. Only the build can see that binding; handing it to the runtime means\n* rewriting the call, and then a pipeline without that transform names classes differently\n* from one with it. An optional `className` gets the same readable output with none of\n* that, because it travels inside the config to both sides.\n*\n* `className` is the field a config recipe already names itself with, and it means the same\n* thing here — the prefix every class the recipe emits is built from. An inline recipe that\n* declares one is indistinguishable in the stylesheet from a recipe declared in config.\n*/\nconst getRecipeIdentity = (config, prefix = \"cva\") => {\n	const declared = config?.className;\n	if (typeof declared === \"string\" && declared) return declared;\n	const styles = {};\n	for (const field of STYLE_FIELDS) {\n		const value = config?.[field];\n		if (value !== void 0) styles[field] = value;\n	}\n	return `${prefix}_${toHash(stable(styles))}`;\n};\n/**\n* The classes a recipe puts on an element: its own, plus one per selected variant.\n*\n* Lives here rather than in the generated `cva` because the build has to be able to check\n* it. `checkNamingAgreement` derives class names both ways and compares them, and it can\n* only do that against the code the browser actually runs — a second implementation written\n* to match would agree with itself and prove nothing.\n*\n* Compound variants are absent by design. Their rule selects on the variant classes already\n* in this list, so it applies without a class of its own.\n*/\nconst getRecipeClassNames = (name, variants, selection, separator = \"_\", format = (className) => className) => {\n	let result = format(name);\n	for (const variant of Object.keys(variants ?? {})) {\n		const value = selection[variant];\n		if (value == null) continue;\n		if (variants?.[variant]?.[value] == null) continue;\n		result += ` ${format(`${name}--${variant}${separator}${withoutSpace(value)}`)}`;\n	}\n	return result;\n};\n//#endregion\n//#region src/is-css-function.ts\nconst fnRegExp = new RegExp(`^(${[\n	\"min\",\n	\"max\",\n	\"clamp\",\n	\"calc\"\n].join(\"|\")})\\\\(.*\\\\)`);\nconst isCssFunction = (v) => typeof v === \"string\" && fnRegExp.test(v);\n//#endregion\n//#region src/is-css-unit.ts\nconst lengthUnitsPattern = `(?:${\"cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%\".split(\",\").join(\"|\")})`;\nconst lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);\nconst isCssUnit = (v) => typeof v === \"string\" && lengthRegExp.test(v);\n//#endregion\n//#region src/is-css-var.ts\nconst isCssVar = (v) => typeof v === \"string\" && /^var\\(--.+\\)$/.test(v);\n//#endregion\n//#region src/pattern-fns.ts\nconst patternFns = {\n	map: mapObject,\n	isCssFunction,\n	isCssVar,\n	isCssUnit\n};\nconst getPatternStyles = (pattern, styles) => {\n	if (!pattern?.defaultValues) return styles;\n	const defaults = typeof pattern.defaultValues === \"function\" ? pattern.defaultValues(styles) : pattern.defaultValues;\n	return Object.assign({}, defaults, compact(styles));\n};\n//#endregion\n//#region src/slot.ts\nconst getSlotRecipes = (recipe = {}) => {\n	const init = (slot) => ({\n		className: [recipe.className, slot].filter(Boolean).join(\"__\"),\n		base: recipe.base?.[slot] ?? {},\n		variants: {},\n		defaultVariants: recipe.defaultVariants ?? {},\n		compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []\n	});\n	const recipeParts = (recipe.slots ?? []).map((slot) => [slot, init(slot)]);\n	for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) recipeParts.forEach(([slot, slotRecipe]) => {\n		slotRecipe.variants[variantsKey] ??= {};\n		slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};\n	});\n	return Object.fromEntries(recipeParts);\n};\nconst getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({\n	...compoundVariant,\n	css: compoundVariant.css[slotName]\n}));\n//#endregion\n//#region src/split-props.ts\n/**\n* Deal a props object into one bucket per key group, plus a final bucket for the rest.\n* A key goes to the first group that claims it.\n*\n* ## Why the descriptor is read per key rather than in bulk\n*\n* This used to call `Object.getOwnPropertyDescriptors` for the whole object and\n* `defineProperty` for every key it moved. Copying plain values instead is 2.4–2.9x faster\n* on the shapes that allow it, but it is only correct where props are data — and they are\n* not always. Solid compiles props to accessors, so reading one eagerly runs whatever it\n* wraps: splitting a component's props would construct its children before the surrounding\n* provider exists.\n*\n* So the descriptor is fetched per key, and the value path is taken only when it changes\n* nothing observable. An accessor keeps its laziness, a non-enumerable key keeps its\n* invisibility, and `__proto__` is defined rather than assigned so it stays an own\n* property instead of reaching the prototype setter.\n*\n* The one thing the value path drops is `writable`/`configurable`, so a bucket key taken\n* from frozen props is writable where it used to be frozen. Nothing here relies on that,\n* and preserving it would mean `defineProperty` on the common path — the cost this exists\n* to avoid. Keys that take the descriptor path keep theirs, so a bucket can be\n* inconsistent in that one respect.\n*\n* Key order within a bucket is preserved exactly. It is not cosmetic: `cva` merges\n* variant props in iteration order, and the parser reads the rest bucket as the style\n* props it encodes, so order reaches the emitted CSS.\n*/\nfunction splitProps(props, ...keys) {\n	const allKeys = Object.getOwnPropertyNames(props);\n	const own = new Set(allKeys);\n	const taken = /* @__PURE__ */ new Set();\n	const split = (group) => {\n		const clone = {};\n		for (let i = 0; i < group.length; i++) {\n			const key = group[i];\n			if (taken.has(key) || !own.has(key)) continue;\n			const descriptor = Object.getOwnPropertyDescriptor(props, key);\n			if (!descriptor) continue;\n			if (\"get\" in descriptor || \"set\" in descriptor || !descriptor.enumerable || key === \"__proto__\") Object.defineProperty(clone, key, descriptor);\n			else clone[key] = descriptor.value;\n			taken.add(key);\n		}\n		return clone;\n	};\n	/**\n	* The predicate is called with the key alone.\n	*\n	* Handing it to `filter` passes `(key, index, allKeys)`. A one-parameter predicate cannot\n	* see the extras, but a memoized one reads its whole argument list — and the predicates\n	* that arrive here are memoized, `isCssProperty` among them. So the memo hashed the entire\n	* key array once per prop, and keyed its cache on it: two elements with different prop sets\n	* shared no entry even for the same prop name.\n	*\n	* Worth ~9.7x on that path, and nothing at all on a plain predicate — which is why the\n	* bench below it needs a memoized case to see this at all.\n	*\n	* A loop rather than `filter((k) => key(k))` because the wrapper allocates a closure per\n	* group. The two measure the same to within noise; the loop just does not need one.\n	*/\n	const matching = (predicate) => {\n		const group = [];\n		for (let i = 0; i < allKeys.length; i++) {\n			const key = allKeys[i];\n			if (predicate(key)) group.push(key);\n		}\n		return group;\n	};\n	return keys.map((key) => split(Array.isArray(key) ? key : matching(key))).concat(split(allKeys));\n}\n//#endregion\n//#region src/uniq.ts\nconst uniq = (...items) => {\n	const set = items.reduce((acc, currItems) => {\n		if (currItems) currItems.forEach((item) => acc.add(item));\n		return acc;\n	}, /* @__PURE__ */ new Set([]));\n	return Array.from(set);\n};\n//#endregion\n//#region src/view-transition.ts\n/**\n* The slots a `viewTransition()` bag accepts, in the order they are emitted.\n*\n* Anything else in the options object is ignored — including by the hash, so adding a\n* comment key or spreading an unrelated object does not fork the class name.\n*/\nconst viewTransitionSlots = [\n	\"group\",\n	\"imagePair\",\n	\"old\",\n	\"new\"\n];\n/**\n* Serialize a value with object keys sorted, so two style objects that differ only in\n* authoring order hash to the same class.\n*\n* Values JSON has no encoding for (`undefined`, functions, symbols) serialize as `null`\n* rather than being dropped. Nothing reaches here holding one — `filterSlots` removes\n* nullish slots, and the extractor drops nullish leaves — so this is only a floor: it\n* keeps a hole in an array from shifting the elements after it.\n*\n* Not exported. The name promises a general-purpose stable serializer, and this is not\n* one; `viewTransitionClassName` is the whole reason it exists.\n*/\nfunction stableStringify(value) {\n	if (value === null) return \"null\";\n	const type = typeof value;\n	if (type === \"boolean\") return value ? \"true\" : \"false\";\n	if (type === \"number\") return Number.isFinite(value) ? String(value) : \"null\";\n	if (type === \"string\") return JSON.stringify(value);\n	if (Array.isArray(value)) {\n		let out = \"[\";\n		for (let index = 0; index < value.length; index++) {\n			if (index) out += \",\";\n			out += stableStringify(value[index]);\n		}\n		return out + \"]\";\n	}\n	if (type === \"object\") {\n		const keys = Object.keys(value).sort();\n		let out = \"{\";\n		for (let index = 0; index < keys.length; index++) {\n			if (index) out += \",\";\n			const key = keys[index];\n			out += JSON.stringify(key) + \":\" + stableStringify(value[key]);\n		}\n		return out + \"}\";\n	}\n	return \"null\";\n}\n/**\n* Keep the four known slots, dropping any that is nullish.\n*\n* Both halves of the contract have to agree on what an empty slot is, and only one of\n* them gets a choice. The extractor evaluates the source, and a nullish property is gone\n* from what it hands over — `{ new: undefined }` and `{}` reach the build identically.\n* So absent, `undefined` and `null` collapse here too, and `new: enabled ? {…} : null`\n* hashes to the bag it actually styles.\n*/\nfunction filterSlots(options) {\n	const filtered = {};\n	if (!options || typeof options !== \"object\") return filtered;\n	for (const slot of viewTransitionSlots) {\n		const value = options[slot];\n		if (value != null) filtered[slot] = value;\n	}\n	return filtered;\n}\n/**\n* The class a `viewTransition()` call resolves to.\n*\n* This is the whole contract between the build and the runtime: the extractor hashes the\n* options it found in the source, the generated `viewTransition()` hashes the options it\n* is called with, and the CSS only reaches the element if the two agree. They agree by\n* construction — both call this function — but only over what the extractor can see. A\n* value it cannot resolve statically is absent from its side and present on the runtime's,\n* which is why a bag has to be a static object literal to be styled at all.\n*\n* The class is used twice, as the `view-transition-class` value and as the argument to\n* `::view-transition-*(.cls)`, so the prefix applies to both.\n*/\nfunction viewTransitionClassName(options, prefix = \"\") {\n	const base = \"vt_\" + toHash(stableStringify(filterSlots(options)));\n	return prefix ? prefix + \"-\" + base : base;\n}\n//#endregion\nexport { cloneStyles, compact, createCss, createMergeCss, filterBaseConditions, getPatternStyles, getRecipeClassNames, getRecipeIdentity, getSlotCompoundVariant, getSlotRecipes, hypenateProperty, isBaseCondition, isObject, leafClass, mapObject, memo, mergeProps, patternFns, splitProps, toHash, uniq, viewTransitionClassName, walkObject, withoutSpace };\n";
 //#endregion
 //#region src/artifacts/js/helpers.ts
-function generateHelpers(ctx) {
+function generateHelpers() {
 	return { js: outdent.outdent`
-  ${content$10}
-  ${ctx.isTemplateLiteralSyntax ? content$11 : ""}
-
-  ${ctx.jsx.framework ? `${content$9}` : ""}
+  ${content$8}
 
   export function __spreadValues(a, b) {
     return { ...a, ...b }
@@ -669,74 +485,6 @@ function generateHelpers(ctx) {
   ` };
 }
 //#endregion
-//#region src/artifacts/generated/is-valid-prop.mjs.json
-var content$8 = "//#region src/index.ts\nconst userGenerated = \"\".split(\",\");\nconst allCssProperties = \"WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,cornerShape,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical\".split(\",\").concat(userGenerated);\nconst properties = new Map(allCssProperties.map((prop) => [prop, true]));\nfunction memo(fn) {\n	const cache = Object.create(null);\n	return (arg) => {\n		if (cache[arg] === void 0) cache[arg] = fn(arg);\n		return cache[arg];\n	};\n}\nconst cssPropertySelectorRegex = /&|@/;\nconst isCssProperty = /* @__PURE__ */ memo((prop) => {\n	return properties.has(prop) || prop.startsWith(\"--\") || cssPropertySelectorRegex.test(prop);\n});\n//#endregion\nexport { allCssProperties, isCssProperty };\n";
-//#endregion
-//#region src/artifacts/js/is-valid-prop.ts
-const cssPropListRegex = /const userGenerated = ".*?"\.split\(","\);\s*const allCssProperties = "(.*?)"\.split\(","\)\.concat\(userGenerated\);/;
-const memoFnDeclarationRegex = /function memo(?:.+?)\n((?:var|const|let) cssPropertySelectorRegex)/s;
-function generateIsValidProp(ctx) {
-	if (ctx.isTemplateLiteralSyntax) return;
-	let content = content$8;
-	const propertyList = content.match(cssPropListRegex);
-	if (!propertyList) throw new _bamboocss_shared.BambooError("NOT_FOUND", "Could not find the property list in the prebuilt is-valid-prop module. Its bundled shape has changed.");
-	const userProperties = (0, ts_pattern.match)(ctx.jsx.styleProps).with("all", () => Array.from(ctx.properties)).with("minimal", () => ["css"]).with("none", () => ["css"]).exhaustive();
-	const browserProperties = ctx.jsx.styleProps === "all" ? propertyList[1].split(",") : [];
-	content = content.replace(cssPropListRegex, () => `const allCssProperties = "${(0, _bamboocss_shared.uniq)(browserProperties, userProperties).join(",")}".split(",");`);
-	content = content.replace(memoFnDeclarationRegex, "$1");
-	if (ctx.jsx.styleProps === "minimal" || ctx.jsx.styleProps === "none") content = content.replace("/* @__PURE__ */ memo(", "/* @__PURE__ */ (");
-	else content = ctx.file.import("memo", "../helpers") + "\n" + content;
-	content = ctx.file.import("splitProps", "../helpers") + "\n" + content;
-	content += `export const splitCssProps = (props) =>  splitProps(props, isCssProperty)`;
-	return {
-		js: content,
-		dts: outdent.outdent`
-    import type { DistributiveOmit, HTMLBambooProps, JsxStyleProps, Pretty } from '../types';
-
-    declare const isCssProperty: (value: string) => boolean;
-
-    type CssPropKey = keyof JsxStyleProps
-    type OmittedCssProps<T> = Pretty<DistributiveOmit<T, CssPropKey>>
-
-    declare const splitCssProps: <T>(props: T) => [JsxStyleProps, OmittedCssProps<T>]
-
-    export { isCssProperty, splitCssProps };
-    `
-	};
-}
-//#endregion
-//#region src/artifacts/js/jsx-helper.ts
-function generatedJsxHelpers(ctx) {
-	return { js: (0, ts_pattern.match)(ctx.isTemplateLiteralSyntax).with(true, () => outdent.outdent`
-      export const getDisplayName = (Component) => {
-        if (typeof Component === 'string') return Component
-        return Component?.displayName || Component?.name || 'Component'
-      }`).otherwise(() => outdent.outdent`
-    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
-
-    export const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
-
-    export const composeShouldForwardProps = (tag, shouldForwardProp) =>
-      tag.__shouldForwardProps__ && shouldForwardProp
-        ? (propName) => tag.__shouldForwardProps__(propName) && shouldForwardProp(propName)
-        : shouldForwardProp
-
-    export const composeCvaFn = (cvaA, cvaB) => {
-      if (cvaA && !cvaB) return cvaA
-      if (!cvaA && cvaB) return cvaB
-      if ((cvaA.__cva__ && cvaB.__cva__) || (cvaA.__recipe__ && cvaB.__recipe__)) return cvaA.merge(cvaB)
-      const error = new TypeError('Cannot merge cva with recipe. Please use either cva or recipe.')
-      TypeError.captureStackTrace?.(error)
-      throw error
-    }
-
-    export const getDisplayName = (Component) => {
-      if (typeof Component === 'string') return Component
-      return Component?.displayName || Component?.name || 'Component'
-    }
-  `) };
-}
-//#endregion
 //#region src/artifacts/js/package-json.ts
 /**
 * The generated output is a plain directory, not an installed package, so bundlers
@@ -860,22 +608,12 @@ function generatePattern(ctx, filters) {
 //#region src/shared.ts
 const isBooleanValue = (value) => value === "true" || value === "false";
 const formatFunctionValue = (value) => isBooleanValue(value) ? value : `'${value}'`;
-const formatJsxValue = (value) => isBooleanValue(value) ? `{${value}}` : `"${value}"`;
 const buildFunctionProps = (key, value) => `${key}: ${formatFunctionValue(value)}`;
-const buildJsxProps = (key, value) => `${key}=${formatJsxValue(value)}`;
 const formatProps = (props, options = {}) => {
 	const { keyValueSeparator = ": ", propSeparator = ", ", quoteStyle = "single" } = options;
 	const quote = quoteStyle === "single" ? "'" : quoteStyle === "double" ? "\"" : "";
 	return Object.entries(props).filter(([_, value]) => value != null).map(([key, value]) => `${key}${keyValueSeparator}${quote}${value}${quote}`).join(propSeparator);
 };
-const formatJsxComponent = (component, props) => {
-	const formattedProps = formatProps(props, {
-		keyValueSeparator: "=",
-		propSeparator: " ",
-		quoteStyle: "double"
-	});
-	return `<${component}${formattedProps ? " " + formattedProps : ""} />`;
-};
 const collectCompositionStyles = (values) => {
 	const result = [];
 	(0, _bamboocss_shared.walkObject)(values, (token, paths) => {
@@ -889,27 +627,6 @@ const collectCompositionStyles = (values) => {
 	}, { stop: (v) => (0, _bamboocss_shared.isObject)(v) && "value" in v });
 	return result;
 };
-/**
-* Generates a single JSX example based on jsxStyleProps setting
-*/
-const generateJsxExample = (props, jsxStyleProps = "all", component = "Box") => {
-	if (jsxStyleProps === "all") return formatJsxComponent(component, props);
-	if (jsxStyleProps === "minimal") return `<${component} css={{ ${formatProps(props)} }} />`;
-	return null;
-};
-/**
-* Generates function and JSX examples for a style property
-*/
-const generateJsxExamples = (props, jsxStyleProps = "all", component = "Box") => {
-	const functionExamples = [`css({ ${formatProps(props)} })`];
-	const jsxExamples = [];
-	const jsxExample = generateJsxExample(props, jsxStyleProps, component);
-	if (jsxExample) jsxExamples.push(jsxExample);
-	return {
-		functionExamples,
-		jsxExamples
-	};
-};
 const COMPOSITION_STYLE_CONFIG = {
 	"text-styles": {
 		prop: "textStyle",
@@ -924,14 +641,14 @@ const COMPOSITION_STYLE_CONFIG = {
 		themeKey: "animationStyles"
 	}
 };
-function generateCompositionStyleSpec(type, theme, jsxStyleProps) {
+function generateCompositionStyleSpec(type, theme) {
 	const { prop, themeKey } = COMPOSITION_STYLE_CONFIG[type];
 	return {
 		type,
 		data: collectCompositionStyles(theme?.[themeKey] ?? {}).map((style) => ({
 			name: style.name,
 			description: style.description,
-			...generateJsxExamples({ [prop]: style.name }, jsxStyleProps)
+			functionExamples: [`css({ ${formatProps({ [prop]: style.name })} })`]
 		}))
 	};
 }
@@ -950,7 +667,6 @@ function generateCreateRecipe(ctx) {
 		dts: "",
 		js: outdent.outdent`
    ${ctx.file.import("finalizeConditions, sortConditions", "../css/conditions")}
-   ${ctx.file.import("css", "../css/css")}
    ${ctx.file.import("assertCompoundVariant, getCompoundVariantCss", "../css/cva")}
    ${ctx.file.import("cx", "../css/cx")}
    ${ctx.file.import("compact, createCss, splitProps, uniq, withoutSpace", "../helpers")}
@@ -964,7 +680,7 @@ function generateCreateRecipe(ctx) {
       };
     };
 
-     const recipeFn = (variants, withCompoundVariants = true) => {
+     const recipeFn = (variants) => {
       const transform = (prop, value) => {
         assertCompoundVariant(name, compoundVariants, variants, prop)
 
@@ -992,11 +708,10 @@ function generateCreateRecipe(ctx) {
 
       const recipeStyles = getVariantProps(variants)
 
-      if (withCompoundVariants) {
-        const compoundVariantStyles = getCompoundVariantCss(compoundVariants, recipeStyles)
-        return cx(recipeCss(recipeStyles), css(compoundVariantStyles))
-      }
-
+      // No class for the compound variants. Their rule selects on the variant classes
+      // \`recipeCss\` just named — \`.btn--size_sm.btn--tone_a\` — so it applies on its own,
+      // and it is in the same layer as the rest of the recipe rather than atomically in
+      // \`utilities\` above it.
       return recipeCss(recipeStyles)
      }
 
@@ -1048,9 +763,22 @@ function generateRecipes(ctx, filters) {
 			else defaultValue = JSON.stringify(defaultValue);
 			return ctx.file.jsDocComment("", { default: defaultValue });
 		};
+		const slotNames = _bamboocss_core.Recipes.isSlotRecipeConfig(config) ? config.slots : [];
+		const anchorSlotNames = _bamboocss_core.Recipes.isSlotRecipeConfig(config) ? _bamboocss_core.Recipes.getScopeRoots(config) : [];
 		return {
 			name: dashName,
-			js: (0, ts_pattern.match)(config).when(_bamboocss_core.Recipes.isSlotRecipeConfig, (config) => outdent.outdent`
+			js: (0, ts_pattern.match)(config).when(_bamboocss_core.Recipes.isSlotRecipeConfig, (config) => {
+				const anchors = _bamboocss_core.Recipes.getScopeRoots(config);
+				/**
+				* Which slots each variant writes styles for.
+				*
+				* A scope reaches every slot inside an anchor's subtree. A slot under no anchor at
+				* all is not reached, and nothing here can detect that — reachability is a fact
+				* about the DOM. This is what says which slots a variant has to get to, so the
+				* component layer can thread the ones a scope cannot.
+				*/
+				const slotsAffectedBy = Object.fromEntries(Object.entries(config.variants ?? {}).map(([variant, values]) => [variant, Array.from(new Set(Object.values(values ?? {}).flatMap((slotStyles) => Object.keys(slotStyles ?? {}))))]));
+				return outdent.outdent`
         ${ctx.file.import("compact, getSlotCompoundVariant, memo, splitProps", "../helpers")}
         ${ctx.file.import("createRecipe", "./create-recipe")}
 
@@ -1058,11 +786,27 @@ function generateRecipes(ctx, filters) {
         const ${baseName}CompoundVariants = ${stringify$2(compoundVariants ?? [])}
 
         const ${baseName}SlotNames = ${stringify$2(config.slots.map((slot) => [slot, `${config.className}__${slot}`]))}
+        ${anchors.length ? outdent.outdent`
+        /**
+         * Only the anchors take variants: ${anchors.map((slot) => `\`${baseName}.${slot}\``).join(", ")}.
+         * Every other slot's variant styles are emitted as rules scoped by a class an anchor
+         * carries, so that slot's class is a constant and nothing has to reach it at runtime.
+         */
+        const ${baseName}Anchors = ${JSON.stringify(anchors)}
+        const ${baseName}AnchorFns = /* @__PURE__ */ ${baseName}Anchors.map((slotName) => [slotName, createRecipe(\`${config.className}__\${slotName}\`, ${baseName}DefaultVariants, getSlotCompoundVariant(${baseName}CompoundVariants, slotName))])
+        const ${baseName}StaticSlots = /* @__PURE__ */ Object.fromEntries(
+          ${baseName}SlotNames.filter(([slotName]) => !${baseName}Anchors.includes(slotName)),
+        )
+
+        const ${baseName}Fn = memo((props = {}) => ({
+          ...${baseName}StaticSlots,
+          ...Object.fromEntries(${baseName}AnchorFns.map(([slotName, anchorFn]) => [slotName, anchorFn.recipeFn(props)])),
+        }))` : outdent.outdent`
         const ${baseName}SlotFns = /* @__PURE__ */ ${baseName}SlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, ${baseName}DefaultVariants, getSlotCompoundVariant(${baseName}CompoundVariants, slotName))])
 
         const ${baseName}Fn = memo((props = {}) => {
           return Object.fromEntries(${baseName}SlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
-        })
+        })`}
 
         const ${baseName}VariantKeys = ${stringify$2(Object.keys(variantKeyMap))}
         const getVariantProps = (variants) => ({ ...${baseName}DefaultVariants, ...compact(variants) })
@@ -1071,15 +815,25 @@ function generateRecipes(ctx, filters) {
           __recipe__: false,
           __name__: '${baseName}',
           raw: (props) => props,
-          classNameMap: {},
+          /** Each slot's constant class, for targeting a slot in the DOM. */
+          classNameMap: /* @__PURE__ */ Object.fromEntries(${baseName}SlotNames),
+          /** The slots that enclose other slots, and so anchor their variant rules. */
+          scopeRoots: ${JSON.stringify(anchors)},
           variantKeys: ${baseName}VariantKeys,
           variantMap: ${stringify$2(variantKeyMap)},
+          /** Which slots each variant actually reaches, for a slot a scope cannot get to. */
+          slotsAffectedBy: ${stringify$2(slotsAffectedBy)},
           splitVariantProps(props) {
             return splitProps(props, ${baseName}VariantKeys)
           },
-          getVariantProps
+          getVariantProps,
+          ${anchors.length ? outdent.outdent`
+          ...Object.fromEntries(${baseName}AnchorFns.map(([slotName, anchorFn]) => [slotName, anchorFn.recipeFn])),
+          ...${baseName}StaticSlots,
+          ` : ""}
         })
-        `).otherwise((config) => outdent.outdent`
+        `;
+			}).otherwise((config) => outdent.outdent`
         ${ctx.file.import("memo, splitProps", "../helpers")}
         ${ctx.file.import("createRecipe, mergeRecipes", "./create-recipe")}
 
@@ -1136,6 +890,13 @@ function generateRecipes(ctx, filters) {
           variantKeys: Array<keyof ${upperName}Variant>
           splitVariantProps<Props extends ${upperName}VariantProps>(props: Props): [${upperName}VariantProps, Pretty<DistributiveOmit<Props, keyof ${upperName}VariantProps>>]
           getVariantProps: (props?: ${upperName}VariantProps) => ${upperName}VariantProps
+          ${_bamboocss_core.Recipes.isSlotRecipeConfig(config) ? outdent.outdent`
+          /** Which slots each variant writes styles for. */
+          slotsAffectedBy: Record<keyof ${upperName}Variant, ${upperName}Slot[]>` : ""}
+          ${anchorSlotNames.length ? outdent.outdent`
+          /** The slots that take variants — every other one is scoped by a class an anchor carries. */
+          ${anchorSlotNames.map((slot) => `${slot}: (props?: ${upperName}VariantProps) => string`).join("\n")}
+          ${slotNames.filter((slot) => !anchorSlotNames.includes(slot)).map((slot) => `${slot}: string`).join("\n")}` : ""}
         }
 
         ${ctx.file.jsDocComment(description, { deprecated })}
@@ -1149,2819 +910,283 @@ function generateRecipes(ctx, filters) {
 function generateSvaFn(ctx) {
 	return {
 		js: outdent.outdent`
-    ${ctx.file.import("compact, getSlotRecipes, memo, splitProps", "../helpers")}
+    ${ctx.file.import("compact, getRecipeIdentity, getSlotRecipes, memo, splitProps", "../helpers")}
     ${ctx.file.import("cva", "./cva")}
     ${ctx.file.import("cx", "./cx")}
 
     export function sva(config) {
-      const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)])
+      // Named before the split, so each slot's class is \`name__slot\`. Left to
+      // \`getSlotRecipes\`, a config with no \`className\` gives every slot the bare slot name
+      // — \`root\` — which every other anonymous recipe with a \`root\` slot would share. The
+      // build injects the identity at the same point, for the same reason.
+      const name = getRecipeIdentity(config, 'sva')
+      const withName = { ...config, className: config.className ?? name }
+
+      const slots = Object.entries(getSlotRecipes(withName)).map(([slot, slotCva]) => [slot, cva(slotCva)])
       const defaultVariants = config.defaultVariants ?? {}
 
+      // Populated whether or not the author set a \`className\`. Every slot recipe is given
+      // one before the split — the identity when the config declares none — so the guard
+      // that used to sit here left an anonymous \`sva\` reporting no slot classes despite
+      // emitting them.
       const classNameMap = slots.reduce((acc, [slot, cvaFn]) => {
-        if (config.className) acc[slot] = cvaFn.config.className
+        acc[slot] = cvaFn.config.className
         return acc
       }, {})
 
-      function svaFn(props) {
-        const result = slots.map(([slot, cvaFn]) => [slot, cx(cvaFn(props), classNameMap[slot])])
-        return Object.fromEntries(result)
-      }
-
-      function raw(props) {
-        const result = slots.map(([slot, cvaFn]) => [slot, cvaFn.raw(props)])
-        return Object.fromEntries(result)
-      }
-
-      const variants = config.variants ?? {};
-      const variantKeys = Object.keys(variants);
-
-      function splitVariantProps(props) {
-        return splitProps(props, variantKeys);
-      }
-      const getVariantProps = (variants) => ({ ...defaultVariants, ...compact(variants) })
-
-      const variantMap = Object.fromEntries(
-        Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])
-      );
-
-      return Object.assign(memo(svaFn), {
-        __cva__: false,
-        raw,
-        config,
-        variantMap,
-        variantKeys,
-        classNameMap,
-        splitVariantProps,
-        getVariantProps,
-      })
-    }
-    `,
-		dts: outdent.outdent`
-    ${ctx.file.importType("SlotRecipeCreatorFn", "../types/recipe")}
-
-    export declare const sva: SlotRecipeCreatorFn
-    `
-	};
-}
-//#endregion
-//#region src/artifacts/js/token.ts
-function generateTokenJs(ctx) {
-	const { tokens } = ctx;
-	const map = /* @__PURE__ */ new Map();
-	tokens.allTokens.forEach((token) => {
-		const { varRef, isVirtual } = token.extensions;
-		const value = isVirtual || token.extensions.condition !== "base" ? varRef : token.value;
-		map.set(token.name, {
-			value,
-			variable: varRef
-		});
-	});
-	const obj = Object.fromEntries(map);
-	return {
-		js: outdent.default`
-  const tokens = ${JSON.stringify(obj, null, 2)}
-
-  export function token(path, fallback) {
-    return tokens[path]?.value || fallback
-  }
-
-  function tokenVar(path, fallback) {
-    return tokens[path]?.variable || fallback
-  }
-
-  token.var = tokenVar
-  `,
-		dts: outdent.default`
-  ${ctx.file.importType("Token", "./tokens")}
-
-  export declare const token: {
-    (path: Token, fallback?: string): string
-    var: (path: Token, fallback?: string) => string
-  }
-
-  ${ctx.file.exportTypeStar("./tokens")}
-  `
-	};
-}
-//#endregion
-//#region src/artifacts/preact-jsx/jsx.ts
-function generatePreactJsxFactory(ctx) {
-	const { factoryName, componentName } = ctx.jsx;
-	return { js: outdent.outdent`
-    import { h } from 'preact'
-    import { forwardRef } from 'preact/compat'
-    ${ctx.file.import("defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName", "./factory-helper")}
-    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
-    ${ctx.file.import("css, cx, cva", "../css/index")}
-    ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
-
-    function styledFn(Dynamic, configOrCva = {}, options = {}) {
-      const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
-
-      const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
-      const shouldForwardProp = (prop) => {
-        if (options.forwardProps?.includes(prop)) return true
-        return forwardFn(prop, cvaFn.variantKeys)
-      }
-
-      const defaultProps = Object.assign(
-        options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {},
-        options.defaultProps,
-      )
-
-      const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
-      const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
-      const __base__ = Dynamic.__base__ || Dynamic
-
-      const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-        const { as: Element = __base__, unstyled, children, ...restProps } = props
-
-
-        // Not memoized, deliberately. \`restProps\` is rest destructuring, so it is a fresh
-        // object on every render and a dependency on it can never match — a memo here is a
-        // guaranteed miss that still costs a hook slot, a deps array and a retained cell.
-        const combinedProps = Object.assign({}, defaultProps, restProps)
-
-        const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] =
-          splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
-
-        function recipeClass() {
-          const { css: cssStyles, ...propStyles } = styleProps
-          const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps)
-          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
-        }
-
-        function cvaClass() {
-          const { css: cssStyles, ...propStyles } = styleProps
-          const cvaStyles = __cvaFn__.raw(variantProps)
-          return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
-        }
-
-        const classes = () => {
-          if (unstyled) {
-            const { css: cssStyles, ...propStyles } = styleProps
-            return cx(css(propStyles, cssStyles), combinedProps.class, combinedProps.className)
-          }
-          return configOrCva.__recipe__ ? recipeClass() : cvaClass()
-        }
-
-        return h(Element, {
-          ...forwardedProps,
-          ...elementProps,
-          ...normalizeHTMLProps(htmlProps),
-          ref,
-          className: classes()
-        }, children ?? combinedProps.children)
-      })
-
-      const name = getDisplayName(__base__)
-
-      ${componentName}.displayName = \`${factoryName}.\${name}\`
-      ${componentName}.__cva__ = __cvaFn__
-      ${componentName}.__base__ = __base__
-      ${componentName}.__shouldForwardProps__ = shouldForwardProp
-
-      return ${componentName}
-    }
-
-    function createJsxFactory() {
-      const cache = new Map()
-
-      return new Proxy(styledFn, {
-        apply(_, __, args) {
-          return styledFn(...args)
-        },
-        get(_, el) {
-          if (!cache.has(el)) {
-            cache.set(el, styledFn(el))
-          }
-          return cache.get(el)
-        },
-      })
-    }
-
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
-    ` };
-}
-//#endregion
-//#region src/artifacts/preact-jsx/pattern.ts
-function generatePreactJsxPattern(ctx, filters) {
-	const { typeName, factoryName, styleProps: jsxStyleProps } = ctx.jsx;
-	return ctx.patterns.filterDetails(filters).map((pattern) => {
-		const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
-		const { description, jsxElement = "div", deprecated } = pattern.config;
-		return {
-			name: dashName,
-			js: outdent.outdent`
-      import { h } from 'preact'
-      import { forwardRef } from 'preact/compat'
-      ${jsxStyleProps === "minimal" ? ctx.file.import("mergeCss", "../css/css") : ""}
-      ${ctx.file.import("splitProps", "../helpers")}
-      ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
-      ${ctx.file.import(factoryName, "./factory")}
-
-      export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
-        ${(0, ts_pattern.match)(jsxStyleProps).with("none", () => outdent.outdent`
-          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
-          
-          const styleProps = ${styleFnName}(patternProps)
-          const mergedProps = { ref, ...restProps, css: styleProps }
-          
-          return h(${factoryName}.${jsxElement}, mergedProps)
-          `).with("minimal", () => outdent.outdent`
-          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
-          
-          const styleProps = ${styleFnName}(patternProps)
-          const cssProps = { css: mergeCss(styleProps, props.css) }
-          const mergedProps = { ref, ...restProps, ...cssProps }
-          
-          return h(${factoryName}.${jsxElement}, mergedProps)
-          `).with("all", () => outdent.outdent`
-          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
-          
-          const styleProps = ${styleFnName}(patternProps)
-          const mergedProps = { ref, ...styleProps, ...restProps }
-          
-          return h(${factoryName}.${jsxElement}, mergedProps)
-          `).exhaustive()}
-      })
-      `,
-			dts: outdent.outdent`
-      import type { FunctionComponent } from 'preact'
-      ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
-      ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
-      ${ctx.file.importType(typeName, "../types/jsx")}
-
-      export interface ${upperName}Props extends ${upperName}Properties, DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}> {}
-
-      ${ctx.file.jsDocComment(description, { deprecated })}
-      export declare const ${jsxName}: FunctionComponent<${upperName}Props>
-      `
-		};
-	});
-}
-//#endregion
-//#region src/artifacts/preact-jsx/types.ts
-function generatePreactJsxTypes(ctx) {
-	const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
-	return {
-		jsxFactory: outdent.outdent`
-import type { ${upperName} } from '../types/jsx'
-export declare const ${factoryName}: ${upperName}
-    `,
-		jsxType: outdent.outdent`
-import type { ComponentProps, JSX } from 'preact'
-${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
-${ctx.file.importType("Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty", "./system-types")}
-
-export type ElementType = JSX.ElementType
-
-interface Dict {
-  [k: string]: unknown
-}
-
-export type DataAttrs = Record<\`data-\${string}\`, unknown>
-
-export interface UnstyledProps {
-  /**
-   * Whether to remove recipe styles
-   */
-  unstyled?: boolean | undefined
-}
-
-export interface AsProps {
-  /**
-   * The element to render as
-   */
-  as?: ElementType | undefined
-}
-
-export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
-  displayName?: string | undefined
-}
-
-interface RecipeFn {
-  __type: any
-}
-
-export interface JsxFactoryOptions<TProps extends Dict> {
-  dataAttr?: boolean
-  defaultProps?: Partial<TProps> & DataAttrs
-  shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
-  forwardProps?: string[]
-}
-
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>
-
-export type JsxElement<T extends ElementType, P extends Dict> = T extends ${componentName}<infer A, infer B>
-  ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
-  : ${componentName}<T, P>
-
-export interface JsxFactory {
-  <T extends ElementType>(component: T): ${componentName}<T, {}>
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
-    T,
-    RecipeSelection<P>
-  >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): JsxElement<T, P['__type']>
-}
-
-export type JsxElements = {
-  [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}>
-}
-
-export type ${upperName} = JsxFactory & JsxElements
-
-export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
-
-export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
-  `
-	};
-}
-//#endregion
-//#region src/artifacts/preact-jsx/create-style-context.ts
-function generatePreactCreateStyleContext(ctx) {
-	const { factoryName } = ctx.jsx;
-	return {
-		js: outdent.outdent`
-    ${ctx.file.import("cx, css, sva", "../css/index")}
-    ${ctx.file.import(factoryName, "./factory")}
-    ${ctx.file.import("getDisplayName", "./factory-helper")}
-    import { createContext } from 'preact'
-    import { useContext } from 'preact/hooks'
-    import { createElement, forwardRef } from 'preact/compat'
-
-    function createSafeContext(contextName) {
-      const Context = createContext(undefined)
-      const useStyleContext = (componentName, slot) => {
-        const context = useContext(Context)
-        if (context === undefined) {
-          const componentInfo = componentName ? \`Component "\${componentName}"\` : 'A component'
-          const slotInfo = slot ? \` (slot: "\${slot}")\` : ''
-          
-          throw new Error(
-            \`\${componentInfo}\${slotInfo} cannot access \${contextName} because it's missing its Provider.\`
-          )
-        }
-        return context
-      }
-      return [Context, useStyleContext]
-    }
-
-    export function createStyleContext(recipe) {
-      const isConfigRecipe = '__recipe__' in recipe
-      const recipeName = isConfigRecipe && recipe.__name__ ? recipe.__name__ : undefined
-      const contextName = recipeName ? \`createStyleContext("\${recipeName}")\` : 'createStyleContext'
-      
-      const [StyleContext, useStyleContext] = createSafeContext(contextName)
-      const svaFn = isConfigRecipe ? recipe : sva(recipe.config)
-
-      const getResolvedProps = (props, slotStyles) => {
-        const { unstyled, ...restProps } = props
-        if (unstyled) return restProps
-        if (isConfigRecipe) {
-           return { ...restProps, className: cx(slotStyles, restProps.className) }
-        }
-        ${outdent.outdent.string((0, ts_pattern.match)(ctx.config.jsxStyleProps).with("all", () => `return { ...slotStyles, ...restProps }`).with("minimal", () => `return { ...restProps, css: css.raw(slotStyles, restProps.css) }`).with("none", () => `return { ...restProps, className: cx(css(slotStyles), restProps.className) }`).otherwise(() => `return restProps`))}
-      }
-
-      const withRootProvider = (Component, options) => {
-        const WithRootProvider = (props) => {
-          const [variantProps, otherProps] = svaFn.splitVariantProps(props)
-          
-          const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
-          slotStyles._classNameMap = svaFn.classNameMap
-
-          const mergedProps = options?.defaultProps 
-            ? { ...options.defaultProps, ...otherProps } 
-            : otherProps
-
-          return createElement(StyleContext.Provider, {
-            value: slotStyles,
-            children: createElement(Component, mergedProps)
-          })
-        }
-        
-        const componentName = getDisplayName(Component)
-        WithRootProvider.displayName = \`withRootProvider(\${componentName})\`
-        
-        return WithRootProvider
-      }
-
-      const withProvider = (Component, slot, options) => {
-        const StyledComponent = ${factoryName}(Component, {}, options)
-        
-        const WithProvider = forwardRef(function WithProvider(props, ref) {
-          const [variantProps, restProps] = svaFn.splitVariantProps(props)
-          
-          const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
-          slotStyles._classNameMap = svaFn.classNameMap
-
-          const propsWithClass = { ...restProps, className: restProps.className ?? options?.defaultProps?.className }
-          const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot])
-          return createElement(StyleContext.Provider, {
-            value: slotStyles,
-            children: createElement(StyledComponent, {
-              ...resolvedProps,
-              className: cx(resolvedProps.className, slotStyles._classNameMap[slot]),
-              ref,
-            })
-          })
-        })
-        
-        const componentName = getDisplayName(Component)
-        WithProvider.displayName = \`withProvider(\${componentName})\`
-        
-        return WithProvider
-      }
-
-      const withContext = (Component, slot, options) => {
-        const StyledComponent = ${factoryName}(Component, {}, options)
-        const componentName = getDisplayName(Component)
-        
-        const WithContext = forwardRef(function WithContext(props, ref) {
-          const slotStyles = useStyleContext(componentName, slot)
-          
-          const propsWithClass = { ...props, className: props.className ?? options?.defaultProps?.className }
-          const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot])
-          return createElement(StyledComponent, {
-            ...resolvedProps,
-            className: cx(resolvedProps.className, slotStyles._classNameMap[slot]),
-            ref,
-          })
-        })
-        
-        WithContext.displayName = \`withContext(\${componentName})\`
-        
-        return WithContext
-      }
-
-      return {
-        withRootProvider,
-        withProvider,
-        withContext,
-      }
-    }
-    `,
-		dts: outdent.outdent`
-    ${ctx.file.importType("SlotRecipeRuntimeFn, RecipeVariantProps", "../types/recipe")}
-    ${ctx.file.importType("JsxHTMLProps, JsxStyleProps, Assign", "../types/system-types")}
-    ${ctx.file.importType("JsxFactoryOptions, DataAttrs, AsProps", "../types/jsx")}
-    import type { ComponentType, ComponentProps, JSX } from 'preact/compat'
-
-    interface UnstyledProps {
-      unstyled?: boolean | undefined
-    }
-
-    interface WithProviderOptions<P = {}> {
-      defaultProps?: (Partial<P> & DataAttrs) | undefined
-    }
-
-    type ElementType = JSX.ElementType
-
-    type SvaFn<S extends string = any> = SlotRecipeRuntimeFn<S, any>
-    interface SlotRecipeFn {
-      __type: any
-      __slot: string
-      (props?: any): any
-    }
-    type SlotRecipe = SvaFn | SlotRecipeFn
-
-    type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
-
-    type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
-    >
-
-    type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
-      ComponentProps<T> & UnstyledProps & RecipeVariantProps<R>
-    >
-
-    type StyleContextConsumer<T extends ElementType> = ComponentType<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
-    >
-
-    export interface StyleContext<R extends SlotRecipe> {
-      withRootProvider: <T extends ElementType>(
-        Component: T,
-        options?: WithProviderOptions<ComponentProps<T>> | undefined
-      ) => StyleContextRootProvider<T, R>
-      withProvider: <T extends ElementType>(
-        Component: T,
-        slot: InferSlot<R>,
-        options?: JsxFactoryOptions<ComponentProps<T>> | undefined
-      ) => StyleContextProvider<T, R>
-      withContext: <T extends ElementType>(
-        Component: T,
-        slot: InferSlot<R>,
-        options?: JsxFactoryOptions<ComponentProps<T>> | undefined
-      ) => StyleContextConsumer<T>
-    }
-
-    export declare function createStyleContext<R extends SlotRecipe>(recipe: R): StyleContext<R>
-    `
-	};
-}
-//#endregion
-//#region src/artifacts/preact-jsx/jsx.string-literal.ts
-function generatePreactJsxStringLiteralFactory(ctx) {
-	const { factoryName, componentName } = ctx.jsx;
-	return { js: outdent.outdent`
-    import { h } from 'preact'
-    import { forwardRef } from 'preact/compat'
-    ${ctx.file.import("getDisplayName", "./factory-helper")}
-    ${ctx.file.import("css, cx", "../css/index")}
-
-    function createStyledFn(Dynamic) {
-      const __base__ = Dynamic.__base__ || Dynamic
-      return function styledFn(template) {
-        const styles = css.raw(Dynamic.__styles__, template)
-
-        const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-          const { as: Element = __base__, ...elementProps } = props
-
-          function classes() {
-            return cx(css(styles), elementProps.className)
-          }
-
-          return h(Element, {
-            ref,
-            ...elementProps,
-            className: classes(),
-          })
-        })
-
-        const name = getDisplayName(__base__)
-
-        ${componentName}.displayName = \`${factoryName}.\${name}\`
-        ${componentName}.__styles__ = styles
-        ${componentName}.__base__ = __base__
-
-        return ${componentName}
-      }
-    }
-
-    function createJsxFactory() {
-      const cache = new Map()
-
-      return new Proxy(createStyledFn, {
-        apply(_, __, args) {
-          return createStyledFn(...args)
-        },
-        get(_, el) {
-          if (!cache.has(el)) {
-            cache.set(el, createStyledFn(el))
-          }
-          return cache.get(el)
-        },
-      })
-    }
-
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
-    ` };
-}
-//#endregion
-//#region src/artifacts/preact-jsx/types.string-literal.ts
-function generatePreactJsxStringLiteralTypes(ctx) {
-	const { factoryName, componentName, upperName, typeName } = ctx.jsx;
-	return {
-		jsxFactory: outdent.outdent`
-${ctx.file.importType(upperName, "../types/jsx")}
-export declare const ${factoryName}: ${upperName}
-    `,
-		jsxType: outdent.outdent`
-import type { ComponentProps, JSX } from 'preact'
-
-export type ElementType = JSX.ElementType
-
-interface Dict {
-  [k: string]: unknown
-}
-
-export interface AsProps {
-  /**
-   * The element to render as
-   */
-  as?: ElementType | undefined
-}
-
-export type ${componentName}<T extends ElementType> = {
-  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T> & AsProps) => JSX.Element
-  displayName?: string | undefined
-}
-
-export interface JsxFactory {
-  <T extends ElementType>(component: T): ${componentName}<T>
-}
-
-export type JsxElements = {
-  [K in keyof JSX.IntrinsicElements]: ${componentName}<K>
-}
-
-export type ${upperName} = JsxFactory & JsxElements
-
-export type ${typeName}<T extends ElementType> = ComponentProps<T>
-  `
-	};
-}
-//#endregion
-//#region src/artifacts/qwik-jsx/jsx.ts
-function generateQwikJsxFactory(ctx) {
-	const { factoryName, componentName } = ctx.jsx;
-	return { js: outdent.outdent`
-    import { h } from '@builder.io/qwik'
-    ${ctx.file.import("defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName", "./factory-helper")}
-    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
-    ${ctx.file.import("css, cx, cva", "../css/index")}
-    ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
-
-    function styledFn(Dynamic, configOrCva = {}, options = {}) {
-      const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
-
-      const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
-      const shouldForwardProp = (prop) => {
-        if (options.forwardProps?.includes(prop)) return true
-        return forwardFn(prop, cvaFn.variantKeys)
-      }
-
-      const defaultProps = Object.assign(
-        options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {},
-        options.defaultProps,
-      )
-
-      const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
-      const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
-      const __base__ = Dynamic.__base__ || Dynamic
-
-      const ${componentName} = function ${componentName}(props) {
-        const { as: Element = __base__, unstyled, children, className, ...restProps } = props
-
-        const combinedProps = Object.assign({}, defaultProps, restProps)
-
-        const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] =
-          splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
-
-        const { css: cssStyles, ...propStyles } = styleProps
-
-        function recipeClass() {
-          const { css: cssStyles, ...propStyles } = styleProps
-          const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
-          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, className)
-        }
-
-        function cvaClass() {
-          const { css: cssStyles, ...propStyles } = styleProps
-          const cvaStyles = __cvaFn__.raw(variantProps)
-          return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.class, className)
-        }
-
-        const classes = () => {
-          if (unstyled) {
-            const { css: cssStyles, ...propStyles } = styleProps
-            return cx(css(propStyles, cssStyles), combinedProps.class, className)
-          }
-          return configOrCva.__recipe__ ? recipeClass() : cvaClass()
-        }
-
-        return h(Element, {
-          ...forwardedProps,
-          ...elementProps,
-          ...normalizeHTMLProps(htmlProps),
-          class: classes(),
-        }, children ?? combinedProps.children)
-      }
-
-      const name = getDisplayName(__base__)
-
-      ${componentName}.displayName = \`${factoryName}.\${name}\`
-      ${componentName}.__cva__ = __cvaFn__
-      ${componentName}.__base__ = __base__
-      ${componentName}.__shouldForwardProps__ = shouldForwardProp
-
-      return ${componentName}
-    }
-
-    function createJsxFactory() {
-      const cache = new Map()
-
-      return new Proxy(styledFn, {
-        apply(_, __, args) {
-          return styledFn(...args)
-        },
-        get(_, el) {
-          if (!cache.has(el)) {
-            cache.set(el, styledFn(el))
-          }
-          return cache.get(el)
-        },
-      })
-    }
-
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
-
-    ` };
-}
-//#endregion
-//#region src/artifacts/qwik-jsx/pattern.ts
-function generateQwikJsxPattern(ctx, filters) {
-	const { typeName, factoryName, styleProps: jsxStyleProps } = ctx.jsx;
-	return ctx.patterns.filterDetails(filters).map((pattern) => {
-		const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
-		const { description, jsxElement = "div", deprecated } = pattern.config;
-		return {
-			name: dashName,
-			js: outdent.outdent`
-      import { h } from '@builder.io/qwik'
-      ${jsxStyleProps === "minimal" ? ctx.file.import("mergeCss", "../css/css") : ""}
-      ${ctx.file.import("splitProps", "../helpers")}
-      ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
-      ${ctx.file.import(factoryName, "./factory")}
-
-      export const ${jsxName} = /* @__PURE__ */ function ${jsxName}(props) {
-        ${(0, ts_pattern.match)(jsxStyleProps).with("none", () => outdent.outdent`
-          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
-          
-          const styleProps = ${styleFnName}(patternProps)
-          const mergedProps = { ref, ...restProps, css: styleProps }
-          
-          return h(${factoryName}.${jsxElement}, mergedProps)
-          `).with("minimal", () => outdent.outdent`
-          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
-          
-          const styleProps = ${styleFnName}(patternProps)
-          const cssProps = { css: mergeCss(styleProps, props.css) }
-          const mergedProps = { ...restProps, ...cssProps }
-
-          return h(${factoryName}.${jsxElement}, mergedProps)
-          `).with("all", () => outdent.outdent`
-          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
-          
-          const styleProps = ${styleFnName}(patternProps)
-          const mergedProps = { ...styleProps, ...restProps }
-          
-          return h(${factoryName}.${jsxElement}, mergedProps)
-          `).exhaustive()}
-      }
-      `,
-			dts: outdent.outdent`
-      import type { Component } from '@builder.io/qwik'
-      ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
-      ${ctx.file.importType(typeName, "../types/jsx")}
-      ${ctx.file.importType("Assign, DistributiveOmit", "../types/system-types")}
-
-      export interface ${upperName}Props extends Assign<${typeName}<'${jsxElement}'>, DistributiveOmit<${upperName}Properties, ${blocklistType || "\"\""}>> {}
-
-      ${ctx.file.jsDocComment(description, { deprecated })}
-      export declare const ${jsxName}: Component<${upperName}Props>
-      `
-		};
-	});
-}
-//#endregion
-//#region src/artifacts/qwik-jsx/types.ts
-function generateQwikJsxTypes(ctx) {
-	const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
-	return {
-		jsxFactory: outdent.outdent`
-${ctx.file.importType(upperName, "../types/jsx")}
-export declare const ${factoryName}: ${upperName}
-    `,
-		jsxType: outdent.outdent`
-import type { Component, QwikIntrinsicElements } from '@builder.io/qwik'
-${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
-${ctx.file.importType("Assign, DistributiveOmit, DistributiveUnion, JsxStyleProps, PatchedHTMLProps, Pretty", "./system-types")}
-
-export type ElementType = keyof QwikIntrinsicElements | Component<any>
-
-export type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElements
-  ? QwikIntrinsicElements[T]
-  : T extends Component<infer P>
-  ? P
-  : never
-
-interface Dict {
-  [k: string]: unknown
-}
-
-export type DataAttrs = Record<\`data-\${string}\`, unknown>
-
-export interface UnstyledProps {
-  /**
-   * Whether to remove recipe styles
-   */
-  unstyled?: boolean | undefined
-}
-
-export interface AsProps {
-  /**
-   * The element to render as
-   */
-  as?: ElementType | undefined
-}
-
-export interface ${componentName}<T extends ElementType, P extends Dict = {}> extends Component<Assign<ComponentProps<T> & UnstyledProps & AsProps, Assign<PatchedHTMLProps, Assign<JsxStyleProps, P>>>> {}
-
-interface RecipeFn {
-  __type: any
-}
-
-export interface JsxFactoryOptions<TProps extends Dict> {
-  dataAttr?: boolean
-  defaultProps?: Partial<TProps> & DataAttrs
-  shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
-  forwardProps?: string[]
-}
-
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>;
-
-export type JsxElement<T extends ElementType, P extends Dict> = T extends ${componentName}<infer A, infer B>
-  ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
-  : ${componentName}<T, P>
-
-export interface JsxFactory {
-  <T extends ElementType>(component: T): ${componentName}<T, {}>
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
-    T,
-    RecipeSelection<P>
-  >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): JsxElement<T, P['__type']>
-}
-
-export type JsxElements = {
-  [K in keyof QwikIntrinsicElements]: ${componentName}<K, {}>
-}
-
-export type ${upperName} = JsxFactory & JsxElements
-
-export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
-
-export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
-  `
-	};
-}
-//#endregion
-//#region src/artifacts/qwik-jsx/jsx.string-literal.ts
-function generateQwikJsxStringLiteralFactory(ctx) {
-	const { factoryName, componentName } = ctx.jsx;
-	return { js: outdent.outdent`
-    import { h } from '@builder.io/qwik'
-    ${ctx.file.import("getDisplayName", "./factory-helper")}
-    ${ctx.file.import("css, cx", "../css/index")}
-
-    function createStyledFn(Dynamic) {
-      const __base__ = Dynamic.__base__ || Dynamic
-      return function styledFn(template) {
-          const styles = css.raw(Dynamic.__styles__, template)
-
-          const ${componentName} = (props) => {
-            const { as: Element = __base__, ...elementProps } = props
-
-            function classes() {
-              return cx(css(styles), elementProps.className)
-            }
-
-            return h(Element, {
-              ...elementProps,
-              className: classes(),
-            })
-          }
-
-          const name = getDisplayName(__base__)
-
-          ${componentName}.displayName = \`${factoryName}.\${name}\`
-          ${componentName}.__styles__ = styles
-          ${componentName}.__base__ = __base__
-
-          return ${componentName}
-        }
-    }
-
-    function createJsxFactory() {
-      const cache = new Map()
-
-      return new Proxy(createStyledFn, {
-        apply(_, __, args) {
-          return createStyledFn(...args)
-        },
-        get(_, el) {
-          if (!cache.has(el)) {
-            cache.set(el, createStyledFn(el))
-          }
-          return cache.get(el)
-        },
-      })
-    }
-
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
-
-    ` };
-}
-//#endregion
-//#region src/artifacts/qwik-jsx/types.string-literal.ts
-function generateQwikJsxStringLiteralTypes(ctx) {
-	const { factoryName, componentName, upperName, typeName } = ctx.jsx;
-	return {
-		jsxFactory: outdent.outdent`
-${ctx.file.importType(upperName, "../types/jsx")}
-export declare const ${factoryName}: ${upperName}
-    `,
-		jsxType: outdent.outdent`
-import type { Component, QwikIntrinsicElements } from '@builder.io/qwik'
-
-export type ElementType = keyof QwikIntrinsicElements | Component<any>
-
-export type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElements
-  ? QwikIntrinsicElements[T]
-  : T extends Component<infer P>
-  ? P
-  : never
-
-interface Dict {
-  [k: string]: unknown
-}
-
-export interface AsProps {
-  /**
-   * The element to render as
-   */
-  as?: ElementType | undefined
-}
-
-export type ${componentName}<T extends ElementType> = {
-  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T> & AsProps) => JSX.Element
-}
-
-export interface JsxFactory {
-  <T extends ElementType>(component: T): ${componentName}<T>
-}
-
-export type JsxElements = {
-  [K in keyof QwikIntrinsicElements]: ${componentName}<K>
-}
-
-export type ${upperName} = JsxFactory & JsxElements
-
-export type ${typeName}<T extends ElementType> = ComponentProps<T>
-  `
-	};
-}
-//#endregion
-//#region src/artifacts/react-jsx/jsx.ts
-function generateReactJsxFactory(ctx) {
-	const { factoryName, componentName } = ctx.jsx;
-	return { js: outdent.outdent`
-    import { createElement, forwardRef } from 'react'
-    ${ctx.file.import("css, cx, cva", "../css/index")}
-    ${ctx.file.import("defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName", "./factory-helper")}
-    ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
-    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
-
-    function styledFn(Dynamic, configOrCva = {}, options = {}) {
-      const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
-
-      const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
-      const shouldForwardProp = (prop) => {
-        if (options.forwardProps?.includes(prop)) return true
-        return forwardFn(prop, cvaFn.variantKeys)
-      }
-      
-      const defaultProps = Object.assign(
-        options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {},
-        options.defaultProps,
-      )
-
-      const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
-      const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
-      const __base__ = Dynamic.__base__ || Dynamic
-
-      const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-        const { as: Element = __base__, unstyled, children, ...restProps } = props
-
-        // Not memoized, deliberately. \`restProps\` is rest destructuring, so it is a fresh
-        // object on every render and a dependency on it can never match — a memo here is a
-        // guaranteed miss that still costs a hook slot, a deps array and a retained cell.
-        const combinedProps = Object.assign({}, defaultProps, restProps)
-
-        const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] =
-          splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
-
-        function recipeClass() {
-          const { css: cssStyles, ...propStyles } = styleProps
-          const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps)
-          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className)
-        }
-
-        function cvaClass() {
-          const { css: cssStyles, ...propStyles } = styleProps
-          const cvaStyles = __cvaFn__.raw(variantProps)
-          return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className)
-        }
-
-        const classes = () => {
-          if (unstyled) {
-            const { css: cssStyles, ...propStyles } = styleProps
-            return cx(css(propStyles, cssStyles), combinedProps.className)
-          }
-          return configOrCva.__recipe__ ? recipeClass() : cvaClass()
-        }
-
-        return createElement(Element, {
-          ref,
-          ...forwardedProps,
-          ...elementProps,
-          ...normalizeHTMLProps(htmlProps),
-          className: classes(),
-        }, children ?? combinedProps.children)
-      })
-
-      const name = getDisplayName(__base__)
-
-      ${componentName}.displayName = \`${factoryName}.\${name}\`
-      ${componentName}.__cva__ = __cvaFn__
-      ${componentName}.__base__ = __base__
-      ${componentName}.__shouldForwardProps__ = shouldForwardProp
-
-      return ${componentName}
-    }
-
-    function createJsxFactory() {
-      const cache = new Map()
-
-      return new Proxy(styledFn, {
-        apply(_, __, args) {
-          return styledFn(...args)
-        },
-        get(_, el) {
-          if (!cache.has(el)) {
-            cache.set(el, styledFn(el))
-          }
-          return cache.get(el)
-        },
-      })
-    }
-
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
-
-    ` };
-}
-//#endregion
-//#region src/artifacts/react-jsx/pattern.ts
-function generateReactJsxPattern(ctx, filters) {
-	const { typeName, factoryName, styleProps: jsxStyleProps } = ctx.jsx;
-	return ctx.patterns.filterDetails(filters).map((pattern) => {
-		const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
-		const { description, jsxElement = "div", deprecated } = pattern.config;
-		return {
-			name: dashName,
-			js: outdent.outdent`
-      import { createElement, forwardRef } from 'react'
-      ${jsxStyleProps === "minimal" ? ctx.file.import("mergeCss", "../css/css") : ""}
-      ${ctx.file.import("splitProps", "../helpers")}
-      ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
-      ${ctx.file.import(factoryName, "./factory")}
-
-      export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
-        ${(0, ts_pattern.match)(jsxStyleProps).with("none", () => outdent.outdent`
-          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
-          
-          const styleProps = ${styleFnName}(patternProps)
-          const mergedProps = { ref, ...restProps, css: styleProps }
-          
-          return createElement(${factoryName}.${jsxElement}, mergedProps)
-          `).with("minimal", () => outdent.outdent`
-          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
-          
-          const styleProps = ${styleFnName}(patternProps)
-          const cssProps = { css: mergeCss(styleProps, props.css) }
-          const mergedProps = { ref, ...restProps, ...cssProps }
-
-          return createElement(${factoryName}.${jsxElement}, mergedProps)
-          `).with("all", () => outdent.outdent`
-          const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
-          
-          const styleProps = ${styleFnName}(patternProps)
-          const mergedProps = { ref, ...styleProps, ...restProps }
-
-          return createElement(${factoryName}.${jsxElement}, mergedProps)
-          `).exhaustive()}
-        })
-      `,
-			dts: outdent.outdent`
-      import type { FunctionComponent } from 'react'
-      ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
-      ${ctx.file.importType(typeName, "../types/jsx")}
-      ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
-
-      export interface ${upperName}Props extends ${upperName}Properties, DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}> {}
-
-      ${ctx.file.jsDocComment(description, { deprecated })}
-      export declare const ${jsxName}: FunctionComponent<${upperName}Props>
-      `
-		};
-	});
-}
-//#endregion
-//#region src/artifacts/react-jsx/types.ts
-function generateReactJsxTypes(ctx) {
-	const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
-	return {
-		jsxFactory: outdent.outdent`
-${ctx.file.importType(upperName, "../types/jsx")}
-export declare const ${factoryName}: ${upperName}
-    `,
-		jsxType: outdent.outdent`
-import type { ElementType, JSX, ComponentPropsWithRef, ComponentType, Component } from 'react'
-${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
-${ctx.file.importType("Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty", "./system-types")}
-
-interface Dict {
-  [k: string]: unknown
-}
-
-export type DataAttrs = Record<\`data-\${string}\`, unknown>
-
-export interface UnstyledProps {
-  /**
-   * Whether to remove recipe styles
-   */
-  unstyled?: boolean | undefined
-}
-
-export interface AsProps {
-  /**
-   * The element to render as
-   */
-  as?: ElementType | undefined
-}
-
-export type ComponentProps<T extends ElementType> = T extends ComponentType<infer P> | Component<infer P>
-  ? JSX.LibraryManagedAttributes<T, P>
-  : ComponentPropsWithRef<T>
-
-export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
-  displayName?: string | undefined
-}
-
-interface RecipeFn {
-  __type: any
-}
-
-export interface JsxFactoryOptions<TProps extends Dict> {
-  dataAttr?: boolean
-  defaultProps?: Partial<TProps> & DataAttrs
-  shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
-  forwardProps?: string[]
-}
-
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>;
-
-export type JsxElement<T extends ElementType, P extends Dict> = T extends ${componentName}<infer A, infer B>
-  ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
-  : ${componentName}<T, P>
-
-export interface JsxFactory {
-  <T extends ElementType>(component: T): ${componentName}<T, {}>
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
-    T,
-    RecipeSelection<P>
-  >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): JsxElement<T, P['__type']>
-}
-
-export type JsxElements = {
-  [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}>
-}
-
-export type ${upperName} = JsxFactory & JsxElements
-
-export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
-
-export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
-  `
-	};
-}
-//#endregion
-//#region src/artifacts/react-jsx/create-style-context.ts
-function generateReactCreateStyleContext(ctx) {
-	const { factoryName } = ctx.jsx;
-	return {
-		js: outdent.outdent`'use client'\n
-    ${ctx.file.import("cx, css, sva", "../css/index")}
-    ${ctx.file.import(factoryName, "./factory")}
-    ${ctx.file.import("getDisplayName", "./factory-helper")}
-    import { createContext, useContext, createElement, forwardRef } from 'react'
-    
-    function createSafeContext(contextName) {
-      const Context = createContext(undefined)
-      const useStyleContext = (componentName, slot) => {
-        const context = useContext(Context)
-        if (context === undefined) {
-          const componentInfo = componentName ? \`Component "\${componentName}"\` : 'A component'
-          const slotInfo = slot ? \` (slot: "\${slot}")\` : ''
-          
-          throw new Error(
-            \`\${componentInfo}\${slotInfo} cannot access \${contextName} because it's missing its Provider.\`
-          )
-        }
-        return context
-      }
-      return [Context, useStyleContext]
-    }
-    
-    export function createStyleContext(recipe) {
-      const isConfigRecipe = '__recipe__' in recipe
-      const recipeName = isConfigRecipe && recipe.__name__ ? recipe.__name__ : undefined
-      const contextName = recipeName ? \`createStyleContext("\${recipeName}")\` : 'createStyleContext'
-      
-      const [StyleContext, useStyleContext] = createSafeContext(contextName)
-      const svaFn = isConfigRecipe ? recipe : sva(recipe.config)
-
-      const getResolvedProps = (props, slotStyles) => {
-        const { unstyled, ...restProps } = props
-        if (unstyled) return restProps
-        if (isConfigRecipe) {
-           return { ...restProps, className: cx(slotStyles, restProps.className) }
-        }
-        ${outdent.outdent.string((0, ts_pattern.match)(ctx.config.jsxStyleProps).with("all", () => `return { ...slotStyles, ...restProps }`).with("minimal", () => `return { ...restProps, css: css.raw(slotStyles, restProps.css) }`).with("none", () => `return { ...restProps, className: cx(css(slotStyles), restProps.className) }`).otherwise(() => `return restProps`))}
-      }
-
-      const withRootProvider = (Component, options) => {
-        const WithRootProvider = (props) => {
-          const [variantProps, otherProps] = svaFn.splitVariantProps(props)
-          
-          const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
-          slotStyles._classNameMap = svaFn.classNameMap
-
-          const mergedProps = options?.defaultProps 
-            ? { ...options.defaultProps, ...otherProps } 
-            : otherProps
-
-          return createElement(StyleContext.Provider, {
-            value: slotStyles,
-            children: createElement(Component, mergedProps)
-          })
-        }
-        
-        const componentName = getDisplayName(Component)
-        WithRootProvider.displayName = \`withRootProvider(\${componentName})\`
-        
-        return WithRootProvider
-      }
-
-      const withProvider = (Component, slot, options) => {
-        const StyledComponent = ${factoryName}(Component, {}, options)
-        
-        const WithProvider = forwardRef((props, ref) => {
-          const [variantProps, restProps] = svaFn.splitVariantProps(props)
-          
-          const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
-          slotStyles._classNameMap = svaFn.classNameMap
-
-          const propsWithClass = { ...restProps, className: restProps.className ?? options?.defaultProps?.className }
-          const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot])
-          return createElement(StyleContext.Provider, {
-            value: slotStyles,
-            children: createElement(StyledComponent, {
-              ...resolvedProps,
-              className: cx(resolvedProps.className, slotStyles._classNameMap[slot]),
-              ref,
-            })
-          })
-        })
-        
-        const componentName = getDisplayName(Component)
-        WithProvider.displayName = \`withProvider(\${componentName})\`
-        
-        return WithProvider
-      }
-
-      const withContext = (Component, slot, options) => {
-        const StyledComponent = ${factoryName}(Component, {}, options)
-        const componentName = getDisplayName(Component)
-        
-        const WithContext = forwardRef((props, ref) => {
-          const slotStyles = useStyleContext(componentName, slot)
-  
-          const propsWithClass = { ...props, className: props.className ?? options?.defaultProps?.className }
-          const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot])
-          return createElement(StyledComponent, {
-            ...resolvedProps,
-            className: cx(resolvedProps.className, slotStyles._classNameMap[slot]),
-            ref,
-          })
-        })
-        
-        WithContext.displayName = \`withContext(\${componentName})\`
-        
-        return WithContext
-      }
-
-      return {
-        withRootProvider,
-        withProvider,
-        withContext,
-      }
-    }
-    `,
-		dts: outdent.outdent`
-    ${ctx.file.importType("SlotRecipeRuntimeFn, RecipeVariantProps", "../types/recipe")}
-    ${ctx.file.importType("JsxHTMLProps, JsxStyleProps, Assign", "../types/system-types")}
-    ${ctx.file.importType("JsxFactoryOptions, ComponentProps, DataAttrs, AsProps", "../types/jsx")}
-    import type { ComponentType, ElementType } from 'react'
-
-    interface UnstyledProps {
-      unstyled?: boolean | undefined
-    }
-
-    type SvaFn<S extends string = any> = SlotRecipeRuntimeFn<S, any>
-    interface SlotRecipeFn {
-      __type: any
-      __slot: string
-      (props?: any): any
-    }
-    type SlotRecipe = SvaFn | SlotRecipeFn
-
-    type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
-
-    interface WithProviderOptions<P = {}> {
-      defaultProps?: (Partial<P> & DataAttrs) | undefined
-    }
-
-    type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
-    >
-
-    type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
-      ComponentProps<T> & UnstyledProps & RecipeVariantProps<R>
-    >
-    
-    type StyleContextConsumer<T extends ElementType> = ComponentType<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
-    >
-
-    export interface StyleContext<R extends SlotRecipe> {
-      withRootProvider: <T extends ElementType>(
-        Component: T,
-        options?: WithProviderOptions<ComponentProps<T>> | undefined
-      ) => StyleContextRootProvider<T, R>
-      withProvider: <T extends ElementType>(
-        Component: T,
-        slot: InferSlot<R>,
-        options?: JsxFactoryOptions<ComponentProps<T>> | undefined
-      ) => StyleContextProvider<T, R>
-      withContext: <T extends ElementType>(
-        Component: T,
-        slot: InferSlot<R>,
-        options?: JsxFactoryOptions<ComponentProps<T>> | undefined
-      ) => StyleContextConsumer<T>
-    }
-
-    export declare function createStyleContext<R extends SlotRecipe>(recipe: R): StyleContext<R>
-    `
-	};
-}
-//#endregion
-//#region src/artifacts/react-jsx/jsx.string-literal.ts
-function generateReactJsxStringLiteralFactory(ctx) {
-	const { factoryName, componentName } = ctx.jsx;
-	return { js: outdent.outdent`
-    import { createElement, forwardRef } from 'react'
-    ${ctx.file.import("getDisplayName", "./factory-helper")}
-    ${ctx.file.import("css, cx", "../css/index")}
-
-    function createStyledFn(Dynamic) {
-      const __base__ = Dynamic.__base__ || Dynamic
-      return function styledFn(template) {
-        const styles = css.raw(Dynamic.__styles__, template)
-
-        const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-          const { as: Element = __base__, ...elementProps } = props
-
-          function classes() {
-            return cx(css(styles), elementProps.className)
-          }
-
-          return createElement(Element, {
-              ref,
-              ...elementProps,
-              className: classes(),
-          })
-        })
-
-        const name = getDisplayName(__base__)
-
-        ${componentName}.displayName = \`${factoryName}.\${name}\`
-        ${componentName}.__styles__ = styles
-        ${componentName}.__base__ = __base__
-
-        return ${componentName}
-      }
-    }
-
-    function createJsxFactory() {
-      const cache = new Map()
-
-      return new Proxy(createStyledFn, {
-        apply(_, __, args) {
-          return createStyledFn(...args)
-        },
-        get(_, el) {
-          if (!cache.has(el)) {
-            cache.set(el, createStyledFn(el))
-          }
-          return cache.get(el)
-        },
-      })
-    }
-
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
-    ` };
-}
-//#endregion
-//#region src/artifacts/react-jsx/types.string-literal.ts
-function generateReactJsxStringLiteralTypes(ctx) {
-	const { factoryName, componentName, upperName, typeName } = ctx.jsx;
-	return {
-		jsxFactory: outdent.outdent`
-${ctx.file.importType(upperName, "../types/jsx")}
-export declare const ${factoryName}: ${upperName}
-    `,
-		jsxType: outdent.outdent`
-import type { ComponentPropsWithoutRef, ElementType, ElementRef, JSX, Ref } from 'react'
-${ctx.file.importType("DistributiveOmit", "../types/system-types")}
-
-interface Dict {
-  [k: string]: unknown
-}
-
-export interface AsProps {
-  /**
-   * The element to render as
-   */
-  as?: ElementType | undefined
-}
-
-export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
-  ref?: Ref<ElementRef<T>>
-} & AsProps
-
-export type ${componentName}<T extends ElementType> = {
-  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
-  displayName?: string | undefined
-}
-
-export interface JsxFactory {
-  <T extends ElementType>(component: T): ${componentName}<T>
-}
-
-export type JsxElements = {
-  [K in keyof JSX.IntrinsicElements]: ${componentName}<K>
-}
-
-export type ${upperName} = JsxFactory & JsxElements
-
-export type ${typeName}<T extends ElementType> = ComponentProps<T>
-  `
-	};
-}
-//#endregion
-//#region src/artifacts/solid-jsx/jsx.ts
-function generateSolidJsxFactory(ctx) {
-	const { componentName, factoryName } = ctx.jsx;
-	return { js: outdent.outdent`
-    import { createMemo, mergeProps, splitProps } from 'solid-js'
-    import { Dynamic, createComponent } from 'solid-js/web'
-    ${ctx.file.import("css, cx, cva", "../css/index")}
-    ${ctx.file.import("normalizeHTMLProps", "../helpers")}
-    ${ctx.file.import("composeCvaFn, composeShouldForwardProps, defaultShouldForwardProp, getDisplayName", "./factory-helper")}
-    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
-
-    function styledFn(element, configOrCva = {}, options = {}) {
-      const cvaFn =
-        configOrCva.__cva__ || configOrCva.__recipe__
-          ? configOrCva
-          : cva(configOrCva)
-
-      const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
-      const shouldForwardProp = (prop) => {
-        if (options.forwardProps?.includes(prop)) return true
-        return forwardFn(prop, cvaFn.variantKeys)
-      }
-
-      const getDefaultProps = () => {
-        const baseDefaults = options.dataAttr && configOrCva.__name__
-          ? { 'data-recipe': configOrCva.__name__ }
-          : {}
-        const defaults = typeof options.defaultProps === 'function'
-          ? options.defaultProps()
-          : options.defaultProps
-        return Object.assign(baseDefaults, defaults)
-      }
-
-      const __cvaFn__ = composeCvaFn(element.__cva__, cvaFn)
-      const __shouldForwardProps__ = composeShouldForwardProps(
-        element,
-        shouldForwardProp
-      )
-
-      const ${componentName} = (props) => {
-        const mergedProps = mergeProps(
-          { as: element.__base__ || element },
-          getDefaultProps(),
-          props
-        )
-
-        const [localProps, restProps] = splitProps(mergedProps, [
-          'as',
-          'unstyled',
-          'class',
-          'className',
-        ])
-
-        const [htmlProps, aProps] = splitProps(restProps, normalizeHTMLProps.keys)
-
-        const forwardedKeys = createMemo(() => {
-          const keys = Object.keys(aProps)
-          return keys.filter((prop) => __shouldForwardProps__(prop))
-        })
-
-        const [forwardedProps, variantProps, bProps] = splitProps(aProps, forwardedKeys(), __cvaFn__.variantKeys)
-
-        const cssPropKeys = createMemo(() => {
-          const keys = Object.keys(bProps)
-          return keys.filter((prop) => isCssProperty(prop))
-        })
-
-        const [styleProps, elementProps] = splitProps(bProps, cssPropKeys())
-
-        function recipeClass() {
-          const { css: cssStyles, ...propStyles } = styleProps
-          const compoundVariantStyles =
-            __cvaFn__.__getCompoundVariantCss__?.(variantProps)
-          return cx(
-            __cvaFn__(variantProps, false),
-            css(compoundVariantStyles, propStyles, cssStyles),
-            localProps.class,
-            localProps.className
-          )
-        }
-
-        function cvaClass() {
-          const { css: cssStyles, ...propStyles } = styleProps
-          const cvaStyles = __cvaFn__.raw(variantProps)
-          return cx(
-            css(cvaStyles, propStyles, cssStyles),
-            localProps.class,
-            localProps.className
-          )
-        }
-
-        const classes = () => {
-          if (localProps.unstyled) {
-            const { css: cssStyles, ...propStyles } = styleProps
-            return cx(css(propStyles, cssStyles), localProps.class, localProps.className)
-          }
-          return configOrCva.__recipe__ ? recipeClass() : cvaClass()
-        }
-
-        if (forwardedProps.className) {
-          delete forwardedProps.className
-        }
-
-        return createComponent(
-          Dynamic,
-          mergeProps(forwardedProps, elementProps, normalizeHTMLProps(htmlProps), {
-            get component() {
-              return localProps.as
-            },
-            get class() {
-              return classes()
-            },
-          })
-        )
-      }
-
-      const name = getDisplayName(element)
-
-      ${componentName}.displayName = \`${factoryName}.\${name}\`
-      ${componentName}.__cva__ = __cvaFn__
-      ${componentName}.__base__ = element
-      ${componentName}.__shouldForwardProps__ = shouldForwardProp
-
-      return ${componentName}
-    }
-
-    function createJsxFactory() {
-      const cache = new Map()
-
-      return new Proxy(styledFn, {
-        apply(_, __, args) {
-          return styledFn(...args)
-        },
-        get(_, el) {
-          if (!cache.has(el)) {
-            cache.set(el, styledFn(el))
-          }
-          return cache.get(el)
-        },
-      })
-    }
-
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
-    ` };
-}
-//#endregion
-//#region src/artifacts/solid-jsx/pattern.ts
-function generateSolidJsxPattern(ctx, filters) {
-	const { typeName, factoryName, styleProps: jsxStyleProps } = ctx.jsx;
-	return ctx.patterns.filterDetails(filters).map((pattern) => {
-		const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
-		const { description, jsxElement = "div", deprecated } = pattern.config;
-		return {
-			name: dashName,
-			js: outdent.outdent`
-    import { createMemo, mergeProps, splitProps } from 'solid-js'
-    import { createComponent } from 'solid-js/web'
-    ${jsxStyleProps === "minimal" ? ctx.file.import("mergeCss", "../css/css") : ""}
-    ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
-    ${ctx.file.import(factoryName, "./factory")}
-
-    export const ${jsxName} = /* @__PURE__ */ function ${jsxName}(props) {
-      ${(0, ts_pattern.match)(jsxStyleProps).with("none", () => outdent.outdent`
-        const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
-        
-        const cssProps = createMemo(() => {
-          const styleProps = ${styleFnName}(patternProps)
-          return { css: styleProps }
-        })
-        
-        const mergedProps = mergeProps(restProps, cssProps)
-
-        return createComponent(${factoryName}.${jsxElement}, mergedProps)
-        `).with("minimal", () => outdent.outdent`
-        const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
-        
-        const cssProps = createMemo(() => {
-          const styleProps = ${styleFnName}(patternProps)
-          return { css: mergeCss(styleProps, props.css) }
-        })
-
-        const mergedProps = mergeProps(restProps, cssProps)
-
-        return createComponent(${factoryName}.${jsxElement}, mergedProps)
-        `).with("all", () => outdent.outdent`
-        const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
-        
-        const styleProps = ${styleFnName}(patternProps)        
-        const mergedProps = mergeProps(styleProps, restProps)
-        
-        return createComponent(${factoryName}.${jsxElement}, mergedProps)
-        `).exhaustive()}
-    }
-    `,
-			dts: outdent.outdent`
-    import type { Component } from 'solid-js'
-    ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
-    ${ctx.file.importType(typeName, "../types/jsx")}
-    ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
-
-    export interface ${upperName}Props extends ${upperName}Properties, DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}> {}
-
-    ${ctx.file.jsDocComment(description, { deprecated })}
-    export declare const ${jsxName}: Component<${upperName}Props>
-    `
-		};
-	});
-}
-//#endregion
-//#region src/artifacts/solid-jsx/types.ts
-function generateSolidJsxTypes(ctx) {
-	const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
-	return {
-		jsxFactory: outdent.outdent`
-${ctx.file.importType(upperName, "../types/jsx")}
-export declare const ${factoryName}: ${upperName}
-    `,
-		jsxType: outdent.outdent`
-import type { Accessor, ComponentProps, Component, JSX } from 'solid-js'
-${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
-${ctx.file.importType("Assign, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty", "./system-types")}
-
-interface Dict {
-  [k: string]: unknown
-}
-
-export type DataAttrs = Record<\`data-\${string}\`, unknown>
-
-export interface UnstyledProps {
-  /**
-   * Whether to remove recipe styles
-   */
-  unstyled?: boolean | undefined
-}
-
-export interface AsProps {
-  /**
-   * The element to render as
-   */
-  as?: ElementType | undefined
-}
-
-export type ElementType = keyof JSX.IntrinsicElements | Component<any>
-
-export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
-  displayName?: string | undefined
-}
-
-interface RecipeFn {
-  __type: any
-}
-
-export type MaybeAccessor<T> = T | Accessor<T>
-
-export interface JsxFactoryOptions<TProps extends Dict> {
-  dataAttr?: boolean
-  defaultProps?: MaybeAccessor<Partial<TProps> & DataAttrs>
-  shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
-  forwardProps?: string[]
-}
-
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>;
-
-export type JsxElement<T extends ElementType, P extends Dict> = T extends ${componentName}<infer A, infer B>
-  ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
-  : ${componentName}<T, P>
-
-export interface JsxFactory {
-  <T extends ElementType>(component: T): ${componentName}<T, {}>
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
-    T,
-    RecipeSelection<P>
-  >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): JsxElement<T, P['__type']>
-}
-
-export type JsxElements = {
-  [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}>
-}
-
-export type ${upperName} = JsxFactory & JsxElements
-
-export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
-
-export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
-  `
-	};
-}
-//#endregion
-//#region src/artifacts/solid-jsx/create-style-context.ts
-function generateSolidCreateStyleContext(ctx) {
-	const { factoryName } = ctx.jsx;
-	return {
-		js: outdent.outdent`
-    ${ctx.file.import("cx, css, sva", "../css/index")}
-    ${ctx.file.import(factoryName, "./factory")}
-    ${ctx.file.import("getDisplayName", "./factory-helper")}
-    import { createComponent, mergeProps } from 'solid-js/web'
-    import { createContext, createMemo, splitProps, useContext } from 'solid-js'
-
-    function createSafeContext(contextName) {
-      const Context = createContext(undefined)
-      const useStyleContext = (componentName, slot) => {
-        const context = useContext(Context)
-        if (context === undefined) {
-          const componentInfo = componentName ? \`Component "\${componentName}"\` : 'A component'
-          const slotInfo = slot ? \` (slot: "\${slot}")\` : ''
-          
-          throw new Error(
-            \`\${componentInfo}\${slotInfo} cannot access \${contextName} because it's missing its Provider.\`
-          )
-        }
-        return context
-      }
-      return [Context, useStyleContext]
-    }
-
-    export function createStyleContext(recipe) {
-      const isConfigRecipe = '__recipe__' in recipe
-      const recipeName = isConfigRecipe && recipe.__name__ ? recipe.__name__ : undefined
-      const contextName = recipeName ? \`createStyleContext("\${recipeName}")\` : 'createStyleContext'
-      
-      const [StyleContext, useStyleContext] = createSafeContext(contextName)
-      const svaFn = isConfigRecipe ? recipe : sva(recipe.config)
-
-      const getResolvedProps = (props, slotStyles) => {
-        const { unstyled, ...restProps } = props
-        if (unstyled) return restProps
-        if (isConfigRecipe) {
-          return { ...restProps, class: cx(slotStyles, restProps.class) }
-        }
-        ${outdent.outdent.string((0, ts_pattern.match)(ctx.config.jsxStyleProps).with("all", () => `return { ...slotStyles, ...restProps }`).with("minimal", () => `return { ...restProps, css: css.raw(slotStyles, restProps.css) }`).with("none", () => `return { ...restProps, class: cx(css(slotStyles), restProps.class) }`).otherwise(() => `return restProps`))}
-      }
-
-      const withRootProvider = (Component, options) => {
-        const WithRootProvider = (props) => {
-          const [variantProps, otherProps] = svaFn.splitVariantProps(props)
-          const [local, propsWithoutChildren] = splitProps(otherProps, ['children'])
-
-          const slotStyles = createMemo(() => {
-            const styles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
-            styles._classNameMap = svaFn.classNameMap
-            return styles
-          })
-            
-          const mergedProps = createMemo(() => {
-            if (!options?.defaultProps) return propsWithoutChildren
-            const defaults = typeof options.defaultProps === 'function'
-              ? options.defaultProps()
-              : options.defaultProps
-            return { ...defaults, ...propsWithoutChildren }
-          })
-
-          return createComponent(StyleContext.Provider, {
-            get value() {
-              return slotStyles()
-            },
-            get children() {
-              return createComponent(
-                Component,
-                mergeProps(mergedProps, {
-                  get children() {
-                    return local.children
-                  },
-                }),
-              )
-            },
-          })
-        }
-        
-        const componentName = getDisplayName(Component)
-        WithRootProvider.displayName = \`withRootProvider(\${componentName})\`
-        return WithRootProvider
-      }
-
-      const withProvider = (Component, slot, options) => {
-        const StyledComponent = ${factoryName}(Component, {}, options)
-        
-        const WithProvider = (props) => {
-          const [variantProps, restProps] = svaFn.splitVariantProps(props)
-          const [local, propsWithoutChildren] = splitProps(restProps, ["children"])
-
-          const slotStyles = createMemo(() => {
-            const styles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
-            styles._classNameMap = svaFn.classNameMap
-            return styles
-          })
-
-          const resolvedProps = createMemo(() => {
-            const propsWithClass = {
-              ...propsWithoutChildren,
-              class: propsWithoutChildren.class ?? options?.defaultProps?.class,
-            }
-            const resolved = getResolvedProps(propsWithClass, slotStyles()[slot])
-            resolved.class = cx(resolved.class, slotStyles()._classNameMap[slot])
-            return resolved
-          })
-
-          return createComponent(StyleContext.Provider, {
-            get value() {
-              return slotStyles()
-            },
-            get children() {
-              return createComponent(
-                StyledComponent,
-                mergeProps(resolvedProps, {
-                  get children() {
-                    return local.children
-                  },
-                })
-              )
-            },
-          })
-        }
-        
-        const componentName = getDisplayName(Component)
-        WithProvider.displayName = \`withProvider(\${componentName})\`
-        return WithProvider
-      }
-
-      const withContext = (Component, slot, options) => {
-        const StyledComponent = ${factoryName}(Component, {}, options)
-        const componentName = getDisplayName(Component)
-        
-        const WithContext = (props) => {
-          const slotStyles = useStyleContext(componentName, slot)
-          const [local, propsWithoutChildren] = splitProps(props, ["children"])
-
-          const resolvedProps = createMemo(() => {
-            const propsWithClass = {
-              ...propsWithoutChildren,
-              class: propsWithoutChildren.class ?? options?.defaultProps?.class,
-            }
-            const resolved = getResolvedProps(propsWithClass, slotStyles[slot])
-            resolved.class = cx(resolved.class, slotStyles._classNameMap?.[slot])
-            return resolved
-          })
-
-          return createComponent(
-            StyledComponent,
-            mergeProps(resolvedProps, {
-              get children() {
-                return local.children
-              },
-            })
-          )
-        }
-        
-        WithContext.displayName = \`withContext(\${componentName})\`
-        return WithContext
-      }
-
-      return {
-        withRootProvider,
-        withProvider,
-        withContext,
-      }
-    }
-    `,
-		dts: outdent.outdent`
-    ${ctx.file.importType("SlotRecipeRuntimeFn, RecipeVariantProps", "../types/recipe")}
-    ${ctx.file.importType("JsxHTMLProps, JsxStyleProps, Assign", "../types/system-types")}
-    ${ctx.file.importType("JsxFactoryOptions, DataAttrs, MaybeAccessor, AsProps", "../types/jsx")}
-    import type { Component, JSX, ComponentProps } from 'solid-js'
-
-    interface UnstyledProps {
-      unstyled?: boolean | undefined
-    }
-
-    interface WithProviderOptions<P> {
-      defaultProps?: MaybeAccessor<Partial<P> & DataAttrs> | undefined
-    }
-    
-    type ElementType = keyof JSX.IntrinsicElements | Component<any>
-
-    type SvaFn<S extends string = any> = SlotRecipeRuntimeFn<S, any>
-    interface SlotRecipeFn {
-      __type: any
-      __slot: string
-      (props?: any): any
-    }
-    type SlotRecipe = SvaFn | SlotRecipeFn
-
-    type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn
-      ? R['__slot']
-      : R extends SvaFn<infer S>
-        ? S
-        : never
-
-    type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = Component<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
-    >
-
-    type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = Component<
-      ComponentProps<T> & UnstyledProps & RecipeVariantProps<R>
-    >
-
-    type StyleContextConsumer<T extends ElementType> = Component<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
-    >
-
-    export interface StyleContext<R extends SlotRecipe> {
-      withRootProvider: <T extends ElementType>(
-        Component: T,
-        options?: WithProviderOptions<ComponentProps<T>> | undefined
-      ) => StyleContextRootProvider<T, R>
-      withProvider: <T extends ElementType>(
-        Component: T,
-        slot: InferSlot<R>,
-        options?: JsxFactoryOptions<ComponentProps<T>> | undefined
-      ) => StyleContextProvider<T, R>
-      withContext: <T extends ElementType>(
-        Component: T,
-        slot: InferSlot<R>,
-        options?: JsxFactoryOptions<ComponentProps<T>> | undefined
-      ) => StyleContextConsumer<T>
-    }
-
-    export declare function createStyleContext<R extends SlotRecipe>(recipe: R): StyleContext<R>
-    `
-	};
-}
-//#endregion
-//#region src/artifacts/solid-jsx/jsx.string-literal.ts
-function generateSolidJsxStringLiteralFactory(ctx) {
-	const { componentName, factoryName } = ctx.jsx;
-	return { js: outdent.outdent`
-import { mergeProps, splitProps } from 'solid-js'
-import { Dynamic, createComponent } from 'solid-js/web'
-${ctx.file.import("getDisplayName", "./factory-helper")}
-${ctx.file.import("css, cx", "../css/index")}
-
-function createStyled(element) {
-  const __base__ = element.__base__ || element
-  return function styledFn(template) {
-    const styles = css.raw(element.__styles__, template)
-
-    const ${componentName} = (props) => {
-      const mergedProps = mergeProps({ as: __base__ }, props)
-      const [localProps, elementProps] = splitProps(mergedProps, ['as', 'class'])
-      
-      return createComponent(
-        Dynamic,
-        mergeProps(
-          {
-            get component() {
-              return localProps.as
-            },
-            get class() {
-              return cx(css(styles), localProps.class)
-            },
-          },
-          elementProps,
-        ),
-      )
-    }
-
-    const name = getDisplayName(__base__)
-
-    ${componentName}.displayName = \`${factoryName}.\${name}\`
-    ${componentName}.__styles__ = styles
-    ${componentName}.__base__ = __base__
-
-    return ${componentName}
-  }
-}
-
-function createJsxFactory() {
-  const cache = new Map()
-
-  return new Proxy(createStyled, {
-    apply(_, __, args) {
-      return createStyled(...args)
-    },
-    get(_, el) {
-      if (!cache.has(el)) {
-        cache.set(el, createStyled(el))
-      }
-      return cache.get(el)
-    },
-  })
-}
-
-export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
-    ` };
-}
-//#endregion
-//#region src/artifacts/solid-jsx/types.string-literal.ts
-function generateSolidJsxStringLiteralTypes(ctx) {
-	const { factoryName, componentName, upperName, typeName } = ctx.jsx;
-	return {
-		jsxFactory: outdent.outdent`
-${ctx.file.importType(upperName, "../types/jsx")}
-export declare const ${factoryName}: ${upperName}
-    `,
-		jsxType: outdent.outdent`
-import type { Component, ComponentProps, JSX } from 'solid-js'
-
-interface Dict {
-  [k: string]: unknown
-}
-
-export interface AsProps {
-  /**
-   * The element to render as
-   */
-  as?: ElementType | undefined
-}
-
-export type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
-
-export type ${componentName}<T extends ElementType> = {
-    (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T> & AsProps) => JSX.Element
-    displayName?: string | undefined
-}
-
-export interface JsxFactory {
-    <T extends ElementType>(component: T): ${componentName}<T>
-}
-
-export type JsxElements = {
-  [K in keyof JSX.IntrinsicElements]: ${componentName}<K>
-}
-
-export type ${upperName} = JsxFactory & JsxElements
-
-export type ${typeName}<T extends ElementType> = ComponentProps<T>
-  `
-	};
-}
-//#endregion
-//#region src/artifacts/vue-jsx/jsx.ts
-function generateVueJsxFactory(ctx) {
-	const { factoryName, componentName } = ctx.jsx;
-	return { js: outdent.outdent`
-    import { defineComponent, h, computed } from 'vue'
-    ${ctx.file.import("defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName", "./factory-helper")}
-    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
-    ${ctx.file.import("css, cx, cva", "../css/index")}
-    ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
-
-    function styledFn(Dynamic, configOrCva = {}, options = {}) {
-      const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
-
-      const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
-      const shouldForwardProp = (prop) => {
-        if (options.forwardProps?.includes(prop)) return true
-        return forwardFn(prop, cvaFn.variantKeys)
-      }
-
-      const defaultProps = Object.assign(
-        options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {},
-        options.defaultProps,
-      )
-
-      const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
-      const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
-      
-      const __base__ = Dynamic.__base__ || Dynamic
-      const name = getDisplayName(__base__)
-
-      const ${componentName} = defineComponent({
-        name: \`${factoryName}.\${name}\`,
-        inheritAttrs: false,
-        props: {
-          modelValue: null,
-          unstyled: { type: Boolean, default: false },
-          as: { type: [String, Object], default: __base__ }
-        },
-        setup(props, { slots, attrs, emit }) {
-          const combinedProps = computed(() => Object.assign({}, defaultProps, attrs))
-
-          const splittedProps = computed(() => {
-            return splitProps(combinedProps.value, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
-          })
-
-          const recipeClass = computed(() => {
-            const [_htmlProps, _forwardedProps, variantProps, styleProps, _elementProps] = splittedProps.value
-            const { css: cssStyles, ...propStyles } = styleProps
-            const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
-            return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.value.className, combinedProps.value.class)
-          })
-
-          const cvaClass = computed(() => {
-            const [_htmlProps, _forwardedProps, variantProps, styleProps, _elementProps] = splittedProps.value
-            const { css: cssStyles, ...propStyles } = styleProps
-            const cvaStyles = __cvaFn__.raw(variantProps)
-            return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.value.className, combinedProps.value.class)
-          })
-
-          const classes = computed(() => {
-            if (props.unstyled) {
-              const [_htmlProps, _forwardedProps, _variantProps, styleProps, _elementProps] = splittedProps.value
-              const { css: cssStyles, ...propStyles } = styleProps
-              return cx(css(propStyles, cssStyles), combinedProps.value.className, combinedProps.value.class)
-            }
-            return configOrCva.__recipe__ ? recipeClass.value : cvaClass.value
-          })
-
-          const vModelProps = computed(() => {
-            const result = {};
-
-            if (
-              props.as === 'input' &&
-              (props.type === 'checkbox' || props.type === 'radio')
-            ) {
-              result.checked = props.modelValue;
-              result.onChange = (event) => {
-                const checked = !event.currentTarget.checked;
-                emit('change', checked, event);
-                emit('update:modelValue', checked, event);
-              };
-            } else if (
-              props.as === 'input' ||
-              props.as === 'textarea' ||
-              props.as === 'select'
-            ) {
-              result.value = props.modelValue;
-              result.onInput = (event) => {
-                const value = event.currentTarget.value;
-                emit('input', value, event);
-                emit('update:modelValue', value, event);
-              };
-            }
-
-            return result;
-          });
-
-          return () => {
-            const [htmlProps, forwardedProps, _variantProps, _styleProps, elementProps] = splittedProps.value
-
-            return h(
-              props.as,
-              {
-                ...forwardedProps,
-                ...elementProps,
-                ...normalizeHTMLProps(htmlProps),
-                ...vModelProps.value,
-                class: classes.value,
-              },
-              slots,
-            )
-          }
-        },
-      })
-
-      ${componentName}.displayName = \`${factoryName}.\${name}\`
-      ${componentName}.__cva__ = __cvaFn__
-      ${componentName}.__base__ = __base__
-      ${componentName}.__shouldForwardProps__ = shouldForwardProp
-
-      return ${componentName}
-    }
-
-    const tags = 'a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, big, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, main, map, mark, marquee, menu, menuitem, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, picture, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr, circle, clipPath, defs, ellipse, foreignObject, g, image, line, linearGradient, mask, path, pattern, polygon, polyline, radialGradient, rect, stop, svg, text, tspan';
-
-    export const ${factoryName} = /* @__PURE__ */ styledFn.bind();
-
-    tags.split(', ').forEach((tag) => {
-      ${factoryName}[tag] = ${factoryName}(tag);
-    });
-    ` };
-}
-//#endregion
-//#region src/artifacts/vue-jsx/pattern.ts
-function generateVueJsxPattern(ctx, filters) {
-	const { typeName, factoryName, styleProps: jsxStyleProps } = ctx.jsx;
-	return ctx.patterns.filterDetails(filters).map((pattern) => {
-		const { upperName, styleFnName, dashName, jsxName, props, blocklistType } = pattern;
-		const { description, jsxElement = "div", deprecated } = pattern.config;
-		return {
-			name: dashName,
-			js: outdent.outdent`
-    import { defineComponent, h, computed } from 'vue'
-    ${jsxStyleProps === "minimal" ? ctx.file.import("mergeCss", "../css/css") : ""}
-    ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
-    ${ctx.file.import(factoryName, "./factory")}
-
-    export const ${jsxName} = /* @__PURE__ */ defineComponent({
-        name: '${jsxName}',
-        inheritAttrs: false,
-        props: ${JSON.stringify(props)},
-        setup(props, { attrs, slots }) {
-          ${(0, ts_pattern.match)(jsxStyleProps).with("none", () => outdent.outdent`
-            const cssProps = computed(() => {
-              const styleProps = ${styleFnName}(props)
-              return { css: styleProps }
-            })
-            
-            return () => {
-              const mergedProps = { ...attrs, ...cssProps.value }
-              return h(${factoryName}.${jsxElement}, mergedProps, slots)
-            }
-            `).with("minimal", () => outdent.outdent`            
-            const cssProps = computed(() => {
-              const styleProps = ${styleFnName}(props)
-              return { css: mergeCss(styleProps, attrs.css) }
-            })
-            
-            return () => {
-              const mergedProps = { ...attrs, ...cssProps.value }
-              return h(${factoryName}.${jsxElement}, mergedProps, slots)
-            }
-            `).with("all", () => outdent.outdent`            
-            const styleProps = computed(() => ${styleFnName}(props))
-            
-            return () => {
-              const mergedProps = { ...styleProps.value, ...attrs }
-              return h(${factoryName}.${jsxElement}, mergedProps, slots)
-            }
-            `).exhaustive()}
-        }
-    })
-    `,
-			dts: outdent.outdent`
-    import type { FunctionalComponent } from 'vue'
-    ${ctx.file.importType(`${upperName}Properties`, `../patterns/${dashName}`)}
-    ${ctx.file.importType(typeName, "../types/jsx")}
-    ${ctx.file.importType("DistributiveOmit", "../types/system-types")}
-
-    export interface ${upperName}Props extends ${upperName}Properties, DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}> {}
-
-    ${ctx.file.jsDocComment(description, { deprecated })}
-    export declare const ${jsxName}: FunctionalComponent<${upperName}Props>
-    `
-		};
-	});
-}
-//#endregion
-//#region src/artifacts/vue-jsx/types.ts
-function generateVueJsxTypes(ctx) {
-	const { factoryName, componentName, upperName, typeName, variantName } = ctx.jsx;
-	return {
-		jsxFactory: outdent.outdent`
-${ctx.file.importType(upperName, "../types/jsx")}
-
-export declare const ${factoryName}: ${upperName}
-    `,
-		jsxType: outdent.outdent`
-import type { Component, FunctionalComponent, NativeElements } from 'vue'
-
-${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
-${ctx.file.importType("Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty", "./system-types")}
-
-export type IntrinsicElement = keyof NativeElements
-
-export type ElementType = IntrinsicElement | Component
-
-export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
-  ? NativeElements[T]
-  : T extends Component<infer Props>
-  ? Props
-  : never
-
-interface Dict {
-  [k: string]: unknown
-}
-
-export type DataAttrs = Record<\`data-\${string}\`, unknown>
+      // The slots that enclose other slots, matching \`Recipes.getScopeRoots\`. Their variant
+      // styles anchor \`@scope\` rules for every other slot, so only they take variants — a
+      // variant class on any other slot would name a rule that was never emitted.
+      //
+      // A list, because a component can span a portal and so occupy more than one subtree.
+      const declaredSlots = config.slots ?? []
+      const anchors = config.scopeRoots
+        ? config.scopeRoots.filter((slot) => declaredSlots.includes(slot))
+        : declaredSlots.includes('root') ? ['root'] : []
+
+      // \`classNameMap[slot]\` used to be joined on here, because the slot's classes were
+      // atomic and nothing else carried the name to target it in the DOM. The slot's cva is
+      // now named \`name__slot\` and returns that as its base class, so joining it again
+      // would just repeat it.
+      function svaFn(props) {
+        const result = slots.map(([slot, cvaFn]) => [
+          slot,
+          anchors.length && !anchors.includes(slot) ? cvaFn.config.className : cvaFn(props),
+        ])
+        return Object.fromEntries(result)
+      }
 
-export interface UnstyledProps {
-  /**
-   * Whether to remove recipe styles
-   */
-  unstyled?: boolean | undefined
-}
+      function raw(props) {
+        const result = slots.map(([slot, cvaFn]) => [slot, cvaFn.raw(props)])
+        return Object.fromEntries(result)
+      }
 
-export interface AsProps {
-  /**
-   * The element to render as
-   */
-  as?: ElementType | undefined
-}
+      const variants = config.variants ?? {};
+      const variantKeys = Object.keys(variants);
 
-export interface ${componentName}<T extends ElementType, P extends Dict = {}> extends FunctionalComponent<
-  JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>
-> {}
+      function splitVariantProps(props) {
+        return splitProps(props, variantKeys);
+      }
+      const getVariantProps = (variants) => ({ ...defaultVariants, ...compact(variants) })
 
-interface RecipeFn {
-  __type: any
-}
+      const variantMap = Object.fromEntries(
+        Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])
+      );
 
-export interface JsxFactoryOptions<TProps extends Dict> {
-  dataAttr?: boolean
-  defaultProps?: Partial<TProps> & DataAttrs
-  shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
-  forwardProps?: string[]
-}
+      // Which slots each variant writes styles for.
+      //
+      // A scope reaches every slot inside an anchor's subtree. A slot under no anchor is
+      // not reached, and nothing at build time can detect that — reachability is a fact
+      // about the DOM. This is what says which slots a variant has to get to, so the
+      // component layer can thread the ones a scope cannot. Config slot recipes have always
+      // exposed it; an inline \`sva\` had no way to answer the question at all.
+      const slotsAffectedBy = Object.fromEntries(
+        Object.entries(variants).map(([variant, values]) => [
+          variant,
+          [...new Set(Object.values(values ?? {}).flatMap((slotStyles) => Object.keys(slotStyles ?? {})))],
+        ])
+      );
 
-export type JsxRecipeProps<T extends ElementType, P extends RecipeFn> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P['__type']>>;
+      return Object.assign(memo(svaFn), {
+        __cva__: false,
+        raw,
+        config,
+        variantMap,
+        variantKeys,
+        classNameMap,
+        /** The slots that enclose other slots, and so anchor their variant rules. */
+        scopeRoots: anchors,
+        slotsAffectedBy,
+        splitVariantProps,
+        getVariantProps,
+      })
+    }
 
-export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
-  ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
-  : ${componentName}<T, P>
+    /**
+     * Report slots whose variant styles can never reach them.
+     *
+     * A scoped slot is styled through an \`@scope\` rule opened at an anchor, so it has to be
+     * rendered inside one. A slot moved out of every anchor's subtree — through a portal,
+     * with no second anchor named in \`scopeRoots\` — keeps its base styles and silently
+     * loses its variant styles. That renders *nearly* right, which is harder to notice than
+     * a total failure, and no build step can catch it: whether one element is inside another
+     * is a fact about the DOM.
+     *
+     * Checks for the anchor's *base* class rather than its variant class. An anchor always
+     * carries the base one; the variant class is absent whenever no variant is selected, and
+     * matching on it would report a slot that is correctly placed and simply unstyled.
+     *
+     * Development only — call it behind \`process.env.NODE_ENV !== 'production'\` so bundlers
+     * drop it, along with this function, from your production build.
+     *
+     * \`\`\`js
+     * import { auditSlotScopes, select } from '../styled-system/css'
+     *
+     * if (process.env.NODE_ENV !== 'production') auditSlotScopes([select], { observe: true })
+     * \`\`\`
+     */
+    export function auditSlotScopes(recipes, options = {}) {
+      const { root = typeof document === 'undefined' ? undefined : document, observe = false, onReport } = options
+      if (!root) return () => {}
 
-export interface JsxFactory {
-  <T extends ElementType>(component: T): ${componentName}<T, {}>
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): JsxElement<
-    T,
-    RecipeSelection<P>
-  >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>> ): JsxElement<T, P['__type']>
-}
+      const escape = (value) =>
+        typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(value) : value.replace(/[^\\w-]/g, '\\\\$&')
 
-export type JsxElements = {
-  [K in IntrinsicElement]: ${componentName}<K, {}>
-}
+      const audit = () => {
+        const found = []
 
-export type ${upperName} = JsxFactory & JsxElements
+        for (const recipe of recipes) {
+          const anchors = recipe?.scopeRoots ?? []
+          // Nothing is scoped, so every slot carries its own variant class and none of them
+          // depends on where it is rendered.
+          if (!anchors.length) continue
 
-export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
+          const classNameMap = recipe.classNameMap ?? {}
+          const anchorSelector = anchors
+            .map((slot) => classNameMap[slot])
+            .filter(Boolean)
+            .map((className) => '.' + escape(className))
+            .join(', ')
+          if (!anchorSelector) continue
 
-export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
-  `
-	};
-}
-//#endregion
-//#region src/artifacts/vue-jsx/create-style-context.ts
-function generateVueCreateStyleContext(ctx) {
-	const { factoryName } = ctx.jsx;
-	return {
-		js: outdent.outdent`
-    ${ctx.file.import("cx, css, sva", "../css/index")}
-    ${ctx.file.import(factoryName, "./factory")}
-    ${ctx.file.import("getDisplayName", "./factory-helper")}
-    import { defineComponent, provide, inject, computed, h } from 'vue'
-    
-    export function createStyleContext(recipe) {
-      const StyleContext = Symbol('StyleContext')
-      const isConfigRecipe = '__recipe__' in recipe
-      const recipeName = isConfigRecipe && recipe.__name__ ? recipe.__name__ : undefined
-      const contextName = recipeName ? \`createStyleContext("\${recipeName}")\` : 'createStyleContext'
-      const svaFn = isConfigRecipe ? recipe : sva(recipe.config)
-      
-      function useStyleContext(componentName, slot) {
-        const context = inject(StyleContext)
-        if (context === undefined) {
-          const componentInfo = componentName ? \`Component "\${componentName}"\` : 'A component'
-          const slotInfo = slot ? \` (slot: "\${slot}")\` : ''
-          
-          throw new Error(
-            \`\${componentInfo}\${slotInfo} cannot access \${contextName} because it's missing its Provider.\`
-          )
-        }
-        return context
-      }
- 
-      const getResolvedProps = (props, slotStyles) => {
-        const { unstyled, ...restProps } = props
-        if (unstyled) return restProps
-        if (isConfigRecipe) {
-           return { ...restProps, class: cx(slotStyles, restProps.class) }
-        }
-        ${outdent.outdent.string((0, ts_pattern.match)(ctx.config.jsxStyleProps).with("all", () => `return { ...slotStyles, ...restProps }`).with("minimal", () => `return { ...restProps, css: css.raw(slotStyles, restProps.css) }`).with("none", () => `return { ...restProps, class: cx(css(slotStyles), restProps.class) }`).otherwise(() => `return restProps`))}
-      }
+          const scoped = new Set(Object.values(recipe.slotsAffectedBy ?? {}).flat())
 
-      const withRootProvider = (Component, options) => {
-        const WithRootProvider = defineComponent({
-          props: svaFn.variantKeys,
-          setup(props, { slots }) {
-            const [variantProps, otherProps] = svaFn.splitVariantProps(props)
+          for (const slot of scoped) {
+            if (anchors.includes(slot)) continue
 
-            const slotStyles = computed(() => {
-              const styles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
-              styles._classNameMap = svaFn.classNameMap
-              return styles
-            })
+            const className = classNameMap[slot]
+            if (!className) continue
 
-            provide(StyleContext, slotStyles)
+            for (const element of root.querySelectorAll('.' + escape(className))) {
+              if (element.closest(anchorSelector)) continue
+              found.push({ recipe: recipe.__name__, slot, className, element, anchors })
+            }
+          }
+        }
 
-            const mergedProps = computed(() => {
-              if (!options?.defaultProps) return otherProps
-              return { ...options.defaultProps, ...otherProps }
-            })
+        if (!found.length) return found
+
+        if (onReport) {
+          onReport(found)
+        } else {
+          for (const problem of found) {
+            console.warn(
+              \`[bamboo] \${problem.recipe ?? 'slot recipe'}: the \\\`\${problem.slot}\\\` slot is rendered outside every \` +
+                \`anchor (\${problem.anchors.join(', ')}), so its variant styles cannot reach it. \` +
+                \`Add the enclosing slot to \\\`scopeRoots\\\`, or deliver the variant to this slot by hand.\`,
+              problem.element,
+            )
+          }
+        }
 
-            return () => h(Component, mergedProps.value, slots)
-          },
-        })
-        
-        const componentName = getDisplayName(Component)
-        WithRootProvider.displayName = \`withRootProvider(\${componentName})\`
-        
-        return WithRootProvider
+        return found
       }
 
-      const withProvider = (Component, slot, options) => {
-        const StyledComponent = ${factoryName}(Component, {}, options)
-        
-        const WithProvider = defineComponent({
-          props: ["unstyled", ...svaFn.variantKeys],
-          inheritAttrs: false,
-          setup(inProps, { slots, attrs }) {
-            const props = computed(() => {
-              const propsWithClass = { ...inProps, ...attrs }
-              propsWithClass.class = propsWithClass.class ?? options?.defaultProps?.class
-              return propsWithClass
-            })
-            const res = computed(() => {
-              const [variantProps, restProps] = svaFn.splitVariantProps(props.value)
-              return { variantProps, restProps }
-            })
-            
-            const slotStyles = computed(() => {
-              const styles = isConfigRecipe ? svaFn(res.value.variantProps) : svaFn.raw(res.value.variantProps)
-              styles._classNameMap = svaFn.classNameMap
-              return styles
-            })
-
-            provide(StyleContext, slotStyles)
-
-            return () => {
-              const resolvedProps = getResolvedProps(res.value.restProps, slotStyles.value[slot])
-              resolvedProps.class = cx(resolvedProps.class, slotStyles.value._classNameMap[slot], attrs.class)
-              return h(StyledComponent, resolvedProps, slots)
-            }
-          },
-        })
-        
-        const componentName = getDisplayName(Component)
-        WithProvider.displayName = \`withProvider(\${componentName})\`
-        
-        return WithProvider
-      }
+      audit()
 
-      const withContext = (Component, slot, options) => {
-        const StyledComponent = ${factoryName}(Component, {}, options)
-        const componentName = getDisplayName(Component)
-        
-        const WithContext = defineComponent({
-          props: ["unstyled"],
-          inheritAttrs: false,
-          setup(inProps, { slots, attrs }) {
-            const props = computed(() => {
-              const propsWithClass = { ...inProps, ...attrs }
-              propsWithClass.class = propsWithClass.class ?? options?.defaultProps?.class
-              return propsWithClass
-            })
-            const slotStyles = useStyleContext(componentName, slot)
-
-            return () => {
-              const resolvedProps = getResolvedProps(props.value, slotStyles.value[slot])
-              resolvedProps.class = cx(resolvedProps.class, slotStyles.value._classNameMap[slot], attrs.class)
-              return h(StyledComponent, resolvedProps, slots)
-            }
-          },
+      if (!observe || typeof MutationObserver === 'undefined') return () => {}
+
+      // Portaled content mounts after the first sweep, which is exactly the case this
+      // exists to catch, so a one-shot pass would miss it.
+      let queued = false
+      const observer = new MutationObserver(() => {
+        if (queued) return
+        queued = true
+        queueMicrotask(() => {
+          queued = false
+          audit()
         })
-        
-        WithContext.displayName = \`withContext(\${componentName})\`
-        
-        return WithContext
-      }
+      })
+      observer.observe(root === document ? document.documentElement : root, { childList: true, subtree: true })
 
-      return {
-        withRootProvider,
-        withProvider,
-        withContext,
-      }
+      return () => observer.disconnect()
     }
     `,
 		dts: outdent.outdent`
-    ${ctx.file.importType("SlotRecipeRuntimeFn, RecipeVariantProps", "../types/recipe")}
-    ${ctx.file.importType("JsxHTMLProps, JsxStyleProps, Assign", "../types/system-types")}
-    ${ctx.file.importType("JsxFactoryOptions, DataAttrs, AsProps", "../types/jsx")}
-    import type { Component, FunctionalComponent, NativeElements } from 'vue'
-
-    interface UnstyledProps {
-      unstyled?: boolean | undefined
-    }
+    ${ctx.file.importType("SlotRecipeCreatorFn", "../types/recipe")}
 
-    interface WithProviderOptions<P = {}> {
-      defaultProps?: (Partial<P> & DataAttrs) | undefined
-    }
+    export declare const sva: SlotRecipeCreatorFn
 
-    // Add v-model support types
-    interface VModelProps {
-      modelValue?: any
-      'onUpdate:modelValue'?: (value: any) => void
+    export interface SlotScopeProblem {
+      /** The recipe the slot belongs to, when it has a name. */
+      recipe?: string
+      /** The slot whose variant styles cannot reach it. */
+      slot: string
+      /** The constant class that slot carries. */
+      className: string
+      /** The element found outside every anchor. */
+      element: Element
+      /** The anchors that were looked for. */
+      anchors: string[]
     }
 
-    type SvaFn<S extends string = any> = SlotRecipeRuntimeFn<S, any>
-    interface SlotRecipeFn {
-      __type: any
-      __slot: string
-      (props?: any): any
-    }
-    type SlotRecipe = SvaFn | SlotRecipeFn
-
-    type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
-
-    type IntrinsicElement = keyof NativeElements
-    type ElementType = IntrinsicElement | Component
-
-    type ComponentProps<T extends ElementType> = T extends IntrinsicElement
-      ? NativeElements[T]
-      : T extends Component<infer Props>
-      ? Props
-      : never
-
-    type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = FunctionalComponent<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps & VModelProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
-    >
-
-    type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = FunctionalComponent<
-      ComponentProps<T> & UnstyledProps & VModelProps & RecipeVariantProps<R>
-    >
-
-    type StyleContextConsumer<T extends ElementType> = FunctionalComponent<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps & VModelProps, JsxStyleProps>
-    >
-
-    export interface StyleContext<R extends SlotRecipe> {
-      withRootProvider: <T extends ElementType>(
-        Component: T,
-        options?: WithProviderOptions<ComponentProps<T>> | undefined
-      ) => StyleContextRootProvider<T, R>
-      withProvider: <T extends ElementType>(
-        Component: T,
-        slot: InferSlot<R>,
-        options?: JsxFactoryOptions<ComponentProps<T>> | undefined
-      ) => StyleContextProvider<T, R>
-      withContext: <T extends ElementType>(
-        Component: T,
-        slot: InferSlot<R>,
-        options?: JsxFactoryOptions<ComponentProps<T>> | undefined
-      ) => StyleContextConsumer<T>
+    export interface AuditSlotScopesOptions {
+      /** Where to look. Defaults to \`document\`. */
+      root?: ParentNode
+      /** Re-check as the DOM changes, for content that mounts through a portal. */
+      observe?: boolean
+      /** Handle the findings yourself instead of warning to the console. */
+      onReport?: (problems: SlotScopeProblem[]) => void
     }
 
-    export declare function createStyleContext<R extends SlotRecipe>(recipe: R): StyleContext<R>
+    /**
+     * Report slots whose variant styles can never reach them, in development.
+     *
+     * A scoped slot is styled through an \`@scope\` rule opened at an anchor, so it has to be
+     * rendered inside one. A slot moved out of every anchor's subtree keeps its base styles
+     * and silently loses its variant styles — which no build step can catch, because whether
+     * one element is inside another is a fact about the DOM.
+     *
+     * Returns a function that stops observing.
+     */
+    export declare function auditSlotScopes(
+      recipes: ReadonlyArray<unknown>,
+      options?: AuditSlotScopesOptions,
+    ): () => void
     `
 	};
 }
 //#endregion
-//#region src/artifacts/vue-jsx/jsx.string-literal.ts
-function generateVueJsxStringLiteralFactory(ctx) {
-	const { componentName, factoryName } = ctx.jsx;
-	return { js: outdent.outdent`
-  import { defineComponent, h, computed } from 'vue'
-  ${ctx.file.import("getDisplayName", "./factory-helper")}
-  ${ctx.file.import("css, cx", "../css/index")}
-
-  function createStyled(Dynamic) {
-    const name = getDisplayName(Dynamic)
-    const __base__ = Dynamic.__base__ || Dynamic
-
-    function styledFn(template) {
-      const styles = css.raw(Dynamic.__styles__, template)
-      
-      const ${componentName} = defineComponent({
-        name: \`${factoryName}.\${name}\`,
-        inheritAttrs: false,
-        props: {
-          modelValue: null,
-          as: { type: [String, Object], default: __base__ }
-        },
-        setup(props, { slots, attrs, emit }) {
-          const classes = computed(() => {
-            return cx(css(styles), attrs.className)
-          })
-
-          const vModelProps = computed(() => {
-            const result = {};
-    
-            if (
-              props.as === 'input' &&
-              (props.type === 'checkbox' || props.type === 'radio')
-            ) {
-              result.checked = props.modelValue;
-              result.onChange = (event) => {
-                const checked = !event.currentTarget.checked;
-                emit('change', checked, event);
-                emit('update:modelValue', checked, event);
-              };
-            } else if (
-              props.as === 'input' ||
-              props.as === 'textarea' ||
-              props.as === 'select'
-            ) {
-              result.value = props.modelValue;
-              result.onInput = (event) => {
-                const value = event.currentTarget.value;
-                emit('input', value, event);
-                emit('update:modelValue', value, event);
-              };
-            }
-    
-            return result;
-          });
-          
-          return () => {
-            return h(
-              props.as,
-              {
-                class: classes.value,
-                ...attrs,
-                ...vModelProps.value,
-              },
-             slots
-            )
-          }
-        },
-      })
-
-      ${componentName}.__styles__ = styles
-      ${componentName}.__base__ = __base__
-
-      return ${componentName}
-    }
-
-    return styledFn
-  }
-
-  const tags = 'a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, big, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, main, map, mark, marquee, menu, menuitem, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, picture, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr, circle, clipPath, defs, ellipse, foreignObject, g, image, line, linearGradient, mask, path, pattern, polygon, polyline, radialGradient, rect, stop, svg, text, tspan';
-
-  export const ${factoryName} = /* @__PURE__ */ createStyled.bind();
-
-  tags.split(', ').forEach((tag) => {
-    ${factoryName}[tag] = createStyled(tag);
-  });
-    ` };
-}
-//#endregion
-//#region src/artifacts/vue-jsx/types.string-literal.ts
-function generateVueJsxStringLiteralTypes(ctx) {
-	const { factoryName, componentName, upperName, typeName } = ctx.jsx;
+//#region src/artifacts/js/token.ts
+function generateTokenJs(ctx) {
+	const { tokens } = ctx;
+	const map = /* @__PURE__ */ new Map();
+	tokens.allTokens.forEach((token) => {
+		const { varRef, isVirtual } = token.extensions;
+		const value = isVirtual || token.extensions.condition !== "base" ? varRef : token.value;
+		map.set(token.name, {
+			value,
+			variable: varRef
+		});
+	});
+	const obj = Object.fromEntries(map);
 	return {
-		jsxFactory: outdent.outdent`
-${ctx.file.importType(upperName, "../types/jsx")}
-
-export declare const ${factoryName}: ${upperName}
-    `,
-		jsxType: outdent.outdent`
-import type { Component, FunctionalComponent, NativeElements } from 'vue'
-
-export type IntrinsicElement = keyof NativeElements
-
-export type ElementType = IntrinsicElement | Component
-
-export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
-  ? NativeElements[T]
-  : T extends Component<infer Props>
-  ? Props
-  : never
-
-export interface AsProps {
-  /**
-   * The element to render as
-   */
-  as?: ElementType | undefined
-}
+		js: outdent.default`
+  const tokens = ${JSON.stringify(obj, null, 2)}
 
-export type ${componentName}<T extends ElementType> = {
-  (args: { raw: readonly string[] | ArrayLike<string> }): FunctionalComponent<ComponentProps<T> & AsProps>
-}
+  export function token(path, fallback) {
+    return tokens[path]?.value || fallback
+  }
 
-export interface JsxFactory {
-  <T extends ElementType>(component: T): ${componentName}<T>
-}
+  function tokenVar(path, fallback) {
+    return tokens[path]?.variable || fallback
+  }
 
-export type JsxElements = {
-  [K in IntrinsicElement]: ${componentName}<K>
-}
+  token.var = tokenVar
+  `,
+		dts: outdent.default`
+  ${ctx.file.importType("Token", "./tokens")}
 
-export type ${upperName} = JsxFactory & JsxElements
+  export declare const token: {
+    (path: Token, fallback?: string): string
+    var: (path: Token, fallback?: string) => string
+  }
 
-export type ${typeName}<T extends ElementType> = ComponentProps<T>
+  ${ctx.file.exportTypeStar("./tokens")}
   `
 	};
 }
 //#endregion
-//#region src/artifacts/jsx.ts
-const typesMap = {
-	react: generateReactJsxTypes,
-	preact: generatePreactJsxTypes,
-	solid: generateSolidJsxTypes,
-	vue: generateVueJsxTypes,
-	qwik: generateQwikJsxTypes
-};
-const typesStringLiteralMap = {
-	react: generateReactJsxStringLiteralTypes,
-	solid: generateSolidJsxStringLiteralTypes,
-	qwik: generateQwikJsxStringLiteralTypes,
-	preact: generatePreactJsxStringLiteralTypes,
-	vue: generateVueJsxStringLiteralTypes
-};
-const isKnownFramework = (framework) => Boolean(typesMap[framework]);
-function generateJsxTypes(ctx) {
-	if (!ctx.jsx.framework) return;
-	if (!isKnownFramework(ctx.jsx.framework)) return;
-	return (ctx.isTemplateLiteralSyntax ? typesStringLiteralMap[ctx.jsx.framework] : typesMap[ctx.jsx.framework])?.(ctx);
-}
-const factoryMap = {
-	react: generateReactJsxFactory,
-	solid: generateSolidJsxFactory,
-	preact: generatePreactJsxFactory,
-	vue: generateVueJsxFactory,
-	qwik: generateQwikJsxFactory
-};
-const factoryStringLiteralMap = {
-	react: generateReactJsxStringLiteralFactory,
-	solid: generateSolidJsxStringLiteralFactory,
-	qwik: generateQwikJsxStringLiteralFactory,
-	preact: generatePreactJsxStringLiteralFactory,
-	vue: generateVueJsxStringLiteralFactory
-};
-function generateJsxFactory(ctx) {
-	if (!ctx.jsx.framework) return;
-	if (!isKnownFramework(ctx.jsx.framework)) return;
-	return (ctx.isTemplateLiteralSyntax ? factoryStringLiteralMap[ctx.jsx.framework] : factoryMap[ctx.jsx.framework])?.(ctx);
-}
-const patternMap = {
-	react: generateReactJsxPattern,
-	solid: generateSolidJsxPattern,
-	preact: generatePreactJsxPattern,
-	vue: generateVueJsxPattern,
-	qwik: generateQwikJsxPattern
-};
-function generateJsxPatterns(ctx, filters) {
-	if (ctx.isTemplateLiteralSyntax || ctx.patterns.isEmpty() || !ctx.jsx.framework) return [];
-	if (!isKnownFramework(ctx.jsx.framework)) return;
-	return patternMap[ctx.jsx.framework](ctx, filters);
-}
-const createStyleContextMap = {
-	react: generateReactCreateStyleContext,
-	preact: generatePreactCreateStyleContext,
-	solid: generateSolidCreateStyleContext,
-	vue: generateVueCreateStyleContext
-};
-function generateJsxCreateStyleContext(ctx) {
-	if (ctx.isTemplateLiteralSyntax || !ctx.jsx.framework) return;
-	if (!isKnownFramework(ctx.jsx.framework)) return;
-	const generator = createStyleContextMap[ctx.jsx.framework];
-	return generator?.(ctx);
-}
-//#endregion
 //#region src/artifacts/generated/composition.d.ts.json
 var content$7 = "import type { CompositionStyleObject } from './system-types'\n\ninterface Token<T> {\n  value: T\n  description?: string\n}\n\ninterface Recursive<T> {\n  [key: string]: Recursive<T> | T\n}\n\n/* -----------------------------------------------------------------------------\n * Text styles\n * -----------------------------------------------------------------------------*/\n\ntype TextStyleProperty =\n  | 'color'\n  | 'direction'\n  | 'font'\n  | 'fontFamily'\n  | 'fontFeatureSettings'\n  | 'fontKerning'\n  | 'fontLanguageOverride'\n  | 'fontOpticalSizing'\n  | 'fontPalette'\n  | 'fontSize'\n  | 'fontSizeAdjust'\n  | 'fontStretch'\n  | 'fontStyle'\n  | 'fontSynthesis'\n  | 'fontVariant'\n  | 'fontVariantAlternates'\n  | 'fontVariantCaps'\n  | 'fontVariantLigatures'\n  | 'fontVariantNumeric'\n  | 'fontVariantPosition'\n  | 'fontVariationSettings'\n  | 'fontWeight'\n  | 'hangingPunctuation'\n  | 'hypens'\n  | 'hyphenateCharacter'\n  | 'hyphenateLimitChars'\n  | 'letterSpacing'\n  | 'lineBreak'\n  | 'lineHeight'\n  | 'quotes'\n  | 'overflowWrap'\n  | 'tabSize'\n  | 'textAlign'\n  | 'textAlignLast'\n  | 'textBox'\n  | 'textBoxEdge'\n  | 'textBoxTrim'\n  | 'textCombineUpright'\n  | 'textDecoration'\n  | 'textDecorationColor'\n  | 'textDecorationLine'\n  | 'textDecorationSkip'\n  | 'textDecorationSkipBox'\n  | 'textDecorationSkipInk'\n  | 'textDecorationSkipInset'\n  | 'textDecorationStyle'\n  | 'textDecorationThickness'\n  | 'textEmphasis'\n  | 'textEmphasisColor'\n  | 'textEmphasisPosition'\n  | 'textEmphasisStyle'\n  | 'textIndent'\n  | 'textJustify'\n  | 'textOrientation'\n  | 'textOverflow'\n  | 'textRendering'\n  | 'textShadow'\n  | 'textStroke'\n  | 'textStrokeColor'\n  | 'textStrokeWidth'\n  | 'textTransform'\n  | 'textUnderlineOffset'\n  | 'textUnderlinePosition'\n  | 'textWrap'\n  | 'textWrapMode'\n  | 'textWrapStyle'\n  | 'unicodeBidi'\n  | 'verticalAlign'\n  | 'whiteSpace'\n  | 'wordBreak'\n  | 'wordSpacing'\n  | 'writingMode'\n\nexport type TextStyle = CompositionStyleObject<TextStyleProperty>\n\nexport type TextStyles = Recursive<Token<TextStyle>>\n\n/* -----------------------------------------------------------------------------\n * Layer styles\n * -----------------------------------------------------------------------------*/\n\ntype LogicalPlacement = 'Inline' | 'Block' | 'InlineStart' | 'InlineEnd' | 'BlockStart' | 'BlockEnd'\n\ntype PhysicalPlacement = 'Top' | 'Right' | 'Bottom' | 'Left'\n\ntype Placement = PhysicalPlacement | LogicalPlacement\n\ntype Radius =\n  | `Top${'Right' | 'Left'}`\n  | `Bottom${'Right' | 'Left'}`\n  | `Start${'Start' | 'End'}`\n  | `End${'Start' | 'End'}`\n\ntype LayerStyleProperty =\n  | 'aspectRatio'\n  | 'background'\n  | 'backgroundColor'\n  | 'backgroundImage'\n  | 'border'\n  | 'borderColor'\n  | 'borderImage'\n  | 'borderImageOutset'\n  | 'borderImageRepeat'\n  | 'borderImageSlice'\n  | 'borderImageSource'\n  | 'borderImageWidth'\n  | 'borderRadius'\n  | 'borderStyle'\n  | 'borderWidth'\n  | `border${Placement}`\n  | `border${Placement}Color`\n  | `border${Placement}Style`\n  | `border${Placement}Width`\n  | 'borderRadius'\n  | `border${Radius}Radius`\n  | 'boxShadow'\n  | 'boxShadowColor'\n  | 'clipPath'\n  | 'color'\n  | 'contain'\n  | 'content'\n  | 'contentVisibility'\n  | 'cursor'\n  | 'display'\n  | 'filter'\n  | 'backdropFilter'\n  | 'height'\n  | 'width'\n  | 'minHeight'\n  | 'minWidth'\n  | 'maxHeight'\n  | 'maxWidth'\n  | `margin${Placement}`\n  | 'inset'\n  | `inset${LogicalPlacement}`\n  | Lowercase<PhysicalPlacement>\n  | 'isolation'\n  | 'mask'\n  | 'maskClip'\n  | 'maskComposite'\n  | 'maskImage'\n  | 'maskMode'\n  | 'maskOrigin'\n  | 'maskPosition'\n  | 'maskRepeat'\n  | 'maskSize'\n  | 'mixBlendMode'\n  | 'objectFit'\n  | 'objectPosition'\n  | 'opacity'\n  | 'outline'\n  | 'outlineColor'\n  | 'outlineOffset'\n  | 'outlineStyle'\n  | 'outlineWidth'\n  | 'overflow'\n  | 'overflowX'\n  | 'overflowY'\n  | 'padding'\n  | `padding${Placement}`\n  | 'pointerEvents'\n  | 'position'\n  | 'resize'\n  | 'transform'\n  | 'transition'\n  | 'visibility'\n  | 'willChange'\n  | 'zIndex'\n  | 'backgroundBlendMode'\n  | 'backgroundAttachment'\n  | 'backgroundClip'\n  | 'backgroundOrigin'\n  | 'backgroundPosition'\n  | 'backgroundRepeat'\n  | 'backgroundSize'\n\nexport type LayerStyle = CompositionStyleObject<LayerStyleProperty>\n\nexport type LayerStyles = Recursive<Token<LayerStyle>>\n\n/* -----------------------------------------------------------------------------\n * Motion styles\n * -----------------------------------------------------------------------------*/\n\ntype AnimationStyleProperty =\n  | 'animation'\n  | 'animationComposition'\n  | 'animationDelay'\n  | 'animationDirection'\n  | 'animationDuration'\n  | 'animationFillMode'\n  | 'animationIterationCount'\n  | 'animationName'\n  | 'animationPlayState'\n  | 'animationTimingFunction'\n  | 'animationRange'\n  | 'animationRangeStart'\n  | 'animationRangeEnd'\n  | 'animationTimeline'\n  | 'transformOrigin'\n\nexport type AnimationStyle = CompositionStyleObject<AnimationStyleProperty>\n\nexport type AnimationStyles = Recursive<Token<AnimationStyle>>\n\nexport interface CompositionStyles {\n  textStyles: TextStyles\n  layerStyles: LayerStyles\n  animationStyles: AnimationStyles\n}\n";
 //#endregion
@@ -4721,10 +1946,10 @@ var comments = {
 var content$5 = "export interface Part {\n  selector: string\n}\n\nexport interface Parts {\n  [key: string]: Part\n}\n";
 //#endregion
 //#region src/artifacts/generated/pattern.d.ts.json
-var content$4 = "import type { CssProperty, SystemStyleObject } from './system-types'\nimport type { TokenCategory } from '../tokens'\n\ntype Primitive = string | number | boolean | null | undefined\ntype LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)\n\nexport type PatternProperty =\n  | { type: 'property'; value: CssProperty; description?: string }\n  | { type: 'enum'; value: string[]; description?: string }\n  | { type: 'token'; value: TokenCategory; property?: CssProperty; description?: string }\n  | { type: 'string' | 'boolean' | 'number'; description?: string }\n\nexport interface PatternHelpers {\n  map: (value: any, fn: (value: string) => string | undefined) => any\n  isCssUnit: (value: any) => boolean\n  isCssVar: (value: any) => boolean\n  isCssFunction: (value: any) => boolean\n}\n\nexport interface PatternProperties {\n  [key: string]: PatternProperty\n}\n\ntype InferProps<T> = Record<LiteralUnion<keyof T>, any>\n\nexport type PatternDefaultValue<T> = Partial<InferProps<T>>\n\nexport type PatternDefaultValueFn<T> = (props: InferProps<T>) => PatternDefaultValue<T>\n\nexport interface PatternConfig<T extends PatternProperties = PatternProperties> {\n  /**\n   * The description of the pattern. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The JSX element rendered by the pattern\n   * @default 'div'\n   */\n  jsxElement?: string\n  /**\n   * The properties of the pattern.\n   */\n  properties?: T\n  /**\n   * The default values of the pattern.\n   */\n  defaultValues?: PatternDefaultValue<T> | PatternDefaultValueFn<T>\n  /**\n   * The css object this pattern will generate.\n   */\n  transform?: (props: InferProps<T>, helpers: PatternHelpers) => SystemStyleObject\n  /**\n   * Whether the pattern is deprecated.\n   */\n  deprecated?: boolean | string\n  /**\n   * The jsx element name this pattern will generate.\n   */\n  jsxName?: string\n  /**\n   * The jsx elements to track for this pattern. Can be string or Regexp.\n   *\n   * @default capitalize(pattern.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n  /**\n   * Whether to only generate types for the specified properties.\n   * This will disallow css properties\n   */\n  strict?: boolean\n  /**\n   * @experimental\n   * Disallow certain css properties for this pattern\n   */\n  blocklist?: LiteralUnion<CssProperty>[]\n}\n";
+var content$4 = "import type { CssProperty, SystemStyleObject } from './system-types'\nimport type { TokenCategory } from '../tokens'\n\ntype Primitive = string | number | boolean | null | undefined\ntype LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)\n\nexport type PatternProperty =\n  | { type: 'property'; value: CssProperty; description?: string }\n  | { type: 'enum'; value: string[]; description?: string }\n  | { type: 'token'; value: TokenCategory; property?: CssProperty; description?: string }\n  | { type: 'string' | 'boolean' | 'number'; description?: string }\n\nexport interface PatternHelpers {\n  map: (value: any, fn: (value: string) => string | undefined) => any\n  isCssUnit: (value: any) => boolean\n  isCssVar: (value: any) => boolean\n  isCssFunction: (value: any) => boolean\n}\n\nexport interface PatternProperties {\n  [key: string]: PatternProperty\n}\n\ntype InferProps<T> = Record<LiteralUnion<keyof T>, any>\n\nexport type PatternDefaultValue<T> = Partial<InferProps<T>>\n\nexport type PatternDefaultValueFn<T> = (props: InferProps<T>) => PatternDefaultValue<T>\n\nexport interface PatternConfig<T extends PatternProperties = PatternProperties> {\n  /**\n   * The description of the pattern. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The properties of the pattern.\n   */\n  properties?: T\n  /**\n   * The default values of the pattern.\n   */\n  defaultValues?: PatternDefaultValue<T> | PatternDefaultValueFn<T>\n  /**\n   * The css object this pattern will generate.\n   */\n  transform?: (props: InferProps<T>, helpers: PatternHelpers) => SystemStyleObject\n  /**\n   * Whether the pattern is deprecated.\n   */\n  deprecated?: boolean | string\n  /**\n   * Whether to only generate types for the specified properties.\n   * This will disallow css properties\n   */\n  strict?: boolean\n  /**\n   * @experimental\n   * Disallow certain css properties for this pattern\n   */\n  blocklist?: LiteralUnion<CssProperty>[]\n}\n";
 //#endregion
 //#region src/artifacts/generated/recipe.d.ts.json
-var content$3 = "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\n/**\n * Extract the variant as optional props from a `cva` function.\n * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.\n */\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\n/**\n * Extract the variants from a `cva` function.\n */\nexport type RecipeVariant<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantRecord> {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * Whether the recipe is deprecated.\n   */\n  deprecated?: boolean | string\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The class name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>, RecipeConfigMeta {}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<\n  S extends string,\n  T extends SlotRecipeVariantRecord<S>,\n> extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> {\n  /**\n   * An optional class name that can be used to target slots in the DOM.\n   */\n  className?: string\n  /**\n   * Whether the recipe is deprecated.\n   */\n  deprecated?: boolean | string\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n";
+var content$3 = "import type { RecipeRule } from './static-css'\nimport type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\n/**\n * Extract the variant as optional props from a `cva` function.\n * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type.\n */\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\n/**\n * Extract the variants from a `cva` function.\n */\nexport type RecipeVariant<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Exclude<Pretty<Required<RecipeVariantProps<T>>>, undefined>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (props?: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>\n}\n\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantRecord> {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The prefix every class this recipe emits is built from — `button` gives `button` for\n   * the base styles and `button--size_sm` for a variant.\n   *\n   * Required for a recipe declared in `theme.recipes`, where it is the key it is declared\n   * under. Optional for an inline `cva`, which is otherwise named by hashing its own\n   * config: `cva_a1b2c3--size_sm`. Setting it buys readable class names and nothing else —\n   * the CSS is identical either way.\n   *\n   * It has to be unique across every recipe in the build. Two recipes sharing a name emit\n   * rules under the same selectors, and the later one wins for any variant they both\n   * declare.\n   */\n  className?: string\n  /**\n   * Whether the recipe is deprecated.\n   */\n  deprecated?: boolean | string\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface RecipeConfigMeta {\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n  /**\n   * Variants to pre-generate, will be include in the final `config.staticCss`\n   */\n  staticCss?: RecipeRule[]\n}\n\nexport interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>, RecipeConfigMeta {\n  /** Optional on `RecipeDefinition`, where an inline `cva` falls back to hashing its config. A recipe declared in `theme.recipes` always has one — the key it is declared under. */\n  className: string\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport interface SlotRecipeRuntimeFn<\n  S extends string,\n  T extends SlotRecipeVariantRecord<S>,\n> extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  /** The config this recipe was created from. */\n  config: SlotRecipeDefinition<S, T>\n  /** Each slot's constant class, for targeting a slot in the DOM. */\n  classNameMap: Partial<Record<S, string>>\n  /**\n   * Which slots each variant writes styles for.\n   *\n   * A variant's styles reach a slot through a scope opened at an anchor, which covers every\n   * slot in that anchor's subtree. A slot under no anchor — moved out by a portal, with no\n   * second anchor named in `scopeRoots` — is not reached, and nothing at build time can\n   * detect that. This says which slots a variant has to get to, so whatever a scope cannot\n   * reach can be threaded by hand.\n   */\n  slotsAffectedBy: Record<keyof T, S[]>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n  getVariantProps: (props?: RecipeSelection<T>) => RecipeSelection<T>\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface SlotRecipeDefinition<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> {\n  /**\n   * The prefix every class this recipe emits is built from, and the name to target its\n   * slots in the DOM by — `checkbox` gives `checkbox__control` for a slot and\n   * `checkbox__control--size_md` for that slot under a variant.\n   *\n   * Required for a recipe declared in `theme.slotRecipes`, where it is the key it is\n   * declared under. Optional for an inline `sva`, which is otherwise named by hashing its\n   * own config. Setting it buys readable class names and nothing else — the CSS is\n   * identical either way.\n   *\n   * It has to be unique across every recipe in the build.\n   */\n  className?: string\n  /**\n   * Whether the recipe is deprecated.\n   */\n  deprecated?: boolean | string\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The slots that enclose other slots, used to scope their variant styles.\n   *\n   * A slot recipe's variants are chosen once, at the top, but the slots that react to them\n   * are authored by the consumer somewhere below. Naming the enclosing slots lets the build\n   * emit their variant styles as rules scoped by a class those slots already carry, so\n   * nothing has to be delivered to a slot at runtime and every other slot's class is a\n   * constant.\n   *\n   * A list, because a portal is a real discontinuity in the tree and no CSS mechanism\n   * crosses one. A `<Select>` occupies two disjoint subtrees — the trigger side under\n   * `root`, the listbox side under a portaled `positioner` — and a variant writes styles\n   * into both. One anchor can only ever reach one of them.\n   *\n   * ```ts\n   * scopeRoots: ['root', 'positioner']\n   * ```\n   *\n   * Each named slot takes variant props; every other slot's class is a constant. The build\n   * emits each non-anchor slot's variant rules under *every* anchor, and only the anchor\n   * that is genuinely an ancestor matches — so the DOM shape never has to be declared.\n   *\n   * Defaults to `['root']` when a slot by that name exists. Set `[]` to turn scoping off\n   * and give every slot a variant class of its own, which is what a recipe whose slots are\n   * siblings wants.\n   *\n   * A slot under *no* anchor is still unreachable, and nothing at build time can detect\n   * that — reachability is a fact about the DOM. `recipe.slotsAffectedBy` says which slots\n   * a variant writes to, for whatever still needs threading by hand.\n   */\n  scopeRoots?: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> &\n  RecipeConfigMeta & {\n    /** Optional on `SlotRecipeDefinition`, where an inline `sva` falls back to hashing its config. A recipe declared in `theme.slotRecipes` always has one — the key it is declared under. */\n    className: string\n  }\n";
 //#endregion
 //#region src/artifacts/generated/selectors.d.ts.json
 var content$2 = "import type { Pseudos } from './csstype'\n\ntype AriaAttributes =\n  | '[aria-disabled]'\n  | '[aria-hidden]'\n  | '[aria-invalid]'\n  | '[aria-readonly]'\n  | '[aria-required]'\n  | '[aria-selected]'\n  | '[aria-checked]'\n  | '[aria-expanded]'\n  | '[aria-pressed]'\n  | `[aria-current=${'page' | 'step' | 'location' | 'date' | 'time'}]`\n  | '[aria-invalid]'\n  | `[aria-sort=${'ascending' | 'descending'}]`\n\ntype DataAttributes =\n  | '[data-selected]'\n  | '[data-highlighted]'\n  | '[data-hover]'\n  | '[data-active]'\n  | '[data-checked]'\n  | '[data-disabled]'\n  | '[data-readonly]'\n  | '[data-focus]'\n  | '[data-focus-visible]'\n  | '[data-focus-visible-added]'\n  | '[data-invalid]'\n  | '[data-pressed]'\n  | '[data-expanded]'\n  | '[data-grabbed]'\n  | '[data-dragged]'\n  | '[data-orientation=horizontal]'\n  | '[data-orientation=vertical]'\n  | '[data-in-range]'\n  | '[data-out-of-range]'\n  | '[data-placeholder-shown]'\n  | `[data-part=${string}]`\n  | `[data-attr=${string}]`\n  | `[data-placement=${string}]`\n  | `[data-theme=${string}]`\n  | `[data-size=${string}]`\n  | `[data-state=${string}]`\n  | '[data-empty]'\n  | '[data-loading]'\n  | '[data-loaded]'\n  | '[data-enter]'\n  | '[data-entering]'\n  | '[data-exited]'\n  | '[data-exiting]'\n\ntype AttributeSelector = `&${Pseudos | DataAttributes | AriaAttributes}`\ntype ParentSelector = `${DataAttributes | AriaAttributes} &`\n\ntype AtRuleType = 'media' | 'layer' | 'container' | 'supports' | 'page' | 'scope' | 'starting-style'\n\nexport type AnySelector = `${string}&` | `&${string}` | `@${AtRuleType}${string}`\nexport type Selectors = AttributeSelector | ParentSelector\n";
@@ -4733,7 +1958,7 @@ var content$2 = "import type { Pseudos } from './csstype'\n\ntype AriaAttributes
 var content$1 = "interface ConditionOptions {\n  /**\n   * The conditions to generate for the rule.\n   * @example ['hover', 'focus']\n   */\n  conditions?: string[]\n  /**\n   * Whether to generate responsive styles for the rule.\n   */\n  responsive?: boolean\n}\n\nexport interface CssRule extends ConditionOptions {\n  /**\n   * The css properties to generate utilities for.\n   * @example ['margin', 'padding']\n   */\n  properties: {\n    [property: string]: Array<string | number>\n  }\n}\n\ninterface RecipeRuleVariants {\n  [variant: string]: boolean | string[]\n}\n\nexport type RecipeRuleObject = RecipeRuleVariants & ConditionOptions\nexport type RecipeRule = '*' | RecipeRuleObject\n\nexport type PatternRule = '*' | CssRule\n\nexport interface StaticCssOptions {\n  /**\n   * The css utility classes to generate.\n   */\n  css?: CssRule[]\n  /**\n   * The css recipes to generate.\n   */\n  recipes?:\n    | '*'\n    | {\n        [recipe: string]: RecipeRule[]\n      }\n  /**\n   * The css patterns to generate.\n   */\n  patterns?: {\n    [pattern: string]: PatternRule[]\n  }\n  /**\n   * The CSS themes to generate\n   */\n  themes?: string[]\n}\n";
 //#endregion
 //#region src/artifacts/generated/system-types.d.ts.json
-var content = "import type { ConditionalValue, Nested } from './conditions'\nimport type { AtRule, Globals, PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\nexport type Pretty<T> = { [K in keyof T]: T[K] } & {}\n\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never\n\nexport type DistributiveUnion<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]\n} & DistributiveOmit<U, keyof T>\n\nexport type Assign<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] : T[K]\n} & U\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\ntype CornerShapeValue = 'round' | 'square' | 'bevel' | 'scoop' | 'notch' | 'squircle' | `superellipse(${number})`\n\nexport interface ModernCssProperties {\n  /**\n   * Controls whether the entire element should be draggable instead of its contents.\n   */\n  WebkitUserDrag?: Globals | 'auto' | 'element' | 'none'\n\n  /**\n   * Specifies whether an element can be used to drag the entire app window (Electron).\n   */\n  WebkitAppRegion?: Globals | 'drag' | 'no-drag'\n\n  /**\n   * Sets the horizontal spacing between table borders.\n   */\n  WebkitBorderHorizontalSpacing?: Globals | String | Number\n\n  /**\n   * Sets the vertical spacing between table borders.\n   */\n  WebkitBorderVerticalSpacing?: Globals | String | Number\n\n  /**\n   * Controls the display of text content for security purposes (e.g., password fields).\n   */\n  WebkitTextSecurity?: Globals | 'none' | 'circle' | 'disc' | 'square'\n\n  /**\n   * Specifies the shape of a box's corners within the area defined by the border-radius property.\n   * @experimental\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape\n   */\n  cornerShape?:\n    | Globals\n    | CornerShapeValue\n    | `${CornerShapeValue} ${CornerShapeValue}`\n    | `${CornerShapeValue} ${CornerShapeValue} ${CornerShapeValue}`\n    | `${CornerShapeValue} ${CornerShapeValue} ${CornerShapeValue} ${CornerShapeValue}`\n    | String\n}\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties, ModernCssProperties {}\n\nexport interface CssKeyframes {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ninterface GenericProperties {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Omit<Nested<SystemProperties & CssVarProperties>, 'base'>\n\nexport interface GlobalStyleObject {\n  [selector: string]: SystemStyleObject\n}\nexport interface ExtendableGlobalStyleObject {\n  [selector: string]: SystemStyleObject | undefined\n  extend?: GlobalStyleObject | undefined\n}\n\n/* -----------------------------------------------------------------------------\n * Composition (text styles, layer styles)\n * -----------------------------------------------------------------------------*/\n\ntype FilterStyleObject<P extends string> = {\n  [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<FilterStyleObject<Property> & CssVarProperties>\n\n/* -----------------------------------------------------------------------------\n * Font face\n * -----------------------------------------------------------------------------*/\n\nexport type GlobalFontfaceRule = Omit<AtRule.FontFaceFallback, 'src'> & Required<Pick<AtRule.FontFaceFallback, 'src'>>\n\nexport type FontfaceRule = Omit<GlobalFontfaceRule, 'fontFamily'>\n\nexport interface GlobalFontface {\n  [name: string]: FontfaceRule | FontfaceRule[]\n}\n\nexport interface ExtendableGlobalFontface {\n  [name: string]: FontfaceRule | FontfaceRule[] | GlobalFontface | undefined\n  extend?: GlobalFontface | undefined\n}\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ninterface WithCss {\n  css?: SystemStyleObject | SystemStyleObject[]\n}\n\nexport type JsxStyleProps = SystemStyleObject & WithCss\n\nexport interface PatchedHTMLProps {\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n";
+var content = "import type { ConditionalValue, Nested } from './conditions'\nimport type { AtRule, Globals, PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\nexport type Pretty<T> = { [K in keyof T]: T[K] } & {}\n\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never\n\nexport type DistributiveUnion<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]\n} & DistributiveOmit<U, keyof T>\n\nexport type Assign<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] : T[K]\n} & U\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\ntype CornerShapeValue = 'round' | 'square' | 'bevel' | 'scoop' | 'notch' | 'squircle' | `superellipse(${number})`\n\nexport interface ModernCssProperties {\n  /**\n   * Controls whether the entire element should be draggable instead of its contents.\n   */\n  WebkitUserDrag?: Globals | 'auto' | 'element' | 'none'\n\n  /**\n   * Specifies whether an element can be used to drag the entire app window (Electron).\n   */\n  WebkitAppRegion?: Globals | 'drag' | 'no-drag'\n\n  /**\n   * Sets the horizontal spacing between table borders.\n   */\n  WebkitBorderHorizontalSpacing?: Globals | String | Number\n\n  /**\n   * Sets the vertical spacing between table borders.\n   */\n  WebkitBorderVerticalSpacing?: Globals | String | Number\n\n  /**\n   * Controls the display of text content for security purposes (e.g., password fields).\n   */\n  WebkitTextSecurity?: Globals | 'none' | 'circle' | 'disc' | 'square'\n\n  /**\n   * Specifies the shape of a box's corners within the area defined by the border-radius property.\n   * @experimental\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape\n   */\n  cornerShape?:\n    | Globals\n    | CornerShapeValue\n    | `${CornerShapeValue} ${CornerShapeValue}`\n    | `${CornerShapeValue} ${CornerShapeValue} ${CornerShapeValue}`\n    | `${CornerShapeValue} ${CornerShapeValue} ${CornerShapeValue} ${CornerShapeValue}`\n    | String\n}\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties, ModernCssProperties {}\n\nexport interface CssKeyframes {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ninterface GenericProperties {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Omit<Nested<SystemProperties & CssVarProperties>, 'base'>\n\n/**\n * The four `::view-transition-*` pseudo-elements a `viewTransition()` bag can style.\n *\n * `imagePair` is camelCase here and emitted as `::view-transition-image-pair`, matching\n * how every other property in a style object is authored.\n */\nexport interface ViewTransitionStyleObject {\n  group?: SystemStyleObject\n  imagePair?: SystemStyleObject\n  old?: SystemStyleObject\n  new?: SystemStyleObject\n}\n\nexport type ViewTransitionFn = (options: ViewTransitionStyleObject) => string\n\nexport interface GlobalStyleObject {\n  [selector: string]: SystemStyleObject\n}\nexport interface ExtendableGlobalStyleObject {\n  [selector: string]: SystemStyleObject | undefined\n  extend?: GlobalStyleObject | undefined\n}\n\n/* -----------------------------------------------------------------------------\n * Composition (text styles, layer styles)\n * -----------------------------------------------------------------------------*/\n\ntype FilterStyleObject<P extends string> = {\n  [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<FilterStyleObject<Property> & CssVarProperties>\n\n/* -----------------------------------------------------------------------------\n * Font face\n * -----------------------------------------------------------------------------*/\n\nexport type GlobalFontfaceRule = Omit<AtRule.FontFaceFallback, 'src'> & Required<Pick<AtRule.FontFaceFallback, 'src'>>\n\nexport type FontfaceRule = Omit<GlobalFontfaceRule, 'fontFamily'>\n\nexport interface GlobalFontface {\n  [name: string]: FontfaceRule | FontfaceRule[]\n}\n\nexport interface ExtendableGlobalFontface {\n  [name: string]: FontfaceRule | FontfaceRule[] | GlobalFontface | undefined\n  extend?: GlobalFontface | undefined\n}\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ninterface WithCss {\n  css?: SystemStyleObject | SystemStyleObject[]\n}\n\nexport type JsxStyleProps = SystemStyleObject & WithCss\n\nexport interface PatchedHTMLProps {\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n";
 //#endregion
 //#region src/artifacts/types/generated.ts
 function getGeneratedTypes(ctx) {
@@ -4747,20 +1972,18 @@ function getGeneratedTypes(ctx) {
 		selectors: ctx.file.rewriteTypeImport(content$2)
 	};
 }
-const jsxStyleProps = "export type JsxStyleProps = SystemStyleObject & WithCss";
 function getGeneratedSystemTypes(ctx) {
-	return { system: ctx.file.rewriteTypeImport((0, ts_pattern.match)(ctx.jsx.styleProps).with("all", () => content).with("minimal", () => content.replace("WithHTMLProps<T>,", "T,").replace(jsxStyleProps, "export type JsxStyleProps = WithCss")).with("none", () => content.replace("WithHTMLProps<T>,", "T,").replace(jsxStyleProps, "export type JsxStyleProps = {}")).exhaustive()) };
+	return { system: ctx.file.rewriteTypeImport(content) };
 }
 //#endregion
 //#region src/artifacts/types/main.ts
-const generateTypesEntry = (ctx, isJsxRequired) => {
+const generateTypesEntry = (ctx) => {
 	const indexExports = [
 		`import '${ctx.file.extDts("./global")}'`,
 		ctx.file.exportTypeStar("./conditions"),
 		ctx.file.exportTypeStar("./pattern"),
 		ctx.file.exportTypeStar("./recipe"),
 		ctx.file.exportTypeStar("./system-types"),
-		isJsxRequired && ctx.file.exportTypeStar("./jsx"),
 		ctx.file.exportTypeStar("./style-props")
 	].filter(Boolean);
 	return {
@@ -5265,7 +2488,7 @@ function generateThemesIndex(ctx, files) {
 //#endregion
 //#region src/artifacts/setup-artifacts.ts
 function setupHelpers(ctx) {
-	const code = generateHelpers(ctx);
+	const code = generateHelpers();
 	return {
 		id: "helpers",
 		files: [{
@@ -5304,21 +2527,8 @@ function setupDesignTokens(ctx) {
 		]
 	};
 }
-function setupJsxTypes(ctx) {
-	if (!ctx.jsx.framework) return;
-	const jsx = generateJsxTypes(ctx);
-	if (!jsx) return;
-	return {
-		id: "types-jsx",
-		dir: ctx.paths.types,
-		files: [{
-			file: ctx.file.extDts("jsx"),
-			code: jsx.jsxType
-		}]
-	};
-}
 function setupEntryTypes(ctx) {
-	const entry = generateTypesEntry(ctx, Boolean(ctx.jsx.framework));
+	const entry = generateTypesEntry(ctx);
 	return {
 		id: "types-entry",
 		dir: ctx.paths.types,
@@ -5404,29 +2614,29 @@ function setupGeneratedSystemTypes(ctx) {
 	};
 }
 function setupCss(ctx) {
-	const code = ctx.isTemplateLiteralSyntax ? generateStringLiteralCssFn(ctx) : generateCssFn(ctx);
-	const conditions = ctx.isTemplateLiteralSyntax ? generateStringLiteralConditions(ctx) : generateConditions(ctx);
+	const code = generateCssFn(ctx);
+	const conditions = generateConditions(ctx);
+	const files = [
+		{
+			file: ctx.file.ext("conditions"),
+			code: conditions.js
+		},
+		{
+			file: ctx.file.ext("css"),
+			code: code.js
+		},
+		{
+			file: ctx.file.extDts("css"),
+			code: code.dts
+		}
+	];
 	return {
 		id: "css-fn",
 		dir: ctx.paths.css,
-		files: [
-			{
-				file: ctx.file.ext("conditions"),
-				code: conditions.js
-			},
-			{
-				file: ctx.file.ext("css"),
-				code: code.js
-			},
-			{
-				file: ctx.file.extDts("css"),
-				code: code.dts
-			}
-		]
+		files
 	};
 }
 function setupCva(ctx) {
-	if (ctx.isTemplateLiteralSyntax) return;
 	const code = generateCvaFn(ctx);
 	return {
 		id: "cva",
@@ -5441,7 +2651,6 @@ function setupCva(ctx) {
 	};
 }
 function setupSva(ctx) {
-	if (ctx.isTemplateLiteralSyntax) return;
 	const code = generateSvaFn(ctx);
 	return {
 		id: "sva",
@@ -5456,7 +2665,7 @@ function setupSva(ctx) {
 	};
 }
 function setupCx(ctx) {
-	const code = generateCx(ctx);
+	const code = generateCx();
 	return {
 		id: "cx",
 		dir: ctx.paths.css,
@@ -5521,7 +2730,6 @@ function setupRecipes(ctx, filters) {
 	};
 }
 function setupPatternsIndex(ctx) {
-	if (ctx.isTemplateLiteralSyntax) return;
 	const fileNames = ctx.patterns.details.map((pattern) => pattern.dashName);
 	const index = {
 		js: outdent.default.string(fileNames.map((file) => ctx.file.exportStar(`./${file}`)).join("\n")),
@@ -5540,7 +2748,6 @@ function setupPatternsIndex(ctx) {
 	};
 }
 function setupPatterns(ctx, filters) {
-	if (ctx.isTemplateLiteralSyntax) return;
 	const files = generatePattern(ctx, filters);
 	if (!files) return;
 	return {
@@ -5555,127 +2762,19 @@ function setupPatterns(ctx, filters) {
 		}])
 	};
 }
-function setupJsxIsValidProp(ctx) {
-	if (!ctx.jsx.framework || ctx.isTemplateLiteralSyntax) return;
-	const isValidProp = generateIsValidProp(ctx);
-	return {
-		id: "jsx-is-valid-prop",
-		dir: ctx.paths.jsx,
-		files: [{
-			file: ctx.file.ext("is-valid-prop"),
-			code: isValidProp?.js
-		}, {
-			file: ctx.file.extDts("is-valid-prop"),
-			code: isValidProp?.dts
-		}]
-	};
-}
-function setupJsxFactory(ctx) {
-	if (!ctx.jsx.framework) return;
-	const types = generateJsxTypes(ctx);
-	if (!types) return;
-	const factory = generateJsxFactory(ctx);
-	if (!factory) return;
-	return {
-		id: "jsx-factory",
-		dir: ctx.paths.jsx,
-		files: [{
-			file: ctx.file.ext("factory"),
-			code: factory?.js
-		}, {
-			file: ctx.file.extDts("factory"),
-			code: types.jsxFactory
-		}]
-	};
-}
-function setupJsxHelpers(ctx) {
-	if (!ctx.jsx.framework) return;
-	const helpers = generatedJsxHelpers(ctx);
-	return {
-		id: "jsx-helpers",
-		dir: ctx.paths.jsx,
-		files: [{
-			file: ctx.file.ext("factory-helper"),
-			code: helpers.js
-		}]
-	};
-}
-function setupJsxPatterns(ctx, filters) {
-	if (!ctx.jsx.framework || ctx.isTemplateLiteralSyntax) return;
-	const patterns = generateJsxPatterns(ctx, filters);
-	if (!patterns) return;
-	return {
-		id: "jsx-patterns",
-		dir: ctx.paths.jsx,
-		files: [...patterns.flatMap((file) => [{
-			file: ctx.file.ext(file.name),
-			code: file.js
-		}, {
-			file: ctx.file.extDts(file.name),
-			code: file.dts
-		}])]
-	};
-}
-function setupJsxCreateStyleContext(ctx) {
-	if (!ctx.jsx.framework || ctx.isTemplateLiteralSyntax) return;
-	const createStyleContext = generateJsxCreateStyleContext(ctx);
-	if (!createStyleContext) return;
-	return {
-		id: "jsx-create-style-context",
-		dir: ctx.paths.jsx,
-		files: [{
-			file: ctx.file.ext("create-style-context"),
-			code: createStyleContext.js
-		}, {
-			file: ctx.file.extDts("create-style-context"),
-			code: createStyleContext.dts
-		}]
-	};
-}
-function setupJsxPatternsIndex(ctx) {
-	if (!ctx.jsx.framework) return;
-	const isStyleProp = !ctx.isTemplateLiteralSyntax;
-	const patternNames = ctx.patterns.details.map((pattern) => pattern.dashName);
-	const index = {
-		js: outdent.default`
-  ${ctx.file.exportStar("./factory")}
-  ${isStyleProp ? ctx.file.exportStar("./is-valid-prop") : ""}
-  ${isStyleProp && !["qwik", "svelte"].includes(ctx.jsx.framework) ? ctx.file.exportStar("./create-style-context") : ""}
-  ${isStyleProp ? outdent.default.string(patternNames.map((file) => ctx.file.exportStar(`./${file}`)).join("\n")) : ""}
-  `,
-		dts: outdent.default`
-  ${ctx.file.exportTypeStar("./factory")}
-  ${isStyleProp ? ctx.file.exportTypeStar("./is-valid-prop") : ""}
-  ${isStyleProp ? ctx.file.exportTypeStar("./create-style-context") : ""}
-  ${isStyleProp ? outdent.default.string(patternNames.map((file) => ctx.file.exportTypeStar(`./${file}`)).join("\n")) : ""}
-  ${ctx.file.exportType([ctx.jsx.typeName, ctx.jsx.componentName].join(", "), "../types/jsx")}
-    `
-	};
-	return {
-		id: "jsx-patterns-index",
-		dir: ctx.paths.jsx,
-		files: [{
-			file: ctx.file.ext("index"),
-			code: index.js
-		}, {
-			file: ctx.file.extDts("index"),
-			code: index.dts
-		}]
-	};
-}
 function setupCssIndex(ctx) {
 	const index = {
 		js: outdent.default`
   ${ctx.file.exportStar("./css")}
   ${ctx.file.exportStar("./cx")}
-  ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportStar("./cva")}
-  ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportStar("./sva")}
+  ${ctx.file.exportStar("./cva")}
+  ${ctx.file.exportStar("./sva")}
  `,
 		dts: outdent.default`
   ${ctx.file.exportTypeStar("./css")}
   ${ctx.file.exportTypeStar("./cx")}
-  ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportTypeStar("./cva")}
-  ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportTypeStar("./sva")}
+  ${ctx.file.exportTypeStar("./cva")}
+  ${ctx.file.exportTypeStar("./sva")}
   `
 	};
 	return {
@@ -5726,7 +2825,7 @@ const filterArtifactsFiles = (artifacts, filters) => {
 			if (affected.recipes && !item.file.includes("index") && artifact?.dir?.includes("recipes")) {
 				if (!affected.recipes.some((recipe) => item.file.includes(recipe))) return;
 			}
-			if (affected.patterns && !item.file.includes("index") && (artifact?.dir?.includes("patterns") || artifact?.dir?.includes("jsx"))) {
+			if (affected.patterns && !item.file.includes("index") && artifact?.dir?.includes("patterns")) {
 				if (!affected.patterns.some((pattern) => item.file.includes(pattern))) return;
 			}
 			return true;
@@ -5741,7 +2840,6 @@ const entries = [
 	["package.json", setupPackageJson],
 	["helpers", setupHelpers],
 	["design-tokens", setupDesignTokens],
-	["types-jsx", setupJsxTypes],
 	["types-entry", setupEntryTypes],
 	["types-styles", setupStyleTypes],
 	["types-conditions", setupConditionsTypes],
@@ -5756,12 +2854,6 @@ const entries = [
 	["recipes", setupRecipes],
 	["patterns-index", setupPatternsIndex],
 	["patterns", setupPatterns],
-	["jsx-is-valid-prop", setupJsxIsValidProp],
-	["jsx-factory", setupJsxFactory],
-	["jsx-helpers", setupJsxHelpers],
-	["jsx-patterns", setupJsxPatterns],
-	["jsx-create-style-context", setupJsxCreateStyleContext],
-	["jsx-patterns-index", setupJsxPatternsIndex],
 	["css-index", setupCssIndex],
 	["themes", setupThemes]
 ];
@@ -5811,6 +2903,61 @@ const generateGlobalCss = (ctx, sheet) => {
 	sheet.processGlobalCss(globalCss);
 };
 //#endregion
+//#region src/artifacts/js/group-registry.ts
+/**
+* The grouped class names an encoder has accumulated.
+*
+* Derived through `groupClassName`, the same function the browser runtime calls — a
+* registry built any other way would be a third spelling of a name that already has two.
+* Unescaped, unlike `StyleDecoder`'s class names: this is compared against what `css()`
+* returns into a `class` attribute, not against a selector.
+*
+* Reads from the encoder rather than the decoder so it is available as soon as extraction
+* is, and so `codegen` can emit whatever is already known instead of blanking the file.
+*/
+function collectGroupClassNames(ctx) {
+	const names = [];
+	ctx.encoder.grouped.forEach((_hashes, groupId) => {
+		names.push((0, _bamboocss_shared.groupClassName)(groupId, ctx.utility.toHash, ctx.utility.formatClassName));
+	});
+	return names.sort();
+}
+/**
+* The grouped classes the build emitted a rule for.
+*
+* Under `cssMode: 'grouped'` a class names a whole `css()` call, so the build has to have
+* seen that exact call to emit its rule. This is how the runtime tells the difference: a
+* class in here has CSS behind it, and one that is not falls back to naming its
+* declarations atomically as well.
+*
+* Written by two passes. `codegen` emits whatever the encoder already holds — usually
+* nothing, since it runs on config change before anything is extracted, but not blank when
+* it runs after a build. The CSS build then rewrites it with the set it emitted.
+*
+* An empty or stale registry is safe by construction: the runtime *adds* to the group class
+* rather than replacing it, so the worst a miss can do is name a class that matches nothing.
+*/
+function generateGroupRegistry(ctx, classNames) {
+	const names = classNames ?? collectGroupClassNames(ctx);
+	return {
+		js: outdent.outdent`
+    // Generated by bamboo. Rewritten on every CSS build — do not edit.
+    const packed = ${JSON.stringify(names.slice().sort().join(","))}
+
+    export const groups = /* @__PURE__ */ new Set(packed ? packed.split(',') : [])
+    `,
+		dts: outdent.outdent`
+    /**
+     * The grouped classes this build emitted a rule for. Internal — the generated \`css\`
+     * consults it to decide whether a grouped class has CSS behind it.
+     */
+    export declare const groups: Set<string>;
+    `
+	};
+}
+/** Where the registry lives, so the writer and the importer cannot disagree about it. */
+const GROUP_REGISTRY_FILE = "groups";
+//#endregion
 //#region src/artifacts/css/keyframe-css.ts
 function generateKeyframeCss(ctx, sheet) {
 	const { keyframes = {} } = ctx.config.theme ?? {};
@@ -5975,7 +3122,7 @@ const generateStaticCss = (ctx, sheet) => {
 //#endregion
 //#region src/spec/animation-styles.ts
 const generateAnimationStylesSpec = (ctx) => {
-	return generateCompositionStyleSpec("animation-styles", ctx.config.theme, ctx.config.jsxStyleProps);
+	return generateCompositionStyleSpec("animation-styles", ctx.config.theme);
 };
 //#endregion
 //#region src/spec/color-palette.ts
@@ -6000,16 +3147,12 @@ const getColorPaletteExampleValues = (ctx, paletteValues) => {
 };
 const generateColorPaletteSpec = (ctx) => {
 	if ((ctx.config.theme?.colorPalette)?.enabled === false) return null;
-	const jsxStyleProps = ctx.config.jsxStyleProps;
 	const values = Array.from(ctx.tokens.view.colorPalettes.keys()).sort();
 	if (!values.length) return null;
 	const { examplePalette, bgToken, colorToken } = getColorPaletteExampleValues(ctx, values);
 	const functionExamples = [];
-	const jsxExamples = [];
 	const basicProps = { colorPalette: examplePalette };
 	functionExamples.push(`css({ ${formatProps(basicProps)} })`);
-	const basicJsx = generateJsxExample(basicProps, jsxStyleProps);
-	if (basicJsx) jsxExamples.push(basicJsx);
 	if (bgToken || colorToken) {
 		const extendedProps = {
 			colorPalette: examplePalette,
@@ -6017,25 +3160,17 @@ const generateColorPaletteSpec = (ctx) => {
 			color: colorToken
 		};
 		functionExamples.push(`css({ ${formatProps(extendedProps)} })`);
-		const extendedJsx = generateJsxExample(extendedProps, jsxStyleProps);
-		if (extendedJsx) jsxExamples.push(extendedJsx);
 	}
 	return {
 		type: "color-palette",
 		data: {
 			values,
-			functionExamples,
-			jsxExamples
+			functionExamples
 		}
 	};
 };
 //#endregion
 //#region src/spec/conditions.ts
-const generateConditionJsxExamples = (conditionName, jsxStyleProps = "all") => {
-	if (jsxStyleProps === "all") return [`<Box margin={{ base: '2', ${conditionName}: '4' }} />`, `<Box margin="2" ${conditionName}={{ margin: '4' }} />`];
-	if (jsxStyleProps === "minimal") return [`<Box css={{ margin: { base: '2', ${conditionName}: '4' } }} />`, `<Box css={{ margin: '2', ${conditionName}: { margin: '4' } }} />`];
-	return [];
-};
 /**
 * Walk an object condition collecting every path that ends in `@slot`.
 * Each path is joined with spaces; multiple paths are joined with `; ` so the
@@ -6051,7 +3186,6 @@ const formatObjectCondition = (raw) => {
 	return blocks.join("; ");
 };
 const generateConditionsSpec = (ctx) => {
-	const jsxStyleProps = ctx.config.jsxStyleProps;
 	const breakpointKeys = new Set(Object.keys(ctx.conditions.breakpoints.conditions));
 	return {
 		type: "conditions",
@@ -6062,37 +3196,26 @@ const generateConditionsSpec = (ctx) => {
 			return {
 				name: conditionName,
 				value: value ?? "",
-				functionExamples: [`css({ margin: { base: '2', ${conditionName}: '4' } })`, `css({ margin: '2', ${conditionName}: { margin: '4' } })`],
-				jsxExamples: generateConditionJsxExamples(conditionName, jsxStyleProps)
+				functionExamples: [`css({ margin: { base: '2', ${conditionName}: '4' } })`, `css({ margin: '2', ${conditionName}: { margin: '4' } })`]
 			};
 		})
 	};
 };
 //#endregion
 //#region src/spec/keyframes.ts
-const generateKeyframeJsxExamples = (name, jsxStyleProps = "all") => {
-	const jsxExamples = [];
-	const example1 = generateJsxExample({ animationName: name }, jsxStyleProps);
-	if (example1) jsxExamples.push(example1);
-	const example2 = generateJsxExample({ animation: `${name} 1s ease-in-out infinite` }, jsxStyleProps);
-	if (example2) jsxExamples.push(example2);
-	return jsxExamples;
-};
 const generateKeyframesSpec = (ctx) => {
-	const jsxStyleProps = ctx.config.jsxStyleProps;
 	return {
 		type: "keyframes",
 		data: Object.keys(ctx.config.theme?.keyframes ?? {}).map((name) => ({
 			name,
-			functionExamples: [`css({ animationName: '${name}' })`, `css({ animation: '${name} 1s ease-in-out infinite' })`],
-			jsxExamples: generateKeyframeJsxExamples(name, jsxStyleProps)
+			functionExamples: [`css({ animationName: '${name}' })`, `css({ animation: '${name} 1s ease-in-out infinite' })`]
 		}))
 	};
 };
 //#endregion
 //#region src/spec/layer-styles.ts
 const generateLayerStylesSpec = (ctx) => {
-	return generateCompositionStyleSpec("layer-styles", ctx.config.theme, ctx.config.jsxStyleProps);
+	return generateCompositionStyleSpec("layer-styles", ctx.config.theme);
 };
 //#endregion
 //#region src/spec/patterns.ts
@@ -6104,22 +3227,16 @@ const getExampleValue = (prop) => {
 	return "<value>";
 };
 const generatePatternsSpec = (ctx) => {
-	const jsxStyleProps = ctx.config.jsxStyleProps;
 	return {
 		type: "patterns",
 		data: ctx.patterns.details.map((node) => {
 			const patternName = node.baseName;
-			const jsxName = node.jsxName;
 			const properties = Object.entries(node.config.properties ?? {});
 			const functionExamples = [];
-			const jsxExamples = [];
-			if (properties.length === 0) {
-				functionExamples.push(`${patternName}()`);
-				if (jsxStyleProps !== "none") jsxExamples.push(`<${jsxName} />`);
-			} else properties.forEach(([propName, prop]) => {
+			if (properties.length === 0) functionExamples.push(`${patternName}()`);
+			else properties.forEach(([propName, prop]) => {
 				const exampleValue = getExampleValue(prop);
 				functionExamples.push(`${patternName}({ ${propName}: ${exampleValue} })`);
-				if (jsxStyleProps !== "none") jsxExamples.push(`<${jsxName} ${propName}={${exampleValue}} />`);
 			});
 			const defaultValues = typeof node.config.defaultValues === "object" ? node.config.defaultValues : {};
 			return {
@@ -6131,9 +3248,7 @@ const generatePatternsSpec = (ctx) => {
 					description: prop.description,
 					defaultValue: defaultValues[name]
 				})),
-				jsx: jsxName,
-				functionExamples,
-				jsxExamples
+				functionExamples
 			};
 		})
 	};
@@ -6155,28 +3270,17 @@ const generateRecipesSpec = (ctx) => {
 		type: "recipes",
 		data: ctx.recipes.details.map((node) => {
 			const recipeName = node.baseName;
-			const jsxName = node.jsxName;
 			const variantKeys = Object.keys(node.variantKeyMap);
 			const functionExamples = [];
-			const jsxExamples = [];
-			if (variantKeys.length === 0) {
-				functionExamples.push(`${recipeName}()`);
-				jsxExamples.push(`<${jsxName} />`);
-			} else {
+			if (variantKeys.length === 0) functionExamples.push(`${recipeName}()`);
+			else {
 				variantKeys.forEach((variantKey) => {
 					const firstValue = getFirstVariantValue(node.variantKeyMap, variantKey);
-					if (firstValue) {
-						functionExamples.push(`${recipeName}({ ${variantKey}: ${formatFunctionValue(firstValue)} })`);
-						jsxExamples.push(`<${jsxName} ${variantKey}=${formatJsxValue(firstValue)} />`);
-					}
+					if (firstValue) functionExamples.push(`${recipeName}({ ${variantKey}: ${formatFunctionValue(firstValue)} })`);
 				});
 				if (variantKeys.length > 1) {
 					const props = buildVariantProps(variantKeys, node.variantKeyMap, buildFunctionProps, ", ");
-					const jsxProps = buildVariantProps(variantKeys, node.variantKeyMap, buildJsxProps, " ");
-					if (props && jsxProps) {
-						functionExamples.push(`${recipeName}({ ${props} })`);
-						jsxExamples.push(`<${jsxName} ${jsxProps} />`);
-					}
+					if (props) functionExamples.push(`${recipeName}({ ${props} })`);
 				}
 			}
 			return {
@@ -6184,8 +3288,7 @@ const generateRecipesSpec = (ctx) => {
 				description: node.config.description,
 				variants: node.variantKeyMap,
 				defaultVariants: node.config.defaultVariants ?? {},
-				functionExamples,
-				jsxExamples
+				functionExamples
 			};
 		})
 	};
@@ -6193,7 +3296,7 @@ const generateRecipesSpec = (ctx) => {
 //#endregion
 //#region src/spec/text-styles.ts
 const generateTextStylesSpec = (ctx) => {
-	return generateCompositionStyleSpec("text-styles", ctx.config.theme, ctx.config.jsxStyleProps);
+	return generateCompositionStyleSpec("text-styles", ctx.config.theme);
 };
 //#endregion
 //#region src/spec/token-examples.ts
@@ -6222,26 +3325,21 @@ const CATEGORY_PROPERTY_MAP = {
 const getCategoryProperty = (category) => {
 	return category ? CATEGORY_PROPERTY_MAP[category] ?? "color" : "color";
 };
-const generateTokenExamples = (token, jsxStyleProps = "all") => {
+const generateTokenExamples = (token) => {
 	const prop = getCategoryProperty(token.extensions?.category);
 	const tokenName = token.extensions.prop;
 	const fullTokenName = token.name;
 	const functionExamples = [`css({ ${prop}: '${tokenName}' })`];
 	const tokenFunctionExamples = [`token('${fullTokenName}')`];
-	const jsxExamples = [];
-	const jsxExample = generateJsxExample({ [prop]: tokenName }, jsxStyleProps);
-	if (jsxExample) jsxExamples.push(jsxExample);
 	if (token.extensions.varRef) tokenFunctionExamples.push(`token.var('${fullTokenName}')`);
 	return {
 		functionExamples,
-		tokenFunctionExamples,
-		jsxExamples
+		tokenFunctionExamples
 	};
 };
 //#endregion
 //#region src/spec/themes.ts
 const generateThemeTokenGroups = (ctx, themeName, filterFn) => {
-	const jsxStyleProps = ctx.config.jsxStyleProps;
 	const condName = "_theme" + (0, _bamboocss_shared.capitalize)(themeName);
 	const themeTokens = ctx.tokens.allTokens.filter((token) => token.extensions.isVirtual && token.extensions.theme === themeName && filterFn(token));
 	const byCategory = /* @__PURE__ */ new Map();
@@ -6254,7 +3352,7 @@ const generateThemeTokenGroups = (ctx, themeName, filterFn) => {
 	return Array.from(byCategory.entries()).map(([category, typeTokens]) => {
 		if (!typeTokens.length) return null;
 		const firstToken = typeTokens[0];
-		const { functionExamples, tokenFunctionExamples, jsxExamples } = generateTokenExamples(firstToken, jsxStyleProps);
+		const { functionExamples, tokenFunctionExamples } = generateTokenExamples(firstToken);
 		return {
 			type: category,
 			values: typeTokens.map((token) => {
@@ -6274,8 +3372,7 @@ const generateThemeTokenGroups = (ctx, themeName, filterFn) => {
 				};
 			}),
 			tokenFunctionExamples,
-			functionExamples,
-			jsxExamples
+			functionExamples
 		};
 	}).filter(Boolean);
 };
@@ -6296,14 +3393,13 @@ const generateThemesSpec = (ctx) => {
 //#endregion
 //#region src/spec/tokens.ts
 const generateTokensSpec = (ctx) => {
-	const jsxStyleProps = ctx.config.jsxStyleProps;
 	return {
 		type: "tokens",
 		data: Array.from(ctx.tokens.view.categoryMap.entries()).map(([category, tokenMap]) => {
 			const typeTokens = Array.from(tokenMap.values()).filter((token) => !token.extensions.isSemantic && !token.extensions.isVirtual && !token.extensions.conditions && !token.extensions.isNegative);
 			if (!typeTokens.length) return null;
 			const firstToken = typeTokens[0];
-			const { functionExamples, tokenFunctionExamples, jsxExamples } = generateTokenExamples(firstToken, jsxStyleProps);
+			const { functionExamples, tokenFunctionExamples } = generateTokenExamples(firstToken);
 			return {
 				type: category,
 				values: typeTokens.map((token) => ({
@@ -6314,21 +3410,19 @@ const generateTokensSpec = (ctx) => {
 					cssVar: token.extensions.varRef
 				})),
 				tokenFunctionExamples,
-				functionExamples,
-				jsxExamples
+				functionExamples
 			};
 		}).filter(Boolean)
 	};
 };
 const generateSemanticTokensSpec = (ctx) => {
-	const jsxStyleProps = ctx.config.jsxStyleProps;
 	return {
 		type: "semantic-tokens",
 		data: Array.from(ctx.tokens.view.categoryMap.entries()).map(([category, tokenMap]) => {
 			const typeTokens = Array.from(tokenMap.values()).filter((token) => (token.extensions.isSemantic || token.extensions.conditions) && !token.extensions.isVirtual);
 			if (!typeTokens.length) return null;
 			const firstToken = typeTokens[0];
-			const { functionExamples, tokenFunctionExamples, jsxExamples } = generateTokenExamples(firstToken, jsxStyleProps);
+			const { functionExamples, tokenFunctionExamples } = generateTokenExamples(firstToken);
 			return {
 				type: category,
 				values: typeTokens.map((token) => {
@@ -6348,8 +3442,7 @@ const generateSemanticTokensSpec = (ctx) => {
 					};
 				}),
 				tokenFunctionExamples,
-				functionExamples,
-				jsxExamples
+				functionExamples
 			};
 		}).filter(Boolean)
 	};
@@ -6515,6 +3608,20 @@ var Generator = class extends _bamboocss_core.Context {
 	getParserCss = (decoder) => {
 		return generateParserCss(this, decoder);
 	};
+	/**
+	* The grouped class names this build emitted a rule for.
+	*
+	* Derived from the encoder rather than the decoder, so it is available as soon as
+	* extraction finishes and before a stylesheet exists. Both sides go through
+	* `groupClassName`, which is the same function the browser runtime calls — a registry
+	* built any other way would be a third spelling of a name that already has two.
+	*
+	* Unescaped, unlike `StyleDecoder`'s class names: this is compared against what `css()`
+	* returns into a `class` attribute, not against a selector. A grouped class is an opaque
+	* hash, so the two only differ in principle, but the principle is the one that matters
+	* here — the registry is only useful if it holds exactly what the runtime will ask about.
+	*/
+	getGroupRegistry = () => collectGroupClassNames(this);
 	getCss = (stylesheet) => {
 		let css = (stylesheet ?? this.createSheet()).toCss({ minify: this.config.minify });
 		if (this.hooks["cssgen:done"]) css = this.hooks["cssgen:done"]({
@@ -6658,5 +3765,7 @@ var Generator = class extends _bamboocss_core.Context {
 	};
 };
 //#endregion
+exports.GROUP_REGISTRY_FILE = GROUP_REGISTRY_FILE;
 exports.Generator = Generator;
+exports.generateGroupRegistry = generateGroupRegistry;
 exports.getThemeCss = getThemeCss;