@bamboocss/generator 1.13.1 → 1.14.0

package/dist/index.cjs

@@ -165,6 +165,21 @@ function generateCssFn(ctx) {
 
     export declare const css: CssFunction;
 
+    /**
+     * Build a fallback value: a list of candidates, most-preferred first, emitted as repeated
+     * declarations so the browser keeps the last one it understands.
+     *
+     * Sugar for the string form — \`fallback('100dvh', '100vh')\` is \`'fallback(100dvh, 100vh)'\`.
+     * The candidates are not individually type-checked, the same trade the \`[...]\` escape
+     * hatch makes.
+     *
+     * @example
+     * css({ height: fallback('calc(100dvh - 100px)', 'calc(100vh - 100px)') })
+     *
+     * @see https://bamboocss.com/docs/concepts/writing-styles#fallback-values
+     */
+    export declare function fallback(preferred: string | number, ...rest: Array<string | number>): \`fallback(\${string})\`;
+
     /**
      * Internal. Emitted for the source transform, which rewrites a single dynamic style
      * leaf into a call to this. Not part of the authoring API.
@@ -237,6 +252,11 @@ function generateCssFn(ctx) {
       return className === undefined ? css({ [prop]: value }) : className
     }
 
+    // Sugar for the string form, so the feature has an import to discover, a signature to
+    // hover and a name the editor can complete. The extractor evaluates the call, so the
+    // value reaching \`css()\` is the same literal either way.
+    export const fallback = (...values) => \`fallback($\{values.join(', ')})\`
+
     export const { mergeCss, assignCss } = createMergeCss(context)
     `
 	};
@@ -351,6 +371,15 @@ function generateCvaFn(ctx) {
         })
       }
 
+      // \`raw\` runs per element per render — the JSX factory calls it to build the styles it
+      // merges with style props — and \`resolve\` is not cheap: a \`mergeCss\` per active variant
+      // plus a scan of every compound variant. Memoizing it keys that work on the variant
+      // props rather than repeating it for every element that shares them.
+      //
+      // \`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.
+      const resolveVariants = memo(resolve)
+
       function cvaFn(props) {
         return css(resolve(props))
       }
@@ -367,7 +396,7 @@ function generateCvaFn(ctx) {
         __cva__: true,
         variantMap,
         variantKeys,
-        raw: (...args) => cloneStyles(resolve(...args)),
+        raw: (...args) => cloneStyles(resolveVariants(...args)),
         config,
         merge,
         splitVariantProps,
@@ -411,31 +440,205 @@ function generateCvaFn(ctx) {
 }
 //#endregion
 //#region src/artifacts/js/cx.ts
-function generateCx() {
+const dts = outdent.default`
+   type Argument = string | boolean | null | undefined | Argument[]
+
+   /**
+    * Join classNames into a single string, with the last conflicting utility winning.
+    *
+    * \`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.
+    */
+   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 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.
+      const part = Array.isArray(arg) ? cx(...arg) : typeof arg === 'string' ? arg : ''
+      if (!part) continue
+      str && (str += ' ')
+      str += part
+    }
+    return str
+  }
+
+  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`
-    function cx() {
-      let str = '',
-        i = 0,
-        arg
-
-      for (; i < arguments.length; ) {
-        if ((arg = arguments[i++]) && typeof arg === 'string') {
-          str && (str += ' ')
-          str += arg
+    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: outdent.default`
-       type Argument = string | boolean | null | undefined
-
-       /** Conditionally join classNames into a single string */
-       export declare function cx(...args: Argument[]): string
-      `
+		dts
 	};
 }
 //#endregion
@@ -443,7 +646,7 @@ function generateCx() {
 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/compact.ts\nfunction compact(value) {\n	return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value]) => value !== void 0));\n}\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;\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	return typeof value === \"string\" ? value.replaceAll(/[\\n\\s]+/g, \" \") : value;\n}\nfunction isImportant(value) {\n	return typeof value === \"string\" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n	return typeof value === \"string\" ? value.replace(importantRegex, \"\").trim() : value;\n}\nfunction withoutSpace(str) {\n	return typeof str === \"string\" ? 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}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n	const { utility, conditions } = context;\n	const { hasShorthand, resolveShorthand } = utility;\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 formatClassName = (str) => [utility.prefix, str].filter(Boolean).join(\"-\");\n	const hashFn = (conditions, className) => {\n		let result;\n		if (hash) {\n			const baseArray = [...conds.finalize(conditions), className];\n			result = formatClassName(utility.toHash(baseArray, toHash));\n		} else result = [...conds.finalize(conditions), formatClassName(className)].join(\":\");\n		return result;\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}\nfunction compactStyles(...styles) {\n	return styles.flat().filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\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/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	return keys.map((key) => split(Array.isArray(key) ? key : allKeys.filter(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";
