@flamingo-stack/openframe-frontend-core 0.0.263 → 0.0.264

package/dist/{chunk-6GBA6YJN.js → chunk-ZMFT5XOB.js}

@@ -33,373 +33,65 @@ import {
   XmarkIcon
 } from "./chunk-4WZOFD46.js";
 
-// src/hooks/ui/use-local-storage.ts
-import { useEffect, useRef, useState } from "react";
-function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = useState(() => {
-    try {
-      if (typeof window !== "undefined") {
-        const item = window.localStorage.getItem(key);
-        return item ? JSON.parse(item) : initialValue;
-      }
-    } catch (error) {
-      console.error(`Error reading localStorage key "${key}":`, error);
-    }
-    return initialValue;
-  });
-  const isInitialized = useRef(true);
-  const isFromStorageEvent = useRef(false);
+// src/hooks/ui/use-header-height.ts
+import { useEffect, useState } from "react";
+function useHeaderHeight(defaultHeight = 64) {
+  const [height, setHeight] = useState(defaultHeight);
   useEffect(() => {
-    if (!isInitialized.current) return;
-    const handleStorageChange = (e) => {
-      if (e.key === key && e.newValue !== null) {
-        try {
-          const newValue = JSON.parse(e.newValue);
-          isFromStorageEvent.current = true;
-          setStoredValue(newValue);
-          console.log(`\u{1F504} Updated localStorage key "${key}" from storage event`);
-        } catch (error) {
-          console.error(`Error parsing storage event for key "${key}":`, error);
-        }
-      }
+    const measure = () => {
+      let total = 0;
+      const header2 = document.querySelector("header");
+      if (header2) total += header2.offsetHeight;
+      const bar2 = document.querySelector("[data-announcement-bar]");
+      if (bar2 instanceof HTMLElement) total += bar2.offsetHeight;
+      setHeight(total > 0 ? total : defaultHeight);
     };
-    const handleCustomStorageUpdate = (e) => {
-      if (e.detail.key === key) {
-        try {
-          if (e.detail.newValue === null || e.detail.newValue === void 0) {
-            isFromStorageEvent.current = true;
-            setStoredValue(initialValue);
-            console.log(`\u{1F504} Cleared localStorage key "${key}" from custom storage event`);
-          } else {
-            const newValue = JSON.parse(e.detail.newValue);
-            isFromStorageEvent.current = true;
-            setStoredValue(newValue);
-            console.log(`\u{1F504} Updated localStorage key "${key}" from custom storage event`);
-          }
-        } catch (error) {
-          console.error(`Error parsing custom storage event for key "${key}":`, error);
+    measure();
+    const resizeObserver = new ResizeObserver(measure);
+    const header = document.querySelector("header");
+    if (header) resizeObserver.observe(header);
+    const bar = document.querySelector("[data-announcement-bar]");
+    if (bar) resizeObserver.observe(bar);
+    const mutationObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "childList" || mutation.type === "attributes") {
+          measure();
+          const newBar = document.querySelector("[data-announcement-bar]");
+          if (newBar) resizeObserver.observe(newBar);
         }
       }
-    };
-    window.addEventListener("storage", handleStorageChange);
-    window.addEventListener("localStorageUpdate", handleCustomStorageUpdate);
-    return () => {
-      window.removeEventListener("storage", handleStorageChange);
-      window.removeEventListener("localStorageUpdate", handleCustomStorageUpdate);
-    };
-  }, [key]);
-  useEffect(() => {
-    if (!isInitialized.current) return;
-    if (isFromStorageEvent.current) {
-      isFromStorageEvent.current = false;
-      return;
-    }
-    try {
-      if (typeof window !== "undefined") {
-        window.localStorage.setItem(key, JSON.stringify(storedValue));
-      }
-    } catch (error) {
-      console.error(`Error writing to localStorage key "${key}":`, error);
-    }
-  }, [key, storedValue]);
-  const setValue = (value) => {
-    try {
-      const valueToStore = value instanceof Function ? value(storedValue) : value;
-      setStoredValue(valueToStore);
-    } catch (error) {
-      console.error(`Error setting value for localStorage key "${key}":`, error);
-    }
-  };
-  return [storedValue, setValue];
-}
-
-// src/hooks/ui/use-media-query.ts
-import { useLayoutEffect, useState as useState2 } from "react";
-function useMediaQuery(query) {
-  const [matches, setMatches] = useState2(void 0);
-  useLayoutEffect(() => {
-    const matchMedia = window.matchMedia(query);
-    const handleChange = () => {
-      setMatches(matchMedia.matches);
-    };
-    handleChange();
-    matchMedia.addEventListener("change", handleChange);
-    return () => {
-      matchMedia.removeEventListener("change", handleChange);
-    };
-  }, [query]);
-  return matches;
-}
-var breakpoints = {
-  md: "(min-width: 800px)",
-  // Tablet: 50rem
-  lg: "(min-width: 1280px)"
-  // Desktop: 80rem
-};
-function useSmUp() {
-  return useMdUp();
-}
-function useMdUp() {
-  const matches = useMediaQuery(breakpoints.md);
-  return matches === void 0 ? void 0 : matches;
-}
-function useLgUp() {
-  const matches = useMediaQuery(breakpoints.lg);
-  return matches === void 0 ? void 0 : matches;
-}
-
-// src/hooks/ui/use-memoized-callback.ts
-import { useCallback, useRef as useRef2 } from "react";
-function useMemoizedCallback(callback, dependencies) {
-  const callbackRef = useRef2(callback);
-  const dependenciesRef = useRef2(dependencies);
-  callbackRef.current = callback;
-  const depsChanged = dependencies.some((dep, i) => !Object.is(dep, dependenciesRef.current[i]));
-  if (depsChanged) {
-    dependenciesRef.current = dependencies;
-  }
-  return useCallback(((...args) => callbackRef.current(...args)), [depsChanged]);
-}
-
-// src/hooks/ui/use-onboarding-state.ts
-import { useState as useState3, useEffect as useEffect2, useCallback as useCallback2 } from "react";
-
-// src/utils/onboarding-storage.ts
-var DEFAULT_STATE = {
-  completedSteps: [],
-  skippedSteps: [],
-  dismissed: false,
-  lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
-};
-function saveOnboardingState(key, state) {
-  if (typeof window === "undefined") return;
-  try {
-    localStorage.setItem(key, JSON.stringify(state));
-    console.log("\u{1F4BE} Saved onboarding state:", state);
-    if (typeof window !== "undefined") {
-      window.dispatchEvent(
-        new CustomEvent("localStorageUpdate", {
-          detail: { key, newValue: JSON.stringify(state) }
-        })
-      );
-    }
-  } catch (err) {
-    console.warn("[onboarding-storage] Failed saving to localStorage:", err);
-  }
-}
-function loadOnboardingState(key) {
-  if (typeof window === "undefined") return DEFAULT_STATE;
-  try {
-    const raw = localStorage.getItem(key);
-    if (!raw) return DEFAULT_STATE;
-    const parsed = JSON.parse(raw);
-    return parsed;
-  } catch (err) {
-    console.warn("[onboarding-storage] Failed parsing localStorage data:", err);
-    return DEFAULT_STATE;
-  }
-}
-function markMultipleComplete(key, stepIds) {
-  const state = loadOnboardingState(key);
-  const newState = {
-    ...state,
-    completedSteps: [.../* @__PURE__ */ new Set([...state.completedSteps, ...stepIds])],
-    skippedSteps: state.skippedSteps.filter((id) => !stepIds.includes(id)),
-    lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
-  };
-  saveOnboardingState(key, newState);
-  return newState;
-}
-function markStepComplete(key, stepId) {
-  return markMultipleComplete(key, [stepId]);
-}
-function markStepSkipped(key, stepId) {
-  const state = loadOnboardingState(key);
-  const newState = {
-    ...state,
-    skippedSteps: [.../* @__PURE__ */ new Set([...state.skippedSteps, stepId])],
-    completedSteps: state.completedSteps.filter((id) => id !== stepId),
-    lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
-  };
-  saveOnboardingState(key, newState);
-  return newState;
-}
-function dismissOnboarding(key) {
-  const state = loadOnboardingState(key);
-  const newState = {
-    ...state,
-    dismissed: true,
-    lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
-  };
-  saveOnboardingState(key, newState);
-  return newState;
-}
-
-// src/hooks/ui/use-onboarding-state.ts
-function useOnboardingState(storageKey = "openframe-onboarding-state") {
-  const [state, setState] = useState3(() => loadOnboardingState(storageKey));
-  const [, forceUpdate] = useState3(0);
-  useEffect2(() => {
-    const handleStorageUpdate = (e) => {
-      if (e.detail.key === storageKey) {
-        const newState = loadOnboardingState(storageKey);
-        setState(newState);
-        forceUpdate((prev) => prev + 1);
-        console.log("\u{1F504} State updated from storage event:", newState);
-      }
-    };
-    window.addEventListener("localStorageUpdate", handleStorageUpdate);
+    });
+    mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-announcement-bar"]
+    });
     return () => {
-      window.removeEventListener("localStorageUpdate", handleStorageUpdate);
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
     };
