@styleframe/core 3.3.0 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @styleframe/core
 
+## 3.4.0
+
+### Minor Changes
+
+- [#203](https://github.com/styleframe-dev/styleframe/pull/203) [`c314dbc`](https://github.com/styleframe-dev/styleframe/commit/c314dbc78872df38efe72d7931faf86afce5ffcc) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Track variable references in `root._usage.variables` for future transpiler optimizations
+  - Add `_usage: { variables: Set<string> }` to `Root` type and initialize in `createRoot()`
+  - Record variable names whenever `ref()` is called or `@`-prefixed syntax is resolved
+
 ## 3.3.0
 
 ### Minor Changes

package/dist/styleframe.d.ts

@@ -487,6 +487,9 @@ export declare type Root = {
     children: ContainerChild[];
     themes: Theme[];
     _registry: Map<string, Container | Root | Theme>;
+    _usage: {
+        variables: Set<string>;
+    };
 };
 
 export declare type RuntimeModifierDeclarationsBlock = Record<string, PrimitiveTokenValue>;

package/dist/styleframe.js

@@ -4,13 +4,13 @@ function x(e) {
 function g(e, t) {
   return x(e) && "type" in e && e.type === t;
 }
-function H(e) {
+function L(e) {
   return g(e, "variable");
 }
-function A(e) {
+function b(e) {
   return g(e, "reference");
 }
-function _e(e) {
+function Fe(e) {
   return g(e, "selector");
 }
 function te(e) {
@@ -25,25 +25,25 @@ function ne(e) {
 function T(e) {
   return g(e, "css");
 }
-function Oe(e) {
+function Se(e) {
   return g(e, "theme");
 }
 function $(e) {
   return g(e, "root");
 }
-function Se(e) {
+function Oe(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) || A(e) || T(e) || Array.isArray(e) && e.every(B);
+  return re(e) || b(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 L(e) {
+function G(e) {
   return x(e) && "children" in e && "declarations" in e && "variables" in e;
 }
 function ie(e) {
@@ -58,20 +58,20 @@ function se(e) {
     t = (t << 5) + t + e.charCodeAt(r) & 4294967295;
   return (t >>> 0).toString(16).padStart(7, "0").slice(0, 7);
 }
-function G(e) {
+function z(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(
-        (y) => c === y || c.startsWith(`${y}.`)
+        (d) => c === d || c.startsWith(`${d}.`)
       );
       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 (A(i)) {
+    } else if (b(i)) {
       let c = i.name;
       for (const a of s)
         if (c.startsWith(`${a}.`)) {
@@ -96,13 +96,16 @@ const Pe = ({
   ...r,
   e,
   ...t === "default" ? [] : [t]
-].filter(Boolean).join(":")}`, _ = /@([\w.-]+)/g;
-function z(e) {
+].filter(Boolean).join(":")}`, F = /@([\w.-]+)/g;
+function P(e) {
   const t = [];
   let r = 0, n;
-  for (_.lastIndex = 0; (n = _.exec(e)) !== null; )
-    t.push(e.slice(r, n.index)), t.push({ type: "reference", name: n[1] }), r = _.lastIndex;
-  return t.push(e.slice(r)), t;
+  for (F.lastIndex = 0; (n = F.exec(e)) !== null; ) {
+    const o = e.slice(r, n.index);
+    o !== "" && t.push(o), t.push({ type: "reference", name: n[1] }), r = F.lastIndex;
+  }
+  const s = e.slice(r);
+  return s !== "" && t.push(s), t;
 }
 function oe(e, t, r) {
   let n = t;
@@ -122,23 +125,28 @@ function ce(e, t, r) {
       `[styleframe] Variable "${e}" is not defined. Check that the variable exists before referencing it with "@${e}".`
     );
 }
-function C(e, t) {
+function I(e, t) {
   return function(n) {
     if (typeof n != "string" || !n.includes("@"))
       return n;
     if (ie(n) && /^@[\w.-]+$/.test(n)) {
       const i = n.slice(1);
-      return ce(i, e, t), { type: "reference", name: i };
+      return ce(i, e, t), t._usage.variables.add(i), { type: "reference", name: i };
+    }
+    const s = P(n);
+    if (s.some((i) => b(i))) {
+      for (const i of s)
+        b(i) && t._usage.variables.add(i.name);
+      return { type: "css", value: s };
     }
-    const s = z(n);
-    return s.some((i) => A(i)) ? { type: "css", value: s } : n;
+    return n;
   };
 }
 function q(e, t) {
   return function(n, s) {
-    const o = C(e, t), i = s != null ? o(s) : s;
-    if (H(n))
-      return {
+    const o = I(e, t), i = s != null ? o(s) : s;
+    if (L(n))
+      return t._usage.variables.add(n.name), {
         type: "reference",
         name: n.name,
         fallback: i
@@ -147,7 +155,7 @@ function q(e, t) {
       throw new Error(
         `[styleframe] ref() received ${String(n)}. This usually means you're referencing a variable that doesn't exist.`
       );
-    return {
+    return t._usage.variables.add(n), {
       type: "reference",
       name: n,
       fallback: i
@@ -160,9 +168,9 @@ function fe(e, t) {
     return {
       type: "css",
       value: s.reduce((f, c, a) => {
-        if (f.push(...z(c)), a < o.length) {
+        if (f.push(...P(c)), a < o.length) {
           const l = o[a];
-          H(l) ? f.push(r(l)) : te(l) ? f.push(l.rule) : f.push(l);
+          L(l) ? f.push(r(l)) : te(l) ? f.push(l.rule) : typeof l == "string" && l.includes("@") ? f.push(...P(l)) : f.push(l);
         }
         return f;
       }, [])
@@ -203,8 +211,8 @@ function ae(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], 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);
+      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] = j(d) : a[u] = f(d);
     }
     return a;
   }
@@ -249,17 +257,17 @@ function ue(e) {
   return e.proto ? f : i;
   function o(c, a) {
     const l = Object.keys(c), u = Array.from({ length: l.length });
-    for (let y = 0; y < l.length; y++) {
-      const d = l[y], m = c[d];
-      if (typeof m != "object" || m === null)
-        u[d] = m;
-      else if (m.constructor !== Object && (s = n.get(m.constructor)))
-        u[d] = s(m, a);
-      else if (ArrayBuffer.isView(m))
-        u[d] = j(m);
+    for (let d = 0; d < l.length; d++) {
+      const y = l[d], p = c[y];
+      if (typeof p != "object" || p === null)
+        u[y] = p;
+      else if (p.constructor !== Object && (s = n.get(p.constructor)))
+        u[y] = s(p, a);
+      else if (ArrayBuffer.isView(p))
+        u[y] = j(p);
       else {
-        const h = t.indexOf(m);
-        h !== -1 ? u[d] = r[h] : u[d] = a(m);
+        const h = t.indexOf(p);
+        h !== -1 ? u[y] = r[h] : u[y] = a(p);
       }
     }
     return u;
@@ -281,8 +289,8 @@ function ue(e) {
       else if (ArrayBuffer.isView(u))
         a[l] = j(u);
       else {
-        const y = t.indexOf(u);
-        y !== -1 ? a[l] = r[y] : a[l] = i(u);
+        const d = t.indexOf(u);
+        d !== -1 ? a[l] = r[d] : a[l] = i(u);
       }
     }
     return t.pop(), r.pop(), a;
@@ -303,15 +311,15 @@ function ue(e) {
       else if (ArrayBuffer.isView(u))
         a[l] = j(u);
       else {
-        const y = t.indexOf(u);
-        y !== -1 ? a[l] = r[y] : a[l] = f(u);
+        const d = t.indexOf(u);
+        d !== -1 ? a[l] = r[d] : a[l] = f(u);
       }
     }
     return t.pop(), r.pop(), a;
   }
 }
 const M = ae();
-function b(e, t = 8) {
+function A(e, t = 8) {
   const r = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
   let n = "";
   for (let s = 0; s < t; s++) {
@@ -349,7 +357,7 @@ function N(e, t) {
     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 (A(e) && A(t))
+    if (b(e) && b(t))
       return e.name === t.name && N(e.fallback, t.fallback);
     if (T(e) && T(t))
       return N(e.value, t.value);
@@ -357,18 +365,18 @@ function N(e, t) {
   return !1;
 }
 const X = "__licenseRequired";
-function ye(e) {
-  P(e) || Object.defineProperty(e, X, {
+function de(e) {
+  U(e) || Object.defineProperty(e, X, {
     value: !0,
     writable: !1,
     configurable: !1,
     enumerable: !0
   });
 }
-function P(e) {
+function U(e) {
   return Object.prototype.hasOwnProperty.call(e, X);
 }
-function de(e, t) {
+function ye(e, t) {
   const r = [...e];
   for (const n of t) {
     const s = r.find(
@@ -378,7 +386,7 @@ function de(e, t) {
   }
   return r;
 }
-function me(e, t) {
+function pe(e, t) {
   const r = [...e];
   for (const n of t) {
     const s = r.find(
@@ -393,7 +401,7 @@ function me(e, t) {
 }
 function Y(e, t) {
   return Object.keys(e).reduce(
-    (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(
+    (r, n) => (n === "variables" ? r.variables = ye(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(
       t[n]
     )), r),
     {
@@ -402,14 +410,14 @@ function Y(e, t) {
     }
   );
 }
-function U(e, t) {
+function D(e, t) {
   for (const r of e)
-    "id" in r && typeof r.id == "string" && (t._registry.set(r.id, r), "children" in r && U(r.children, t));
+    "id" in r && typeof r.id == "string" && (t._registry.set(r.id, r), "children" in r && D(r.children, t));
 }
-function pe(e) {
-  e._registry = /* @__PURE__ */ new Map(), e._registry.set(e.id, e), U(e.children, e);
+function me(e) {
+  e._registry = /* @__PURE__ */ new Map(), e._registry.set(e.id, e), D(e.children, e);
   for (const t of e.themes)
-    e._registry.set(t.id, t), U(t.children, e);
+    e._registry.set(t.id, t), D(t.children, e);
 }
 function Ke(e, ...t) {
   return t.reduce((r, n) => {
@@ -417,14 +425,14 @@ function Ke(e, ...t) {
       ...r,
       root: Y(r.root, n.root)
     };
-    return pe(s.root), (P(r) || P(n)) && ye(s), s;
+    return me(s.root), (U(r) || U(n)) && de(s), s;
   }, e);
 }
-function I(e, t) {
+function K(e, t) {
   return function(n, s, o) {
     const i = {
       type: "at-rule",
-      id: b("ar-"),
+      id: A("ar-"),
       parentId: e.id,
       identifier: n,
       rule: s,
@@ -434,7 +442,7 @@ function I(e, t) {
     };
     t._registry.set(i.id, i);
     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(
+    return typeof o == "function" ? i.declarations = o(f) ?? {} : G(o) ? (i.variables = o.variables, i.declarations = o.declarations, i.children = o.children) : o && (i.declarations = o), _(
       i.declarations,
       f,
       i,
@@ -443,13 +451,13 @@ function I(e, t) {
   };
 }
 function he(e, t) {
-  const r = I(e, t);
+  const r = K(e, t);
   return function(s, o) {
     return r("media", s, o);
   };
 }
 function ge(e, t) {
-  const r = I(e, t);
+  const r = K(e, t);
   return function(s, o) {
     return r("keyframes", s, o);
   };
@@ -458,7 +466,7 @@ function be(e, t) {
   return function(n, s) {
     const o = {
       type: "selector",
-      id: b("sel-"),
+      id: A("sel-"),
       parentId: e.id,
       query: n,
       declarations: {},
@@ -467,7 +475,7 @@ function be(e, t) {
     };
     t._registry.set(o.id, o);
     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(
+    return typeof s == "function" ? o.declarations = s(i) ?? {} : G(s) ? (o.variables = s.variables, o.declarations = s.declarations, o.children = s.children) : o.declarations = s, _(
       o.declarations,
       i,
       o,
@@ -479,7 +487,7 @@ function Ae(e, t) {
   return function(n, s, o = {
     default: !1
   }) {
-    const i = typeof n == "string" ? n : n.name, c = C(e, t)(s), a = e.variables.find(
+    const i = typeof n == "string" ? n : n.name, c = I(e, t)(s), a = e.variables.find(
       (u) => u.name === i
     );
     if (o.default && a)
@@ -488,7 +496,7 @@ function Ae(e, t) {
       return a.value = c, a;
     const l = {
       type: "variable",
-      id: b("var-"),
+      id: A("var-"),
       parentId: e.id,
       name: i,
       value: c
@@ -497,7 +505,7 @@ function Ae(e, 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);
+  const r = Ae(e, t), n = be(e, t), s = K(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 +516,7 @@ function v(e, t) {
     css: c
   };
 }
-function E(e, t, r, n) {
+function _(e, t, r, n) {
   for (const o in e)
     if (o.startsWith("@")) {
       const i = e[o];
@@ -520,7 +528,7 @@ function E(e, t, r, n) {
       const i = e[o];
       typeof i == "object" && (t.selector(o, i), delete e[o]);
     }
-  const s = C(r, n);
+  const s = I(r, n);
   for (const o in e) {
     const i = e[o];
     if (B(i)) {
@@ -533,7 +541,7 @@ function E(e, t, r, n) {
 function ve(e, t, r) {
   const n = {
     ...e,
-    id: b("ut-"),
+    id: A("ut-"),
     parentId: e.parentId,
     declarations: { ...e.declarations },
     variables: [...e.variables],
@@ -555,7 +563,7 @@ function ve(e, t, r) {
     }
     n.declarations = o;
     const i = v(n, t);
-    E(
+    _(
       n.declarations,
       i,
       n,
@@ -577,7 +585,7 @@ function we(e, t) {
 function je() {
   const e = {
     type: "root",
-    id: b("rt-"),
+    id: A("rt-"),
     declarations: {},
     utilities: [],
     modifiers: [],
@@ -585,12 +593,15 @@ function je() {
     variables: [],
     children: [],
     themes: [],
-    _registry: /* @__PURE__ */ new Map()
+    _registry: /* @__PURE__ */ new Map(),
+    _usage: {
+      variables: /* @__PURE__ */ new Set()
+    }
   };
   return e._registry.set(e.id, e), e;
 }
 function Ve(e, t) {
-  const r = G({ namespace: e });
+  const r = z({ namespace: e });
   return (n) => {
     if (typeof n == "string" && n[0] === "@") {
       const s = n.slice(1), o = e.find(
@@ -653,7 +664,7 @@ function ke(e, t) {
       name: n,
       factory: s,
       values: [],
-      autogenerate: o.autogenerate ?? (Array.isArray(o.namespace) ? Ve(o.namespace, t) : G(
+      autogenerate: o.autogenerate ?? (Array.isArray(o.namespace) ? Ve(o.namespace, t) : z(
         o.namespace ? { namespace: o.namespace } : void 0
       )),
       namespace: o.namespace,
@@ -662,45 +673,45 @@ function ke(e, t) {
         if (Array.isArray(c)) {
           l = {};
           for (const u of c) {
-            const y = f.autogenerate(u);
+            const d = f.autogenerate(u);
             l = {
               ...l,
-              ...y
+              ...d
             };
           }
         }
-        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]);
+        for (const [u, d] of Object.entries(l)) {
+          let y = d;
+          if (typeof d == "string" && d[0] === "@") {
+            const m = d.slice(1);
+            !Array.isArray(l) && m in l && (y = l[m]);
           }
-          if (f.namespace && A(y))
-            if (t.variables.some((p) => p.name === y.name))
-              d = y;
+          if (f.namespace && b(d))
+            if (t.variables.some((m) => m.name === d.name))
+              y = d;
             else {
-              const p = Array.isArray(f.namespace) ? f.namespace : [f.namespace];
+              const m = Array.isArray(f.namespace) ? f.namespace : [f.namespace];
               let k = !1;
-              for (const V of p) {
+              for (const V of m) {
                 const w = `${V}.${u}`;
-                if (w !== y.name && t.variables.some((R) => R.name === w)) {
-                  d = {
+                if (w !== d.name && t.variables.some((R) => R.name === w)) {
+                  y = {
                     type: "reference",
                     name: w
                   }, k = !0;
                   break;
                 }
               }
-              k || (t.variables.some((V) => V.name === u) ? d = {
+              k || (t.variables.some((V) => V.name === u) ? y = {
                 type: "reference",
                 name: u
-              } : d = u);
+              } : y = u);
             }
-          const m = f.values.find(
-            (p) => p.key === u && p.modifiers.length === 0
+          const p = f.values.find(
+            (m) => m.key === u && m.modifiers.length === 0
           ), h = {
             type: "utility",
-            id: b("ut-"),
+            id: A("ut-"),
             parentId: e.id,
             name: n,
             value: u,
@@ -710,34 +721,34 @@ function ke(e, t) {
             modifiers: []
           };
           t._registry.set(h.id, h);
-          const K = v(
+          const W = v(
             h,
             t
           );
           if (h.declarations = s({
-            ...K,
-            value: d
-          }) ?? {}, E(
+            ...W,
+            value: y
+          }) ?? {}, _(
             h.declarations,
-            K,
+            W,
             h,
             t
-          ), m || (f.values.push({
+          ), p || (f.values.push({
             key: u,
-            value: d,
+            value: y,
             modifiers: []
           }), 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 m of a) {
+              const k = Array.isArray(m) ? m : [m], 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(
+                  (E) => E.key === u && E.modifiers.length === R.length && E.modifiers.every(
                     (Q, ee) => Q === R[ee]
                   )
                 ) || (f.values.push({
                   key: u,
-                  value: d,
+                  value: y,
                   modifiers: R
                 }), e.children.push(
                   ve(h, t, w)
@@ -754,7 +765,7 @@ function Me(e, t) {
   return function(n, s) {
     const o = t.themes.find((c) => c.name === n), i = o ?? {
       type: "theme",
-      id: b("th-"),
+      id: A("th-"),
       parentId: t.id,
       name: n,
       declarations: {},
@@ -772,25 +783,25 @@ function $e(e, t) {
       type: "recipe",
       ...n
     };
-    return s._runtime = xe(s, t), Ee(s, t), t.recipes.push(s), s;
+    return s._runtime = xe(s, t), _e(s, t), t.recipes.push(s), s;
   };
 }
-function W(e, t) {
+function H(e, t) {
   const r = e.autogenerate(t);
   return Object.keys(r)[0] ?? "default";
 }
-function O(e, t) {
+function S(e, t) {
   const r = {};
   for (const [n, s] of Object.entries(e))
     if (Z(s)) {
       const o = {};
       for (const [i, f] of Object.entries(s)) {
-        const c = D(t, i);
+        const c = C(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] = W(
+        o[i] = H(
           c,
           f
         );
@@ -799,25 +810,25 @@ function O(e, t) {
     } else if (typeof s == "boolean")
       r[n] = s;
     else {
-      const o = D(t, n);
+      const o = C(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] = W(o, s);
+      r[n] = H(o, s);
     }
   return r;
 }
 function xe(e, t) {
   const r = {};
-  if (e.base && (r.base = O(e.base, t)), e.variants) {
+  if (e.base && (r.base = S(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] = O(
+        c == null ? i[f] = null : i[f] = S(
           c,
           t
         );
@@ -827,17 +838,17 @@ function xe(e, t) {
   }
   return e.defaultVariants && (r.defaultVariants = { ...e.defaultVariants }), e.compoundVariants && (r.compoundVariants = e.compoundVariants.map((n) => ({
     match: { ...n.match },
-    ...n.css ? { css: O(n.css, t) } : {},
+    ...n.css ? { css: S(n.css, t) } : {},
     ...n.className ? { className: n.className } : {}
   }))), r;
 }
 function Z(e) {
-  return !A(e) && typeof e == "object" && e !== null;
+  return !b(e) && typeof e == "object" && e !== null;
 }
 function J(e) {
   return e.startsWith("&::") ? e.slice(3) : e.startsWith("&:") ? e.slice(2) : e;
 }
-function S(e, t) {
+function O(e, t) {
   const r = (n, s, o) => {
     let i = t.get(n);
     i || (i = [], t.set(n, i)), i.push({ value: s, modifiers: o });
@@ -850,28 +861,28 @@ function S(e, t) {
     } else
       r(n, s, []);
 }
-function D(e, t) {
+function C(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 Ee(e, t) {
+function _e(e, t) {
   const r = /* @__PURE__ */ new Map();
-  if (e.base && S(e.base, r), e.variants)
+  if (e.base && O(e.base, r), e.variants)
     for (const s of Object.values(e.variants))
       for (const o of Object.values(s))
-        S(
+        O(
           o,
           r
         );
   if (e.compoundVariants)
     for (const s of e.compoundVariants)
-      s.css && S(s.css, r);
+      s.css && O(s.css, r);
   const n = /* @__PURE__ */ new Map();
   for (const [s, o] of r) {
-    const i = D(t, s);
+    const i = C(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.`
@@ -898,7 +909,7 @@ function Ee(e, t) {
   }
 }
 function We(e) {
-  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);
+  const t = A("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: d, ref: y, css: p } = v(r, r);
   return {
     id: t,
     root: r,
@@ -910,9 +921,9 @@ function We(e) {
     theme: f,
     atRule: l,
     keyframes: u,
-    media: y,
-    ref: d,
-    css: m,
+    media: d,
+    ref: y,
+    css: p,
     options: n
   };
 }
@@ -920,13 +931,13 @@ export {
   ve as applyModifiers,
   Ue as capitalizeFirst,
   De as classNameToCssSelector,
-  I as createAtRuleFunction,
+  K as createAtRuleFunction,
   fe as createCssFunction,
   v as createDeclarationsCallbackContext,
   ge as createKeyframesFunction,
   he as createMediaFunction,
   we as createModifierFunction,
-  C as createPropertyValueResolver,
+  I as createPropertyValueResolver,
   $e as createRecipeFunction,
   q as createRefFunction,
   je as createRoot,
@@ -937,7 +948,7 @@ export {
   M as deepClone,
   Pe as defaultUtilitySelectorFn,
   oe as findVariableInScope,
-  b as generateRandomId,
+  A as generateRandomId,
   xe as generateRecipeRuntime,
   le as getModifier,
   Ie as getUtility,
@@ -946,32 +957,32 @@ export {
   te as isAtRule,
   T as isCSS,
   Te as isContainer,
-  L as isContainerInput,
+  G as isContainerInput,
   ie as isKeyReferenceValue,
   ne as isModifier,
   x as isObject,
   re as isPrimitiveTokenValue,
-  Se as isRecipe,
-  A as isRef,
+  Oe as isRecipe,
+  b as isRef,
   $ as isRoot,
-  _e as isSelector,
+  Fe as isSelector,
   Be as isStyleframe,
-  Oe as isTheme,
+  Se as isTheme,
   g as isToken,
   N as isTokenEqual,
   B as isTokenValue,
   Ne as isUtility,
-  H as isVariable,
+  L as isVariable,
   Ke as merge,
   Y as mergeContainers,
-  me as mergeThemesArray,
-  de as mergeVariablesArray,
-  z as parseAtReferences,
-  E as parseDeclarationsBlock,
-  Ee as processRecipeUtilities,
-  pe as rebuildRegistry,
+  pe as mergeThemesArray,
+  ye as mergeVariablesArray,
+  P as parseAtReferences,
+  _ as parseDeclarationsBlock,
+  _e as processRecipeUtilities,
+  me as rebuildRegistry,
   ae as rfdc,
   We as styleframe,
-  G as transformUtilityKey,
+  z as transformUtilityKey,
   ce as validateReference
 };

package/dist/styleframe.umd.cjs

@@ -1 +1 @@
-(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"})}));
+(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 P(e){return g(e,"variable")}function v(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 T(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){return J(e)||v(e)||T(e)||Array.isArray(e)&&e.every(_)}function Se(e){return A(e)&&"id"in e&&"children"in e&&"declarations"in e&&"variables"in e}function B(e){return A(e)&&"children"in e&&"declarations"in e&&"variables"in e}function Q(e){return typeof e=="string"&&e.startsWith("@")}function Te(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 D(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=x(o):a=`[${o}]`}return{[a]:i}}}const _e=({name:e,value:t,modifiers:r})=>`_${[...r,e,...t==="default"?[]:[t]].filter(Boolean).join(":")}`,I=/@([\w.-]+)/g;function E(e){const t=[];let r=0,n;for(I.lastIndex=0;(n=I.exec(e))!==null;){const c=e.slice(r,n.index);c!==""&&t.push(c),t.push({type:"reference",name:n[1]}),r=I.lastIndex}const s=e.slice(r);return s!==""&&t.push(s),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),t._usage.variables.add(i),{type:"reference",name:i}}const s=E(n);if(s.some(i=>v(i))){for(const i of s)v(i)&&t._usage.variables.add(i.name);return{type:"css",value:s}}return n}}function K(e,t){return function(n,s){const c=N(e,t),i=s!=null?c(s):s;if(P(n))return t._usage.variables.add(n.name),{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 t._usage.variables.add(n),{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(...E(o)),f<c.length){const d=c[f];P(d)?a.push(r(d)):Y(d)?a.push(d.rule):typeof d=="string"&&d.includes("@")?a.push(...E(d)):a.push(d)}return a},[])}}}function Ee(e){return e.charAt(0).toUpperCase()+e.slice(1)}function Ne(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 w(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 O(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)=>O(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&&O(e.fallback,t.fallback);if(T(e)&&T(t))return O(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 C(e,t){return function(n,s,c){const i={type:"at-rule",id:w("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)??{}:B(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=C(e,t);return function(s,c){return r("media",s,c)}}function ue(e,t){const r=C(e,t);return function(s,c){return r("keyframes",s,c)}}function le(e,t){return function(n,s){const c={type:"selector",id:w("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)??{}:B(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:w("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=C(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&&!_(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(_(i)){const a=s(i);a!==i&&(e[c]=a)}}return e}function ye(e,t,r){const n={...e,id:w("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:w("rt-"),declarations:{},utilities:[],modifiers:[],recipes:[],variables:[],children:[],themes:[],_registry:new Map,_usage:{variables:new Set}};return e._registry.set(e.id,e),e}function De(e,t){const r=D({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):D(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&&v(y))if(t.variables.some(p=>p.name===y.name))m=y;else{const p=Array.isArray(a.namespace)?a.namespace:[a.namespace];let U=!1;for(const $ of p){const j=`${$}.${l}`;if(j!==y.name&&t.variables.some(S=>S.name===j)){m={type:"reference",name:j},U=!0;break}}U||(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:w("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 U=Array.isArray(p)?p:[p],$=Ie(U);for(const j of $){const S=[...j.keys()];a.values.find(X=>X.key===l&&X.modifiers.length===S.length&&X.modifiers.every((We,He)=>We===S[He]))||(a.values.push({key:l,value:m,modifiers:S}),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:w("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!v(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=w("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=Ee,u.classNameToCssSelector=Ne,u.createAtRuleFunction=C,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=_e,u.findVariableInScope=ee,u.generateRandomId=w,u.generateRecipeRuntime=ve,u.getModifier=ie,u.getUtility=Ue,u.getVariable=Ce,u.hashValue=x,u.isAtRule=Y,u.isCSS=T,u.isContainer=Se,u.isContainerInput=B,u.isKeyReferenceValue=Q,u.isModifier=Z,u.isObject=A,u.isPrimitiveTokenValue=J,u.isRecipe=$e,u.isRef=v,u.isRoot=k,u.isSelector=ke,u.isStyleframe=Te,u.isTheme=Fe,u.isToken=g,u.isTokenEqual=O,u.isTokenValue=_,u.isUtility=Me,u.isVariable=P,u.merge=Be,u.mergeContainers=H,u.mergeThemesArray=oe,u.mergeVariablesArray=ce,u.parseAtReferences=E,u.parseDeclarationsBlock=F,u.processRecipeUtilities=Re,u.rebuildRegistry=ae,u.rfdc=re,u.styleframe=Ke,u.transformUtilityKey=D,u.validateReference=te,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));

package/package.json

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