@styleframe/core 3.1.0 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @styleframe/core
 
+## 3.3.0
+
+### Minor Changes
+
+- [#164](https://github.com/styleframe-dev/styleframe/pull/164) [`efd99f7`](https://github.com/styleframe-dev/styleframe/commit/efd99f70a30f9a42c6e1793ed777b1565fb47a82) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add className support for compound variants in recipes
+  - Add optional `className` field to compound variants, appended to output when conditions match
+  - Make `css` optional on compound variants, allowing className-only compound variants
+
+### Patch Changes
+
+- [#175](https://github.com/styleframe-dev/styleframe/pull/175) [`b506ea5`](https://github.com/styleframe-dev/styleframe/commit/b506ea5c3c36fa24fea19a69ee3fef7035397dda) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add Skeleton recipe with pulse animation and supporting utilities
+  - Add `useSkeletonRecipe` with size (`xs`, `sm`, `md`, `lg`, `xl`) and rounded (`true`, `false`) variants, pulse animation, and dark mode support
+  - Add granular animation utilities: `useAnimationNameUtility`, `useAnimationDurationUtility`, `useAnimationTimingFunctionUtility`, `useAnimationIterationCountUtility`
+  - Switch `useWidthUtility` and `useHeightUtility` to `createUseSpacingUtility` for `@N` multiplier support
+  - Add compound keyframe selector support in core engine (e.g. `"0%, 100%"`)
+  - Add Skeleton storybook component, grid previews, and stories
+  - Add Skeleton documentation page
+
+## 3.2.0
+
+### Minor Changes
+
+- [#155](https://github.com/styleframe-dev/styleframe/pull/155) [`cc4f170`](https://github.com/styleframe-dev/styleframe/commit/cc4f170c56ad2e246b94ab4d64b7f6c3097c7223) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Refactor recipes, improve modifier at-rule support, and forward variables through modifier factories
+  - Refactor recipes and utilities with improved color theming composables
+  - Add at-rule support for modifiers (e.g. media preference modifiers)
+  - Forward variables and children through all modifier factory functions
+  - Restructure docs for components, utilities, and modifiers into composable subdirectories
+  - Add Button composable recipe documentation
+  - Update plugin scanner for improved recipe handling
+
 ## 3.1.0
 
 ### Minor Changes

package/dist/styleframe.d.ts

@@ -36,8 +36,6 @@ export declare function classNameToCssSelector(className: string): string;
  */
 declare type CloneFunction<T = any> = (obj: T) => T;
 
-export declare function combineKeys(groups: string[][]): string[][];
-
 declare type ConstructorHandler<T = any> = (obj: T, fn: CloneFunction) => T;
 
 declare type ConstructorHandlerTuple<T = any> = [
@@ -57,7 +55,7 @@ export declare type ContainerChild = Variable | Selector | AtRule | Utility;
 
 export declare type ContainerInput = Pick<Container, "declarations" | "variables" | "children">;
 
-export declare function createAtRuleFunction(parent: Container, root: Root): (identifier: string, rule: string, declarationsOrCallback?: DeclarationsBlock | DeclarationsCallback) => AtRule;
+export declare function createAtRuleFunction(parent: Container, root: Root): (identifier: string, rule: string, declarationsOrCallback?: DeclarationsBlock | ContainerInput | DeclarationsCallback) => AtRule;
 
 export declare function createCssFunction(_parent: Container, _root: Root): (strings: TemplateStringsArray, ...interpolations: (TokenValue | Variable | AtRule)[]) => CSS_2;
 
@@ -65,7 +63,7 @@ export declare function createDeclarationsCallbackContext(parent: Container, roo
 
 export declare function createKeyframesFunction(parent: Container, root: Root): (name: string, declarations: Record<string, DeclarationsBlock>) => AtRule;
 
-export declare function createMediaFunction(parent: Container, root: Root): (query: string, declarationsOrCallback?: DeclarationsBlock | DeclarationsCallback) => AtRule;
+export declare function createMediaFunction(parent: Container, root: Root): (query: string, declarationsOrCallback?: DeclarationsBlock | ContainerInput | DeclarationsCallback) => AtRule;
 
 export declare function createModifierFunction(_parent: Container, root: Root): <Key extends string>(key: Key | Key[], factory: ModifierFactory["factory"]) => ModifierFactory;
 
@@ -260,7 +258,7 @@ declare type CSSValueWithReference<T> = T extends string | number | undefined ?
 export declare type DeclarationsBlock = {
     [K in keyof Properties]: CSSValueWithReference<Properties[K]>;
 } & {
-    [key: string]: CSSValueWithReference<Properties[keyof Properties]> | DeclarationsBlock;
+    [key: string]: CSSValueWithReference<Properties[keyof Properties]> | DeclarationsBlock | ContainerInput;
 };
 
 export declare type DeclarationsCallback<Context extends DeclarationsCallbackContext = DeclarationsCallbackContext> = (context: Context) => DeclarationsBlock | void;
@@ -435,7 +433,8 @@ export declare type Recipe<Name extends string = string, Variants extends Varian
         match: {
             [K in keyof Variants]?: keyof Variants[K] & string;
         };
-        css: VariantDeclarationsBlock;
+        css?: VariantDeclarationsBlock;
+        className?: string;
     }>;
     _runtime?: RecipeRuntime<Variants>;
     _exportName?: string;
@@ -456,6 +455,7 @@ export declare type RecipeRuntime<Variants extends VariantsBase = VariantsBase>
             [K in keyof Variants]?: keyof Variants[K] & string;
         };
         css?: RuntimeVariantDeclarationsBlock;
+        className?: string;
     }>;
 };
 
@@ -583,7 +583,7 @@ export declare type UtilityCallbackFn = DeclarationsCallback<DeclarationsCallbac
     value: TokenValue;
 }>;
 