+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";
@@ -4613,11 +4816,21 @@ function generatePropTypes(ctx) {
   type Important = ImportantMark | WhitespaceImportant
   type WithImportant<T> = [T] extends [string] ? \`\${T}\${Important}\` & { __important?: true } : never
 
+  /**
+   * A list of candidate values, most-preferred first, emitted as repeated declarations so the
+   * browser keeps the last one it understands.
+   *
+   * @example
+   * css({ height: 'fallback(100dvh, 100vh)' })
+   */
+  type FallbackValue = \`fallback(\${string})\`
+
   /**
    * Only relevant when using \`strictTokens\` or \`strictPropertyValues\` in your config.
    * - Allows you to use an escape hatch (e.g. \`[123px]\`) to use any string as a value.
    * - Allows you to use a color opacity modifier (e.g. \`red/300\`) with known color values.
    * - Allows you to use an important mark (e.g. \`!\` or \`!important\`) in the value.
+   * - Allows you to use a fallback list (e.g. \`fallback(100dvh, 100vh)\`).
    *
    * This is useful when you want to use a value that is not defined in the config or want to opt-out of the defaults.
    *
@@ -4629,7 +4842,13 @@ function generatePropTypes(ctx) {
    * @see https://bamboocss.com/docs/concepts/writing-styles#stricttokens
    * @see https://bamboocss.com/docs/concepts/writing-styles#strictpropertyvalues
    */
-  export type WithEscapeHatch<T> = T | \`[\${string}]\` | WithColorOpacityModifier<T> | WithImportant<T>
+  export type WithEscapeHatch<T> =
+    | T
+    | \`[\${string}]\`
+    | FallbackValue
+    | WithImportant<FallbackValue>
+    | WithColorOpacityModifier<T>
+    | WithImportant<T>
 
   /**
    * Will restrict the value of properties that have predefined values to those values only.
@@ -5237,7 +5456,7 @@ function setupSva(ctx) {
 	};
 }
 function setupCx(ctx) {
-	const code = generateCx();
+	const code = generateCx(ctx);
 	return {
 		id: "cx",
 		dir: ctx.paths.css,

package/dist/index.mjs

@@ -139,6 +139,21 @@ function generateCssFn(ctx) {
 
     export declare const css: CssFunction;
 
+    /**
+     * Build a fallback value: a list of candidates, most-preferred first, emitted as repeated
+     * declarations so the browser keeps the last one it understands.
+     *
+     * Sugar for the string form — \`fallback('100dvh', '100vh')\` is \`'fallback(100dvh, 100vh)'\`.
+     * The candidates are not individually type-checked, the same trade the \`[...]\` escape
+     * hatch makes.
+     *
+     * @example
+     * css({ height: fallback('calc(100dvh - 100px)', 'calc(100vh - 100px)') })
+     *
+     * @see https://bamboocss.com/docs/concepts/writing-styles#fallback-values
+     */
+    export declare function fallback(preferred: string | number, ...rest: Array<string | number>): \`fallback(\${string})\`;
+
     /**
      * Internal. Emitted for the source transform, which rewrites a single dynamic style
      * leaf into a call to this. Not part of the authoring API.
@@ -211,6 +226,11 @@ function generateCssFn(ctx) {
       return className === undefined ? css({ [prop]: value }) : className
     }
 
+    // Sugar for the string form, so the feature has an import to discover, a signature to
+    // hover and a name the editor can complete. The extractor evaluates the call, so the
+    // value reaching \`css()\` is the same literal either way.
+    export const fallback = (...values) => \`fallback($\{values.join(', ')})\`
+
     export const { mergeCss, assignCss } = createMergeCss(context)
     `
 	};
@@ -325,6 +345,15 @@ function generateCvaFn(ctx) {
         })
       }
 
+      // \`raw\` runs per element per render — the JSX factory calls it to build the styles it
+      // merges with style props — and \`resolve\` is not cheap: a \`mergeCss\` per active variant
+      // plus a scan of every compound variant. Memoizing it keys that work on the variant
+      // props rather than repeating it for every element that shares them.
+      //
+      // \`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.
+      const resolveVariants = memo(resolve)
+
       function cvaFn(props) {
         return css(resolve(props))
       }