-  }, [storageKey]);
-  const markComplete = useCallback2((stepId) => {
-    console.log(`\u{1F3AF} markComplete called for: "${stepId}"`);
-    const newState = markStepComplete(storageKey, stepId);
-    setState(newState);
-    forceUpdate((prev) => prev + 1);
-  }, [storageKey]);
-  const markSkipped = useCallback2((stepId) => {
-    console.log(`\u23ED\uFE0F markSkipped called for: "${stepId}"`);
-    const newState = markStepSkipped(storageKey, stepId);
-    setState(newState);
-    forceUpdate((prev) => prev + 1);
-  }, [storageKey]);
-  const dismissOnboarding2 = useCallback2(() => {
-    console.log(`\u{1F6AB} dismissOnboarding called`);
-    const newState = dismissOnboarding(storageKey);
-    setState(newState);
-    forceUpdate((prev) => prev + 1);
-  }, [storageKey]);
-  const markMultipleComplete2 = useCallback2((stepIds) => {
-    console.log(`\u{1F3AF} markMultipleComplete called for:`, stepIds);
-    const newState = markMultipleComplete(storageKey, stepIds);
-    setState(newState);
-    forceUpdate((prev) => prev + 1);
-    console.log(`\u{1F4DD} State after batch:`, newState);
-  }, [storageKey]);
-  const isStepComplete = useCallback2((stepId) => {
-    return state.completedSteps.includes(stepId);
-  }, [state.completedSteps]);
-  const isStepSkipped = useCallback2((stepId) => {
-    return state.skippedSteps.includes(stepId);
-  }, [state.skippedSteps]);
-  const allStepsComplete = useCallback2((steps) => {
-    return steps.every((step) => isStepComplete(step.id) || isStepSkipped(step.id));
-  }, [isStepComplete, isStepSkipped]);
-  return {
-    state,
-    markComplete,
-    markSkipped,
-    dismissOnboarding: dismissOnboarding2,
-    isStepComplete,
-    isStepSkipped,
-    allStepsComplete,
-    markMultipleComplete: markMultipleComplete2
-  };
-}
-
-// src/hooks/ui/use-table-pagination.ts
-import { useMemo } from "react";
-function useTablePagination(config) {
-  return useMemo(() => {
-    if (!config) return void 0;
-    if (config.type === "client") {
-      if (config.totalPages <= 1) return void 0;
-      return {
-        hasNextPage: config.currentPage < config.totalPages,
-        hasPreviousPage: config.currentPage > 1,
-        isFirstPage: config.currentPage === 1,
-        startCursor: (config.currentPage - 1).toString(),
-        endCursor: config.currentPage.toString(),
-        currentCount: config.itemCount,
-        itemName: config.itemName || "items",
-        onNext: () => config.onNext(),
-        onPrevious: () => config.onPrevious(),
-        showInfo: config.showInfo ?? true
-      };
-    } else {
-      return {
-        hasNextPage: config.hasNextPage,
-        hasPreviousPage: config.hasLoadedBeyondFirst,
-        isFirstPage: !config.hasLoadedBeyondFirst,
-        startCursor: config.startCursor,
-        endCursor: config.endCursor,
-        currentCount: config.itemCount,
-        itemName: config.itemName || "items",
-        onNext: config.onNext,
-        onPrevious: config.onReset,
-        // Previous button goes back to first page
-        showInfo: config.showInfo ?? true
-      };
-    }
-  }, [config]);
-}
-
-// src/hooks/ui/use-throttle.ts
-import { useState as useState4, useEffect as useEffect3, useRef as useRef3 } from "react";
-function useThrottle(value, limit = 200) {
-  const [throttledValue, setThrottledValue] = useState4(value);
-  const lastUpdated = useRef3(Date.now());
-  useEffect3(() => {
-    const now = Date.now();
-    const elapsed = now - lastUpdated.current;
-    if (elapsed >= limit) {
-      setThrottledValue(value);
-      lastUpdated.current = now;
-    } else {
-      const timerId = setTimeout(() => {
-        setThrottledValue(value);
-        lastUpdated.current = Date.now();
-      }, limit - elapsed);
-      return () => {
-        clearTimeout(timerId);
-      };
-    }
-  }, [value, limit]);
-  return throttledValue;
-}
-
-// src/hooks/ui/use-window-size.ts
-import { useLayoutEffect as useLayoutEffect2, useState as useState5 } from "react";
-function useWindowSize() {
-  const [windowSize, setWindowSize] = useState5({
-    width: 0,
-    height: 0
-  });
-  const [isClient, setIsClient] = useState5(false);
-  useLayoutEffect2(() => {
-    setIsClient(true);
-    if (!isClient) return;
-    const handleResize = () => {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [isClient]);
-  return windowSize;
+  }, [defaultHeight]);
+  return height;
 }
 
 // src/hooks/ui/use-horizontal-scrollbar.ts
