Final fixes before reelase

src/client/context/rdtReducer.ts

@@ -86,6 +86,10 @@ export type RemixDevToolsState = {
 		 * @default "silver"
 		 */
 		editorName: string
+		/**
+		 * The route boundary gradient color to use
+		 * @default "watermelon"
+		 */
 		routeBoundaryGradient: keyof typeof ROUTE_BOUNDARY_GRADIENTS
 		routeWildcards: RouteWildcards
 		activeTab: Tabs
@@ -163,7 +167,7 @@ export const initialState: RemixDevToolsState = {
 	terminals: [{ id: 0, locked: false, output: [], history: [] }],
 	server: undefined,
 	settings: {
-		showRouteBoundariesOn: "hover",
+		showRouteBoundariesOn: "click",
 		breakpoints: [
 			{ name: "", min: 0, max: 639 },
 			{ name: "sm", min: 640, max: 767 },
@@ -176,7 +180,7 @@ export const initialState: RemixDevToolsState = {
 		liveUrls: [],
 		liveUrlsPosition: "bottom-left",
 		editorName: "VSCode",
-		routeBoundaryGradient: "silver",
+		routeBoundaryGradient: "watermelon",
 		routeWildcards: {},
 		activeTab: "page",
 		shouldConnectWithForge: false,

src/client/hooks/useSetRouteBoundaries.ts

@@ -14,7 +14,7 @@ export const useSetRouteBoundaries = () => {
 			// Overrides the hovering so the classes are force removed if needed
 			const hovering = isHovering ?? settings.isHoveringRoute
 			// Classes to apply/remove
-			const classes = ROUTE_BOUNDARY_GRADIENTS[settings.routeBoundaryGradient]
+			const classes = ["apply-tw", ROUTE_BOUNDARY_GRADIENTS[settings.routeBoundaryGradient]].join(" ")
 
 			const isRoot = settings.hoveredRoute === "root"
 			// We get all the elements with this class name, the last one is the one we want because strict mode applies 2x divs

src/input.css

@@ -579,4 +579,53 @@
 }
 .silver-gradient {
 	@apply bg-gradient-to-r from-gray-100 to-gray-300
+}
+.apply-tw {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
 }