@@ -341,7 +370,7 @@ function generateCvaFn(ctx) {
         __cva__: true,
         variantMap,
         variantKeys,
-        raw: (...args) => cloneStyles(resolve(...args)),
+        raw: (...args) => cloneStyles(resolveVariants(...args)),
         config,
         merge,
         splitVariantProps,
@@ -385,31 +414,205 @@ function generateCvaFn(ctx) {
 }
 //#endregion
 //#region src/artifacts/js/cx.ts
-function generateCx() {
+const dts = outdent$1`
+   type Argument = string | boolean | null | undefined | Argument[]
+
+   /**
+    * Join classNames into a single string, with the last conflicting utility winning.
+    *
+    * \`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.
+    */
+   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$1`
+  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.
+      const part = Array.isArray(arg) ? cx(...arg) : typeof arg === 'string' ? arg : ''
+      if (!part) continue
+      str && (str += ' ')
+      str += part
+    }
+    return str
+  }
+
+  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$1`
-    function cx() {
-      let str = '',
-        i = 0,
-        arg
-
-      for (; i < arguments.length; ) {
-        if ((arg = arguments[i++]) && typeof arg === 'string') {
-          str && (str += ' ')
-          str += arg
+    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: outdent$1`
-       type Argument = string | boolean | null | undefined
-
-       /** Conditionally join classNames into a single string */
-       export declare function cx(...args: Argument[]): string
-      `
+		dts
 	};
 }
 //#endregion
@@ -417,7 +620,7 @@ function generateCx() {
 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/compact.ts\nfunction compact(value) {\n	return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value]) => value !== void 0));\n}\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;\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	return typeof value === \"string\" ? value.replaceAll(/[\\n\\s]+/g, \" \") : value;\n}\nfunction isImportant(value) {\n	return typeof value === \"string\" ? importantRegex.test(value) : false;\n}\nfunction withoutImportant(value) {\n	return typeof value === \"string\" ? value.replace(importantRegex, \"\").trim() : value;\n}\nfunction withoutSpace(str) {\n	return typeof str === \"string\" ? 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}\nfunction normalizeStyleObject(styles, context, shorthand = true) {\n	const { utility, conditions } = context;\n	const { hasShorthand, resolveShorthand } = utility;\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 formatClassName = (str) => [utility.prefix, str].filter(Boolean).join(\"-\");\n	const hashFn = (conditions, className) => {\n		let result;\n		if (hash) {\n			const baseArray = [...conds.finalize(conditions), className];\n			result = formatClassName(utility.toHash(baseArray, toHash));\n		} else result = [...conds.finalize(conditions), formatClassName(className)].join(\":\");\n		return result;\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}\nfunction compactStyles(...styles) {\n	return styles.flat().filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);\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/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	return keys.map((key) => split(Array.isArray(key) ? key : allKeys.filter(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";
+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";
@@ -4587,11 +4790,21 @@ function generatePropTypes(ctx) {
   type Important = ImportantMark | WhitespaceImportant
   type WithImportant<T> = [T] extends [string] ? \`\${T}\${Important}\` & { __important?: true } : never
 
+  /**
+   * A list of candidate values, most-preferred first, emitted as repeated declarations so the
+   * browser keeps the last one it understands.
+   *
+   * @example
+   * css({ height: 'fallback(100dvh, 100vh)' })
+   */
+  type FallbackValue = \`fallback(\${string})\`
+
   /**
    * Only relevant when using \`strictTokens\` or \`strictPropertyValues\` in your config.
    * - Allows you to use an escape hatch (e.g. \`[123px]\`) to use any string as a value.
    * - Allows you to use a color opacity modifier (e.g. \`red/300\`) with known color values.
    * - Allows you to use an important mark (e.g. \`!\` or \`!important\`) in the value.
+   * - Allows you to use a fallback list (e.g. \`fallback(100dvh, 100vh)\`).
    *
    * This is useful when you want to use a value that is not defined in the config or want to opt-out of the defaults.
    *
@@ -4603,7 +4816,13 @@ function generatePropTypes(ctx) {
    * @see https://bamboocss.com/docs/concepts/writing-styles#stricttokens
    * @see https://bamboocss.com/docs/concepts/writing-styles#strictpropertyvalues
    */
-  export type WithEscapeHatch<T> = T | \`[\${string}]\` | WithColorOpacityModifier<T> | WithImportant<T>
+  export type WithEscapeHatch<T> =
+    | T
+    | \`[\${string}]\`
+    | FallbackValue
+    | WithImportant<FallbackValue>
+    | WithColorOpacityModifier<T>
+    | WithImportant<T>
 
   /**
    * Will restrict the value of properties that have predefined values to those values only.
@@ -5211,7 +5430,7 @@ function setupSva(ctx) {
 	};
 }
 function setupCx(ctx) {
-	const code = generateCx();
+	const code = generateCx(ctx);
 	return {
 		id: "cx",
 		dir: ctx.paths.css,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bamboocss/generator",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "description": "The css generator for css bamboo",
   "homepage": "https://bamboocss.com",
   "license": "MIT",
@@ -38,12 +38,12 @@
     "pluralize": "8.0.0",
     "postcss": "8.5.14",
     "ts-pattern": "5.9.0",
-    "@bamboocss/is-valid-prop": "^1.13.1",
-    "@bamboocss/core": "1.13.1",
-    "@bamboocss/logger": "1.13.1",
-    "@bamboocss/shared": "1.13.1",
-    "@bamboocss/token-dictionary": "1.13.1",
-    "@bamboocss/types": "1.13.1"
+    "@bamboocss/core": "1.14.0",
+    "@bamboocss/is-valid-prop": "^1.14.0",
+    "@bamboocss/logger": "1.14.0",
+    "@bamboocss/shared": "1.14.0",
+    "@bamboocss/token-dictionary": "1.14.0",
+    "@bamboocss/types": "1.14.0"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"