-import { useRef as useRef4, useState as useState6, useCallback as useCallback3 } from "react";
+import { useRef, useState as useState2, useCallback } from "react";
 function useHorizontalScrollbar() {
-  const scrollElRef = useRef4(null);
-  const trackRef = useRef4(null);
-  const thumbRef = useRef4(null);
-  const roRef = useRef4(null);
-  const [thumbRatio, setThumbRatio] = useState6(0);
-  const [canScrollLeft, setCanScrollLeft] = useState6(false);
-  const [canScrollRight, setCanScrollRight] = useState6(false);
-  const prevCanScrollLeftRef = useRef4(false);
-  const prevCanScrollRightRef = useRef4(false);
-  const isDraggingRef = useRef4(false);
-  const dragStartRef = useRef4({ mouseX: 0, scrollLeft: 0 });
-  const rafIdRef = useRef4(0);
-  const syncThumbToDOM = useCallback3(() => {
+  const scrollElRef = useRef(null);
+  const trackRef = useRef(null);
+  const thumbRef = useRef(null);
+  const roRef = useRef(null);
+  const moRef = useRef(null);
+  const [thumbRatio, setThumbRatio] = useState2(0);
+  const [canScrollLeft, setCanScrollLeft] = useState2(false);
+  const [canScrollRight, setCanScrollRight] = useState2(false);
+  const prevCanScrollLeftRef = useRef(false);
+  const prevCanScrollRightRef = useRef(false);
+  const isDraggingRef = useRef(false);
+  const dragStartRef = useRef({ mouseX: 0, scrollLeft: 0 });
+  const rafIdRef = useRef(0);
+  const syncThumbToDOM = useCallback(() => {
     const el = scrollElRef.current;
     const thumb = thumbRef.current;
     if (!el || !thumb) return;
@@ -412,7 +104,7 @@ function useHorizontalScrollbar() {
     const fraction = Math.min(Math.max(el.scrollLeft, 0), maxScroll) / maxScroll;
     thumb.style.left = `${fraction * (1 - ratio) * 100}%`;
   }, []);
-  const syncEdgeFades = useCallback3(() => {
+  const syncEdgeFades = useCallback(() => {
     const el = scrollElRef.current;
     if (!el) return;
     const maxScroll = el.scrollWidth - el.clientWidth;
@@ -440,7 +132,7 @@ function useHorizontalScrollbar() {
       setCanScrollRight(right);
     }
   }, []);
-  const measure = useCallback3(() => {
+  const measure = useCallback(() => {
     const el = scrollElRef.current;
     if (!el) return;
     const ratio = el.clientWidth / el.scrollWidth;
@@ -448,11 +140,15 @@ function useHorizontalScrollbar() {
     syncThumbToDOM();
     syncEdgeFades();
   }, [syncThumbToDOM, syncEdgeFades]);
-  const scrollRef = useCallback3((node) => {
+  const scrollRef = useCallback((node) => {
     if (roRef.current) {
       roRef.current.disconnect();
       roRef.current = null;
     }
+    if (moRef.current) {
+      moRef.current.disconnect();
+      moRef.current = null;
+    }
     if (rafIdRef.current) {
       cancelAnimationFrame(rafIdRef.current);
       rafIdRef.current = 0;
@@ -461,8 +157,19 @@ function useHorizontalScrollbar() {
     if (node) {
       const ratio = node.clientWidth / node.scrollWidth;
       setThumbRatio(ratio >= 1 ? 0 : ratio);
-      roRef.current = new ResizeObserver(measure);
-      roRef.current.observe(node);
+      const ro = new ResizeObserver(measure);
+      roRef.current = ro;
+      const observeAll = () => {
+        ro.disconnect();
+        ro.observe(node);
+        for (const child of Array.from(node.children)) ro.observe(child);
+      };
+      observeAll();
+      moRef.current = new MutationObserver(() => {
+        observeAll();
+        measure();
+      });
+      moRef.current.observe(node, { childList: true });
       requestAnimationFrame(() => {
         syncThumbToDOM();
         syncEdgeFades();
@@ -475,7 +182,7 @@ function useHorizontalScrollbar() {
       setCanScrollRight(false);
     }
   }, [measure, syncThumbToDOM, syncEdgeFades]);
-  const onScroll = useCallback3(() => {
+  const onScroll = useCallback(() => {
     if (isDraggingRef.current) return;
     if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
     rafIdRef.current = requestAnimationFrame(() => {
@@ -483,7 +190,7 @@ function useHorizontalScrollbar() {
       syncEdgeFades();
     });
   }, [syncThumbToDOM, syncEdgeFades]);
-  const onTrackClick = useCallback3((e) => {
+  const onTrackClick = useCallback((e) => {
     if (e.target.closest("[data-scrollbar-thumb]")) return;
     const track = trackRef.current;
     const el = scrollElRef.current;
@@ -501,13 +208,13 @@ function useHorizontalScrollbar() {
     const targetScrollLeft = targetFraction * (el.scrollWidth - el.clientWidth);
     el.scrollTo({ left: targetScrollLeft, behavior: "smooth" });
   }, []);
-  const onTrackWheel = useCallback3((e) => {
+  const onTrackWheel = useCallback((e) => {
     const el = scrollElRef.current;
     if (!el) return;
     e.preventDefault();
     el.scrollLeft += e.deltaX || e.deltaY;
   }, []);
-  const onThumbPointerDown = useCallback3((e) => {
+  const onThumbPointerDown = useCallback((e) => {
     e.preventDefault();
     e.stopPropagation();
     const el = scrollElRef.current;
@@ -518,7 +225,7 @@ function useHorizontalScrollbar() {
     target.setPointerCapture(e.pointerId);
     target.style.cursor = "grabbing";
   }, []);
-  const onThumbPointerMove = useCallback3((e) => {
+  const onThumbPointerMove = useCallback((e) => {
     if (!isDraggingRef.current) return;
     const el = scrollElRef.current;
     const track = trackRef.current;
@@ -538,7 +245,7 @@ function useHorizontalScrollbar() {
     syncThumbToDOM();
     syncEdgeFades();
   }, [syncThumbToDOM, syncEdgeFades]);
-  const onThumbPointerUp = useCallback3((e) => {
+  const onThumbPointerUp = useCallback((e) => {
     isDraggingRef.current = false;
     const target = e.currentTarget;
     target.releasePointerCapture(e.pointerId);
@@ -561,7 +268,7 @@ function useHorizontalScrollbar() {
 }
 
 // src/hooks/ui/use-image-edge-color.ts
-import { useState as useState7, useEffect as useEffect4 } from "react";
+import { useState as useState3, useEffect as useEffect2 } from "react";
 function extractEdgeColor(img) {
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
@@ -603,51 +310,357 @@ function extractEdgeColor(img) {
       }
     }
   }
-  if (buckets.size === 0) return "#000000";
-  let bestBucket = null;
-  for (const bucket of buckets.values()) {
-    if (!bestBucket || bucket.count > bestBucket.count) {
-      bestBucket = bucket;
-    }
+  if (buckets.size === 0) return "#000000";
+  let bestBucket = null;
+  for (const bucket of buckets.values()) {
+    if (!bestBucket || bucket.count > bestBucket.count) {
+      bestBucket = bucket;
+    }
+  }
+  if (!bestBucket || bestBucket.count === 0) return "#000000";
+  const r = Math.round(bestBucket.r / bestBucket.count);
+  const g = Math.round(bestBucket.g / bestBucket.count);
+  const b = Math.round(bestBucket.b / bestBucket.count);
+  return `rgb(${r}, ${g}, ${b})`;
+}
+function useImageEdgeColor(imageUrl, fallback = "#000000") {
+  const [color, setColor] = useState3(fallback);
+  useEffect2(() => {
+    if (!imageUrl) {
+      setColor(fallback);
+      return;
+    }
+    let cancelled = false;
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      if (cancelled) return;
+      try {
+        setColor(extractEdgeColor(img));
+      } catch {
+        setColor(fallback);
+      }
+    };
+    img.onerror = () => {
+      if (cancelled) return;
+      setColor(fallback);
+    };
+    img.src = imageUrl;
+    return () => {
+      cancelled = true;
+    };
+  }, [imageUrl, fallback]);
+  return color;
+}
+
+// src/hooks/ui/use-local-storage.ts
+import { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = useState4(() => {
+    try {
+      if (typeof window !== "undefined") {
+        const item = window.localStorage.getItem(key);
+        return item ? JSON.parse(item) : initialValue;
+      }
+    } catch (error) {
+      console.error(`Error reading localStorage key "${key}":`, error);
+    }
+    return initialValue;
+  });
+  const isInitialized = useRef2(true);
+  const isFromStorageEvent = useRef2(false);
+  useEffect3(() => {
+    if (!isInitialized.current) return;
+    const handleStorageChange = (e) => {
+      if (e.key === key && e.newValue !== null) {
+        try {
+          const newValue = JSON.parse(e.newValue);
+          isFromStorageEvent.current = true;
+          setStoredValue(newValue);
+          console.log(`\u{1F504} Updated localStorage key "${key}" from storage event`);
+        } catch (error) {
+          console.error(`Error parsing storage event for key "${key}":`, error);
+        }
+      }
+    };
+    const handleCustomStorageUpdate = (e) => {
+      if (e.detail.key === key) {
+        try {
+          if (e.detail.newValue === null || e.detail.newValue === void 0) {
+            isFromStorageEvent.current = true;
+            setStoredValue(initialValue);
+            console.log(`\u{1F504} Cleared localStorage key "${key}" from custom storage event`);
+          } else {
+            const newValue = JSON.parse(e.detail.newValue);
+            isFromStorageEvent.current = true;
+            setStoredValue(newValue);
+            console.log(`\u{1F504} Updated localStorage key "${key}" from custom storage event`);
+          }
+        } catch (error) {
+          console.error(`Error parsing custom storage event for key "${key}":`, error);
+        }
+      }
+    };
+    window.addEventListener("storage", handleStorageChange);
+    window.addEventListener("localStorageUpdate", handleCustomStorageUpdate);
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+      window.removeEventListener("localStorageUpdate", handleCustomStorageUpdate);
+    };
+  }, [key]);
+  useEffect3(() => {
+    if (!isInitialized.current) return;
+    if (isFromStorageEvent.current) {
+      isFromStorageEvent.current = false;
+      return;
+    }
+    try {
+      if (typeof window !== "undefined") {
+        window.localStorage.setItem(key, JSON.stringify(storedValue));
+      }
+    } catch (error) {
+      console.error(`Error writing to localStorage key "${key}":`, error);
+    }
+  }, [key, storedValue]);
+  const setValue = (value) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+    } catch (error) {
+      console.error(`Error setting value for localStorage key "${key}":`, error);
+    }
+  };
+  return [storedValue, setValue];
+}
+
+// src/hooks/ui/use-media-query.ts
+import { useLayoutEffect, useState as useState5 } from "react";
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState5(void 0);
+  useLayoutEffect(() => {
+    const matchMedia = window.matchMedia(query);
+    const handleChange = () => {
+      setMatches(matchMedia.matches);
+    };
+    handleChange();
+    matchMedia.addEventListener("change", handleChange);
+    return () => {
+      matchMedia.removeEventListener("change", handleChange);
+    };
+  }, [query]);
+  return matches;
+}
+var breakpoints = {
+  md: "(min-width: 800px)",
+  // Tablet: 50rem
+  lg: "(min-width: 1280px)"
+  // Desktop: 80rem
+};
+function useSmUp() {
+  return useMdUp();
+}
+function useMdUp() {
+  const matches = useMediaQuery(breakpoints.md);
+  return matches === void 0 ? void 0 : matches;
+}
+function useLgUp() {
+  const matches = useMediaQuery(breakpoints.lg);
+  return matches === void 0 ? void 0 : matches;
+}
+
+// src/hooks/ui/use-memoized-callback.ts
+import { useCallback as useCallback2, useRef as useRef3 } from "react";
+function useMemoizedCallback(callback, dependencies) {
+  const callbackRef = useRef3(callback);
+  const dependenciesRef = useRef3(dependencies);
+  callbackRef.current = callback;
+  const depsChanged = dependencies.some((dep, i) => !Object.is(dep, dependenciesRef.current[i]));
+  if (depsChanged) {
+    dependenciesRef.current = dependencies;
+  }
+  return useCallback2(((...args) => callbackRef.current(...args)), [depsChanged]);
+}
+
+// src/hooks/ui/use-notification-permission.ts
+import { useCallback as useCallback3, useEffect as useEffect4, useState as useState6 } from "react";
+function useNotificationPermission() {
+  const [supported, setSupported] = useState6(false);
+  const [permission, setPermission] = useState6("default");
+  useEffect4(() => {
+    if (typeof window === "undefined" || !("Notification" in window)) return;
+    setSupported(true);
+    const sync = () => setPermission(Notification.permission);
+    sync();
+    let cancelled = false;
+    let status;
+    navigator.permissions?.query({ name: "notifications" }).then((s) => {
+      if (cancelled) return;
+      status = s;
+      s.addEventListener("change", sync);
+    }).catch(() => void 0);
+    document.addEventListener("visibilitychange", sync);
+    window.addEventListener("focus", sync);
+    return () => {
+      cancelled = true;
+      status?.removeEventListener("change", sync);
+      document.removeEventListener("visibilitychange", sync);
+      window.removeEventListener("focus", sync);
+    };
+  }, []);
+  const request = useCallback3(async () => {
+    if (typeof window === "undefined" || !("Notification" in window)) {
+      return "denied";
+    }
+    const result = await new Promise((resolve) => {
+      const maybePromise = Notification.requestPermission(resolve);
+      if (maybePromise && typeof maybePromise.then === "function") void maybePromise.then(resolve);
+    });
+    setPermission(Notification.permission);
+    return result;
+  }, []);
+  return { supported, permission, request };
+}
+
+// src/hooks/ui/use-onboarding-state.ts
+import { useState as useState7, useEffect as useEffect5, useCallback as useCallback4 } from "react";
+
+// src/utils/onboarding-storage.ts
+var DEFAULT_STATE = {
+  completedSteps: [],
+  skippedSteps: [],
+  dismissed: false,
+  lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
+};
+function saveOnboardingState(key, state) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(key, JSON.stringify(state));
+    console.log("\u{1F4BE} Saved onboarding state:", state);
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("localStorageUpdate", {
+          detail: { key, newValue: JSON.stringify(state) }
+        })
+      );
+    }
+  } catch (err) {
+    console.warn("[onboarding-storage] Failed saving to localStorage:", err);
+  }
+}
+function loadOnboardingState(key) {
+  if (typeof window === "undefined") return DEFAULT_STATE;
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return DEFAULT_STATE;
+    const parsed = JSON.parse(raw);
+    return parsed;
+  } catch (err) {
+    console.warn("[onboarding-storage] Failed parsing localStorage data:", err);
+    return DEFAULT_STATE;
   }
-  if (!bestBucket || bestBucket.count === 0) return "#000000";
-  const r = Math.round(bestBucket.r / bestBucket.count);
-  const g = Math.round(bestBucket.g / bestBucket.count);
-  const b = Math.round(bestBucket.b / bestBucket.count);
-  return `rgb(${r}, ${g}, ${b})`;
 }
-function useImageEdgeColor(imageUrl, fallback = "#000000") {
-  const [color, setColor] = useState7(fallback);
-  useEffect4(() => {
-    if (!imageUrl) {
-      setColor(fallback);
-      return;
-    }
-    let cancelled = false;
-    const img = new Image();
-    img.crossOrigin = "anonymous";
-    img.onload = () => {
-      if (cancelled) return;
-      try {
-        setColor(extractEdgeColor(img));
-      } catch {
-        setColor(fallback);
+function markMultipleComplete(key, stepIds) {
+  const state = loadOnboardingState(key);
+  const newState = {
+    ...state,
+    completedSteps: [.../* @__PURE__ */ new Set([...state.completedSteps, ...stepIds])],
+    skippedSteps: state.skippedSteps.filter((id) => !stepIds.includes(id)),
+    lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
+  };
+  saveOnboardingState(key, newState);
+  return newState;
+}
+function markStepComplete(key, stepId) {
+  return markMultipleComplete(key, [stepId]);
+}
+function markStepSkipped(key, stepId) {
+  const state = loadOnboardingState(key);
+  const newState = {
+    ...state,
+    skippedSteps: [.../* @__PURE__ */ new Set([...state.skippedSteps, stepId])],
+    completedSteps: state.completedSteps.filter((id) => id !== stepId),
+    lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
+  };
+  saveOnboardingState(key, newState);
+  return newState;
+}
+function dismissOnboarding(key) {
+  const state = loadOnboardingState(key);
+  const newState = {
+    ...state,
+    dismissed: true,
+    lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
+  };
+  saveOnboardingState(key, newState);
+  return newState;
+}
+
+// src/hooks/ui/use-onboarding-state.ts
+function useOnboardingState(storageKey = "openframe-onboarding-state") {
+  const [state, setState] = useState7(() => loadOnboardingState(storageKey));
+  const [, forceUpdate] = useState7(0);
+  useEffect5(() => {
+    const handleStorageUpdate = (e) => {
+      if (e.detail.key === storageKey) {
+        const newState = loadOnboardingState(storageKey);
+        setState(newState);
+        forceUpdate((prev) => prev + 1);
+        console.log("\u{1F504} State updated from storage event:", newState);
       }
     };
-    img.onerror = () => {
-      if (cancelled) return;
-      setColor(fallback);
-    };
-    img.src = imageUrl;
+    window.addEventListener("localStorageUpdate", handleStorageUpdate);
     return () => {
-      cancelled = true;
+      window.removeEventListener("localStorageUpdate", handleStorageUpdate);
     };
-  }, [imageUrl, fallback]);
-  return color;
+  }, [storageKey]);
+  const markComplete = useCallback4((stepId) => {
+    console.log(`\u{1F3AF} markComplete called for: "${stepId}"`);
+    const newState = markStepComplete(storageKey, stepId);
+    setState(newState);
+    forceUpdate((prev) => prev + 1);
+  }, [storageKey]);
+  const markSkipped = useCallback4((stepId) => {
+    console.log(`\u23ED\uFE0F markSkipped called for: "${stepId}"`);
+    const newState = markStepSkipped(storageKey, stepId);
+    setState(newState);
+    forceUpdate((prev) => prev + 1);
+  }, [storageKey]);
+  const dismissOnboarding2 = useCallback4(() => {
+    console.log(`\u{1F6AB} dismissOnboarding called`);
+    const newState = dismissOnboarding(storageKey);
+    setState(newState);
+    forceUpdate((prev) => prev + 1);
+  }, [storageKey]);
+  const markMultipleComplete2 = useCallback4((stepIds) => {
+    console.log(`\u{1F3AF} markMultipleComplete called for:`, stepIds);
+    const newState = markMultipleComplete(storageKey, stepIds);
+    setState(newState);
+    forceUpdate((prev) => prev + 1);
+    console.log(`\u{1F4DD} State after batch:`, newState);
+  }, [storageKey]);
+  const isStepComplete = useCallback4((stepId) => {
+    return state.completedSteps.includes(stepId);
+  }, [state.completedSteps]);
+  const isStepSkipped = useCallback4((stepId) => {
+    return state.skippedSteps.includes(stepId);
+  }, [state.skippedSteps]);
+  const allStepsComplete = useCallback4((steps) => {
+    return steps.every((step) => isStepComplete(step.id) || isStepSkipped(step.id));
+  }, [isStepComplete, isStepSkipped]);
+  return {
+    state,
+    markComplete,
+    markSkipped,
+    dismissOnboarding: dismissOnboarding2,
+    isStepComplete,
+    isStepSkipped,
+    allStepsComplete,
+    markMultipleComplete: markMultipleComplete2
+  };
 }
 
 // src/hooks/ui/use-search.ts
-import { useState as useState8, useEffect as useEffect5, useCallback as useCallback4 } from "react";
+import { useState as useState8, useEffect as useEffect6, useCallback as useCallback5 } from "react";
 function useSearch(config) {
   const { searchFn, mapResult, debounceMs = 300, minQueryLength = 2 } = config;
   const [query, setQuery] = useState8("");
@@ -655,11 +668,11 @@ function useSearch(config) {
   const [isLoading, setIsLoading] = useState8(false);
   const [error, setError] = useState8(null);
   const debouncedQuery = useDebounce(query, debounceMs);
-  const clearResults = useCallback4(() => {
+  const clearResults = useCallback5(() => {
     setResults([]);
     setError(null);
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!debouncedQuery || debouncedQuery.length < minQueryLength) {
       setResults([]);
       setIsLoading(false);
@@ -694,8 +707,93 @@ function useSearch(config) {
   return { query, setQuery, results, isLoading, error, clearResults };
 }
 
+// src/hooks/ui/use-table-pagination.ts
+import { useMemo } from "react";
+function useTablePagination(config) {
+  return useMemo(() => {
+    if (!config) return void 0;
+    if (config.type === "client") {
+      if (config.totalPages <= 1) return void 0;
+      return {
+        hasNextPage: config.currentPage < config.totalPages,
+        hasPreviousPage: config.currentPage > 1,
+        isFirstPage: config.currentPage === 1,
+        startCursor: (config.currentPage - 1).toString(),
+        endCursor: config.currentPage.toString(),
+        currentCount: config.itemCount,
+        itemName: config.itemName || "items",
+        onNext: () => config.onNext(),
+        onPrevious: () => config.onPrevious(),
+        showInfo: config.showInfo ?? true
+      };
+    } else {
+      return {
+        hasNextPage: config.hasNextPage,
+        hasPreviousPage: config.hasLoadedBeyondFirst,
+        isFirstPage: !config.hasLoadedBeyondFirst,
+        startCursor: config.startCursor,
+        endCursor: config.endCursor,
+        currentCount: config.itemCount,
+        itemName: config.itemName || "items",
+        onNext: config.onNext,
+        onPrevious: config.onReset,
+        // Previous button goes back to first page
+        showInfo: config.showInfo ?? true
+      };
+    }
+  }, [config]);
+}
+
+// src/hooks/ui/use-throttle.ts
+import { useState as useState9, useEffect as useEffect7, useRef as useRef4 } from "react";
+function useThrottle(value, limit = 200) {
+  const [throttledValue, setThrottledValue] = useState9(value);
+  const lastUpdated = useRef4(Date.now());
+  useEffect7(() => {
+    const now = Date.now();
+    const elapsed = now - lastUpdated.current;
+    if (elapsed >= limit) {
+      setThrottledValue(value);
+      lastUpdated.current = now;
+    } else {
+      const timerId = setTimeout(() => {
+        setThrottledValue(value);
+        lastUpdated.current = Date.now();
+      }, limit - elapsed);
+      return () => {
+        clearTimeout(timerId);
+      };
+    }
+  }, [value, limit]);
+  return throttledValue;
+}
+
+// src/hooks/ui/use-window-size.ts
+import { useLayoutEffect as useLayoutEffect2, useState as useState10 } from "react";
+function useWindowSize() {
+  const [windowSize, setWindowSize] = useState10({
+    width: 0,
+    height: 0
+  });
+  const [isClient, setIsClient] = useState10(false);
+  useLayoutEffect2(() => {
+    setIsClient(true);
+    if (!isClient) return;
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [isClient]);
+  return windowSize;
+}
+
 // src/hooks/platform/use-platform-config.ts
-import { useState as useState9, useEffect as useEffect6 } from "react";
+import { useState as useState11, useEffect as useEffect8 } from "react";
 
 // src/utils/platform-config.tsx
 import { Globe } from "lucide-react";
@@ -873,10 +971,10 @@ function getPlatformIconComponent(platformName, className = "h-6 w-6") {
 var platformCache = null;
 var fetchPromise = null;
 function usePlatformConfig() {
-  const [platforms, setPlatforms] = useState9(platformCache || []);
-  const [isLoading, setIsLoading] = useState9(!platformCache);
-  const [error, setError] = useState9(null);
-  useEffect6(() => {
+  const [platforms, setPlatforms] = useState11(platformCache || []);
+  const [isLoading, setIsLoading] = useState11(!platformCache);
+  const [error, setError] = useState11(null);
+  useEffect8(() => {
     if (platformCache) {
       setPlatforms(platformCache);
       setIsLoading(false);
@@ -1325,16 +1423,16 @@ var useToast = () => ({
 });
 
 // src/hooks/use-contact-submission.ts
-import { useState as useState11, useCallback as useCallback5, useEffect as useEffect7 } from "react";
+import { useState as useState13, useCallback as useCallback6, useEffect as useEffect9 } from "react";
 init_next_navigation();
 function useContactSubmission(options = {}) {
   const { userId, successRedirectUrl, successToastMessage, onSuccess } = options;
   const { toast: toast2 } = useToast();
   const router = useRouter();
   const { contactUrl } = useRequiredEndpointsRuntime();
-  const [isSubmitting, setIsSubmitting] = useState11(false);
-  const [isSuccess, setIsSuccess] = useState11(false);
-  const submit = useCallback5(async (formData) => {
+  const [isSubmitting, setIsSubmitting] = useState13(false);
+  const [isSuccess, setIsSuccess] = useState13(false);
+  const submit = useCallback6(async (formData) => {
     if (isSubmitting) return;
     setIsSubmitting(true);
     try {
@@ -1369,7 +1467,7 @@ function useContactSubmission(options = {}) {
       setIsSubmitting(false);
     }
   }, [isSubmitting, toast2, userId, successToastMessage, contactUrl]);
-  useEffect7(() => {
+  useEffect9(() => {
     if (isSuccess && successRedirectUrl) {
       console.log("\u{1F680} Contact submission successful, redirecting to:", successRedirectUrl);
       const timer = setTimeout(() => {
@@ -1383,7 +1481,7 @@ function useContactSubmission(options = {}) {
       return () => clearTimeout(timer);
     }
   }, [isSuccess, successRedirectUrl, router]);
-  useEffect7(() => {
+  useEffect9(() => {
     if (isSuccess && onSuccess) {
       onSuccess();
     }
@@ -1392,19 +1490,19 @@ function useContactSubmission(options = {}) {
 }
 
 // src/hooks/use-quick-action-hint.ts
-import { useEffect as useEffect8, useState as useState12, useRef as useRef5, useCallback as useCallback6 } from "react";
+import { useEffect as useEffect10, useState as useState14, useRef as useRef5, useCallback as useCallback7 } from "react";
 function useQuickActionHint({
   actionCount,
   cycleDuration = 5e3,
   enabled = true
 }) {
-  const [activeHintIndex, setActiveHintIndex] = useState12(-1);
+  const [activeHintIndex, setActiveHintIndex] = useState14(-1);
   const containerRef = useRef5(null);
   const timeoutRef = useRef5(null);
   const cycleCountRef = useRef5(0);
   const currentIndexRef = useRef5(0);
   const sequenceRef = useRef5([]);
-  const shuffleIndices = useCallback6((length) => {
+  const shuffleIndices = useCallback7((length) => {
     const indices = Array.from({ length }, (_, i) => i);
     for (let i = indices.length - 1; i > 0; i--) {
       const j = Math.floor(Math.random() * (i + 1));
@@ -1412,7 +1510,7 @@ function useQuickActionHint({
     }
     return indices;
   }, []);
-  const stopHint = useCallback6(() => {
+  const stopHint = useCallback7(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
@@ -1422,7 +1520,7 @@ function useQuickActionHint({
     currentIndexRef.current = 0;
     sequenceRef.current = [];
   }, []);
-  const advanceHint = useCallback6(() => {
+  const advanceHint = useCallback7(() => {
     if (currentIndexRef.current === 0) {
       sequenceRef.current = shuffleIndices(actionCount);
     }
@@ -1435,7 +1533,7 @@ function useQuickActionHint({
     }
     timeoutRef.current = setTimeout(advanceHint, cycleDuration);
   }, [actionCount, cycleDuration, shuffleIndices]);
-  useEffect8(() => {
+  useEffect10(() => {
     if (!enabled || actionCount === 0) {
       return;
     }
@@ -1461,7 +1559,7 @@ function useQuickActionHint({
 }
 
 // src/hooks/use-copy-to-clipboard.ts
-import { useCallback as useCallback7, useState as useState13 } from "react";
+import { useCallback as useCallback8, useState as useState15 } from "react";
 function useCopyToClipboard({
   successTitle = "Copied",
   successDescription = "Copied to clipboard",
@@ -1470,8 +1568,8 @@ function useCopyToClipboard({
   resetDelay = 2e3
 } = {}) {
   const { toast: toast2 } = useToast();
-  const [copied, setCopied] = useState13(false);
-  const copy = useCallback7(
+  const [copied, setCopied] = useState15(false);
+  const copy = useCallback8(
     async (text) => {
       try {
         await navigator.clipboard.writeText(text);
@@ -1488,7 +1586,7 @@ function useCopyToClipboard({
 }
 
 // src/hooks/use-batch-images.ts
-import { useEffect as useEffect9, useMemo as useMemo2, useState as useState14, useRef as useRef6 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo2, useState as useState16, useRef as useRef6 } from "react";
 var globalBatchImageConfig = {};
 function configureBatchImageFetch(config) {
   globalBatchImageConfig = { ...globalBatchImageConfig, ...config };
@@ -1561,14 +1659,14 @@ async function batchFetchAuthenticatedImages(imageUrls, config) {
   return results;
 }
 function useBatchImages(imageUrls, config) {
-  const [fetchedImages, setFetchedImages] = useState14({});
-  const [loading, setLoading] = useState14(false);
+  const [fetchedImages, setFetchedImages] = useState16({});
+  const [loading, setLoading] = useState16(false);
   const uniqueUrls = useMemo2(
     () => Array.from(new Set(imageUrls.filter((url) => Boolean(url)))),
     [imageUrls]
   );
   const requestedUrls = useRef6(/* @__PURE__ */ new Set());
-  useEffect9(() => {
+  useEffect11(() => {
     if (uniqueUrls.length === 0) {
       setFetchedImages({});
       return;
@@ -1598,7 +1696,7 @@ function useBatchImages(imageUrls, config) {
 }
 
 // src/hooks/use-authenticated-image.ts
-import { useEffect as useEffect10, useState as useState15, useRef as useRef7 } from "react";
+import { useEffect as useEffect12, useState as useState17, useRef as useRef7 } from "react";
 var globalImageConfig = {};
 var imageCache = /* @__PURE__ */ new Map();
 var pendingRequests = /* @__PURE__ */ new Map();
@@ -1627,11 +1725,11 @@ function getImageConfig() {
   };
 }
 function useAuthenticatedImage(imageUrl, refreshKey, config) {
-  const [fetchedImageUrl, setFetchedImageUrl] = useState15();
-  const [isLoading, setIsLoading] = useState15(false);
-  const [error, setError] = useState15(null);
+  const [fetchedImageUrl, setFetchedImageUrl] = useState17();
+  const [isLoading, setIsLoading] = useState17(false);
+  const [error, setError] = useState17(null);
   const currentCacheKeyRef = useRef7(null);
-  useEffect10(() => {
+  useEffect12(() => {
     if (!imageUrl) {
       setFetchedImageUrl(void 0);
       setIsLoading(false);
@@ -1742,7 +1840,7 @@ function useAuthenticatedImage(imageUrl, refreshKey, config) {
     });
     pendingRequests.set(cacheKey, fetchPromise2);
   }, [imageUrl, refreshKey, config]);
-  useEffect10(() => {
+  useEffect12(() => {
     return () => {
       if (currentCacheKeyRef.current) {
         const entry = imageCache.get(currentCacheKeyRef.current);
@@ -1757,7 +1855,7 @@ function useAuthenticatedImage(imageUrl, refreshKey, config) {
 
 // src/hooks/state/use-query-params.ts
 init_next_navigation();
-import { useEffect as useEffect11, useState as useState16, useMemo as useMemo3, useCallback as useCallback8 } from "react";
+import { useEffect as useEffect13, useState as useState18, useMemo as useMemo3, useCallback as useCallback9 } from "react";
 
 // src/hooks/state/graphql-parser.ts
 import {
@@ -2219,14 +2317,14 @@ var introspector = new GraphQLIntrospector();
 function useQueryParams(query, options = {}) {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const [isLoading, setIsLoading] = useState16(true);
-  const [isReady, setIsReady] = useState16(false);
-  const [error, setError] = useState16(null);
-  const [schema, setSchema] = useState16({});
+  const [isLoading, setIsLoading] = useState18(true);
+  const [isReady, setIsReady] = useState18(false);
+  const [error, setError] = useState18(null);
+  const [schema, setSchema] = useState18({});
   const defaultValues = options.defaultValues || {};
   const skipIntrospection = options.skipIntrospection || false;
   const debug = options.debug || false;
-  useEffect11(() => {
+  useEffect13(() => {
     async function initialize() {
       try {
         if (debug) console.log("[useQueryParams] Initializing...");
@@ -2296,14 +2394,14 @@ function useQueryParams(query, options = {}) {
     });
     return result;
   }, [searchParams]);
-  const updateUrl = useCallback8((newParams) => {
+  const updateUrl = useCallback9((newParams) => {
     const url = newParams.toString() ? `?${newParams.toString()}` : window.location.pathname;
     if (debug) {
       console.log("[useQueryParams] Updating URL:", url);
     }
     router.replace(url, { scroll: false });
   }, [router, debug]);
-  const setParam = useCallback8((key, value) => {
+  const setParam = useCallback9((key, value) => {
     if (!isReady) {
       console.warn("[useQueryParams] Schema not ready, cannot set param");
       return;
@@ -2317,7 +2415,7 @@ function useQueryParams(query, options = {}) {
       console.error("[useQueryParams] Failed to set param:", err);
     }
   }, [variables, schema, isReady, updateUrl]);
-  const setParams = useCallback8((updates) => {
+  const setParams = useCallback9((updates) => {
     if (!isReady) {
       console.warn("[useQueryParams] Schema not ready, cannot set params");
       return;
@@ -2331,7 +2429,7 @@ function useQueryParams(query, options = {}) {
       console.error("[useQueryParams] Failed to set params:", err);
     }
   }, [variables, schema, isReady, updateUrl]);
-  const clearParamsHandler = useCallback8((keys) => {
+  const clearParamsHandler = useCallback9((keys) => {
     if (!isReady) {
       console.warn("[useQueryParams] Schema not ready, cannot clear params");
       return;
@@ -2345,7 +2443,7 @@ function useQueryParams(query, options = {}) {
       console.error("[useQueryParams] Failed to clear params:", err);
     }
   }, [variables, schema, isReady, updateUrl]);
-  const resetParams = useCallback8(() => {
+  const resetParams = useCallback9(() => {
     if (debug) {
       console.log("[useQueryParams] Resetting params");
     }
@@ -2378,7 +2476,7 @@ function applyParamMapping(schema, mapping) {
 
 // src/hooks/state/use-api-params.ts
 init_next_navigation();
-import { useCallback as useCallback9, useMemo as useMemo4, useRef as useRef8 } from "react";
+import { useCallback as useCallback10, useMemo as useMemo4, useRef as useRef8 } from "react";
 function useContentStable(value, key) {
   const ref = useRef8(void 0);
   if (ref.current && ref.current.key === key) return ref.current.value;
@@ -2437,7 +2535,7 @@ function useApiParams(schema, options = {}) {
     prevParamsRef.current = result;
     return result;
   }, [searchString, schemaKey, debug]);
-  const addParamToSearchParams = useCallback9((searchParams, key, value) => {
+  const addParamToSearchParams = useCallback10((searchParams, key, value) => {
     if (value === void 0 || value === "" || value === null) {
       return;
     }
@@ -2465,7 +2563,7 @@ function useApiParams(schema, options = {}) {
     }
     return newParams;
   }, [params, schemaKey, flattenedSchema, addParamToSearchParams]);
-  const updateUrl = useCallback9((newParams, keysToRemove = []) => {
+  const updateUrl = useCallback10((newParams, keysToRemove = []) => {
     const finalParams = new URLSearchParams(searchString);
     keysToRemove.forEach((key) => {
       if (key in stableSchema) {
@@ -2501,7 +2599,7 @@ function useApiParams(schema, options = {}) {
     }
     return false;
   };
-  const setParam = useCallback9((key, value) => {
+  const setParam = useCallback10((key, value) => {
     const config = stableSchema[key];
     if (!config) {
       console.warn(`[useApiParams] Unknown parameter: ${key}`);
@@ -2515,7 +2613,7 @@ function useApiParams(schema, options = {}) {
       updateUrl(newParams);
     }
   }, [schemaKey, updateUrl, addParamToSearchParams]);
-  const setParams = useCallback9((updates) => {
+  const setParams = useCallback10((updates) => {
     const newParams = new URLSearchParams();
     const keysToRemove = [];
     for (const [key, value] of Object.entries(updates)) {
@@ -2532,11 +2630,11 @@ function useApiParams(schema, options = {}) {
     }
     updateUrl(newParams, keysToRemove);
   }, [schemaKey, updateUrl, addParamToSearchParams]);
-  const clearParams2 = useCallback9((keys) => {
+  const clearParams2 = useCallback10((keys) => {
     const newParams = new URLSearchParams();
     updateUrl(newParams, keys);
   }, [updateUrl]);
-  const resetParams = useCallback9(() => {
+  const resetParams = useCallback10(() => {
     if (debug) {
       console.log("[useApiParams] Resetting params");
     }
@@ -2573,7 +2671,7 @@ function createSearchParams(params) {
 }
 
 // src/hooks/state/use-cursor-pagination-state.ts
-import { useCallback as useCallback10, useEffect as useEffect12, useRef as useRef9, useState as useState17 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect14, useRef as useRef9, useState as useState19 } from "react";
 var urlSchema = {
   search: { type: "string", default: "" },
   cursor: { type: "string", default: "" }
@@ -2584,13 +2682,13 @@ function useCursorPaginationState(options) {
     onSearchChange
   } = options;
   const { params, setParam, setParams } = useApiParams(urlSchema);
-  const [searchInput, setSearchInput] = useState17(params.search || "");
-  const [hasLoadedBeyondFirst, setHasLoadedBeyondFirst] = useState17(false);
-  const [initialLoadCount, setInitialLoadCount] = useState17(0);
+  const [searchInput, setSearchInput] = useState19(params.search || "");
+  const [hasLoadedBeyondFirst, setHasLoadedBeyondFirst] = useState19(false);
+  const [initialLoadCount, setInitialLoadCount] = useState19(0);
   const lastSearchRef = useRef9(null);
   const isSyncingFromUrl = useRef9(false);
   const isInitialLoadInProgress = useRef9(true);
-  useEffect12(() => {
+  useEffect14(() => {
     if (isInitialLoadInProgress.current) return;
     const urlSearch = params.search || "";
     if (urlSearch !== searchInput) {
@@ -2601,7 +2699,7 @@ function useCursorPaginationState(options) {
       }, 0);
     }
   }, [params.search, initialLoadCount]);
-  useEffect12(() => {
+  useEffect14(() => {
     if (isInitialLoadInProgress.current) return;
     if (isSyncingFromUrl.current) return;
     if (searchInput !== params.search) {
@@ -2612,7 +2710,7 @@ function useCursorPaginationState(options) {
       });
     }
   }, [searchInput, params.search, setParams, initialLoadCount]);
-  useEffect12(() => {
+  useEffect14(() => {
     if (initialLoadCount === 0) {
       const cursor = params.cursor || null;
       const search = params.search || "";
@@ -2626,7 +2724,7 @@ function useCursorPaginationState(options) {
       });
     }
   }, []);
-  useEffect12(() => {
+  useEffect14(() => {
     if (isInitialLoadInProgress.current) return;
     if (initialLoadCount === 0) return;
     const currentSearch = params.search || "";
@@ -2636,7 +2734,7 @@ function useCursorPaginationState(options) {
       onSearchChange(currentSearch);
     }
   }, [params.search, onSearchChange, initialLoadCount]);
-  const handleNextPage = useCallback10(
+  const handleNextPage = useCallback11(
     async (endCursor, fetchFn) => {
       setParam("cursor", endCursor);
       await fetchFn();
@@ -2644,7 +2742,7 @@ function useCursorPaginationState(options) {
     },
     [setParam]
   );
-  const handleResetToFirstPage = useCallback10(
+  const handleResetToFirstPage = useCallback11(
     async (fetchFn) => {
       setParam("cursor", "");
       await fetchFn();
@@ -2666,16 +2764,16 @@ function useCursorPaginationState(options) {
 }
 
 // src/hooks/nats/use-nats-client.ts
-import { useEffect as useEffect13, useMemo as useMemo5, useState as useState18 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo5, useState as useState20 } from "react";
 function useNatsClient(clientOptions, options = {}) {
   const { autoConnect = true } = options;
   const client = useMemo5(() => {
     if (!clientOptions) return null;
     return createNatsClient(clientOptions);
   }, [clientOptions]);
-  const [status, setStatus] = useState18("disconnected");
-  const [lastError, setLastError] = useState18(null);
-  useEffect13(() => {
+  const [status, setStatus] = useState20("disconnected");
+  const [lastError, setLastError] = useState20(null);
+  useEffect15(() => {
     if (!client) {
       setStatus("disconnected");
       setLastError(null);
@@ -2808,7 +2906,7 @@ function useAccessCodeIntegration() {
 }
 
 // src/hooks/use-humanity-signals.ts
-import { useCallback as useCallback11, useRef as useRef10 } from "react";
+import { useCallback as useCallback12, useRef as useRef10 } from "react";
 
 // src/utils/humanity-signals.ts
 var HONEYPOT_FIELD = "contact_url_confirm";
@@ -2834,14 +2932,14 @@ var splitCsvEnv = (s) => s?.split(",").map((t) => t.trim()).filter(Boolean) ?? [
 function useHumanitySignals() {
   const ref = useRef10(null);
   const mountedAt = useRef10(typeof performance !== "undefined" ? performance.now() : 0);
-  const getSignals = useCallback11(
+  const getSignals = useCallback12(
     () => ({
       [HONEYPOT_FIELD]: ref.current?.value ?? "",
       [ELAPSED_MS_FIELD]: typeof performance !== "undefined" ? Math.round(performance.now() - mountedAt.current) : 0
     }),
     []
   );
-  const resetSignals = useCallback11(() => {
+  const resetSignals = useCallback12(() => {
     if (ref.current) ref.current.value = "";
     if (typeof performance !== "undefined") mountedAt.current = performance.now();
   }, []);
@@ -2849,6 +2947,9 @@ function useHumanitySignals() {
 }
 
 export {
+  useHeaderHeight,
+  useHorizontalScrollbar,
+  useImageEdgeColor,
   useLocalStorage,
   useMediaQuery,
   breakpoints,
@@ -2856,13 +2957,12 @@ export {
   useMdUp,
   useLgUp,
   useMemoizedCallback,
+  useNotificationPermission,
   useOnboardingState,
+  useSearch,
   useTablePagination,
   useThrottle,
   useWindowSize,
-  useHorizontalScrollbar,
-  useImageEdgeColor,
-  useSearch,
   platformIcons,
   platformColors,
   platformDisplayNames,
@@ -2939,4 +3039,4 @@ export {
   splitCsvEnv,
   useHumanitySignals
 };
-//# sourceMappingURL=chunk-6GBA6YJN.js.map
+//# sourceMappingURL=chunk-ZMFT5XOB.js.map