-export declare type UtilityCreatorFn = (values: Record<string, TokenValue> | TokenValue[], modifiers?: ModifierFactory[]) => void;
+export declare type UtilityCreatorFn = (values: Record<string, TokenValue> | TokenValue[], modifiers?: (ModifierFactory | ModifierFactory[])[]) => void;
 
 export declare type UtilityFactory<Name extends string = string> = {
     type: "utility";

package/dist/styleframe.js

@@ -1,77 +1,77 @@
-function M(e) {
+function x(e) {
   return typeof e == "object" && e !== null;
 }
-function b(e, t) {
-  return M(e) && "type" in e && e.type === t;
+function g(e, t) {
+  return x(e) && "type" in e && e.type === t;
 }
-function G(e) {
-  return b(e, "variable");
+function H(e) {
+  return g(e, "variable");
 }
-function j(e) {
-  return b(e, "reference");
+function A(e) {
+  return g(e, "reference");
 }
-function Fe(e) {
-  return b(e, "selector");
+function _e(e) {
+  return g(e, "selector");
 }
 function te(e) {
-  return b(e, "at-rule");
+  return g(e, "at-rule");
 }
-function _e(e) {
-  return b(e, "utility");
+function Ne(e) {
+  return g(e, "utility");
 }
 function ne(e) {
-  return b(e, "modifier");
+  return g(e, "modifier");
 }
-function N(e) {
-  return b(e, "css");
+function T(e) {
+  return g(e, "css");
 }
-function Se(e) {
-  return b(e, "theme");
+function Oe(e) {
+  return g(e, "theme");
 }
 function $(e) {
-  return b(e, "root");
+  return g(e, "root");
 }
-function Te(e) {
-  return b(e, "recipe");
+function Se(e) {
+  return g(e, "recipe");
 }
 function re(e) {
   return typeof e == "string" || typeof e == "number" || typeof e == "boolean" || e === null;
 }
 function B(e) {
-  return re(e) || j(e) || N(e) || Array.isArray(e) && e.every(B);
+  return re(e) || A(e) || T(e) || Array.isArray(e) && e.every(B);
+}
+function Te(e) {
+  return x(e) && "id" in e && "children" in e && "declarations" in e && "variables" in e;
 }
-function Ce(e) {
-  return M(e) && "id" in e && "children" in e && "declarations" in e && "variables" in e;
+function L(e) {
+  return x(e) && "children" in e && "declarations" in e && "variables" in e;
 }
 function ie(e) {
-  return M(e) && "children" in e && "declarations" in e && "variables" in e;
-}
-function se(e) {
   return typeof e == "string" && e.startsWith("@");
 }
-function Ne(e) {
-  return M(e) && "id" in e && "root" in e && "variable" in e && "selector" in e && "recipe" in e && typeof e.id == "string" && $(e.root);
+function Be(e) {
+  return x(e) && "id" in e && "root" in e && "variable" in e && "selector" in e && "recipe" in e && typeof e.id == "string" && $(e.root);
 }
-function oe(e) {
+function se(e) {
   let t = 5381;
   for (let r = 0; r < e.length; r++)
     t = (t << 5) + t + e.charCodeAt(r) & 4294967295;
   return (t >>> 0).toString(16).padStart(7, "0").slice(0, 7);
 }
-function q(e) {
+function G(e) {
   const t = typeof e == "function" ? { replacer: e } : e ?? {}, { replacer: r = (o) => o, namespace: n } = t, s = Array.isArray(n) ? n : n ? [n] : [];
   return (o) => {
     let i = o, f;
     if (typeof i == "string" && i[0] === "@") {
       const c = i.slice(1), a = s.find(
-        (d) => c === d || c.startsWith(`${d}.`)
+        (y) => c === y || c.startsWith(`${y}.`)
       );
       let l, u;
       a ? (l = c, u = c.startsWith(`${a}.`) ? c.slice(a.length + 1) : c) : s.length > 0 ? (l = `${s[0]}.${c}`, u = c) : (l = c, u = c), f = r(u), i = {
         type: "reference",
         name: l
       };
-    } else if (j(i)) {
+    } else if (A(i)) {
       let c = i.name;
       for (const a of s)
         if (c.startsWith(`${a}.`)) {
@@ -81,14 +81,14 @@ function q(e) {
       f = r(c);
     } else {
       const c = String(o).trim();
-      /\s/.test(c) ? f = oe(c) : f = `[${c}]`;
+      /\s/.test(c) ? f = se(c) : f = `[${c}]`;
     }
     return {
       [f]: i
     };
   };
 }
-const Be = ({
+const Pe = ({
   name: e,
   value: t,
   modifiers: r
@@ -104,7 +104,7 @@ function z(e) {
     t.push(e.slice(r, n.index)), t.push({ type: "reference", name: n[1] }), r = _.lastIndex;
   return t.push(e.slice(r)), t;
 }
-function ce(e, t, r) {
+function oe(e, t, r) {
   let n = t;
   for (; n; ) {
     if (n.variables.some((s) => s.name === e))
@@ -116,28 +116,28 @@ function ce(e, t, r) {
   }
   return !1;
 }
-function fe(e, t, r) {
-  if (!ce(e, t, r))
+function ce(e, t, r) {
+  if (!oe(e, t, r))
     throw new Error(
       `[styleframe] Variable "${e}" is not defined. Check that the variable exists before referencing it with "@${e}".`
     );
 }
-function I(e, t) {
+function C(e, t) {
   return function(n) {
     if (typeof n != "string" || !n.includes("@"))
       return n;
-    if (se(n) && /^@[\w.-]+$/.test(n)) {
+    if (ie(n) && /^@[\w.-]+$/.test(n)) {
       const i = n.slice(1);
-      return fe(i, e, t), { type: "reference", name: i };
+      return ce(i, e, t), { type: "reference", name: i };
     }
     const s = z(n);
-    return s.some((i) => j(i)) ? { type: "css", value: s } : n;
+    return s.some((i) => A(i)) ? { type: "css", value: s } : n;
   };
 }
-function X(e, t) {
+function q(e, t) {
   return function(n, s) {
-    const o = I(e, t), i = s != null ? o(s) : s;
-    if (G(n))
+    const o = C(e, t), i = s != null ? o(s) : s;
+    if (H(n))
       return {
         type: "reference",
         name: n.name,
@@ -154,28 +154,28 @@ function X(e, t) {
     };
   };
 }
-function ae(e, t) {
-  const r = X(e, t);
+function fe(e, t) {
+  const r = q(e, t);
   return function(s, ...o) {
     return {
       type: "css",
       value: s.reduce((f, c, a) => {
         if (f.push(...z(c)), a < o.length) {
           const l = o[a];
-          G(l) ? f.push(r(l)) : te(l) ? f.push(l.rule) : f.push(l);
+          H(l) ? f.push(r(l)) : te(l) ? f.push(l.rule) : f.push(l);
         }
         return f;
       }, [])
     };
   };
 }
-function Pe(e) {
+function Ue(e) {
   return e.charAt(0).toUpperCase() + e.slice(1);
 }
-function Ke(e) {
+function De(e) {
   return `.${e.replace(/[[\].#()%,:/]/g, "\\$&")}`;
 }
-function v(e) {
+function j(e) {
   if (e instanceof Buffer)
     return Buffer.from(e);
   const t = e.constructor;
@@ -185,9 +185,9 @@ function v(e) {
     e.byteLength / e.BYTES_PER_ELEMENT || 1
   );
 }
-function ue(e) {
+function ae(e) {
   if (e = e || {}, e.circular)
-    return le(e);
+    return ue(e);
   const t = /* @__PURE__ */ new Map();
   if (t.set(Date, (i) => new Date(i)), t.set(
     Map,
@@ -203,8 +203,8 @@ function ue(e) {
   function n(i, f) {
     const c = Object.keys(i), a = Array.from({ length: c.length });
     for (let l = 0; l < c.length; l++) {
-      const u = c[l], d = i[u];
-      typeof d != "object" || d === null ? a[u] = d : d.constructor !== Object && (r = t.get(d.constructor)) ? a[u] = r(d, f) : ArrayBuffer.isView(d) ? a[u] = v(d) : a[u] = f(d);
+      const u = c[l], y = i[u];
+      typeof y != "object" || y === null ? a[u] = y : y.constructor !== Object && (r = t.get(y.constructor)) ? a[u] = r(y, f) : ArrayBuffer.isView(y) ? a[u] = j(y) : a[u] = f(y);
     }
     return a;
   }
@@ -217,7 +217,7 @@ function ue(e) {
     for (const c in i) {
       if (Object.hasOwnProperty.call(i, c) === !1) continue;
       const a = i[c];
-      typeof a != "object" || a === null ? f[c] = a : a.constructor !== Object && (r = t.get(a.constructor)) ? f[c] = r(a, s) : ArrayBuffer.isView(a) ? f[c] = v(a) : f[c] = s(a);
+      typeof a != "object" || a === null ? f[c] = a : a.constructor !== Object && (r = t.get(a.constructor)) ? f[c] = r(a, s) : ArrayBuffer.isView(a) ? f[c] = j(a) : f[c] = s(a);
     }
     return f;
   }
@@ -229,12 +229,12 @@ function ue(e) {
     const f = {};
     for (const c in i) {
       const a = i[c];
-      typeof a != "object" || a === null ? f[c] = a : a.constructor !== Object && (r = t.get(a.constructor)) ? f[c] = r(a, o) : ArrayBuffer.isView(a) ? f[c] = v(a) : f[c] = o(a);
+      typeof a != "object" || a === null ? f[c] = a : a.constructor !== Object && (r = t.get(a.constructor)) ? f[c] = r(a, o) : ArrayBuffer.isView(a) ? f[c] = j(a) : f[c] = o(a);
     }
     return f;
   }
 }
-function le(e) {
+function ue(e) {
   const t = [], r = [], n = /* @__PURE__ */ new Map();
   if (n.set(Date, (c) => new Date(c)), n.set(
     Map,
@@ -249,17 +249,17 @@ function le(e) {
   return e.proto ? f : i;
   function o(c, a) {
     const l = Object.keys(c), u = Array.from({ length: l.length });
-    for (let d = 0; d < l.length; d++) {
-      const y = l[d], m = c[y];
+    for (let y = 0; y < l.length; y++) {
+      const d = l[y], m = c[d];
       if (typeof m != "object" || m === null)
-        u[y] = m;
+        u[d] = m;
       else if (m.constructor !== Object && (s = n.get(m.constructor)))
-        u[y] = s(m, a);
+        u[d] = s(m, a);
       else if (ArrayBuffer.isView(m))
-        u[y] = v(m);
+        u[d] = j(m);
       else {
-        const p = t.indexOf(m);
-        p !== -1 ? u[y] = r[p] : u[y] = a(m);
+        const h = t.indexOf(m);
+        h !== -1 ? u[d] = r[h] : u[d] = a(m);
       }
     }
     return u;
@@ -279,10 +279,10 @@ function le(e) {
       else if (u.constructor !== Object && (s = n.get(u.constructor)))
         a[l] = s(u, i);
       else if (ArrayBuffer.isView(u))
-        a[l] = v(u);
+        a[l] = j(u);
       else {
-        const d = t.indexOf(u);
-        d !== -1 ? a[l] = r[d] : a[l] = i(u);
+        const y = t.indexOf(u);
+        y !== -1 ? a[l] = r[y] : a[l] = i(u);
       }
     }
     return t.pop(), r.pop(), a;
@@ -301,17 +301,17 @@ function le(e) {
       else if (u.constructor !== Object && (s = n.get(u.constructor)))
         a[l] = s(u, f);
       else if (ArrayBuffer.isView(u))
-        a[l] = v(u);
+        a[l] = j(u);
       else {
-        const d = t.indexOf(u);
-        d !== -1 ? a[l] = r[d] : a[l] = f(u);
+        const y = t.indexOf(u);
+        y !== -1 ? a[l] = r[y] : a[l] = f(u);
       }
     }
     return t.pop(), r.pop(), a;
   }
 }
-const R = ue();
-function w(e, t = 8) {
+const M = ae();
+function b(e, t = 8) {
   const r = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
   let n = "";
   for (let s = 0; s < t; s++) {
@@ -320,7 +320,7 @@ function w(e, t = 8) {
   }
   return e ? `${e}${n}` : n;
 }
-function Ue(e, t) {
+function Ce(e, t) {
   const r = e.variables.find((n) => n.name === t);
   if (!r)
     throw new Error(`Variable "${t}" not found`);
@@ -332,7 +332,7 @@ function Ie(e, t) {
     throw new Error(`Utility "${t}" not found`);
   return r;
 }
-function de(e, t) {
+function le(e, t) {
   const r = e.modifiers.find(
     (n) => n.key.includes(t)
   );
@@ -340,25 +340,25 @@ function de(e, t) {
     throw new Error(`Modifier "${t}" not found`);
   return r;
 }
-function S(e, t) {
+function N(e, t) {
   if (e === t) return !0;
   if (typeof e != typeof t) return !1;
   if (e === null || t === null) return e === t;
   if (typeof e != "object" || typeof t != "object") return !1;
   if (Array.isArray(e) && Array.isArray(t))
-    return e.length !== t.length ? !1 : e.every((r, n) => S(r, t[n]));
+    return e.length !== t.length ? !1 : e.every((r, n) => N(r, t[n]));
   if ("type" in e && "type" in t) {
     if (e.type !== t.type) return !1;
-    if (j(e) && j(t))
-      return e.name === t.name && S(e.fallback, t.fallback);
-    if (N(e) && N(t))
-      return S(e.value, t.value);
+    if (A(e) && A(t))
+      return e.name === t.name && N(e.fallback, t.fallback);
+    if (T(e) && T(t))
+      return N(e.value, t.value);
   }
   return !1;
 }
-const Y = "__licenseRequired";
+const X = "__licenseRequired";
 function ye(e) {
-  P(e) || Object.defineProperty(e, Y, {
+  P(e) || Object.defineProperty(e, X, {
     value: !0,
     writable: !1,
     configurable: !1,
@@ -366,9 +366,9 @@ function ye(e) {
   });
 }
 function P(e) {
-  return Object.prototype.hasOwnProperty.call(e, Y);
+  return Object.prototype.hasOwnProperty.call(e, X);
 }
-function me(e, t) {
+function de(e, t) {
   const r = [...e];
   for (const n of t) {
     const s = r.find(
@@ -378,7 +378,7 @@ function me(e, t) {
   }
   return r;
 }
-function pe(e, t) {
+function me(e, t) {
   const r = [...e];
   for (const n of t) {
     const s = r.find(
@@ -386,14 +386,14 @@ function pe(e, t) {
     );
     s ? Object.assign(
       s,
-      Z(s, n)
+      Y(s, n)
     ) : r.push(n);
   }
   return r;
 }
-function Z(e, t) {
+function Y(e, t) {
   return Object.keys(e).reduce(
-    (r, n) => (n === "variables" ? r.variables = me(e.variables, t.variables) : n === "declarations" ? r.declarations = { ...e.declarations, ...t.declarations } : n === "themes" && $(r) && $(e) && $(t) ? r.themes = pe(e.themes, t.themes) : Array.isArray(e[n]) && (r[n] = e[n].concat(
+    (r, n) => (n === "variables" ? r.variables = de(e.variables, t.variables) : n === "declarations" ? r.declarations = { ...e.declarations, ...t.declarations } : n === "themes" && $(r) && $(e) && $(t) ? r.themes = me(e.themes, t.themes) : Array.isArray(e[n]) && (r[n] = e[n].concat(
       t[n]
     )), r),
     {
@@ -402,29 +402,29 @@ function Z(e, t) {
     }
   );
 }
-function K(e, t) {
+function U(e, t) {
   for (const r of e)
-    "id" in r && typeof r.id == "string" && (t._registry.set(r.id, r), "children" in r && K(r.children, t));
+    "id" in r && typeof r.id == "string" && (t._registry.set(r.id, r), "children" in r && U(r.children, t));
 }
-function he(e) {
-  e._registry = /* @__PURE__ */ new Map(), e._registry.set(e.id, e), K(e.children, e);
+function pe(e) {
+  e._registry = /* @__PURE__ */ new Map(), e._registry.set(e.id, e), U(e.children, e);
   for (const t of e.themes)
-    e._registry.set(t.id, t), K(t.children, e);
+    e._registry.set(t.id, t), U(t.children, e);
 }
-function De(e, ...t) {
+function Ke(e, ...t) {
   return t.reduce((r, n) => {
     const s = {
       ...r,
-      root: Z(r.root, n.root)
+      root: Y(r.root, n.root)
     };
-    return he(s.root), (P(r) || P(n)) && ye(s), s;
+    return pe(s.root), (P(r) || P(n)) && ye(s), s;
   }, e);
 }
-function D(e, t) {
+function I(e, t) {
   return function(n, s, o) {
     const i = {
       type: "at-rule",
-      id: w("ar-"),
+      id: b("ar-"),
       parentId: e.id,
       identifier: n,
       rule: s,
@@ -433,8 +433,8 @@ function D(e, t) {
       children: []
     };
     t._registry.set(i.id, i);
-    const f = V(i, t);
-    return typeof o == "function" ? i.declarations = o(f) ?? {} : o && (i.declarations = o), x(
+    const f = v(i, t);
+    return typeof o == "function" ? i.declarations = o(f) ?? {} : L(o) ? (i.variables = o.variables, i.declarations = o.declarations, i.children = o.children) : o && (i.declarations = o), E(
       i.declarations,
       f,
       i,
@@ -442,23 +442,23 @@ function D(e, t) {
     ), e.children.push(i), i;
   };
 }
-function ge(e, t) {
-  const r = D(e, t);
+function he(e, t) {
+  const r = I(e, t);
   return function(s, o) {
     return r("media", s, o);
   };
 }
-function be(e, t) {
-  const r = D(e, t);
+function ge(e, t) {
+  const r = I(e, t);
   return function(s, o) {
     return r("keyframes", s, o);
   };
 }
-function Ae(e, t) {
+function be(e, t) {
   return function(n, s) {
     const o = {
       type: "selector",
-      id: w("sel-"),
+      id: b("sel-"),
       parentId: e.id,
       query: n,
       declarations: {},
@@ -466,8 +466,8 @@ function Ae(e, t) {
       children: []
     };
     t._registry.set(o.id, o);
-    const i = V(o, t);
-    return typeof s == "function" ? o.declarations = s(i) ?? {} : ie(s) ? (o.variables = s.variables, o.declarations = s.declarations, o.children = s.children) : o.declarations = s, x(
+    const i = v(o, t);
+    return typeof s == "function" ? o.declarations = s(i) ?? {} : L(s) ? (o.variables = s.variables, o.declarations = s.declarations, o.children = s.children) : o.declarations = s, E(
       o.declarations,
       i,
       o,
@@ -475,11 +475,11 @@ function Ae(e, t) {
     ), e.children.push(o), o;
   };
 }
-function we(e, t) {
+function Ae(e, t) {
   return function(n, s, o = {
     default: !1
   }) {
-    const i = typeof n == "string" ? n : n.name, c = I(e, t)(s), a = e.variables.find(
+    const i = typeof n == "string" ? n : n.name, c = C(e, t)(s), a = e.variables.find(
       (u) => u.name === i
     );
     if (o.default && a)
@@ -488,7 +488,7 @@ function we(e, t) {
       return a.value = c, a;
     const l = {
       type: "variable",
-      id: w("var-"),
+      id: b("var-"),
       parentId: e.id,
       name: i,
       value: c
@@ -496,8 +496,8 @@ function we(e, t) {
     return e.variables.push(l), l;
   };
 }
-function V(e, t) {
-  const r = we(e, t), n = Ae(e, t), s = D(e, t), o = be(t, t), i = ge(e, t), f = X(t, t), c = ae(t, t);
+function v(e, t) {
+  const r = Ae(e, t), n = be(e, t), s = I(e, t), o = ge(t, t), i = he(e, t), f = q(t, t), c = fe(t, t);
   return {
     variable: r,
     selector: n,
@@ -508,7 +508,7 @@ function V(e, t) {
     css: c
   };
 }
-function x(e, t, r, n) {
+function E(e, t, r, n) {
   for (const o in e)
     if (o.startsWith("@")) {
       const i = e[o];
@@ -516,11 +516,11 @@ function x(e, t, r, n) {
         const f = o.replace(/^@(\w+).*/, "$1"), c = o.replace(`@${f}`, "").trim();
         t.atRule(f, c, i), delete e[o];
       }
-    } else if (/^[.&:]/.test(o) || /^\d+%$/.test(o) || o === "from" || o === "to") {
+    } else if (/^[.&:]/.test(o) || /^(\d+%|from|to)(\s*,\s*(\d+%|from|to))*$/.test(o)) {
       const i = e[o];
       typeof i == "object" && (t.selector(o, i), delete e[o]);
     }
-  const s = I(r, n);
+  const s = C(r, n);
   for (const o in e) {
     const i = e[o];
     if (B(i)) {
@@ -530,55 +530,41 @@ function x(e, t, r, n) {
   }
   return e;
 }
-function je(e) {
-  const t = [];
-  function r(n, s) {
-    s.length > 0 && t.push([...s].sort());
-    for (let o = n; o < e.length; o++) {
-      const i = e[o];
-      if (i)
-        if (i.length === 1 && i[0])
-          r(o + 1, [...s, i[0]]);
-        else
-          for (const f of i)
-            r(o + 1, [...s, f]);
-    }
-  }
-  return r(0, []), t.sort((n, s) => n.length !== s.length ? n.length - s.length : n.join(",").localeCompare(s.join(",")));
-}
 function ve(e, t, r) {
   const n = {
     ...e,
-    id: w("ut-"),
+    id: b("ut-"),
     parentId: e.parentId,
     declarations: { ...e.declarations },
     variables: [...e.variables],
     children: [...e.children],
     modifiers: [...r.keys()]
   };
-  t._registry.set(n.id, n);
-  const s = V(n, t);
-  if (r.size > 0) {
-    const o = R(e.declarations);
-    let i = !1;
-    for (const f of r.values()) {
-      const c = f.factory({
-        ...s,
-        declarations: R(o),
-        variables: R(n.variables),
-        children: R(n.children)
+  if (t._registry.set(n.id, n), r.size > 0) {
+    const s = [...r.values()];
+    let o = M(e.declarations);
+    n.declarations = {}, n.variables = [], n.children = [];
+    for (let f = s.length - 1; f >= 0; f--) {
+      const c = v(n, t), a = s[f]?.factory({
+        ...c,
+        declarations: M(o),
+        variables: M(e.variables),
+        children: M(e.children)
       });
-      c && (i || (n.declarations = {}, i = !0), Object.assign(n.declarations, c), x(
-        n.declarations,
-        s,
-        n,
-        t
-      ));
+      a && (o = a);
     }
+    n.declarations = o;
+    const i = v(n, t);
+    E(
+      n.declarations,
+      i,
+      n,
+      t
+    );
   }
   return n;
 }
-function Ve(e, t) {
+function we(e, t) {
   return function(n, s) {
     const o = {
       type: "modifier",
@@ -588,10 +574,10 @@ function Ve(e, t) {
     return t.modifiers.push(o), o;
   };
 }
-function ke() {
+function je() {
   const e = {
     type: "root",
-    id: w("rt-"),
+    id: b("rt-"),
     declarations: {},
     utilities: [],
     modifiers: [],
@@ -603,8 +589,8 @@ function ke() {
   };
   return e._registry.set(e.id, e), e;
 }
-function Re(e, t) {
-  const r = q({ namespace: e });
+function Ve(e, t) {
+  const r = G({ namespace: e });
   return (n) => {
     if (typeof n == "string" && n[0] === "@") {
       const s = n.slice(1), o = e.find(
@@ -619,7 +605,7 @@ function Re(e, t) {
               name: s
             }
           };
-      } else
+      } else {
         for (const i of e) {
           const f = `${i}.${s}`;
           if (t.variables.some((c) => c.name === f))
@@ -630,12 +616,34 @@ function Re(e, t) {
               }
             };
         }
+        if (t.variables.some((i) => i.name === s))
+          return {
+            [s]: {
+              type: "reference",
+              name: s
+            }
+          };
+      }
       return r(n);
     }
     return r(n);
   };
 }
-function $e(e, t) {
+function Re(e) {
+  let t = [/* @__PURE__ */ new Map()];
+  for (const r of e) {
+    if (!ne(r)) continue;
+    const n = [];
+    for (const s of r.key)
+      for (const o of t) {
+        const i = new Map(o);
+        i.set(s, r), n.push(i);
+      }
+    t = n;
+  }
+  return t.filter((r) => r.size > 0);
+}
+function ke(e, t) {
   return function(n, s, o = {}) {
     const i = t.utilities.find((c) => c.name === n);
     if (i)
@@ -645,7 +653,7 @@ function $e(e, t) {
       name: n,
       factory: s,
       values: [],
-      autogenerate: o.autogenerate ?? (Array.isArray(o.namespace) ? Re(o.namespace, t) : q(
+      autogenerate: o.autogenerate ?? (Array.isArray(o.namespace) ? Ve(o.namespace, t) : G(
         o.namespace ? { namespace: o.namespace } : void 0
       )),
       namespace: o.namespace,
@@ -654,42 +662,45 @@ function $e(e, t) {
         if (Array.isArray(c)) {
           l = {};
           for (const u of c) {
-            const d = f.autogenerate(u);
+            const y = f.autogenerate(u);
             l = {
               ...l,
-              ...d
+              ...y
             };
           }
         }
-        for (const [u, d] of Object.entries(l)) {
-          let y = d;
-          if (typeof d == "string" && d[0] === "@") {
-            const h = d.slice(1);
-            !Array.isArray(l) && h in l && (y = l[h]);
+        for (const [u, y] of Object.entries(l)) {
+          let d = y;
+          if (typeof y == "string" && y[0] === "@") {
+            const p = y.slice(1);
+            !Array.isArray(l) && p in l && (d = l[p]);
           }
-          if (f.namespace && j(d))
-            if (t.variables.some((h) => h.name === d.name))
-              y = d;
+          if (f.namespace && A(y))
+            if (t.variables.some((p) => p.name === y.name))
+              d = y;
             else {
-              const h = Array.isArray(f.namespace) ? f.namespace : [f.namespace];
-              let E = !1;
-              for (const O of h) {
-                const g = `${O}.${u}`;
-                if (g !== d.name && t.variables.some((A) => A.name === g)) {
-                  y = {
+              const p = Array.isArray(f.namespace) ? f.namespace : [f.namespace];
+              let k = !1;
+              for (const V of p) {
+                const w = `${V}.${u}`;
+                if (w !== y.name && t.variables.some((R) => R.name === w)) {
+                  d = {
                     type: "reference",
-                    name: g
-                  }, E = !0;
+                    name: w
+                  }, k = !0;
                   break;
                 }
               }
-              E || (y = u);
+              k || (t.variables.some((V) => V.name === u) ? d = {
+                type: "reference",
+                name: u
+              } : d = u);
             }
           const m = f.values.find(
-            (h) => h.key === u && h.modifiers.length === 0
-          ), p = {
+            (p) => p.key === u && p.modifiers.length === 0
+          ), h = {
             type: "utility",
-            id: w("ut-"),
+            id: b("ut-"),
             parentId: e.id,
             name: n,
             value: u,
@@ -698,42 +709,41 @@ function $e(e, t) {
             children: [],
             modifiers: []
           };
-          t._registry.set(p.id, p);
-          const W = V(
-            p,
+          t._registry.set(h.id, h);
+          const K = v(
+            h,
             t
           );
-          if (p.declarations = s({
-            ...W,
-            value: y
-          }) ?? {}, x(
-            p.declarations,
-            W,
-            p,
+          if (h.declarations = s({
+            ...K,
+            value: d
+          }) ?? {}, E(
+            h.declarations,
+            K,
+            h,
             t
           ), m || (f.values.push({
             key: u,
-            value: y,
+            value: d,
             modifiers: []
-          }), e.children.push(p)), a && a.length > 0) {
-            const h = a.map((g) => g.key), O = je(h).filter((g) => !f.values.find(
-              (A) => A.key === u && A.modifiers.length === g.length && A.modifiers.every((k) => g.includes(k))
-            )).reduce((g, A) => {
-              const k = /* @__PURE__ */ new Map();
-              for (const H of A) {
-                const F = a.find(
-                  (ee) => ee.key.includes(H)
-                );
-                F && ne(F) && k.set(H, F);
+          }), e.children.push(h)), a && a.length > 0)
+            for (const p of a) {
+              const k = Array.isArray(p) ? p : [p], V = Re(k);
+              for (const w of V) {
+                const R = [...w.keys()];
+                f.values.find(
+                  (F) => F.key === u && F.modifiers.length === R.length && F.modifiers.every(
+                    (Q, ee) => Q === R[ee]
+                  )
+                ) || (f.values.push({
+                  key: u,
+                  value: d,
+                  modifiers: R
+                }), e.children.push(
+                  ve(h, t, w)
+                ));
               }
-              return f.values.push({
-                key: u,
-                value: y,
-                modifiers: A
-              }), g.push(ve(p, t, k)), g;
-            }, []);
-            e.children.push(...O);
-          }
+            }
         }
       }
     };
@@ -744,7 +754,7 @@ function Me(e, t) {
   return function(n, s) {
     const o = t.themes.find((c) => c.name === n), i = o ?? {
       type: "theme",
-      id: w("th-"),
+      id: b("th-"),
       parentId: t.id,
       name: n,
       declarations: {},
@@ -752,62 +762,62 @@ function Me(e, t) {
       children: []
     };
     o || (t._registry.set(i.id, i), t.themes.push(i));
-    const f = V(i, t);
+    const f = v(i, t);
     return s && s(f), i;
   };
 }
-function xe(e, t) {
+function $e(e, t) {
   return function(n) {
     const s = {
       type: "recipe",
       ...n
     };
-    return s._runtime = Ee(s, t), Oe(s, t), t.recipes.push(s), s;
+    return s._runtime = xe(s, t), Ee(s, t), t.recipes.push(s), s;
   };
 }
-function L(e, t) {
+function W(e, t) {
   const r = e.autogenerate(t);
   return Object.keys(r)[0] ?? "default";
 }
-function T(e, t) {
+function O(e, t) {
   const r = {};
   for (const [n, s] of Object.entries(e))
-    if (J(s)) {
+    if (Z(s)) {
       const o = {};
       for (const [i, f] of Object.entries(s)) {
-        const c = U(t, i);
+        const c = D(t, i);
         if (!c)
           throw new Error(
             `[styleframe] Utility "${i}" not found in registry. Make sure the utility is registered before using it in a recipe.`
           );
-        o[i] = L(
+        o[i] = W(
           c,
           f
         );
       }
-      r[Q(n)] = o;
+      r[J(n)] = o;
     } else if (typeof s == "boolean")
       r[n] = s;
     else {
-      const o = U(t, n);
+      const o = D(t, n);
       if (!o)
         throw new Error(
           `[styleframe] Utility "${n}" not found in registry. Make sure the utility is registered before using it in a recipe.`
         );
-      r[n] = L(o, s);
+      r[n] = W(o, s);
     }
   return r;
 }
-function Ee(e, t) {
+function xe(e, t) {
   const r = {};
-  if (e.base && (r.base = T(e.base, t)), e.variants) {
+  if (e.base && (r.base = O(e.base, t)), e.variants) {
     const n = {};
     for (const [s, o] of Object.entries(e.variants)) {
       const i = {};
       for (const [f, c] of Object.entries(
         o
       ))
-        c == null ? i[f] = null : i[f] = T(
+        c == null ? i[f] = null : i[f] = O(
           c,
           t
         );
@@ -817,50 +827,51 @@ function Ee(e, t) {
   }
   return e.defaultVariants && (r.defaultVariants = { ...e.defaultVariants }), e.compoundVariants && (r.compoundVariants = e.compoundVariants.map((n) => ({
     match: { ...n.match },
-    css: T(n.css, t)
+    ...n.css ? { css: O(n.css, t) } : {},
+    ...n.className ? { className: n.className } : {}
   }))), r;
 }
-function J(e) {
-  return !j(e) && typeof e == "object" && e !== null;
+function Z(e) {
+  return !A(e) && typeof e == "object" && e !== null;
 }
-function Q(e) {
+function J(e) {
   return e.startsWith("&::") ? e.slice(3) : e.startsWith("&:") ? e.slice(2) : e;
 }
-function C(e, t) {
+function S(e, t) {
   const r = (n, s, o) => {
     let i = t.get(n);
     i || (i = [], t.set(n, i)), i.push({ value: s, modifiers: o });
   };
   for (const [n, s] of Object.entries(e))
-    if (J(s)) {
-      const o = Q(n).split(":");
+    if (Z(s)) {
+      const o = J(n).split(":");
       for (const [i, f] of Object.entries(s))
         r(i, f, o);
     } else
       r(n, s, []);
 }
-function U(e, t) {
+function D(e, t) {
   const r = e.utilities.find((s) => s.name === t);
   if (r)
     return r;
   const n = t.replace(/[A-Z]/g, (s) => `-${s.toLowerCase()}`);
   return e.utilities.find((s) => s.name === n);
 }
-function Oe(e, t) {
+function Ee(e, t) {
   const r = /* @__PURE__ */ new Map();
-  if (e.base && C(e.base, r), e.variants)
+  if (e.base && S(e.base, r), e.variants)
     for (const s of Object.values(e.variants))
       for (const o of Object.values(s))
-        C(
+        S(
           o,
           r
         );
   if (e.compoundVariants)
     for (const s of e.compoundVariants)
-      s.css && C(s.css, r);
+      s.css && S(s.css, r);
   const n = /* @__PURE__ */ new Map();
   for (const [s, o] of r) {
-    const i = U(t, s);
+    const i = D(t, s);
     if (!i)
       throw new Error(
         `[styleframe] Utility "${s}" not found in registry. Make sure the utility is registered before using it in a recipe.`
@@ -870,7 +881,7 @@ function Oe(e, t) {
       for (const a of f.modifiers) {
         if (!n.has(a))
           try {
-            n.set(a, de(t, a));
+            n.set(a, le(t, a));
           } catch {
             throw new Error(
               `[styleframe] Modifier "${a}" not found in registry. Make sure the modifier is registered before using it in a recipe.`
@@ -881,13 +892,13 @@ function Oe(e, t) {
       }
       i.create(
         [f.value],
-        c.length > 0 ? c : void 0
+        c.length > 0 ? c.length > 1 ? [c] : c : void 0
       );
     }
   }
 }
 function We(e) {
-  const t = w("sf-"), r = ke(), n = { ...e }, s = $e(r, r), o = Ve(r, r), i = xe(r, r), f = Me(r, r), { variable: c, selector: a, atRule: l, keyframes: u, media: d, ref: y, css: m } = V(r, r);
+  const t = b("sf-"), r = je(), n = { ...e }, s = ke(r, r), o = we(r, r), i = $e(r, r), f = Me(r, r), { variable: c, selector: a, atRule: l, keyframes: u, media: y, ref: d, css: m } = v(r, r);
   return {
     id: t,
     root: r,
@@ -899,69 +910,68 @@ function We(e) {
     theme: f,
     atRule: l,
     keyframes: u,
-    media: d,
-    ref: y,
+    media: y,
+    ref: d,
     css: m,
     options: n
   };
 }
 export {
   ve as applyModifiers,
-  Pe as capitalizeFirst,
-  Ke as classNameToCssSelector,
-  je as combineKeys,
-  D as createAtRuleFunction,
-  ae as createCssFunction,
-  V as createDeclarationsCallbackContext,
-  be as createKeyframesFunction,
-  ge as createMediaFunction,
-  Ve as createModifierFunction,
-  I as createPropertyValueResolver,
-  xe as createRecipeFunction,
-  X as createRefFunction,
-  ke as createRoot,
-  Ae as createSelectorFunction,
+  Ue as capitalizeFirst,
+  De as classNameToCssSelector,
+  I as createAtRuleFunction,
+  fe as createCssFunction,
+  v as createDeclarationsCallbackContext,
+  ge as createKeyframesFunction,
+  he as createMediaFunction,
+  we as createModifierFunction,
+  C as createPropertyValueResolver,
+  $e as createRecipeFunction,
+  q as createRefFunction,
+  je as createRoot,
+  be as createSelectorFunction,
   Me as createThemeFunction,
-  $e as createUtilityFunction,
-  we as createVariableFunction,
-  R as deepClone,
-  Be as defaultUtilitySelectorFn,
-  ce as findVariableInScope,
-  w as generateRandomId,
-  Ee as generateRecipeRuntime,
-  de as getModifier,
+  ke as createUtilityFunction,
+  Ae as createVariableFunction,
+  M as deepClone,
+  Pe as defaultUtilitySelectorFn,
+  oe as findVariableInScope,
+  b as generateRandomId,
+  xe as generateRecipeRuntime,
+  le as getModifier,
   Ie as getUtility,
-  Ue as getVariable,
-  oe as hashValue,
+  Ce as getVariable,
+  se as hashValue,
   te as isAtRule,
-  N as isCSS,
-  Ce as isContainer,
-  ie as isContainerInput,
-  se as isKeyReferenceValue,
+  T as isCSS,
+  Te as isContainer,
+  L as isContainerInput,
+  ie as isKeyReferenceValue,
   ne as isModifier,
-  M as isObject,
+  x as isObject,
   re as isPrimitiveTokenValue,
-  Te as isRecipe,
-  j as isRef,
+  Se as isRecipe,
+  A as isRef,
   $ as isRoot,
-  Fe as isSelector,
-  Ne as isStyleframe,
-  Se as isTheme,
-  b as isToken,
-  S as isTokenEqual,
+  _e as isSelector,
+  Be as isStyleframe,
+  Oe as isTheme,
+  g as isToken,
+  N as isTokenEqual,
   B as isTokenValue,
-  _e as isUtility,
-  G as isVariable,
-  De as merge,
-  Z as mergeContainers,
-  pe as mergeThemesArray,
-  me as mergeVariablesArray,
+  Ne as isUtility,
+  H as isVariable,
+  Ke as merge,
+  Y as mergeContainers,
+  me as mergeThemesArray,
+  de as mergeVariablesArray,
   z as parseAtReferences,
-  x as parseDeclarationsBlock,
-  Oe as processRecipeUtilities,
-  he as rebuildRegistry,
-  ue as rfdc,
+  E as parseDeclarationsBlock,
+  Ee as processRecipeUtilities,
+  pe as rebuildRegistry,
+  ae as rfdc,
   We as styleframe,
-  q as transformUtilityKey,
-  fe as validateReference
+  G as transformUtilityKey,
+  ce as validateReference
 };

package/dist/styleframe.umd.cjs

@@ -1 +1 @@
-(function(u,V){typeof exports=="object"&&typeof module<"u"?V(exports):typeof define=="function"&&define.amd?define(["exports"],V):(u=typeof globalThis<"u"?globalThis:u||self,V(u.styleframe={}))})(this,(function(u){"use strict";function V(e){return typeof e=="object"&&e!==null}function g(e,t){return V(e)&&"type"in e&&e.type===t}function U(e){return g(e,"variable")}function v(e){return g(e,"reference")}function $e(e){return g(e,"selector")}function Y(e){return g(e,"at-rule")}function Te(e){return g(e,"utility")}function Z(e){return g(e,"modifier")}function T(e){return g(e,"css")}function Se(e){return g(e,"theme")}function F(e){return g(e,"root")}function Ce(e){return g(e,"recipe")}function J(e){return typeof e=="string"||typeof e=="number"||typeof e=="boolean"||e===null}function S(e){return J(e)||v(e)||T(e)||Array.isArray(e)&&e.every(S)}function Ee(e){return V(e)&&"id"in e&&"children"in e&&"declarations"in e&&"variables"in e}function Q(e){return V(e)&&"children"in e&&"declarations"in e&&"variables"in e}function x(e){return typeof e=="string"&&e.startsWith("@")}function Oe(e){return V(e)&&"id"in e&&"root"in e&&"variable"in e&&"selector"in e&&"recipe"in e&&typeof e.id=="string"&&F(e.root)}function ee(e){let t=5381;for(let r=0;r<e.length;r++)t=(t<<5)+t+e.charCodeAt(r)&4294967295;return(t>>>0).toString(16).padStart(7,"0").slice(0,7)}function K(e){const t=typeof e=="function"?{replacer:e}:e??{},{replacer:r=c=>c,namespace:n}=t,s=Array.isArray(n)?n:n?[n]:[];return c=>{let i=c,a;if(typeof i=="string"&&i[0]==="@"){const o=i.slice(1),f=s.find(y=>o===y||o.startsWith(`${y}.`));let d,l;f?(d=o,l=o.startsWith(`${f}.`)?o.slice(f.length+1):o):s.length>0?(d=`${s[0]}.${o}`,l=o):(d=o,l=o),a=r(l),i={type:"reference",name:d}}else if(v(i)){let o=i.name;for(const f of s)if(o.startsWith(`${f}.`)){o=o.slice(f.length+1);break}a=r(o)}else{const o=String(c).trim();/\s/.test(o)?a=ee(o):a=`[${o}]`}return{[a]:i}}}const _e=({name:e,value:t,modifiers:r})=>`_${[...r,e,...t==="default"?[]:[t]].filter(Boolean).join(":")}`,N=/@([\w.-]+)/g;function P(e){const t=[];let r=0,n;for(N.lastIndex=0;(n=N.exec(e))!==null;)t.push(e.slice(r,n.index)),t.push({type:"reference",name:n[1]}),r=N.lastIndex;return t.push(e.slice(r)),t}function te(e,t,r){let n=t;for(;n;){if(n.variables.some(s=>s.name===e))return!0;if(n.parentId)n=r._registry.get(n.parentId);else break}return!1}function ne(e,t,r){if(!te(e,t,r))throw new Error(`[styleframe] Variable "${e}" is not defined. Check that the variable exists before referencing it with "@${e}".`)}function C(e,t){return function(n){if(typeof n!="string"||!n.includes("@"))return n;if(x(n)&&/^@[\w.-]+$/.test(n)){const i=n.slice(1);return ne(i,e,t),{type:"reference",name:i}}const s=P(n);return s.some(i=>v(i))?{type:"css",value:s}:n}}function B(e,t){return function(n,s){const c=C(e,t),i=s!=null?c(s):s;if(U(n))return{type:"reference",name:n.name,fallback:i};if(n==null)throw new Error(`[styleframe] ref() received ${String(n)}. This usually means you're referencing a variable that doesn't exist.`);return{type:"reference",name:n,fallback:i}}}function re(e,t){const r=B(e,t);return function(s,...c){return{type:"css",value:s.reduce((a,o,f)=>{if(a.push(...P(o)),f<c.length){const d=c[f];U(d)?a.push(r(d)):Y(d)?a.push(d.rule):a.push(d)}return a},[])}}}function Ue(e){return e.charAt(0).toUpperCase()+e.slice(1)}function Ke(e){return`.${e.replace(/[[\].#()%,:/]/g,"\\$&")}`}function k(e){if(e instanceof Buffer)return Buffer.from(e);const t=e.constructor;return new t(e.buffer.slice(0),e.byteOffset,e.byteLength/e.BYTES_PER_ELEMENT||1)}function ie(e){if(e=e||{},e.circular)return Ne(e);const t=new Map;if(t.set(Date,i=>new Date(i)),t.set(Map,(i,a)=>new Map(n(Array.from(i),a))),t.set(Set,(i,a)=>new Set(n(Array.from(i),a))),e.constructorHandlers)for(const i of e.constructorHandlers)t.set(i[0],i[1]);let r;return e.proto?c:s;function n(i,a){const o=Object.keys(i),f=Array.from({length:o.length});for(let d=0;d<o.length;d++){const l=o[d],y=i[l];typeof y!="object"||y===null?f[l]=y:y.constructor!==Object&&(r=t.get(y.constructor))?f[l]=r(y,a):ArrayBuffer.isView(y)?f[l]=k(y):f[l]=a(y)}return f}function s(i){if(typeof i!="object"||i===null)return i;if(Array.isArray(i))return n(i,s);if(i.constructor!==Object&&(r=t.get(i.constructor)))return r(i,s);const a={};for(const o in i){if(Object.hasOwnProperty.call(i,o)===!1)continue;const f=i[o];typeof f!="object"||f===null?a[o]=f:f.constructor!==Object&&(r=t.get(f.constructor))?a[o]=r(f,s):ArrayBuffer.isView(f)?a[o]=k(f):a[o]=s(f)}return a}function c(i){if(typeof i!="object"||i===null)return i;if(Array.isArray(i))return n(i,c);if(i.constructor!==Object&&(r=t.get(i.constructor)))return r(i,c);const a={};for(const o in i){const f=i[o];typeof f!="object"||f===null?a[o]=f:f.constructor!==Object&&(r=t.get(f.constructor))?a[o]=r(f,c):ArrayBuffer.isView(f)?a[o]=k(f):a[o]=c(f)}return a}}function Ne(e){const t=[],r=[],n=new Map;if(n.set(Date,o=>new Date(o)),n.set(Map,(o,f)=>new Map(c(Array.from(o),f))),n.set(Set,(o,f)=>new Set(c(Array.from(o),f))),e.constructorHandlers)for(const o of e.constructorHandlers)n.set(o[0],o[1]);let s;return e.proto?a:i;function c(o,f){const d=Object.keys(o),l=Array.from({length:d.length});for(let y=0;y<d.length;y++){const m=d[y],h=o[m];if(typeof h!="object"||h===null)l[m]=h;else if(h.constructor!==Object&&(s=n.get(h.constructor)))l[m]=s(h,f);else if(ArrayBuffer.isView(h))l[m]=k(h);else{const p=t.indexOf(h);p!==-1?l[m]=r[p]:l[m]=f(h)}}return l}function i(o){if(typeof o!="object"||o===null)return o;if(Array.isArray(o))return c(o,i);if(o.constructor!==Object&&(s=n.get(o.constructor)))return s(o,i);const f={};t.push(o),r.push(f);for(const d in o){if(Object.hasOwnProperty.call(o,d)===!1)continue;const l=o[d];if(typeof l!="object"||l===null)f[d]=l;else if(l.constructor!==Object&&(s=n.get(l.constructor)))f[d]=s(l,i);else if(ArrayBuffer.isView(l))f[d]=k(l);else{const y=t.indexOf(l);y!==-1?f[d]=r[y]:f[d]=i(l)}}return t.pop(),r.pop(),f}function a(o){if(typeof o!="object"||o===null)return o;if(Array.isArray(o))return c(o,a);if(o.constructor!==Object&&(s=n.get(o.constructor)))return s(o,a);const f={};t.push(o),r.push(f);for(const d in o){const l=o[d];if(typeof l!="object"||l===null)f[d]=l;else if(l.constructor!==Object&&(s=n.get(l.constructor)))f[d]=s(l,a);else if(ArrayBuffer.isView(l))f[d]=k(l);else{const y=t.indexOf(l);y!==-1?f[d]=r[y]:f[d]=a(l)}}return t.pop(),r.pop(),f}}const M=ie();function j(e,t=8){const r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let n="";for(let s=0;s<t;s++){const c=Math.floor(Math.random()*r.length);n+=r[c]}return e?`${e}${n}`:n}function Pe(e,t){const r=e.variables.find(n=>n.name===t);if(!r)throw new Error(`Variable "${t}" not found`);return r}function Be(e,t){const r=e.utilities.find(n=>n.name===t);if(!r)throw new Error(`Utility "${t}" not found`);return r}function se(e,t){const r=e.modifiers.find(n=>n.key.includes(t));if(!r)throw new Error(`Modifier "${t}" not found`);return r}function E(e,t){if(e===t)return!0;if(typeof e!=typeof t)return!1;if(e===null||t===null)return e===t;if(typeof e!="object"||typeof t!="object")return!1;if(Array.isArray(e)&&Array.isArray(t))return e.length!==t.length?!1:e.every((r,n)=>E(r,t[n]));if("type"in e&&"type"in t){if(e.type!==t.type)return!1;if(v(e)&&v(t))return e.name===t.name&&E(e.fallback,t.fallback);if(T(e)&&T(t))return E(e.value,t.value)}return!1}const ce="__licenseRequired";function Ie(e){I(e)||Object.defineProperty(e,ce,{value:!0,writable:!1,configurable:!1,enumerable:!0})}function I(e){return Object.prototype.hasOwnProperty.call(e,ce)}function oe(e,t){const r=[...e];for(const n of t){const s=r.find(c=>c.name===n.name);s?s.value=n.value:r.push(n)}return r}function ae(e,t){const r=[...e];for(const n of t){const s=r.find(c=>c.name===n.name);s?Object.assign(s,D(s,n)):r.push(n)}return r}function D(e,t){return Object.keys(e).reduce((r,n)=>(n==="variables"?r.variables=oe(e.variables,t.variables):n==="declarations"?r.declarations={...e.declarations,...t.declarations}:n==="themes"&&F(r)&&F(e)&&F(t)?r.themes=ae(e.themes,t.themes):Array.isArray(e[n])&&(r[n]=e[n].concat(t[n])),r),{...e,...t})}function W(e,t){for(const r of e)"id"in r&&typeof r.id=="string"&&(t._registry.set(r.id,r),"children"in r&&W(r.children,t))}function fe(e){e._registry=new Map,e._registry.set(e.id,e),W(e.children,e);for(const t of e.themes)e._registry.set(t.id,t),W(t.children,e)}function De(e,...t){return t.reduce((r,n)=>{const s={...r,root:D(r.root,n.root)};return fe(s.root),(I(r)||I(n))&&Ie(s),s},e)}function O(e,t){return function(n,s,c){const i={type:"at-rule",id:j("ar-"),parentId:e.id,identifier:n,rule:s,declarations:{},variables:[],children:[]};t._registry.set(i.id,i);const a=R(i,t);return typeof c=="function"?i.declarations=c(a)??{}:c&&(i.declarations=c),$(i.declarations,a,i,t),e.children.push(i),i}}function ue(e,t){const r=O(e,t);return function(s,c){return r("media",s,c)}}function le(e,t){const r=O(e,t);return function(s,c){return r("keyframes",s,c)}}function de(e,t){return function(n,s){const c={type:"selector",id:j("sel-"),parentId:e.id,query:n,declarations:{},variables:[],children:[]};t._registry.set(c.id,c);const i=R(c,t);return typeof s=="function"?c.declarations=s(i)??{}:Q(s)?(c.variables=s.variables,c.declarations=s.declarations,c.children=s.children):c.declarations=s,$(c.declarations,i,c,t),e.children.push(c),c}}function ye(e,t){return function(n,s,c={default:!1}){const i=typeof n=="string"?n:n.name,o=C(e,t)(s),f=e.variables.find(l=>l.name===i);if(c.default&&f)return f;if(f)return f.value=o,f;const d={type:"variable",id:j("var-"),parentId:e.id,name:i,value:o};return e.variables.push(d),d}}function R(e,t){const r=ye(e,t),n=de(e,t),s=O(e,t),c=le(t,t),i=ue(e,t),a=B(t,t),o=re(t,t);return{variable:r,selector:n,keyframes:c,atRule:s,media:i,ref:a,css:o}}function $(e,t,r,n){for(const c in e)if(c.startsWith("@")){const i=e[c];if(typeof i=="object"&&i!==null&&!S(i)){const a=c.replace(/^@(\w+).*/,"$1"),o=c.replace(`@${a}`,"").trim();t.atRule(a,o,i),delete e[c]}}else if(/^[.&:]/.test(c)||/^\d+%$/.test(c)||c==="from"||c==="to"){const i=e[c];typeof i=="object"&&(t.selector(c,i),delete e[c])}const s=C(r,n);for(const c in e){const i=e[c];if(S(i)){const a=s(i);a!==i&&(e[c]=a)}}return e}function me(e){const t=[];function r(n,s){s.length>0&&t.push([...s].sort());for(let c=n;c<e.length;c++){const i=e[c];if(i)if(i.length===1&&i[0])r(c+1,[...s,i[0]]);else for(const a of i)r(c+1,[...s,a])}}return r(0,[]),t.sort((n,s)=>n.length!==s.length?n.length-s.length:n.join(",").localeCompare(s.join(",")))}function he(e,t,r){const n={...e,id:j("ut-"),parentId:e.parentId,declarations:{...e.declarations},variables:[...e.variables],children:[...e.children],modifiers:[...r.keys()]};t._registry.set(n.id,n);const s=R(n,t);if(r.size>0){const c=M(e.declarations);let i=!1;for(const a of r.values()){const o=a.factory({...s,declarations:M(c),variables:M(n.variables),children:M(n.children)});o&&(i||(n.declarations={},i=!0),Object.assign(n.declarations,o),$(n.declarations,s,n,t))}}return n}function ge(e,t){return function(n,s){const c={type:"modifier",key:Array.isArray(n)?n:[n],factory:s};return t.modifiers.push(c),c}}function pe(){const e={type:"root",id:j("rt-"),declarations:{},utilities:[],modifiers:[],recipes:[],variables:[],children:[],themes:[],_registry:new Map};return e._registry.set(e.id,e),e}function We(e,t){const r=K({namespace:e});return n=>{if(typeof n=="string"&&n[0]==="@"){const s=n.slice(1),c=e.find(i=>s===i||s.startsWith(`${i}.`));if(c){const i=s.slice(c.length+1)||s;if(t.variables.some(a=>a.name===s))return{[i]:{type:"reference",name:s}}}else for(const i of e){const a=`${i}.${s}`;if(t.variables.some(o=>o.name===a))return{[s]:{type:"reference",name:a}}}return r(n)}return r(n)}}function be(e,t){return function(n,s,c={}){const i=t.utilities.find(o=>o.name===n);if(i)return i.create;const a={type:"utility",name:n,factory:s,values:[],autogenerate:c.autogenerate??(Array.isArray(c.namespace)?We(c.namespace,t):K(c.namespace?{namespace:c.namespace}:void 0)),namespace:c.namespace,create:(o,f=[])=>{let d=o;if(Array.isArray(o)){d={};for(const l of o){const y=a.autogenerate(l);d={...d,...y}}}for(const[l,y]of Object.entries(d)){let m=y;if(typeof y=="string"&&y[0]==="@"){const b=y.slice(1);!Array.isArray(d)&&b in d&&(m=d[b])}if(a.namespace&&v(y))if(t.variables.some(b=>b.name===y.name))m=y;else{const b=Array.isArray(a.namespace)?a.namespace:[a.namespace];let z=!1;for(const G of b){const A=`${G}.${l}`;if(A!==y.name&&t.variables.some(w=>w.name===A)){m={type:"reference",name:A},z=!0;break}}z||(m=l)}const h=a.values.find(b=>b.key===l&&b.modifiers.length===0),p={type:"utility",id:j("ut-"),parentId:e.id,name:n,value:l,declarations:{},variables:[],children:[],modifiers:[]};t._registry.set(p.id,p);const Fe=R(p,t);if(p.declarations=s({...Fe,value:m})??{},$(p.declarations,Fe,p,t),h||(a.values.push({key:l,value:m,modifiers:[]}),e.children.push(p)),f&&f.length>0){const b=f.map(A=>A.key),G=me(b).filter(A=>!a.values.find(w=>w.key===l&&w.modifiers.length===A.length&&w.modifiers.every(_=>A.includes(_)))).reduce((A,w)=>{const _=new Map;for(const Me of w){const X=f.find(Le=>Le.key.includes(Me));X&&Z(X)&&_.set(Me,X)}return a.values.push({key:l,value:m,modifiers:w}),A.push(he(p,t,_)),A},[]);e.children.push(...G)}}}};return t.utilities.push(a),a.create}}function Ae(e,t){return function(n,s){const c=t.themes.find(o=>o.name===n),i=c??{type:"theme",id:j("th-"),parentId:t.id,name:n,declarations:{},variables:[],children:[]};c||(t._registry.set(i.id,i),t.themes.push(i));const a=R(i,t);return s&&s(a),i}}function Ve(e,t){return function(n){const s={type:"recipe",...n};return s._runtime=ve(s,t),ke(s,t),t.recipes.push(s),s}}function je(e,t){const r=e.autogenerate(t);return Object.keys(r)[0]??"default"}function H(e,t){const r={};for(const[n,s]of Object.entries(e))if(we(s)){const c={};for(const[i,a]of Object.entries(s)){const o=q(t,i);if(!o)throw new Error(`[styleframe] Utility "${i}" not found in registry. Make sure the utility is registered before using it in a recipe.`);c[i]=je(o,a)}r[Re(n)]=c}else if(typeof s=="boolean")r[n]=s;else{const c=q(t,n);if(!c)throw new Error(`[styleframe] Utility "${n}" not found in registry. Make sure the utility is registered before using it in a recipe.`);r[n]=je(c,s)}return r}function ve(e,t){const r={};if(e.base&&(r.base=H(e.base,t)),e.variants){const n={};for(const[s,c]of Object.entries(e.variants)){const i={};for(const[a,o]of Object.entries(c))o==null?i[a]=null:i[a]=H(o,t);n[s]=i}r.variants=n}return e.defaultVariants&&(r.defaultVariants={...e.defaultVariants}),e.compoundVariants&&(r.compoundVariants=e.compoundVariants.map(n=>({match:{...n.match},css:H(n.css,t)}))),r}function we(e){return!v(e)&&typeof e=="object"&&e!==null}function Re(e){return e.startsWith("&::")?e.slice(3):e.startsWith("&:")?e.slice(2):e}function L(e,t){const r=(n,s,c)=>{let i=t.get(n);i||(i=[],t.set(n,i)),i.push({value:s,modifiers:c})};for(const[n,s]of Object.entries(e))if(we(s)){const c=Re(n).split(":");for(const[i,a]of Object.entries(s))r(i,a,c)}else r(n,s,[])}function q(e,t){const r=e.utilities.find(s=>s.name===t);if(r)return r;const n=t.replace(/[A-Z]/g,s=>`-${s.toLowerCase()}`);return e.utilities.find(s=>s.name===n)}function ke(e,t){const r=new Map;if(e.base&&L(e.base,r),e.variants)for(const s of Object.values(e.variants))for(const c of Object.values(s))L(c,r);if(e.compoundVariants)for(const s of e.compoundVariants)s.css&&L(s.css,r);const n=new Map;for(const[s,c]of r){const i=q(t,s);if(!i)throw new Error(`[styleframe] Utility "${s}" not found in registry. Make sure the utility is registered before using it in a recipe.`);for(const a of c){const o=[];for(const f of a.modifiers){if(!n.has(f))try{n.set(f,se(t,f))}catch{throw new Error(`[styleframe] Modifier "${f}" not found in registry. Make sure the modifier is registered before using it in a recipe.`)}const d=n.get(f);d&&o.push(d)}i.create([a.value],o.length>0?o:void 0)}}}function He(e){const t=j("sf-"),r=pe(),n={...e},s=be(r,r),c=ge(r,r),i=Ve(r,r),a=Ae(r,r),{variable:o,selector:f,atRule:d,keyframes:l,media:y,ref:m,css:h}=R(r,r);return{id:t,root:r,variable:o,selector:f,utility:s,modifier:c,recipe:i,theme:a,atRule:d,keyframes:l,media:y,ref:m,css:h,options:n}}u.applyModifiers=he,u.capitalizeFirst=Ue,u.classNameToCssSelector=Ke,u.combineKeys=me,u.createAtRuleFunction=O,u.createCssFunction=re,u.createDeclarationsCallbackContext=R,u.createKeyframesFunction=le,u.createMediaFunction=ue,u.createModifierFunction=ge,u.createPropertyValueResolver=C,u.createRecipeFunction=Ve,u.createRefFunction=B,u.createRoot=pe,u.createSelectorFunction=de,u.createThemeFunction=Ae,u.createUtilityFunction=be,u.createVariableFunction=ye,u.deepClone=M,u.defaultUtilitySelectorFn=_e,u.findVariableInScope=te,u.generateRandomId=j,u.generateRecipeRuntime=ve,u.getModifier=se,u.getUtility=Be,u.getVariable=Pe,u.hashValue=ee,u.isAtRule=Y,u.isCSS=T,u.isContainer=Ee,u.isContainerInput=Q,u.isKeyReferenceValue=x,u.isModifier=Z,u.isObject=V,u.isPrimitiveTokenValue=J,u.isRecipe=Ce,u.isRef=v,u.isRoot=F,u.isSelector=$e,u.isStyleframe=Oe,u.isTheme=Se,u.isToken=g,u.isTokenEqual=E,u.isTokenValue=S,u.isUtility=Te,u.isVariable=U,u.merge=De,u.mergeContainers=D,u.mergeThemesArray=ae,u.mergeVariablesArray=oe,u.parseAtReferences=P,u.parseDeclarationsBlock=$,u.processRecipeUtilities=ke,u.rebuildRegistry=fe,u.rfdc=ie,u.styleframe=He,u.transformUtilityKey=K,u.validateReference=ne,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));
+(function(u,A){typeof exports=="object"&&typeof module<"u"?A(exports):typeof define=="function"&&define.amd?define(["exports"],A):(u=typeof globalThis<"u"?globalThis:u||self,A(u.styleframe={}))})(this,(function(u){"use strict";function A(e){return typeof e=="object"&&e!==null}function g(e,t){return A(e)&&"type"in e&&e.type===t}function U(e){return g(e,"variable")}function w(e){return g(e,"reference")}function ke(e){return g(e,"selector")}function Y(e){return g(e,"at-rule")}function Me(e){return g(e,"utility")}function Z(e){return g(e,"modifier")}function S(e){return g(e,"css")}function Fe(e){return g(e,"theme")}function k(e){return g(e,"root")}function $e(e){return g(e,"recipe")}function J(e){return typeof e=="string"||typeof e=="number"||typeof e=="boolean"||e===null}function E(e){return J(e)||w(e)||S(e)||Array.isArray(e)&&e.every(E)}function Te(e){return A(e)&&"id"in e&&"children"in e&&"declarations"in e&&"variables"in e}function P(e){return A(e)&&"children"in e&&"declarations"in e&&"variables"in e}function Q(e){return typeof e=="string"&&e.startsWith("@")}function Se(e){return A(e)&&"id"in e&&"root"in e&&"variable"in e&&"selector"in e&&"recipe"in e&&typeof e.id=="string"&&k(e.root)}function x(e){let t=5381;for(let r=0;r<e.length;r++)t=(t<<5)+t+e.charCodeAt(r)&4294967295;return(t>>>0).toString(16).padStart(7,"0").slice(0,7)}function B(e){const t=typeof e=="function"?{replacer:e}:e??{},{replacer:r=c=>c,namespace:n}=t,s=Array.isArray(n)?n:n?[n]:[];return c=>{let i=c,a;if(typeof i=="string"&&i[0]==="@"){const o=i.slice(1),f=s.find(y=>o===y||o.startsWith(`${y}.`));let d,l;f?(d=o,l=o.startsWith(`${f}.`)?o.slice(f.length+1):o):s.length>0?(d=`${s[0]}.${o}`,l=o):(d=o,l=o),a=r(l),i={type:"reference",name:d}}else if(w(i)){let o=i.name;for(const f of s)if(o.startsWith(`${f}.`)){o=o.slice(f.length+1);break}a=r(o)}else{const o=String(c).trim();/\s/.test(o)?a=x(o):a=`[${o}]`}return{[a]:i}}}const Ee=({name:e,value:t,modifiers:r})=>`_${[...r,e,...t==="default"?[]:[t]].filter(Boolean).join(":")}`,D=/@([\w.-]+)/g;function I(e){const t=[];let r=0,n;for(D.lastIndex=0;(n=D.exec(e))!==null;)t.push(e.slice(r,n.index)),t.push({type:"reference",name:n[1]}),r=D.lastIndex;return t.push(e.slice(r)),t}function ee(e,t,r){let n=t;for(;n;){if(n.variables.some(s=>s.name===e))return!0;if(n.parentId)n=r._registry.get(n.parentId);else break}return!1}function te(e,t,r){if(!ee(e,t,r))throw new Error(`[styleframe] Variable "${e}" is not defined. Check that the variable exists before referencing it with "@${e}".`)}function N(e,t){return function(n){if(typeof n!="string"||!n.includes("@"))return n;if(Q(n)&&/^@[\w.-]+$/.test(n)){const i=n.slice(1);return te(i,e,t),{type:"reference",name:i}}const s=I(n);return s.some(i=>w(i))?{type:"css",value:s}:n}}function K(e,t){return function(n,s){const c=N(e,t),i=s!=null?c(s):s;if(U(n))return{type:"reference",name:n.name,fallback:i};if(n==null)throw new Error(`[styleframe] ref() received ${String(n)}. This usually means you're referencing a variable that doesn't exist.`);return{type:"reference",name:n,fallback:i}}}function ne(e,t){const r=K(e,t);return function(s,...c){return{type:"css",value:s.reduce((a,o,f)=>{if(a.push(...I(o)),f<c.length){const d=c[f];U(d)?a.push(r(d)):Y(d)?a.push(d.rule):a.push(d)}return a},[])}}}function Ne(e){return e.charAt(0).toUpperCase()+e.slice(1)}function _e(e){return`.${e.replace(/[[\].#()%,:/]/g,"\\$&")}`}function R(e){if(e instanceof Buffer)return Buffer.from(e);const t=e.constructor;return new t(e.buffer.slice(0),e.byteOffset,e.byteLength/e.BYTES_PER_ELEMENT||1)}function re(e){if(e=e||{},e.circular)return Oe(e);const t=new Map;if(t.set(Date,i=>new Date(i)),t.set(Map,(i,a)=>new Map(n(Array.from(i),a))),t.set(Set,(i,a)=>new Set(n(Array.from(i),a))),e.constructorHandlers)for(const i of e.constructorHandlers)t.set(i[0],i[1]);let r;return e.proto?c:s;function n(i,a){const o=Object.keys(i),f=Array.from({length:o.length});for(let d=0;d<o.length;d++){const l=o[d],y=i[l];typeof y!="object"||y===null?f[l]=y:y.constructor!==Object&&(r=t.get(y.constructor))?f[l]=r(y,a):ArrayBuffer.isView(y)?f[l]=R(y):f[l]=a(y)}return f}function s(i){if(typeof i!="object"||i===null)return i;if(Array.isArray(i))return n(i,s);if(i.constructor!==Object&&(r=t.get(i.constructor)))return r(i,s);const a={};for(const o in i){if(Object.hasOwnProperty.call(i,o)===!1)continue;const f=i[o];typeof f!="object"||f===null?a[o]=f:f.constructor!==Object&&(r=t.get(f.constructor))?a[o]=r(f,s):ArrayBuffer.isView(f)?a[o]=R(f):a[o]=s(f)}return a}function c(i){if(typeof i!="object"||i===null)return i;if(Array.isArray(i))return n(i,c);if(i.constructor!==Object&&(r=t.get(i.constructor)))return r(i,c);const a={};for(const o in i){const f=i[o];typeof f!="object"||f===null?a[o]=f:f.constructor!==Object&&(r=t.get(f.constructor))?a[o]=r(f,c):ArrayBuffer.isView(f)?a[o]=R(f):a[o]=c(f)}return a}}function Oe(e){const t=[],r=[],n=new Map;if(n.set(Date,o=>new Date(o)),n.set(Map,(o,f)=>new Map(c(Array.from(o),f))),n.set(Set,(o,f)=>new Set(c(Array.from(o),f))),e.constructorHandlers)for(const o of e.constructorHandlers)n.set(o[0],o[1]);let s;return e.proto?a:i;function c(o,f){const d=Object.keys(o),l=Array.from({length:d.length});for(let y=0;y<d.length;y++){const m=d[y],h=o[m];if(typeof h!="object"||h===null)l[m]=h;else if(h.constructor!==Object&&(s=n.get(h.constructor)))l[m]=s(h,f);else if(ArrayBuffer.isView(h))l[m]=R(h);else{const b=t.indexOf(h);b!==-1?l[m]=r[b]:l[m]=f(h)}}return l}function i(o){if(typeof o!="object"||o===null)return o;if(Array.isArray(o))return c(o,i);if(o.constructor!==Object&&(s=n.get(o.constructor)))return s(o,i);const f={};t.push(o),r.push(f);for(const d in o){if(Object.hasOwnProperty.call(o,d)===!1)continue;const l=o[d];if(typeof l!="object"||l===null)f[d]=l;else if(l.constructor!==Object&&(s=n.get(l.constructor)))f[d]=s(l,i);else if(ArrayBuffer.isView(l))f[d]=R(l);else{const y=t.indexOf(l);y!==-1?f[d]=r[y]:f[d]=i(l)}}return t.pop(),r.pop(),f}function a(o){if(typeof o!="object"||o===null)return o;if(Array.isArray(o))return c(o,a);if(o.constructor!==Object&&(s=n.get(o.constructor)))return s(o,a);const f={};t.push(o),r.push(f);for(const d in o){const l=o[d];if(typeof l!="object"||l===null)f[d]=l;else if(l.constructor!==Object&&(s=n.get(l.constructor)))f[d]=s(l,a);else if(ArrayBuffer.isView(l))f[d]=R(l);else{const y=t.indexOf(l);y!==-1?f[d]=r[y]:f[d]=a(l)}}return t.pop(),r.pop(),f}}const M=re();function v(e,t=8){const r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let n="";for(let s=0;s<t;s++){const c=Math.floor(Math.random()*r.length);n+=r[c]}return e?`${e}${n}`:n}function Ce(e,t){const r=e.variables.find(n=>n.name===t);if(!r)throw new Error(`Variable "${t}" not found`);return r}function Ue(e,t){const r=e.utilities.find(n=>n.name===t);if(!r)throw new Error(`Utility "${t}" not found`);return r}function ie(e,t){const r=e.modifiers.find(n=>n.key.includes(t));if(!r)throw new Error(`Modifier "${t}" not found`);return r}function _(e,t){if(e===t)return!0;if(typeof e!=typeof t)return!1;if(e===null||t===null)return e===t;if(typeof e!="object"||typeof t!="object")return!1;if(Array.isArray(e)&&Array.isArray(t))return e.length!==t.length?!1:e.every((r,n)=>_(r,t[n]));if("type"in e&&"type"in t){if(e.type!==t.type)return!1;if(w(e)&&w(t))return e.name===t.name&&_(e.fallback,t.fallback);if(S(e)&&S(t))return _(e.value,t.value)}return!1}const se="__licenseRequired";function Pe(e){W(e)||Object.defineProperty(e,se,{value:!0,writable:!1,configurable:!1,enumerable:!0})}function W(e){return Object.prototype.hasOwnProperty.call(e,se)}function ce(e,t){const r=[...e];for(const n of t){const s=r.find(c=>c.name===n.name);s?s.value=n.value:r.push(n)}return r}function oe(e,t){const r=[...e];for(const n of t){const s=r.find(c=>c.name===n.name);s?Object.assign(s,H(s,n)):r.push(n)}return r}function H(e,t){return Object.keys(e).reduce((r,n)=>(n==="variables"?r.variables=ce(e.variables,t.variables):n==="declarations"?r.declarations={...e.declarations,...t.declarations}:n==="themes"&&k(r)&&k(e)&&k(t)?r.themes=oe(e.themes,t.themes):Array.isArray(e[n])&&(r[n]=e[n].concat(t[n])),r),{...e,...t})}function L(e,t){for(const r of e)"id"in r&&typeof r.id=="string"&&(t._registry.set(r.id,r),"children"in r&&L(r.children,t))}function ae(e){e._registry=new Map,e._registry.set(e.id,e),L(e.children,e);for(const t of e.themes)e._registry.set(t.id,t),L(t.children,e)}function Be(e,...t){return t.reduce((r,n)=>{const s={...r,root:H(r.root,n.root)};return ae(s.root),(W(r)||W(n))&&Pe(s),s},e)}function O(e,t){return function(n,s,c){const i={type:"at-rule",id:v("ar-"),parentId:e.id,identifier:n,rule:s,declarations:{},variables:[],children:[]};t._registry.set(i.id,i);const a=V(i,t);return typeof c=="function"?i.declarations=c(a)??{}:P(c)?(i.variables=c.variables,i.declarations=c.declarations,i.children=c.children):c&&(i.declarations=c),F(i.declarations,a,i,t),e.children.push(i),i}}function fe(e,t){const r=O(e,t);return function(s,c){return r("media",s,c)}}function ue(e,t){const r=O(e,t);return function(s,c){return r("keyframes",s,c)}}function le(e,t){return function(n,s){const c={type:"selector",id:v("sel-"),parentId:e.id,query:n,declarations:{},variables:[],children:[]};t._registry.set(c.id,c);const i=V(c,t);return typeof s=="function"?c.declarations=s(i)??{}:P(s)?(c.variables=s.variables,c.declarations=s.declarations,c.children=s.children):c.declarations=s,F(c.declarations,i,c,t),e.children.push(c),c}}function de(e,t){return function(n,s,c={default:!1}){const i=typeof n=="string"?n:n.name,o=N(e,t)(s),f=e.variables.find(l=>l.name===i);if(c.default&&f)return f;if(f)return f.value=o,f;const d={type:"variable",id:v("var-"),parentId:e.id,name:i,value:o};return e.variables.push(d),d}}function V(e,t){const r=de(e,t),n=le(e,t),s=O(e,t),c=ue(t,t),i=fe(e,t),a=K(t,t),o=ne(t,t);return{variable:r,selector:n,keyframes:c,atRule:s,media:i,ref:a,css:o}}function F(e,t,r,n){for(const c in e)if(c.startsWith("@")){const i=e[c];if(typeof i=="object"&&i!==null&&!E(i)){const a=c.replace(/^@(\w+).*/,"$1"),o=c.replace(`@${a}`,"").trim();t.atRule(a,o,i),delete e[c]}}else if(/^[.&:]/.test(c)||/^(\d+%|from|to)(\s*,\s*(\d+%|from|to))*$/.test(c)){const i=e[c];typeof i=="object"&&(t.selector(c,i),delete e[c])}const s=N(r,n);for(const c in e){const i=e[c];if(E(i)){const a=s(i);a!==i&&(e[c]=a)}}return e}function ye(e,t,r){const n={...e,id:v("ut-"),parentId:e.parentId,declarations:{...e.declarations},variables:[...e.variables],children:[...e.children],modifiers:[...r.keys()]};if(t._registry.set(n.id,n),r.size>0){const s=[...r.values()];let c=M(e.declarations);n.declarations={},n.variables=[],n.children=[];for(let a=s.length-1;a>=0;a--){const o=V(n,t),f=s[a]?.factory({...o,declarations:M(c),variables:M(e.variables),children:M(e.children)});f&&(c=f)}n.declarations=c;const i=V(n,t);F(n.declarations,i,n,t)}return n}function me(e,t){return function(n,s){const c={type:"modifier",key:Array.isArray(n)?n:[n],factory:s};return t.modifiers.push(c),c}}function he(){const e={type:"root",id:v("rt-"),declarations:{},utilities:[],modifiers:[],recipes:[],variables:[],children:[],themes:[],_registry:new Map};return e._registry.set(e.id,e),e}function De(e,t){const r=B({namespace:e});return n=>{if(typeof n=="string"&&n[0]==="@"){const s=n.slice(1),c=e.find(i=>s===i||s.startsWith(`${i}.`));if(c){const i=s.slice(c.length+1)||s;if(t.variables.some(a=>a.name===s))return{[i]:{type:"reference",name:s}}}else{for(const i of e){const a=`${i}.${s}`;if(t.variables.some(o=>o.name===a))return{[s]:{type:"reference",name:a}}}if(t.variables.some(i=>i.name===s))return{[s]:{type:"reference",name:s}}}return r(n)}return r(n)}}function Ie(e){let t=[new Map];for(const r of e){if(!Z(r))continue;const n=[];for(const s of r.key)for(const c of t){const i=new Map(c);i.set(s,r),n.push(i)}t=n}return t.filter(r=>r.size>0)}function pe(e,t){return function(n,s,c={}){const i=t.utilities.find(o=>o.name===n);if(i)return i.create;const a={type:"utility",name:n,factory:s,values:[],autogenerate:c.autogenerate??(Array.isArray(c.namespace)?De(c.namespace,t):B(c.namespace?{namespace:c.namespace}:void 0)),namespace:c.namespace,create:(o,f=[])=>{let d=o;if(Array.isArray(o)){d={};for(const l of o){const y=a.autogenerate(l);d={...d,...y}}}for(const[l,y]of Object.entries(d)){let m=y;if(typeof y=="string"&&y[0]==="@"){const p=y.slice(1);!Array.isArray(d)&&p in d&&(m=d[p])}if(a.namespace&&w(y))if(t.variables.some(p=>p.name===y.name))m=y;else{const p=Array.isArray(a.namespace)?a.namespace:[a.namespace];let C=!1;for(const $ of p){const j=`${$}.${l}`;if(j!==y.name&&t.variables.some(T=>T.name===j)){m={type:"reference",name:j},C=!0;break}}C||(t.variables.some($=>$.name===l)?m={type:"reference",name:l}:m=l)}const h=a.values.find(p=>p.key===l&&p.modifiers.length===0),b={type:"utility",id:v("ut-"),parentId:e.id,name:n,value:l,declarations:{},variables:[],children:[],modifiers:[]};t._registry.set(b.id,b);const je=V(b,t);if(b.declarations=s({...je,value:m})??{},F(b.declarations,je,b,t),h||(a.values.push({key:l,value:m,modifiers:[]}),e.children.push(b)),f&&f.length>0)for(const p of f){const C=Array.isArray(p)?p:[p],$=Ie(C);for(const j of $){const T=[...j.keys()];a.values.find(X=>X.key===l&&X.modifiers.length===T.length&&X.modifiers.every((We,He)=>We===T[He]))||(a.values.push({key:l,value:m,modifiers:T}),e.children.push(ye(b,t,j)))}}}}};return t.utilities.push(a),a.create}}function ge(e,t){return function(n,s){const c=t.themes.find(o=>o.name===n),i=c??{type:"theme",id:v("th-"),parentId:t.id,name:n,declarations:{},variables:[],children:[]};c||(t._registry.set(i.id,i),t.themes.push(i));const a=V(i,t);return s&&s(a),i}}function be(e,t){return function(n){const s={type:"recipe",...n};return s._runtime=ve(s,t),Re(s,t),t.recipes.push(s),s}}function Ae(e,t){const r=e.autogenerate(t);return Object.keys(r)[0]??"default"}function z(e,t){const r={};for(const[n,s]of Object.entries(e))if(we(s)){const c={};for(const[i,a]of Object.entries(s)){const o=q(t,i);if(!o)throw new Error(`[styleframe] Utility "${i}" not found in registry. Make sure the utility is registered before using it in a recipe.`);c[i]=Ae(o,a)}r[Ve(n)]=c}else if(typeof s=="boolean")r[n]=s;else{const c=q(t,n);if(!c)throw new Error(`[styleframe] Utility "${n}" not found in registry. Make sure the utility is registered before using it in a recipe.`);r[n]=Ae(c,s)}return r}function ve(e,t){const r={};if(e.base&&(r.base=z(e.base,t)),e.variants){const n={};for(const[s,c]of Object.entries(e.variants)){const i={};for(const[a,o]of Object.entries(c))o==null?i[a]=null:i[a]=z(o,t);n[s]=i}r.variants=n}return e.defaultVariants&&(r.defaultVariants={...e.defaultVariants}),e.compoundVariants&&(r.compoundVariants=e.compoundVariants.map(n=>({match:{...n.match},...n.css?{css:z(n.css,t)}:{},...n.className?{className:n.className}:{}}))),r}function we(e){return!w(e)&&typeof e=="object"&&e!==null}function Ve(e){return e.startsWith("&::")?e.slice(3):e.startsWith("&:")?e.slice(2):e}function G(e,t){const r=(n,s,c)=>{let i=t.get(n);i||(i=[],t.set(n,i)),i.push({value:s,modifiers:c})};for(const[n,s]of Object.entries(e))if(we(s)){const c=Ve(n).split(":");for(const[i,a]of Object.entries(s))r(i,a,c)}else r(n,s,[])}function q(e,t){const r=e.utilities.find(s=>s.name===t);if(r)return r;const n=t.replace(/[A-Z]/g,s=>`-${s.toLowerCase()}`);return e.utilities.find(s=>s.name===n)}function Re(e,t){const r=new Map;if(e.base&&G(e.base,r),e.variants)for(const s of Object.values(e.variants))for(const c of Object.values(s))G(c,r);if(e.compoundVariants)for(const s of e.compoundVariants)s.css&&G(s.css,r);const n=new Map;for(const[s,c]of r){const i=q(t,s);if(!i)throw new Error(`[styleframe] Utility "${s}" not found in registry. Make sure the utility is registered before using it in a recipe.`);for(const a of c){const o=[];for(const f of a.modifiers){if(!n.has(f))try{n.set(f,ie(t,f))}catch{throw new Error(`[styleframe] Modifier "${f}" not found in registry. Make sure the modifier is registered before using it in a recipe.`)}const d=n.get(f);d&&o.push(d)}i.create([a.value],o.length>0?o.length>1?[o]:o:void 0)}}}function Ke(e){const t=v("sf-"),r=he(),n={...e},s=pe(r,r),c=me(r,r),i=be(r,r),a=ge(r,r),{variable:o,selector:f,atRule:d,keyframes:l,media:y,ref:m,css:h}=V(r,r);return{id:t,root:r,variable:o,selector:f,utility:s,modifier:c,recipe:i,theme:a,atRule:d,keyframes:l,media:y,ref:m,css:h,options:n}}u.applyModifiers=ye,u.capitalizeFirst=Ne,u.classNameToCssSelector=_e,u.createAtRuleFunction=O,u.createCssFunction=ne,u.createDeclarationsCallbackContext=V,u.createKeyframesFunction=ue,u.createMediaFunction=fe,u.createModifierFunction=me,u.createPropertyValueResolver=N,u.createRecipeFunction=be,u.createRefFunction=K,u.createRoot=he,u.createSelectorFunction=le,u.createThemeFunction=ge,u.createUtilityFunction=pe,u.createVariableFunction=de,u.deepClone=M,u.defaultUtilitySelectorFn=Ee,u.findVariableInScope=ee,u.generateRandomId=v,u.generateRecipeRuntime=ve,u.getModifier=ie,u.getUtility=Ue,u.getVariable=Ce,u.hashValue=x,u.isAtRule=Y,u.isCSS=S,u.isContainer=Te,u.isContainerInput=P,u.isKeyReferenceValue=Q,u.isModifier=Z,u.isObject=A,u.isPrimitiveTokenValue=J,u.isRecipe=$e,u.isRef=w,u.isRoot=k,u.isSelector=ke,u.isStyleframe=Se,u.isTheme=Fe,u.isToken=g,u.isTokenEqual=_,u.isTokenValue=E,u.isUtility=Me,u.isVariable=U,u.merge=Be,u.mergeContainers=H,u.mergeThemesArray=oe,u.mergeVariablesArray=ce,u.parseAtReferences=I,u.parseDeclarationsBlock=F,u.processRecipeUtilities=Re,u.rebuildRegistry=ae,u.rfdc=re,u.styleframe=Ke,u.transformUtilityKey=B,u.validateReference=te,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@styleframe/core",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "type": "module",
   "types": "./dist/styleframe.d.ts",
   "module": "./dist/styleframe.js",