clava 0.4.1 → 0.5.0

package/tests/refine.test.ts

@@ -71,7 +71,7 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("refine re-runs when setDefaultVariants changes variants", () => {
+    test("refine re-runs when computed defaultVariants change variants", () => {
       const component = getModeComponent(
         mode,
         cv({
@@ -79,11 +79,12 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          refine: ({ variants, setDefaultVariants, addClass }) => {
-            setDefaultVariants({ color: "red" });
-            if (variants.color === "red") {
-              setDefaultVariants({ size: "lg" });
-            }
+          defaultVariants: {
+            color: () => "red" as const,
+            size: ({ defaultValue, variants }) =>
+              variants.color === "red" ? "lg" : defaultValue,
+          },
+          refine: ({ variants, addClass }) => {
             if (variants.size === "lg") {
               addClass("refine-lg");
             }
@@ -96,7 +97,7 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("refine converges with NaN setDefaultVariants", () => {
+    test("refine converges with NaN computed defaultVariants", () => {
       const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
       const component = getModeComponent(
         mode,
@@ -104,8 +105,10 @@ for (const config of Object.values(CONFIGS)) {
           variants: {
             value: (value: number) => (Number.isNaN(value) ? "nan" : null),
           },
-          refine: ({ variants, setDefaultVariants, addClass }) => {
-            setDefaultVariants({ value: Number.NaN });
+          defaultVariants: {
+            value: () => Number.NaN,
+          },
+          refine: ({ variants, addClass }) => {
             if (Number.isNaN(variants.value)) {
               addClass("refine-nan");
             }
@@ -125,7 +128,110 @@ for (const config of Object.values(CONFIGS)) {
       }
     });
 
-    test("refine with setDefaultVariants", () => {
+    test("computed defaultVariants can clear inherited defaults", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      const base = cv({
+        variants: {
+          invert: { true: "invert" },
+          offset: (value: boolean | undefined) =>
+            value ? "offset" : undefined,
+          push: (value: number | undefined) =>
+            value === undefined ? undefined : `push-${value}`,
+        },
+        defaultVariants: {
+          offset: ({ variants }) => !variants.invert,
+          push: ({ variants }) => (variants.invert ? 20 : undefined),
+        },
+      });
+      const component = getModeComponent(mode, cv({ extend: [base] }));
+
+      try {
+        const props = component();
+        expect(getStyleClass(props)).toEqual({
+          class: cls("offset"),
+        });
+        expect(component.getVariants()).toEqual({
+          offset: true,
+        });
+        expect(warn).not.toHaveBeenCalled();
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
+    test("computed defaultVariants use inherited defaults as defaultValue", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      const calls = {
+        layer: 0,
+        frame: 0,
+        control: 0,
+      };
+      const layer = cv({
+        variants: {
+          layer: { true: "layer" },
+          invert: { true: "invert" },
+          offset: (value: boolean | undefined) =>
+            value ? "offset" : undefined,
+          push: (value: number | undefined) =>
+            value === undefined ? undefined : `push-${value}`,
+        },
+        defaultVariants: {
+          layer: true,
+          offset: ({ defaultValue, variants }) => {
+            calls.layer += 1;
+            return variants.invert ? false : defaultValue;
+          },
+          push: ({ variants }) => (variants.invert ? 20 : undefined),
+        },
+      });
+      const frame = cv({
+        extend: [layer],
+        variants: {
+          frame: { true: "frame" },
+        },
+        defaultVariants: {
+          frame: true,
+        },
+        refine: () => {
+          calls.frame += 1;
+        },
+      });
+      const control = cv({
+        extend: [frame],
+        variants: {
+          control: { true: "control" },
+        },
+        defaultVariants: {
+          control: true,
+          offset: true,
+        },
+        refine: () => {
+          calls.control += 1;
+        },
+      });
+      const component = getModeComponent(mode, cv({ extend: [control] }));
+
+      try {
+        const props = component();
+        expect(getStyleClass(props)).toEqual({
+          class: cls("layer offset frame control"),
+        });
+        expect(component.getVariants()).toEqual({
+          layer: true,
+          offset: true,
+          frame: true,
+          control: true,
+        });
+        expect(calls.layer).toBeGreaterThan(0);
+        expect(calls.frame).toBeGreaterThan(0);
+        expect(calls.control).toBeGreaterThan(0);
+        expect(warn).not.toHaveBeenCalled();
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
+    test("computed defaultVariants", () => {
       const component = getModeComponent(
         mode,
         cv({
@@ -133,10 +239,9 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          refine: ({ variants, setDefaultVariants }) => {
-            if (variants.size === "lg") {
-              setDefaultVariants({ color: "red" });
-            }
+          defaultVariants: {
+            color: ({ variants, defaultValue }) =>
+              variants.size === "lg" ? "red" : defaultValue,
           },
         }),
       );
@@ -144,7 +249,7 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("lg red") });
     });
 
-    test("refine setDefaultVariants does not override props", () => {
+    test("computed defaultVariants do not override props", () => {
       const component = getModeComponent(
         mode,
         cv({
@@ -152,8 +257,8 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          refine: ({ setDefaultVariants }) => {
-            setDefaultVariants({ color: "red" });
+          defaultVariants: {
+            color: () => "red" as const,
           },
         }),
       );
@@ -161,25 +266,7 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("lg blue") });
     });
 
-    test("refine setDefaultVariants overrides defaultVariants", () => {
-      const component = getModeComponent(
-        mode,
-        cv({
-          variants: {
-            size: { sm: "sm", lg: "lg" },
-            color: { red: "red", blue: "blue" },
-          },
-          defaultVariants: { size: "sm", color: "red" },
-          refine: ({ setDefaultVariants }) => {
-            setDefaultVariants({ color: "blue" });
-          },
-        }),
-      );
-      const props = component();
-      expect(getStyleClass(props)).toEqual({ class: cls("sm blue") });
-    });
-
-    test("refine setDefaultVariants overrides extended defaultVariants", () => {
+    test("computed defaultVariants override extended defaultVariants", () => {
       const base = cv({
         variants: { color: { red: "red", blue: "blue" } },
         defaultVariants: { color: "red" },
@@ -189,9 +276,9 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { size: { sm: "sm", lg: "lg" } },
-          defaultVariants: { size: "sm" },
-          refine: ({ setDefaultVariants }) => {
-            setDefaultVariants({ color: "blue" });
+          defaultVariants: {
+            size: "sm",
+            color: () => "blue" as const,
           },
         }),
       );
@@ -199,31 +286,11 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("blue sm") });
     });
 
-    test("refine setDefaultVariants overrides child defaultVariants", () => {
-      const base = cv({
-        variants: { size: { sm: "sm", lg: "lg" } },
-      });
-      const component = getModeComponent(
-        mode,
-        cv({
-          extend: [base],
-          variants: { color: { red: "red", blue: "blue" } },
-          defaultVariants: { size: "sm", color: "red" },
-          refine: ({ setDefaultVariants }) => {
-            setDefaultVariants({ size: "lg" });
-          },
-        }),
-      );
-      const props = component();
-      expect(getStyleClass(props)).toEqual({ class: cls("lg red") });
-    });
-
-    test("refine setDefaultVariants from parent overrides child defaultVariants", () => {
+    test("parent computed defaultVariants can override child defaultVariants", () => {
       const base = cv({
         variants: { size: { sm: "sm", lg: "lg" } },
-        defaultVariants: { size: "sm" },
-        refine: ({ setDefaultVariants }) => {
-          setDefaultVariants({ size: "lg" });
+        defaultVariants: {
+          size: () => "lg" as const,
         },
       });
       const component = getModeComponent(
@@ -238,13 +305,12 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("lg red") });
     });
 
-    test("refine setDefaultVariants from parent overrides child defaultVariants based on props", () => {
+    test("parent computed defaultVariants can depend on child defaults", () => {
       const base = cv({
-        variants: { size: { sm: "sm", lg: "lg" }, enabled: "" },
-        defaultVariants: { size: "sm" },
-        refine: ({ variants, setDefaultVariants }) => {
-          if (!variants.enabled) return;
-          setDefaultVariants({ size: "lg" });
+        variants: { size: { sm: "sm", lg: "lg" }, large: "" },
+        defaultVariants: {
+          size: ({ defaultValue, variants }) =>
+            variants.large ? "lg" : defaultValue,
         },
       });
       const component = getModeComponent(
@@ -252,97 +318,68 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { color: { red: "red", blue: "blue" } },
-          defaultVariants: { size: "sm", color: "red" },
+          defaultVariants: { size: "sm", color: "red", large: true },
         }),
       );
-      const props = component({ enabled: true });
+      const props = component();
       expect(getStyleClass(props)).toEqual({ class: cls("lg red") });
     });
 
-    test("refine receives default variants from child", () => {
-      const base = cv({
-        variants: { size: { sm: "sm", lg: "lg" }, large: "" },
-        defaultVariants: { size: "sm" },
-        refine: ({ variants, setDefaultVariants }) => {
-          if (variants.large) {
-            setDefaultVariants({ size: "lg" });
-          }
+    test("computed defaultVariants preserve intermediate defaults", () => {
+      const parent = cv({
+        variants: { size: { sm: "sm", lg: "lg" } },
+        defaultVariants: {
+          size: ({ defaultValue, variants }) =>
+            variants.size ? defaultValue : "lg",
         },
       });
-      const component = getModeComponent(
-        mode,
-        cv({
-          extend: [base],
-          variants: { color: { red: "red", blue: "blue" } },
-          defaultVariants: { size: "sm", color: "red", large: true },
-        }),
-      );
+      const child = cv({ extend: [parent], defaultVariants: { size: "sm" } });
+      const component = getModeComponent(mode, cv({ extend: [child] }));
       const props = component();
-      expect(getStyleClass(props)).toEqual({ class: cls("lg red") });
+      expect(getStyleClass(props)).toEqual({ class: cls("sm") });
     });
 
-    test("refine receives default variants from grandchild", () => {
+    test("child computed defaultVariants override parent computed defaultVariants", () => {
       const base = cv({
-        variants: { size: { sm: "sm", lg: "lg" }, large: "" },
-        defaultVariants: { size: "sm" },
-        refine: ({ variants, setDefaultVariants }) => {
-          if (variants.large) {
-            setDefaultVariants({ size: "lg" });
-          }
+        variants: { size: { sm: "sm", lg: "lg" } },
+        defaultVariants: {
+          size: () => "lg" as const,
         },
       });
-      const base2 = cv({ extend: [base] });
       const component = getModeComponent(
         mode,
         cv({
-          extend: [base2],
+          extend: [base],
           variants: { color: { red: "red", blue: "blue" } },
-          defaultVariants: { size: "sm", color: "red", large: true },
+          defaultVariants: {
+            size: () => "sm" as const,
+            color: "red",
+          },
         }),
       );
       const props = component();
-      expect(getStyleClass(props)).toEqual({ class: cls("lg red") });
-    });
-
-    test("refine receives default variants from intermediate component", () => {
-      const parent = cv({
-        variants: { size: { sm: "sm", lg: "lg" } },
-        refine: ({ variants, setDefaultVariants }) => {
-          if (!variants.size) {
-            setDefaultVariants({ size: "lg" });
-          }
-        },
-      });
-      const child = cv({ extend: [parent], defaultVariants: { size: "sm" } });
-      const component = getModeComponent(mode, cv({ extend: [child] }));
-      const props = component();
-      expect(getStyleClass(props)).toEqual({ class: cls("sm") });
+      expect(getStyleClass(props)).toEqual({ class: cls("sm red") });
     });
 
-    test("child refine setDefaultVariants overrides parent refine setDefaultVariants", () => {
+    test("child computed defaultVariants can preserve parent computed defaultVariants", () => {
       const base = cv({
         variants: { size: { sm: "sm", lg: "lg" } },
-        defaultVariants: { size: "sm" },
-        refine: ({ setDefaultVariants }) => {
-          setDefaultVariants({ size: "lg" });
+        defaultVariants: {
+          size: () => "lg" as const,
         },
       });
       const component = getModeComponent(
         mode,
         cv({
           extend: [base],
-          variants: { color: { red: "red", blue: "blue" } },
-          defaultVariants: { size: "sm", color: "red" },
-          refine: ({ setDefaultVariants }) => {
-            setDefaultVariants({ size: "sm" });
+          defaultVariants: {
+            size: ({ defaultValue }) => defaultValue,
           },
         }),
       );
       const props = component();
-      // Order: parent defaultVariants (sm) -> child defaultVariants (sm)
-      //     -> parent refine.setDefaultVariants (lg)
-      //     -> child refine.setDefaultVariants (sm)
-      expect(getStyleClass(props)).toEqual({ class: cls("sm red") });
+      expect(getStyleClass(props)).toEqual({ class: cls("lg") });
+      expect(component.getVariants()).toEqual({ size: "lg" });
     });
 
     test("refine in extended component does not see foreign variant keys", () => {
@@ -365,6 +402,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { color: { red: "red", blue: "blue" } },
+          defaultVariants: { size: "sm" },
         }),
       );
       const props = component({ color: "red" });
@@ -373,18 +411,14 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("setDefaultVariants in extended component does not branch on foreign variant keys", () => {
-      // Same shape as the test above, but the base's `refine` reaches
-      // `setDefaultVariants` — covers the resolveDefaults pass (driving
-      // both class output and `getVariants`) rather than the render-time
-      // compute path.
+    test("computed defaultVariants in extended component do not branch on foreign variant keys", () => {
       const base = cv({
         variants: { size: { sm: "sm", lg: "lg" } },
-        defaultVariants: { size: "sm" },
-        refine: ({ variants, setDefaultVariants }) => {
-          if ("color" in (variants as Record<string, unknown>)) {
-            setDefaultVariants({ size: "lg" });
-          }
+        defaultVariants: {
+          size: ({ defaultValue, variants }) =>
+            "color" in (variants as Record<string, unknown>)
+              ? "lg"
+              : defaultValue,
         },
       });
       const component = getModeComponent(
@@ -392,6 +426,7 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { color: { red: "red", blue: "blue" } },
+          defaultVariants: { size: "sm" },
         }),
       );
       const props = component({ color: "red" });
@@ -402,11 +437,11 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("child setDefaultVariants receives refined variants from parent", () => {
+    test("child computed defaultVariants receive refined variants from parent", () => {
       const base = cv({
         variants: { size: { sm: "sm", lg: "lg" }, small: "" },
-        refine: ({ setDefaultVariants }) => {
-          setDefaultVariants({ small: true });
+        refine: ({ setVariants }) => {
+          setVariants({ small: true });
         },
       });
       const component = getModeComponent(
@@ -414,11 +449,10 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { color: { red: "red", blue: "blue" } },
-          defaultVariants: { size: "lg", color: "red" },
-          refine: ({ variants, setDefaultVariants }) => {
-            if (variants.small) {
-              setDefaultVariants({ size: "sm" });
-            }
+          defaultVariants: {
+            size: ({ defaultValue, variants }) =>
+              variants.small ? "sm" : defaultValue,
+            color: "red",
           },
         }),
       );
@@ -452,21 +486,21 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("lg red") });
     });
 
-    test("base refine setDefaultVariants works after its own setVariants re-run", () => {
+    test("computed defaultVariants work after a setVariants re-run", () => {
       const base = cv({
         variants: {
           size: { sm: "sm", lg: "lg" },
           active: "",
           mode: { on: "on" },
         },
-        defaultVariants: { size: "sm" },
-        refine: ({ variants, setVariants, setDefaultVariants }) => {
+        defaultVariants: {
+          size: ({ defaultValue, variants }) =>
+            variants.mode === "on" ? "lg" : defaultValue,
+        },
+        refine: ({ variants, setVariants }) => {
           if (variants.active) {
             setVariants({ mode: "on" });
           }
-          if (variants.mode === "on") {
-            setDefaultVariants({ size: "lg" });
-          }
         },
       });
       const component = getModeComponent(mode, cv({ extend: [base] }));
@@ -516,11 +550,11 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(getProps())).toEqual({ class: cls("red") });
     });
 
-    test("child setVariants keeps overriding base setDefaultVariants across re-runs", () => {
+    test("child setVariants keeps overriding base computed defaultVariants across re-runs", () => {
       const base = cv({
         variants: { color: { red: "red", blue: "blue" } },
-        refine: ({ setDefaultVariants }) => {
-          setDefaultVariants({ color: "blue" });
+        defaultVariants: {
+          color: () => "blue" as const,
         },
       });
       const component = getModeComponent(
@@ -540,11 +574,11 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("red sm") });
     });
 
-    test("refine setVariants sticks across re-runs", () => {
+    test("refine setVariants sticks across computed default re-runs", () => {
       const base = cv({
         variants: { color: { red: "red", blue: "blue" } },
-        refine: ({ setDefaultVariants }) => {
-          setDefaultVariants({ color: "blue" });
+        defaultVariants: {
+          color: () => "blue" as const,
         },
       });
       const component = getModeComponent(
@@ -563,20 +597,21 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("red") });
     });
 
-    test("base refine setDefaultVariants can override child static defaults after a re-run", () => {
+    test("base computed defaultVariants can override child static defaults after a re-run", () => {
       const base = cv({
         variants: {
           size: { sm: "sm", lg: "lg" },
           active: "",
           mode: { on: "on" },
         },
-        refine: ({ variants, setVariants, setDefaultVariants }) => {
+        defaultVariants: {
+          size: ({ defaultValue, variants }) =>
+            variants.mode === "on" ? "lg" : defaultValue,
+        },
+        refine: ({ variants, setVariants }) => {
           if (variants.active) {
             setVariants({ mode: "on" });
           }
-          if (variants.mode === "on") {
-            setDefaultVariants({ size: "lg" });
-          }
         },
       });
       const component = getModeComponent(
@@ -587,7 +622,33 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("lg on") });
     });
 
-    test("setVariants from earlier extends overrides setDefaultVariants from later extends", () => {
+    test("parent computed defaultVariants fall back to child defaults after a dependency changes", () => {
+      const layer = cv({
+        variants: {
+          a: { one: "one", two: "two" },
+          b: { true: "b-true", false: "b-false" },
+        },
+        defaultVariants: {
+          b: true,
+          a: ({ defaultValue, variants }) =>
+            variants.b ? "one" : defaultValue,
+        },
+        refine: ({ variants, setVariants }) => {
+          if (variants.b) {
+            setVariants({ b: false });
+          }
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({ extend: [layer], defaultVariants: { a: "two" } }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: cls("two b-false") });
+      expect(component.getVariants()).toEqual({ a: "two", b: false });
+    });
+
+    test("setVariants from earlier extends overrides computed defaultVariants from later extends", () => {
       const first = cv({
         variants: { color: { red: "first-red", blue: "first-blue" } },
         refine: ({ setVariants }) => {
@@ -596,8 +657,8 @@ for (const config of Object.values(CONFIGS)) {
       });
       const second = cv({
         variants: { color: { red: "second-red", blue: "second-blue" } },
-        refine: ({ setDefaultVariants }) => {
-          setDefaultVariants({ color: "blue" });
+        defaultVariants: {
+          color: () => "blue" as const,
         },
       });
       const component = getModeComponent(mode, cv({ extend: [first, second] }));
@@ -607,17 +668,17 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("setDefaultVariants from later extends overrides setDefaultVariants from earlier extends", () => {
+    test("computed defaultVariants from later extends apply to final output", () => {
       const first = cv({
         variants: { color: { red: "first-red", blue: "first-blue" } },
-        refine: ({ setDefaultVariants }) => {
-          setDefaultVariants({ color: "red" });
+        defaultVariants: {
+          color: () => "red" as const,
         },
       });
       const second = cv({
         variants: { color: { red: "second-red", blue: "second-blue" } },
-        refine: ({ setDefaultVariants }) => {
-          setDefaultVariants({ color: "blue" });
+        defaultVariants: {
+          color: () => "blue" as const,
         },
       });
       const component = getModeComponent(mode, cv({ extend: [first, second] }));
@@ -627,7 +688,7 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("setDefaultVariants does not override stable setVariants on later passes", () => {
+    test("computed defaultVariants do not override stable setVariants on later passes", () => {
       const base = cv({
         variants: { color: { red: "base-red", blue: "base-blue" } },
         refine: ({ setVariants }) => {
@@ -639,10 +700,9 @@ for (const config of Object.values(CONFIGS)) {
         cv({
           extend: [base],
           variants: { color: { red: "child-red", blue: "child-blue" } },
-          refine: ({ variants, setDefaultVariants }) => {
-            if (variants.color === "red") {
-              setDefaultVariants({ color: "blue" });
-            }
+          defaultVariants: {
+            color: ({ defaultValue, variants }) =>
+              variants.color === "red" ? "blue" : defaultValue,
           },
         }),
       );
@@ -652,7 +712,7 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("setDefaultVariants does not override setVariants from a previous pass", () => {
+    test("computed defaultVariants do not override setVariants from a previous pass", () => {
       const component = getModeComponent(
         mode,
         cv({
@@ -660,13 +720,14 @@ for (const config of Object.values(CONFIGS)) {
             color: { red: "red", blue: "blue" },
             done: "",
           },
-          refine: ({ variants, setVariants, setDefaultVariants }) => {
+          defaultVariants: {
+            color: ({ defaultValue, variants }) =>
+              variants.done ? "blue" : defaultValue,
+          },
+          refine: ({ variants, setVariants }) => {
             if (!variants.done) {
               setVariants({ color: "red", done: true });
             }
-            if (variants.done) {
-              setDefaultVariants({ color: "blue" });
-            }
           },
         }),
       );
@@ -719,6 +780,11 @@ for (const config of Object.values(CONFIGS)) {
             /Variant\(s\) that did not stabilize: [^\n]*\bsize\b/,
           ),
         );
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringMatching(
+            /Latest variant changes before warning: [^\n]*\bsize: "(sm|lg)" -> "(sm|lg)"/,
+          ),
+        );
         expect(warn).toHaveBeenCalledWith(
           expect.stringContaining("Component created at:"),
         );
@@ -750,6 +816,11 @@ for (const config of Object.values(CONFIGS)) {
             /Variant\(s\) that did not stabilize: [^\n]*\bsize\b/,
           ),
         );
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringMatching(
+            /Latest variant changes before warning: [^\n]*\bsize: "(sm|lg)" -> "(sm|lg)"/,
+          ),
+        );
         expect(warn).toHaveBeenCalledWith(
           expect.stringContaining("Component created at:"),
         );
@@ -853,6 +924,11 @@ for (const config of Object.values(CONFIGS)) {
             /Variant\(s\) that did not stabilize: [^\n]*\bcolor\b/,
           ),
         );
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringMatching(
+            /Latest variant changes before warning: [^\n]*\bsize\b[^\n]*\bcolor\b/,
+          ),
+        );
       } finally {
         warn.mockRestore();
       }
@@ -879,7 +955,50 @@ for (const config of Object.values(CONFIGS)) {
         expect(warn).toHaveBeenCalledWith(
           expect.stringContaining("refine.test.ts"),
         );
+        expect(warn).toHaveBeenCalledWith(
+          expect.not.stringContaining("node_modules"),
+        );
+      } finally {
+        warn.mockRestore();
+      }
+    });
+
+    test("refine warning fallback stack skips internal creation frames", () => {
+      const ErrorWithCaptureStackTrace = Error as ErrorConstructor & {
+        captureStackTrace?: (
+          targetObject: object,
+          constructorOpt?: Function,
+        ) => void;
+      };
+      const captureStackTrace = ErrorWithCaptureStackTrace.captureStackTrace;
+      Reflect.deleteProperty(ErrorWithCaptureStackTrace, "captureStackTrace");
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: { size: { sm: "sm", lg: "lg" } },
+          defaultVariants: { size: "sm" },
+          refine: ({ variants, setVariants }) => {
+            setVariants({ size: variants.size === "sm" ? "lg" : "sm" });
+          },
+        }),
+      );
+
+      try {
+        component();
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringContaining("Component created at:"),
+        );
+        expect(warn).toHaveBeenCalledWith(
+          expect.stringContaining("refine.test.ts"),
+        );
+        expect(warn).toHaveBeenCalledWith(
+          expect.not.stringContaining("captureCreationFrame"),
+        );
       } finally {
+        if (captureStackTrace) {
+          ErrorWithCaptureStackTrace.captureStackTrace = captureStackTrace;
+        }
         warn.mockRestore();
       }
     });
@@ -914,7 +1033,7 @@ for (const config of Object.values(CONFIGS)) {
       }
     });
 
-    test("refine setDefaultVariants when explicitly passing undefined", () => {
+    test("computed defaultVariants run when explicitly passing undefined", () => {
       const component = getModeComponent(
         mode,
         cv({
@@ -922,8 +1041,8 @@ for (const config of Object.values(CONFIGS)) {
             size: { sm: "sm", lg: "lg" },
             color: { red: "red", blue: "blue" },
           },
-          refine: ({ setDefaultVariants }) => {
-            setDefaultVariants({ color: "red" });
+          defaultVariants: {
+            color: () => "red" as const,
           },
         }),
       );