fix resizing bugs (conflicting handlers)

src/lib/resize-utils.ts

@@ -0,0 +1,57 @@
+import { createSignal, onMount, onCleanup, Accessor } from "solid-js";
+
+export const MOBILE_BREAKPOINT = 768;
+
+/**
+ * Creates a reactive window width signal that updates on resize
+ * @param debounceMs Optional debounce delay in milliseconds
+ * @returns Accessor for current window width
+ */
+export function createWindowWidth(debounceMs?: number): Accessor<number> {
+  const initialWidth = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const [width, setWidth] = createSignal(initialWidth);
+
+  onMount(() => {
+    let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+    const handleResize = () => {
+      if (debounceMs) {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+          setWidth(window.innerWidth);
+        }, debounceMs);
+      } else {
+        setWidth(window.innerWidth);
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    onCleanup(() => {
+      clearTimeout(timeoutId);
+      window.removeEventListener("resize", handleResize);
+    });
+  });
+
+  return width;
+}
+
+/**
+ * Checks if the current window width is in mobile viewport
+ * @param width Current window width
+ * @returns true if mobile viewport
+ */
+export function isMobile(width: number): boolean {
+  return width < MOBILE_BREAKPOINT;
+}
+
+/**
+ * Creates a derived signal for mobile state
+ * @param windowWidth Window width accessor
+ * @returns Accessor for mobile state
+ */
+export function createIsMobile(
+  windowWidth: Accessor<number>
+): Accessor<boolean> {
+  return () => isMobile(windowWidth());
+}