Fix Vercel tests and chart markers

Author: nabilfatih

apps/www/vitest.config.ts

@@ -4,10 +4,29 @@ import config from "@repo/testing";
 import { mergeConfig } from "vitest/config";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const nodeTestFiles = [
+  "app/api/**/*.test.ts",
+  "app/mcp/**/*.test.ts",
+  "lib/llms/**/*.test.ts",
+  "lib/sitemap/**/*.test.ts",
+  "lib/utils/seo/**/*.test.ts",
+  "scripts/**/*.test.ts",
+];
+const jsdomTestFiles = [
+  "__tests__/**/*.test.ts",
+  "components/**/*.test.ts",
+  "lib/auth/**/*.test.ts",
+  "lib/store/**/*.test.ts",
+  "lib/utils/__tests__/**/*.test.ts",
+];
 
 /**
  * Keep this config aligned with the shared frontend Vitest baseline.
- * Do not weaken coverage or add app-local execution overrides here.
+ * Vitest 4 removed environmentMatchGlobs; projects are the documented
+ * way to keep Node-only tests out of jsdom's browser-compatible module graph.
+ *
+ * @see https://vitest.dev/guide/projects
+ * @see https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility
  */
 export default mergeConfig(config, {
   resolve: {
@@ -19,6 +38,25 @@ export default mergeConfig(config, {
   test: {
     /** Prepare the React test environment before each suite loads. */
     setupFiles: ["./vitest.setup.ts"],
+    projects: [
+      {
+        extends: true,
+        test: {
+          environment: "node",
+          include: nodeTestFiles,
+          name: "node",
+          setupFiles: [],
+        },
+      },
+      {
+        extends: true,
+        test: {
+          environment: "jsdom",
+          include: jsdomTestFiles,
+          name: "jsdom",
+        },
+      },
+    ],
     coverage: {
       thresholds: {
         100: true,

packages/design-system/components/contents/mathematics/scatter-diagram.tsx

@@ -136,7 +136,6 @@ export function ScatterDiagram({
             />
             <ChartTooltip
               content={<ChartTooltipContent hideLabel={true} />}
-              shared={false}
               wrapperStyle={{ visibility: "hidden" }}
             />
             {datasets.map((dataset) => (
@@ -180,7 +179,9 @@ export function ScatterDiagram({
                   );
                 })
               )}
-            <ChartLegend content={<ChartLegendContent className="mt-6" />} />
+            <ChartLegend
+              content={<ChartLegendContent className="mt-6" variant="circle" />}
+            />
           </ComposedChart>
         </ChartContainer>
       </CardContent>

packages/design-system/components/ui/chart.tsx

@@ -38,6 +38,14 @@ type ChartColors = {
 type LegendPayloadEntry = NonNullable<
   DefaultLegendContentProps["payload"]
 >[number];
+type ChartLegendVariant =
+  | "circle"
+  | "circle-outline"
+  | "horizontal-bar"
+  | "rounded-square"
+  | "rounded-square-outline"
+  | "square"
+  | "vertical-bar";
 type PayloadEntry = LegendPayloadEntry | TooltipPayloadEntry;
 
 export type ChartConfig = Record<
@@ -329,10 +337,12 @@ function ChartLegendContent({
   payload,
   verticalAlign = "bottom",
   nameKey,
+  variant = "rounded-square",
 }: ComponentProps<"div"> &
   DefaultLegendContentProps & {
     hideIcon?: boolean;
     nameKey?: string;
+    variant?: ChartLegendVariant;
   }) {
   const { config } = useChart();
 
@@ -348,39 +358,78 @@ function ChartLegendContent({
         className
       )}
     >
-      {payload.map((item) => {
-        const key = `${nameKey || item.value || item.dataKey || "value"}`;
-        const configKey = getPayloadConfigKey(config, item, key);
-        const itemConfig = configKey ? config[configKey] : undefined;
-        const indicatorStyle = getLegendIndicatorStyle(
-          item,
-          configKey || key,
-          itemConfig
-        );
-
-        return (
-          <div
-            className={cn(
-              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-            )}
-            key={key}
-          >
-            {itemConfig?.icon && !hideIcon ? (
-              <itemConfig.icon />
-            ) : (
-              <div
-                className="h-2 w-2 shrink-0 rounded-[2px]"
-                style={indicatorStyle}
-              />
-            )}
-            {itemConfig?.label || item.value}
-          </div>
-        );
-      })}
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item) => {
+          const key = `${nameKey || item.value || item.dataKey || "value"}`;
+          const configKey = getPayloadConfigKey(config, item, key);
+          const itemConfig = configKey ? config[configKey] : undefined;
+          const dataKey = configKey || key;
+          let indicatorStyle = getLegendIndicatorStyle(
+            item,
+            dataKey,
+            itemConfig
+          );
+
+          if (
+            variant === "circle-outline" ||
+            variant === "rounded-square-outline"
+          ) {
+            indicatorStyle = getLegendOutlineStyle(item, dataKey, itemConfig);
+          }
+
+          return (
+            <div
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+              key={key}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className={getLegendIndicatorClassName(variant)}
+                  style={indicatorStyle}
+                />
+              )}
+              {itemConfig?.label || item.value}
+            </div>
+          );
+        })}
     </div>
   );
 }
 
+/** Matches EvilCharts legend variants while keeping Recharts payload support. */
+function getLegendIndicatorClassName(variant: ChartLegendVariant) {
+  if (variant === "circle") {
+    return "h-2 w-2 shrink-0 rounded-full";
+  }
+
+  if (variant === "circle-outline") {
+    return "h-2.5 w-2.5 shrink-0 rounded-full p-[1.5px]";
+  }
+
+  if (variant === "horizontal-bar") {
+    return "h-1 w-3 shrink-0 rounded-[2px]";
+  }
+
+  if (variant === "square") {
+    return "h-2 w-2 shrink-0 rounded-none";
+  }
+
+  if (variant === "vertical-bar") {
+    return "h-3 w-1 shrink-0 rounded-[2px]";
+  }
+
+  if (variant === "rounded-square-outline") {
+    return "h-2.5 w-2.5 shrink-0 rounded-[3px] p-[1.5px]";
+  }
+
+  return "h-2 w-2 shrink-0 rounded-[2px]";
+}
+
 /** Finds the chart config entry that matches a Recharts payload item. */
 function getPayloadConfigFromPayload(
   config: ChartConfig,
@@ -557,6 +606,36 @@ function getLegendIndicatorStyle(
   };
 }
 
+/** Uses the EvilCharts mask approach so outline legend variants can show gradients. */
+function getLegendOutlineStyle(
+  payload: LegendPayloadEntry,
+  dataKey: string,
+  config: ChartConfig[string] | undefined
+) {
+  const maskStyle = {
+    WebkitMask:
+      "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    WebkitMaskComposite: "xor",
+    mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    maskComposite: "exclude",
+  };
+
+  if (config?.colors) {
+    return {
+      ...getIndicatorStyle(dataKey, getColorsCount(config)),
+      ...maskStyle,
+    };
+  }
+
+  const color = getPayloadColor(payload);
+
+  return {
+    background: color,
+    borderColor: color,
+    ...maskStyle,
+  };
+}
+
 /** Uses config color slots when available, otherwise Recharts payload color. */
 function getTooltipIndicatorStyle(
   payload: TooltipPayloadEntry,