@styleframe/core 3.3.0 → 3.5.0

package/dist/styleframe.js

@@ -1,46 +1,46 @@
 function x(e) {
   return typeof e == "object" && e !== null;
 }
-function g(e, t) {
+function b(e, t) {
   return x(e) && "type" in e && e.type === t;
 }
 function H(e) {
-  return g(e, "variable");
+  return b(e, "variable");
 }
-function A(e) {
-  return g(e, "reference");
+function g(e) {
+  return b(e, "reference");
 }
-function _e(e) {
-  return g(e, "selector");
+function Oe(e) {
+  return b(e, "selector");
 }
 function te(e) {
-  return g(e, "at-rule");
+  return b(e, "at-rule");
 }
-function Ne(e) {
-  return g(e, "utility");
+function Se(e) {
+  return b(e, "utility");
 }
 function ne(e) {
-  return g(e, "modifier");
+  return b(e, "modifier");
 }
-function T(e) {
-  return g(e, "css");
+function $(e) {
+  return b(e, "css");
 }
-function Oe(e) {
-  return g(e, "theme");
+function Te(e) {
+  return b(e, "theme");
 }
-function $(e) {
-  return g(e, "root");
+function M(e) {
+  return b(e, "root");
 }
-function Se(e) {
-  return g(e, "recipe");
+function Be(e) {
+  return b(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) || g(e) || $(e) || Array.isArray(e) && e.every(B);
 }
-function Te(e) {
+function Pe(e) {
   return x(e) && "id" in e && "children" in e && "declarations" in e && "variables" in e;
 }
 function L(e) {
@@ -49,8 +49,8 @@ function L(e) {
 function ie(e) {
   return typeof e == "string" && e.startsWith("@");
 }
-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 Ue(e) {
+  return x(e) && "id" in e && "root" in e && "variable" in e && "selector" in e && "recipe" in e && typeof e.id == "string" && M(e.root);
 }
 function se(e) {
   let t = 5381;
@@ -59,36 +59,36 @@ function se(e) {
   return (t >>> 0).toString(16).padStart(7, "0").slice(0, 7);
 }
 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;
+  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 c = i.slice(1), a = s.find(
-        (y) => c === y || c.startsWith(`${y}.`)
+      const o = i.slice(1), f = s.find(
+        (d) => o === d || o.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 = {
+      f ? (l = o, u = o.startsWith(`${f}.`) ? o.slice(f.length + 1) : o) : s.length > 0 ? (l = `${s[0]}.${o}`, u = o) : (l = o, u = o), a = r(u), i = {
         type: "reference",
         name: l
       };
-    } else if (A(i)) {
-      let c = i.name;
-      for (const a of s)
-        if (c.startsWith(`${a}.`)) {
-          c = c.slice(a.length + 1);
+    } else if (g(i)) {
+      let o = i.name;
+      for (const f of s)
+        if (o.startsWith(`${f}.`)) {
+          o = o.slice(f.length + 1);
           break;
         }
-      f = r(c);
+      a = r(o);
     } else {
-      const c = String(o).trim();
-      /\s/.test(c) ? f = se(c) : f = `[${c}]`;
+      const o = String(c).trim();
+      /\s/.test(o) ? a = se(o) : a = `[${o}]`;
     }
     return {
-      [f]: i
+      [a]: i
     };
   };
 }
-const Pe = ({
+const ce = ({
   name: e,
   value: t,
   modifiers: r
@@ -96,15 +96,28 @@ const Pe = ({
   ...r,
   e,
   ...t === "default" ? [] : [t]
-].filter(Boolean).join(":")}`, _ = /@([\w.-]+)/g;
+].filter(Boolean).join(":")}`;
+function oe(e, t) {
+  if (g(t)) {
+    e._usage.variables.add(t.name);
+    return;
+  }
+  if ($(t))
+    for (const r of t.value)
+      g(r) && e._usage.variables.add(r.name);
+}
+const N = /@([\w.-]+)/g;
 function z(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 (N.lastIndex = 0; (n = N.exec(e)) !== null; ) {
+    const c = e.slice(r, n.index);
+    c !== "" && t.push(c), t.push({ type: "reference", name: n[1] }), r = N.lastIndex;
+  }
+  const s = e.slice(r);
+  return s !== "" && t.push(s), t;
 }
-function oe(e, t, r) {
+function ae(e, t, r) {
   let n = t;
   for (; n; ) {
     if (n.variables.some((s) => s.name === e))
@@ -116,8 +129,8 @@ function oe(e, t, r) {
   }
   return !1;
 }
-function ce(e, t, r) {
-  if (!oe(e, t, r))
+function fe(e, t, r) {
+  if (!ae(e, t, r))
     throw new Error(
       `[styleframe] Variable "${e}" is not defined. Check that the variable exists before referencing it with "@${e}".`
     );
@@ -128,17 +141,22 @@ function C(e, t) {
       return n;
     if (ie(n) && /^@[\w.-]+$/.test(n)) {
       const i = n.slice(1);
-      return ce(i, e, t), { type: "reference", name: i };
+      return fe(i, e, t), t._usage.variables.add(i), { type: "reference", name: i };
     }
     const s = z(n);
-    return s.some((i) => A(i)) ? { type: "css", value: s } : n;
+    if (s.some((i) => g(i))) {
+      for (const i of s)
+        g(i) && t._usage.variables.add(i.name);
+      return { type: "css", value: s };
+    }
+    return n;
   };
 }
 function q(e, t) {
   return function(n, s) {
-    const o = C(e, t), i = s != null ? o(s) : s;
+    const c = C(e, t), i = s != null ? c(s) : s;
     if (H(n))
-      return {
+      return t._usage.variables.add(n.name), {
         type: "reference",
         name: n.name,
         fallback: i
@@ -147,32 +165,37 @@ 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
     };
   };
 }
-function fe(e, t) {
-  const r = q(e, t);
-  return function(s, ...o) {
+function ue(e, t) {
+  const r = q(e, t), n = (s) => {
+    const c = z(s);
+    for (const i of c)
+      g(i) && t._usage.variables.add(i.name);
+    return c;
+  };
+  return function(c, ...i) {
     return {
       type: "css",
-      value: s.reduce((f, c, a) => {
-        if (f.push(...z(c)), a < o.length) {
-          const l = o[a];
-          H(l) ? f.push(r(l)) : te(l) ? f.push(l.rule) : f.push(l);
+      value: c.reduce((o, f, l) => {
+        if (o.push(...n(f)), l < i.length) {
+          const u = i[l];
+          H(u) ? o.push(r(u)) : te(u) ? o.push(u.rule) : typeof u == "string" && u.includes("@") ? o.push(...n(u)) : o.push(u);
         }
-        return f;
+        return o;
       }, [])
     };
   };
 }
-function Ue(e) {
+function De(e) {
   return e.charAt(0).toUpperCase() + e.slice(1);
 }
-function De(e) {
+function Ce(e) {
   return `.${e.replace(/[[\].#()%,:/]/g, "\\$&")}`;
 }
 function j(e) {
@@ -185,154 +208,154 @@ function j(e) {
     e.byteLength / e.BYTES_PER_ELEMENT || 1
   );
 }
-function ae(e) {
+function le(e) {
   if (e = e || {}, e.circular)
-    return ue(e);
+    return de(e);
   const t = /* @__PURE__ */ new Map();
   if (t.set(Date, (i) => new Date(i)), t.set(
     Map,
-    (i, f) => new Map(n(Array.from(i), f))
+    (i, a) => new Map(n(Array.from(i), a))
   ), t.set(
     Set,
-    (i, f) => new Set(n(Array.from(i), f))
+    (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 ? o : s;
-  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);
+  return e.proto ? c : s;
+  function n(i, a) {
+    const o = Object.keys(i), f = Array.from({ length: o.length });
+    for (let l = 0; l < o.length; l++) {
+      const u = o[l], d = i[u];
+      typeof d != "object" || d === null ? f[u] = d : d.constructor !== Object && (r = t.get(d.constructor)) ? f[u] = r(d, a) : ArrayBuffer.isView(d) ? f[u] = j(d) : f[u] = a(d);
     }
-    return a;
+    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 f = {};
-    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] = j(a) : f[c] = s(a);
+    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] = j(f) : a[o] = s(f);
     }
-    return f;
+    return a;
   }
-  function o(i) {
+  function c(i) {
     if (typeof i != "object" || i === null) return i;
-    if (Array.isArray(i)) return n(i, o);
+    if (Array.isArray(i)) return n(i, c);
     if (i.constructor !== Object && (r = t.get(i.constructor)))
-      return r(i, o);
-    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] = j(a) : f[c] = o(a);
+      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] = j(f) : a[o] = c(f);
     }
-    return f;
+    return a;
   }
 }
-function ue(e) {
+function de(e) {
   const t = [], r = [], n = /* @__PURE__ */ new Map();
-  if (n.set(Date, (c) => new Date(c)), n.set(
+  if (n.set(Date, (o) => new Date(o)), n.set(
     Map,
-    (c, a) => new Map(o(Array.from(c), a))
+    (o, f) => new Map(c(Array.from(o), f))
   ), n.set(
     Set,
-    (c, a) => new Set(o(Array.from(c), a))
+    (o, f) => new Set(c(Array.from(o), f))
   ), e.constructorHandlers)
-    for (const c of e.constructorHandlers)
-      n.set(c[0], c[1]);
+    for (const o of e.constructorHandlers)
+      n.set(o[0], o[1]);
   let s;
-  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];
+  return e.proto ? a : i;
+  function c(o, f) {
+    const l = Object.keys(o), u = Array.from({ length: l.length });
+    for (let d = 0; d < l.length; d++) {
+      const y = l[d], m = o[y];
       if (typeof m != "object" || m === null)
-        u[d] = m;
+        u[y] = m;
       else if (m.constructor !== Object && (s = n.get(m.constructor)))
-        u[d] = s(m, a);
+        u[y] = s(m, f);
       else if (ArrayBuffer.isView(m))
-        u[d] = j(m);
+        u[y] = j(m);
       else {
         const h = t.indexOf(m);
-        h !== -1 ? u[d] = r[h] : u[d] = a(m);
+        h !== -1 ? u[y] = r[h] : u[y] = f(m);
       }
     }
     return u;
   }
-  function i(c) {
-    if (typeof c != "object" || c === null) return c;
-    if (Array.isArray(c)) return o(c, i);
-    if (c.constructor !== Object && (s = n.get(c.constructor)))
-      return s(c, i);
-    const a = {};
-    t.push(c), r.push(a);
-    for (const l in c) {
-      if (Object.hasOwnProperty.call(c, l) === !1) continue;
-      const u = c[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 l in o) {
+      if (Object.hasOwnProperty.call(o, l) === !1) continue;
+      const u = o[l];
       if (typeof u != "object" || u === null)
-        a[l] = u;
+        f[l] = u;
       else if (u.constructor !== Object && (s = n.get(u.constructor)))
-        a[l] = s(u, i);
+        f[l] = s(u, i);
       else if (ArrayBuffer.isView(u))
-        a[l] = j(u);
+        f[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 ? f[l] = r[d] : f[l] = i(u);
       }
     }
-    return t.pop(), r.pop(), a;
+    return t.pop(), r.pop(), f;
   }
-  function f(c) {
-    if (typeof c != "object" || c === null) return c;
-    if (Array.isArray(c)) return o(c, f);
-    if (c.constructor !== Object && (s = n.get(c.constructor)))
-      return s(c, f);
-    const a = {};
-    t.push(c), r.push(a);
-    for (const l in c) {
-      const u = c[l];
+  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 l in o) {
+      const u = o[l];
       if (typeof u != "object" || u === null)
-        a[l] = u;
+        f[l] = u;
       else if (u.constructor !== Object && (s = n.get(u.constructor)))
-        a[l] = s(u, f);
+        f[l] = s(u, a);
       else if (ArrayBuffer.isView(u))
-        a[l] = j(u);
+        f[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 ? f[l] = r[d] : f[l] = a(u);
       }
     }
-    return t.pop(), r.pop(), a;
+    return t.pop(), r.pop(), f;
   }
 }
-const M = ae();
-function b(e, t = 8) {
+const R = le();
+function v(e, t = 8) {
   const r = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
   let n = "";
   for (let s = 0; s < t; s++) {
-    const o = Math.floor(Math.random() * r.length);
-    n += r[o];
+    const c = Math.floor(Math.random() * r.length);
+    n += r[c];
   }
   return e ? `${e}${n}` : n;
 }
-function Ce(e, t) {
+function Ie(e, t) {
   const r = e.variables.find((n) => n.name === t);
   if (!r)
     throw new Error(`Variable "${t}" not found`);
   return r;
 }
-function Ie(e, t) {
+function Ke(e, t) {
   const r = e.utilities.find((n) => n.name === t);
   if (!r)
     throw new Error(`Utility "${t}" not found`);
   return r;
 }
-function le(e, t) {
+function ye(e, t) {
   const r = e.modifiers.find(
     (n) => n.key.includes(t)
   );
@@ -340,24 +363,24 @@ function le(e, t) {
     throw new Error(`Modifier "${t}" not found`);
   return r;
 }
-function N(e, t) {
+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) => N(r, t[n]));
+    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 (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);
+    if (g(e) && g(t))
+      return e.name === t.name && O(e.fallback, t.fallback);
+    if ($(e) && $(t))
+      return O(e.value, t.value);
   }
   return !1;
 }
 const X = "__licenseRequired";
-function ye(e) {
+function me(e) {
   P(e) || Object.defineProperty(e, X, {
     value: !0,
     writable: !1,
@@ -368,21 +391,21 @@ function ye(e) {
 function P(e) {
   return Object.prototype.hasOwnProperty.call(e, X);
 }
-function de(e, t) {
+function pe(e, t) {
   const r = [...e];
   for (const n of t) {
     const s = r.find(
-      (o) => o.name === n.name
+      (c) => c.name === n.name
     );
     s ? s.value = n.value : r.push(n);
   }
   return r;
 }
-function me(e, t) {
+function he(e, t) {
   const r = [...e];
   for (const n of t) {
     const s = r.find(
-      (o) => o.name === n.name
+      (c) => c.name === n.name
     );
     s ? Object.assign(
       s,
@@ -393,7 +416,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 = pe(e.variables, t.variables) : n === "declarations" ? r.declarations = { ...e.declarations, ...t.declarations } : n === "themes" && M(r) && M(e) && M(t) ? r.themes = he(e.themes, t.themes) : Array.isArray(e[n]) && (r[n] = e[n].concat(
       t[n]
     )), r),
     {
@@ -406,25 +429,25 @@ 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 && U(r.children, t));
 }
-function pe(e) {
+function ge(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), U(t.children, e);
 }
-function Ke(e, ...t) {
+function We(e, ...t) {
   return t.reduce((r, n) => {
     const s = {
       ...r,
       root: Y(r.root, n.root)
     };
-    return pe(s.root), (P(r) || P(n)) && ye(s), s;
+    return ge(s.root), (P(r) || P(n)) && me(s), s;
   }, e);
 }
 function I(e, t) {
-  return function(n, s, o) {
+  return function(n, s, c) {
     const i = {
       type: "at-rule",
-      id: b("ar-"),
+      id: v("ar-"),
       parentId: e.id,
       identifier: n,
       rule: s,
@@ -433,107 +456,107 @@ function I(e, t) {
       children: []
     };
     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(
+    const a = w(i, t);
+    return typeof c == "function" ? i.declarations = c(a) ?? {} : L(c) ? (i.variables = c.variables, i.declarations = c.declarations, i.children = c.children) : c && (i.declarations = c), E(
       i.declarations,
-      f,
+      a,
       i,
       t
     ), e.children.push(i), i;
   };
 }
-function he(e, t) {
+function be(e, t) {
   const r = I(e, t);
-  return function(s, o) {
-    return r("media", s, o);
+  return function(s, c) {
+    return r("media", s, c);
   };
 }
-function ge(e, t) {
+function ve(e, t) {
   const r = I(e, t);
-  return function(s, o) {
-    return r("keyframes", s, o);
+  return function(s, c) {
+    return r("keyframes", s, c);
   };
 }
-function be(e, t) {
+function Ae(e, t) {
   return function(n, s) {
-    const o = {
+    const c = {
       type: "selector",
-      id: b("sel-"),
+      id: v("sel-"),
       parentId: e.id,
       query: n,
       declarations: {},
       variables: [],
       children: []
     };
-    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(
-      o.declarations,
+    t._registry.set(c.id, c);
+    const i = w(c, t);
+    return typeof s == "function" ? c.declarations = s(i) ?? {} : L(s) ? (c.variables = s.variables, c.declarations = s.declarations, c.children = s.children) : c.declarations = s, E(
+      c.declarations,
       i,
-      o,
+      c,
       t
-    ), e.children.push(o), o;
+    ), e.children.push(c), c;
   };
 }
-function Ae(e, t) {
-  return function(n, s, o = {
+function we(e, t) {
+  return function(n, s, c = {
     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, o = C(e, t)(s), f = e.variables.find(
       (u) => u.name === i
     );
-    if (o.default && a)
-      return a;
-    if (a)
-      return a.value = c, a;
+    if (c.default && f)
+      return f;
+    if (f)
+      return f.value = o, f;
     const l = {
       type: "variable",
-      id: b("var-"),
+      id: v("var-"),
       parentId: e.id,
       name: i,
-      value: c
+      value: o
     };
     return e.variables.push(l), l;
   };
 }
-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);
+function w(e, t) {
+  const r = we(e, t), n = Ae(e, t), s = I(e, t), c = ve(t, t), i = be(e, t), a = q(t, t), o = ue(t, t);
   return {
     variable: r,
     selector: n,
-    keyframes: o,
+    keyframes: c,
     atRule: s,
     media: i,
-    ref: f,
-    css: c
+    ref: a,
+    css: o
   };
 }
 function E(e, t, r, n) {
-  for (const o in e)
-    if (o.startsWith("@")) {
-      const i = e[o];
+  for (const c in e)
+    if (c.startsWith("@")) {
+      const i = e[c];
       if (typeof i == "object" && i !== null && !B(i)) {
-        const f = o.replace(/^@(\w+).*/, "$1"), c = o.replace(`@${f}`, "").trim();
-        t.atRule(f, c, i), delete e[o];
+        const a = c.replace(/^@(\w+).*/, "$1"), o = c.replace(`@${a}`, "").trim();
+        t.atRule(a, o, i), delete e[c];
       }
-    } 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]);
+    } 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 = C(r, n);
-  for (const o in e) {
-    const i = e[o];
+  for (const c in e) {
+    const i = e[c];
     if (B(i)) {
-      const f = s(i);
-      f !== i && (e[o] = f);
+      const a = s(i);
+      a !== i && (e[c] = a);
     }
   }
   return e;
 }
-function ve(e, t, r) {
+function je(e, t, r) {
   const n = {
     ...e,
-    id: b("ut-"),
+    id: v("ut-"),
     parentId: e.parentId,
     declarations: { ...e.declarations },
     variables: [...e.variables],
@@ -542,19 +565,19 @@ function ve(e, t, r) {
   };
   if (t._registry.set(n.id, n), r.size > 0) {
     const s = [...r.values()];
-    let o = M(e.declarations);
+    let c = R(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)
+    for (let a = s.length - 1; a >= 0; a--) {
+      const o = w(n, t), f = s[a]?.factory({
+        ...o,
+        declarations: R(c),
+        variables: R(e.variables),
+        children: R(e.children)
       });
-      a && (o = a);
+      f && (c = f);
     }
-    n.declarations = o;
-    const i = v(n, t);
+    n.declarations = c;
+    const i = w(n, t);
     E(
       n.declarations,
       i,
@@ -564,20 +587,20 @@ function ve(e, t, r) {
   }
   return n;
 }
-function we(e, t) {
+function Ve(e, t) {
   return function(n, s) {
-    const o = {
+    const c = {
       type: "modifier",
       key: Array.isArray(n) ? n : [n],
       factory: s
     };
-    return t.modifiers.push(o), o;
+    return t.modifiers.push(c), c;
   };
 }
-function je() {
+function ke() {
   const e = {
     type: "root",
-    id: b("rt-"),
+    id: v("rt-"),
     declarations: {},
     utilities: [],
     modifiers: [],
@@ -585,21 +608,25 @@ function je() {
     variables: [],
     children: [],
     themes: [],
-    _registry: /* @__PURE__ */ new Map()
+    _registry: /* @__PURE__ */ new Map(),
+    _usage: {
+      variables: /* @__PURE__ */ new Set(),
+      utilities: /* @__PURE__ */ new Set()
+    }
   };
   return e._registry.set(e.id, e), e;
 }
-function Ve(e, t) {
+function _e(e, t) {
   const r = G({ namespace: e });
   return (n) => {
     if (typeof n == "string" && n[0] === "@") {
-      const s = n.slice(1), o = e.find(
+      const s = n.slice(1), c = e.find(
         (i) => s === i || s.startsWith(`${i}.`)
       );
-      if (o) {
-        const i = s.slice(o.length + 1) || s;
-        if (t.variables.some((f) => f.name === s))
-          return {
+      if (c) {
+        const i = s.slice(c.length + 1) || s;
+        if (t.variables.some((a) => a.name === s))
+          return t._usage.variables.add(s), {
             [i]: {
               type: "reference",
               name: s
@@ -607,17 +634,17 @@ function Ve(e, t) {
           };
       } else {
         for (const i of e) {
-          const f = `${i}.${s}`;
-          if (t.variables.some((c) => c.name === f))
-            return {
+          const a = `${i}.${s}`;
+          if (t.variables.some((o) => o.name === a))
+            return t._usage.variables.add(a), {
               [s]: {
                 type: "reference",
-                name: f
+                name: a
               }
             };
         }
         if (t.variables.some((i) => i.name === s))
-          return {
+          return t._usage.variables.add(s), {
             [s]: {
               type: "reference",
               name: s
@@ -635,72 +662,74 @@ function Re(e) {
     if (!ne(r)) continue;
     const n = [];
     for (const s of r.key)
-      for (const o of t) {
-        const i = new Map(o);
+      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 ke(e, t) {
-  return function(n, s, o = {}) {
-    const i = t.utilities.find((c) => c.name === n);
+function Me(e, t) {
+  return function(n, s, c = {}) {
+    const i = t.utilities.find((o) => o.name === n);
     if (i)
       return i.create;
-    const f = {
+    const a = {
       type: "utility",
       name: n,
       factory: s,
       values: [],
-      autogenerate: o.autogenerate ?? (Array.isArray(o.namespace) ? Ve(o.namespace, t) : G(
-        o.namespace ? { namespace: o.namespace } : void 0
+      autogenerate: c.autogenerate ?? (Array.isArray(c.namespace) ? _e(c.namespace, t) : G(
+        c.namespace ? { namespace: c.namespace } : void 0
       )),
-      namespace: o.namespace,
-      create: (c, a = []) => {
-        let l = c;
-        if (Array.isArray(c)) {
+      namespace: c.namespace,
+      create: (o, f = []) => {
+        let l = o;
+        if (Array.isArray(o)) {
           l = {};
-          for (const u of c) {
-            const y = f.autogenerate(u);
+          for (const u of o) {
+            const d = a.autogenerate(u);
+            for (const y of Object.values(d))
+              oe(t, y);
             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 p = d.slice(1);
+            !Array.isArray(l) && p in l && (y = l[p]);
           }
-          if (f.namespace && A(y))
-            if (t.variables.some((p) => p.name === y.name))
-              d = y;
+          if (a.namespace && g(d))
+            if (t.variables.some((p) => p.name === d.name))
+              y = d, t._usage.variables.add(d.name);
             else {
-              const p = Array.isArray(f.namespace) ? f.namespace : [f.namespace];
-              let k = !1;
+              const p = Array.isArray(a.namespace) ? a.namespace : [a.namespace];
+              let _ = !1;
               for (const V of p) {
-                const w = `${V}.${u}`;
-                if (w !== y.name && t.variables.some((R) => R.name === w)) {
-                  d = {
+                const A = `${V}.${u}`;
+                if (A !== d.name && t.variables.some((k) => k.name === A)) {
+                  y = {
                     type: "reference",
-                    name: w
-                  }, k = !0;
+                    name: A
+                  }, t._usage.variables.add(A), _ = !0;
                   break;
                 }
               }
-              k || (t.variables.some((V) => V.name === u) ? d = {
+              _ || (t.variables.some((V) => V.name === u) ? (y = {
                 type: "reference",
                 name: u
-              } : d = u);
+              }, t._usage.variables.add(u)) : y = u);
             }
-          const m = f.values.find(
+          const m = a.values.find(
             (p) => p.key === u && p.modifiers.length === 0
           ), h = {
             type: "utility",
-            id: b("ut-"),
+            id: v("ut-"),
             parentId: e.id,
             name: n,
             value: u,
@@ -710,115 +739,115 @@ function ke(e, t) {
             modifiers: []
           };
           t._registry.set(h.id, h);
-          const K = v(
+          const K = w(
             h,
             t
           );
           if (h.declarations = s({
             ...K,
-            value: d
+            value: y
           }) ?? {}, E(
             h.declarations,
             K,
             h,
             t
-          ), m || (f.values.push({
+          ), m || (a.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 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]
+          }), e.children.push(h)), f && f.length > 0)
+            for (const p of f) {
+              const _ = Array.isArray(p) ? p : [p], V = Re(_);
+              for (const A of V) {
+                const k = [...A.keys()];
+                a.values.find(
+                  (F) => F.key === u && F.modifiers.length === k.length && F.modifiers.every(
+                    (Q, ee) => Q === k[ee]
                   )
-                ) || (f.values.push({
+                ) || (a.values.push({
                   key: u,
-                  value: d,
-                  modifiers: R
+                  value: y,
+                  modifiers: k
                 }), e.children.push(
-                  ve(h, t, w)
+                  je(h, t, A)
                 ));
               }
             }
         }
       }
     };
-    return t.utilities.push(f), f.create;
+    return t.utilities.push(a), a.create;
   };
 }
-function Me(e, t) {
+function $e(e, t) {
   return function(n, s) {
-    const o = t.themes.find((c) => c.name === n), i = o ?? {
+    const c = t.themes.find((o) => o.name === n), i = c ?? {
       type: "theme",
-      id: b("th-"),
+      id: v("th-"),
       parentId: t.id,
       name: n,
       declarations: {},
       variables: [],
       children: []
     };
-    o || (t._registry.set(i.id, i), t.themes.push(i));
-    const f = v(i, t);
-    return s && s(f), i;
+    c || (t._registry.set(i.id, i), t.themes.push(i));
+    const a = w(i, t);
+    return s && s(a), i;
   };
 }
-function $e(e, t) {
+function xe(e, t) {
   return function(n) {
     const s = {
       type: "recipe",
       ...n
     };
-    return s._runtime = xe(s, t), Ee(s, t), t.recipes.push(s), s;
+    return s._runtime = Ee(s, t), Fe(s, t), t.recipes.push(s), s;
   };
 }
 function W(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);
-        if (!c)
+      const c = {};
+      for (const [i, a] of Object.entries(s)) {
+        const o = D(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.`
           );
-        o[i] = W(
-          c,
-          f
+        c[i] = W(
+          o,
+          a
         );
       }
-      r[J(n)] = o;
+      r[J(n)] = c;
     } else if (typeof s == "boolean")
       r[n] = s;
     else {
-      const o = D(t, n);
-      if (!o)
+      const c = D(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] = W(o, s);
+      r[n] = W(c, s);
     }
   return r;
 }
-function xe(e, t) {
+function Ee(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)) {
+    for (const [s, c] of Object.entries(e.variants)) {
       const i = {};
-      for (const [f, c] of Object.entries(
-        o
+      for (const [a, o] of Object.entries(
+        c
       ))
-        c == null ? i[f] = null : i[f] = O(
-          c,
+        o == null ? i[a] = null : i[a] = S(
+          o,
           t
         );
       n[s] = i;
@@ -827,26 +856,26 @@ 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 !g(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) {
-  const r = (n, s, o) => {
+function T(e, t) {
+  const r = (n, s, c) => {
     let i = t.get(n);
-    i || (i = [], t.set(n, i)), i.push({ value: s, modifiers: o });
+    i || (i = [], t.set(n, i)), i.push({ value: s, modifiers: c });
   };
   for (const [n, s] of Object.entries(e))
     if (Z(s)) {
-      const o = J(n).split(":");
-      for (const [i, f] of Object.entries(s))
-        r(i, f, o);
+      const c = J(n).split(":");
+      for (const [i, a] of Object.entries(s))
+        r(i, a, c);
     } else
       r(n, s, []);
 }
@@ -857,121 +886,131 @@ function D(e, t) {
   const n = t.replace(/[A-Z]/g, (s) => `-${s.toLowerCase()}`);
   return e.utilities.find((s) => s.name === n);
 }
-function Ee(e, t) {
+function Fe(e, t) {
   const r = /* @__PURE__ */ new Map();
-  if (e.base && S(e.base, r), e.variants)
+  if (e.base && T(e.base, r), e.variants)
     for (const s of Object.values(e.variants))
-      for (const o of Object.values(s))
-        S(
-          o,
+      for (const c of Object.values(s))
+        T(
+          c,
           r
         );
   if (e.compoundVariants)
     for (const s of e.compoundVariants)
-      s.css && S(s.css, r);
+      s.css && T(s.css, r);
   const n = /* @__PURE__ */ new Map();
-  for (const [s, o] of r) {
+  for (const [s, c] of r) {
     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.`
       );
-    for (const f of o) {
-      const c = [];
-      for (const a of f.modifiers) {
-        if (!n.has(a))
+    for (const a of c) {
+      const o = [];
+      for (const l of a.modifiers) {
+        if (!n.has(l))
           try {
-            n.set(a, le(t, a));
+            n.set(l, ye(t, l));
           } catch {
             throw new Error(
-              `[styleframe] Modifier "${a}" not found in registry. Make sure the modifier is registered before using it in a recipe.`
+              `[styleframe] Modifier "${l}" not found in registry. Make sure the modifier is registered before using it in a recipe.`
             );
           }
-        const l = n.get(a);
-        l && c.push(l);
+        const u = n.get(l);
+        u && o.push(u);
       }
+      const f = i.autogenerate(a.value);
+      for (const l of Object.keys(f))
+        t._usage.utilities.add(
+          ce({
+            name: i.name,
+            value: l,
+            modifiers: a.modifiers
+          })
+        );
       i.create(
-        [f.value],
-        c.length > 0 ? c.length > 1 ? [c] : c : void 0
+        [a.value],
+        o.length > 0 ? o.length > 1 ? [o] : o : void 0
       );
     }
   }
 }
-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);
+function He(e) {
+  const t = v("sf-"), r = ke(), n = { ...e }, s = Me(r, r), c = Ve(r, r), i = xe(r, r), a = $e(r, r), { variable: o, selector: f, atRule: l, keyframes: u, media: d, ref: y, css: m } = w(r, r);
   return {
     id: t,
     root: r,
-    variable: c,
-    selector: a,
+    variable: o,
+    selector: f,
     utility: s,
-    modifier: o,
+    modifier: c,
     recipe: i,
-    theme: f,
+    theme: a,
     atRule: l,
     keyframes: u,
-    media: y,
-    ref: d,
+    media: d,
+    ref: y,
     css: m,
     options: n
   };
 }
 export {
-  ve as applyModifiers,
-  Ue as capitalizeFirst,
-  De as classNameToCssSelector,
+  je as applyModifiers,
+  De as capitalizeFirst,
+  Ce as classNameToCssSelector,
   I as createAtRuleFunction,
-  fe as createCssFunction,
-  v as createDeclarationsCallbackContext,
-  ge as createKeyframesFunction,
-  he as createMediaFunction,
-  we as createModifierFunction,
+  ue as createCssFunction,
+  w as createDeclarationsCallbackContext,
+  ve as createKeyframesFunction,
+  be as createMediaFunction,
+  Ve as createModifierFunction,
   C as createPropertyValueResolver,
-  $e as createRecipeFunction,
+  xe as createRecipeFunction,
   q as createRefFunction,
-  je as createRoot,
-  be as createSelectorFunction,
-  Me as createThemeFunction,
-  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,
-  Ce as getVariable,
+  ke as createRoot,
+  Ae as createSelectorFunction,
+  $e as createThemeFunction,
+  Me as createUtilityFunction,
+  we as createVariableFunction,
+  R as deepClone,
+  ce as defaultUtilitySelectorFn,
+  ae as findVariableInScope,
+  v as generateRandomId,
+  Ee as generateRecipeRuntime,
+  ye as getModifier,
+  Ke as getUtility,
+  Ie as getVariable,
   se as hashValue,
   te as isAtRule,
-  T as isCSS,
-  Te as isContainer,
+  $ as isCSS,
+  Pe as isContainer,
   L as isContainerInput,
   ie as isKeyReferenceValue,
   ne as isModifier,
   x as isObject,
   re as isPrimitiveTokenValue,
-  Se as isRecipe,
-  A as isRef,
-  $ as isRoot,
-  _e as isSelector,
-  Be as isStyleframe,
-  Oe as isTheme,
-  g as isToken,
-  N as isTokenEqual,
+  Be as isRecipe,
+  g as isRef,
+  M as isRoot,
+  Oe as isSelector,
+  Ue as isStyleframe,
+  Te as isTheme,
+  b as isToken,
+  O as isTokenEqual,
   B as isTokenValue,
-  Ne as isUtility,
+  Se as isUtility,
   H as isVariable,
-  Ke as merge,
+  We as merge,
   Y as mergeContainers,
-  me as mergeThemesArray,
-  de as mergeVariablesArray,
+  he as mergeThemesArray,
+  pe as mergeVariablesArray,
   z as parseAtReferences,
   E as parseDeclarationsBlock,
-  Ee as processRecipeUtilities,
-  pe as rebuildRegistry,
-  ae as rfdc,
-  We as styleframe,
+  Fe as processRecipeUtilities,
+  ge as rebuildRegistry,
+  le as rfdc,
+  He as styleframe,
+  oe as trackReferenceUsage,
   G as transformUtilityKey,
-  ce as validateReference
+  fe as validateReference
 };