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

package/dist/{chunk-3DC6MHW6.cjs → chunk-QLWBBCI5.cjs}

@@ -33,355 +33,46 @@ var _chunkFIG2RKZFcjs = require('./chunk-FIG2RKZF.cjs');
 
 var _chunkC6ASEPZLcjs = require('./chunk-C6ASEPZL.cjs');
 
-// src/hooks/ui/use-local-storage.ts
-var _react = require('react'); var React = _interopRequireWildcard(_react);
-function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = _react.useState.call(void 0, () => {
-    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 = _react.useRef.call(void 0, true);
-  const isFromStorageEvent = _react.useRef.call(void 0, false);
-  _react.useEffect.call(void 0, () => {
-    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]);
-  _react.useEffect.call(void 0, () => {
-    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
-
-function useMediaQuery(query) {
-  const [matches, setMatches] = _react.useState.call(void 0, void 0);
-  _react.useLayoutEffect.call(void 0, () => {
-    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
-
-function useMemoizedCallback(callback, dependencies) {
-  const callbackRef = _react.useRef.call(void 0, callback);
-  const dependenciesRef = _react.useRef.call(void 0, dependencies);
-  callbackRef.current = callback;
-  const depsChanged = dependencies.some((dep, i) => !Object.is(dep, dependenciesRef.current[i]));
-  if (depsChanged) {
-    dependenciesRef.current = dependencies;
-  }
-  return _react.useCallback.call(void 0, ((...args) => callbackRef.current(...args)), [depsChanged]);
-}
-
-// src/hooks/ui/use-onboarding-state.ts
-
-
-// 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] = _react.useState.call(void 0, () => loadOnboardingState(storageKey));
-  const [, forceUpdate] = _react.useState.call(void 0, 0);
-  _react.useEffect.call(void 0, () => {
-    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);
-    return () => {
-      window.removeEventListener("localStorageUpdate", handleStorageUpdate);
-    };
-  }, [storageKey]);
-  const markComplete = _react.useCallback.call(void 0, (stepId) => {
-    console.log(`\u{1F3AF} markComplete called for: "${stepId}"`);
-    const newState = markStepComplete(storageKey, stepId);
-    setState(newState);
-    forceUpdate((prev) => prev + 1);
-  }, [storageKey]);
-  const markSkipped = _react.useCallback.call(void 0, (stepId) => {
-    console.log(`\u23ED\uFE0F markSkipped called for: "${stepId}"`);
-    const newState = markStepSkipped(storageKey, stepId);
-    setState(newState);
-    forceUpdate((prev) => prev + 1);
-  }, [storageKey]);
-  const dismissOnboarding2 = _react.useCallback.call(void 0, () => {
-    console.log(`\u{1F6AB} dismissOnboarding called`);
-    const newState = dismissOnboarding(storageKey);
-    setState(newState);
-    forceUpdate((prev) => prev + 1);
-  }, [storageKey]);
-  const markMultipleComplete2 = _react.useCallback.call(void 0, (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 = _react.useCallback.call(void 0, (stepId) => {
-    return state.completedSteps.includes(stepId);
-  }, [state.completedSteps]);
-  const isStepSkipped = _react.useCallback.call(void 0, (stepId) => {
-    return state.skippedSteps.includes(stepId);
-  }, [state.skippedSteps]);
-  const allStepsComplete = _react.useCallback.call(void 0, (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
-
-function useTablePagination(config) {
-  return _react.useMemo.call(void 0, () => {
-    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: _nullishCoalesce(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: _nullishCoalesce(config.showInfo, () => ( true))
-      };
-    }
-  }, [config]);
-}
-
-// src/hooks/ui/use-throttle.ts
-
-function useThrottle(value, limit = 200) {
-  const [throttledValue, setThrottledValue] = _react.useState.call(void 0, value);
-  const lastUpdated = _react.useRef.call(void 0, Date.now());
+// src/hooks/ui/use-header-height.ts
+var _react = require('react'); var React = _interopRequireWildcard(_react);
+function useHeaderHeight(defaultHeight = 64) {
+  const [height, setHeight] = _react.useState.call(void 0, defaultHeight);
   _react.useEffect.call(void 0, () => {
-    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
-
-function useWindowSize() {
-  const [windowSize, setWindowSize] = _react.useState.call(void 0, {
-    width: 0,
-    height: 0
-  });
-  const [isClient, setIsClient] = _react.useState.call(void 0, false);
-  _react.useLayoutEffect.call(void 0, () => {
-    setIsClient(true);
-    if (!isClient) return;
-    const handleResize = () => {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
+    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);
     };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [isClient]);
-  return windowSize;
+    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);
+        }
+      }
+    });
+    mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-announcement-bar"]
+    });
+    return () => {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [defaultHeight]);
+  return height;
 }
 
 // src/hooks/ui/use-horizontal-scrollbar.ts
@@ -391,6 +82,7 @@ function useHorizontalScrollbar() {
   const trackRef = _react.useRef.call(void 0, null);
   const thumbRef = _react.useRef.call(void 0, null);
   const roRef = _react.useRef.call(void 0, null);
+  const moRef = _react.useRef.call(void 0, null);
   const [thumbRatio, setThumbRatio] = _react.useState.call(void 0, 0);
   const [canScrollLeft, setCanScrollLeft] = _react.useState.call(void 0, false);
   const [canScrollRight, setCanScrollRight] = _react.useState.call(void 0, false);
@@ -453,6 +145,10 @@ function useHorizontalScrollbar() {
       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();
@@ -602,48 +309,354 @@ function extractEdgeColor(img) {
         buckets.set(key, { r: r2, g: g2, b: b2, count: 1 });
       }
     }
-  }
-  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] = _react.useState.call(void 0, fallback);
+  _react.useEffect.call(void 0, () => {
+    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 (e2) {
+        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
+
+function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = _react.useState.call(void 0, () => {
+    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 = _react.useRef.call(void 0, true);
+  const isFromStorageEvent = _react.useRef.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    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]);
+  _react.useEffect.call(void 0, () => {
+    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
+
+function useMediaQuery(query) {
+  const [matches, setMatches] = _react.useState.call(void 0, void 0);
+  _react.useLayoutEffect.call(void 0, () => {
+    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
+
+function useMemoizedCallback(callback, dependencies) {
+  const callbackRef = _react.useRef.call(void 0, callback);
+  const dependenciesRef = _react.useRef.call(void 0, dependencies);
+  callbackRef.current = callback;
+  const depsChanged = dependencies.some((dep, i) => !Object.is(dep, dependenciesRef.current[i]));
+  if (depsChanged) {
+    dependenciesRef.current = dependencies;
+  }
+  return _react.useCallback.call(void 0, ((...args) => callbackRef.current(...args)), [depsChanged]);
+}
+
+// src/hooks/ui/use-notification-permission.ts
+
+function useNotificationPermission() {
+  const [supported, setSupported] = _react.useState.call(void 0, false);
+  const [permission, setPermission] = _react.useState.call(void 0, "default");
+  _react.useEffect.call(void 0, () => {
+    if (typeof window === "undefined" || !("Notification" in window)) return;
+    setSupported(true);
+    const sync = () => setPermission(Notification.permission);
+    sync();
+    let cancelled = false;
+    let status;
+    _optionalChain([navigator, 'access', _2 => _2.permissions, 'optionalAccess', _3 => _3.query, 'call', _4 => _4({ name: "notifications" }), 'access', _5 => _5.then, 'call', _6 => _6((s) => {
+      if (cancelled) return;
+      status = s;
+      s.addEventListener("change", sync);
+    }), 'access', _7 => _7.catch, 'call', _8 => _8(() => void 0)]);
+    document.addEventListener("visibilitychange", sync);
+    window.addEventListener("focus", sync);
+    return () => {
+      cancelled = true;
+      _optionalChain([status, 'optionalAccess', _9 => _9.removeEventListener, 'call', _10 => _10("change", sync)]);
+      document.removeEventListener("visibilitychange", sync);
+      window.removeEventListener("focus", sync);
+    };
+  }, []);
+  const request = _react.useCallback.call(void 0, 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
+
+
+// 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);
   }
-  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] = _react.useState.call(void 0, fallback);
+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] = _react.useState.call(void 0, () => loadOnboardingState(storageKey));
+  const [, forceUpdate] = _react.useState.call(void 0, 0);
   _react.useEffect.call(void 0, () => {
-    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 (e2) {
-        setColor(fallback);
+    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 = _react.useCallback.call(void 0, (stepId) => {
+    console.log(`\u{1F3AF} markComplete called for: "${stepId}"`);
+    const newState = markStepComplete(storageKey, stepId);
+    setState(newState);
+    forceUpdate((prev) => prev + 1);
+  }, [storageKey]);
+  const markSkipped = _react.useCallback.call(void 0, (stepId) => {
+    console.log(`\u23ED\uFE0F markSkipped called for: "${stepId}"`);
+    const newState = markStepSkipped(storageKey, stepId);
+    setState(newState);
+    forceUpdate((prev) => prev + 1);
+  }, [storageKey]);
+  const dismissOnboarding2 = _react.useCallback.call(void 0, () => {
+    console.log(`\u{1F6AB} dismissOnboarding called`);
+    const newState = dismissOnboarding(storageKey);
+    setState(newState);
+    forceUpdate((prev) => prev + 1);
+  }, [storageKey]);
+  const markMultipleComplete2 = _react.useCallback.call(void 0, (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 = _react.useCallback.call(void 0, (stepId) => {
+    return state.completedSteps.includes(stepId);
+  }, [state.completedSteps]);
+  const isStepSkipped = _react.useCallback.call(void 0, (stepId) => {
+    return state.skippedSteps.includes(stepId);
+  }, [state.skippedSteps]);
+  const allStepsComplete = _react.useCallback.call(void 0, (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
@@ -694,6 +707,91 @@ function useSearch(config) {
   return { query, setQuery, results, isLoading, error, clearResults };
 }
 
+// src/hooks/ui/use-table-pagination.ts
+
+function useTablePagination(config) {
+  return _react.useMemo.call(void 0, () => {
+    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: _nullishCoalesce(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: _nullishCoalesce(config.showInfo, () => ( true))
+      };
+    }
+  }, [config]);
+}
+
+// src/hooks/ui/use-throttle.ts
+
+function useThrottle(value, limit = 200) {
+  const [throttledValue, setThrottledValue] = _react.useState.call(void 0, value);
+  const lastUpdated = _react.useRef.call(void 0, Date.now());
+  _react.useEffect.call(void 0, () => {
+    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
+
+function useWindowSize() {
+  const [windowSize, setWindowSize] = _react.useState.call(void 0, {
+    width: 0,
+    height: 0
+  });
+  const [isClient, setIsClient] = _react.useState.call(void 0, false);
+  _react.useLayoutEffect.call(void 0, () => {
+    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
 
 
@@ -995,7 +1093,7 @@ var toolIconMap = {
   [ToolTypeValues.OSQUERY]: (size, className) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkC6ASEPZLcjs.OsqueryLogoGreyIcon, { size, className }),
   [ToolTypeValues.SYSTEM]: () => null
 };
-var ToolIcon = ({ toolType, size = 16, className }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: _nullishCoalesce(_optionalChain([toolIconMap, 'access', _2 => _2[toolType], 'optionalCall', _3 => _3(size, className)]), () => ( null)) });
+var ToolIcon = ({ toolType, size = 16, className }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: _nullishCoalesce(_optionalChain([toolIconMap, 'access', _11 => _11[toolType], 'optionalCall', _12 => _12(size, className)]), () => ( null)) });
 ToolIcon.displayName = "ToolIcon";
 
 // src/components/ui/toaster.tsx
@@ -1114,11 +1212,11 @@ function CommandApprovalToast({
 }) {
   const [expanded, setExpanded] = React.useState(defaultExpanded);
   const handleApprove = () => {
-    _optionalChain([onApprove, 'optionalCall', _4 => _4()]);
+    _optionalChain([onApprove, 'optionalCall', _13 => _13()]);
     _sonner.toast.dismiss(id);
   };
   const handleReject = () => {
-    _optionalChain([onReject, 'optionalCall', _5 => _5()]);
+    _optionalChain([onReject, 'optionalCall', _14 => _14()]);
     _sonner.toast.dismiss(id);
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -1972,7 +2070,7 @@ function setNestedValue(obj, path, value) {
 }
 function getNestedValue(obj, path) {
   return path.split(".").reduce((current, key) => {
-    return _optionalChain([current, 'optionalAccess', _6 => _6[key]]);
+    return _optionalChain([current, 'optionalAccess', _15 => _15[key]]);
   }, obj);
 }
 function mergeVariables(currentVariables, updates, schema) {
@@ -2828,7 +2926,7 @@ function evaluateHumanitySignals(body, opts) {
   if (elapsedMs !== null && elapsedMs < opts.minFillMs) return { ok: false, reason: "too_fast" };
   return { ok: true };
 }
-var splitCsvEnv = (s) => _nullishCoalesce(_optionalChain([s, 'optionalAccess', _7 => _7.split, 'call', _8 => _8(","), 'access', _9 => _9.map, 'call', _10 => _10((t) => t.trim()), 'access', _11 => _11.filter, 'call', _12 => _12(Boolean)]), () => ( []));
+var splitCsvEnv = (s) => _nullishCoalesce(_optionalChain([s, 'optionalAccess', _16 => _16.split, 'call', _17 => _17(","), 'access', _18 => _18.map, 'call', _19 => _19((t) => t.trim()), 'access', _20 => _20.filter, 'call', _21 => _21(Boolean)]), () => ( []));
 
 // src/hooks/use-humanity-signals.ts
 function useHumanitySignals() {
@@ -2836,7 +2934,7 @@ function useHumanitySignals() {
   const mountedAt = _react.useRef.call(void 0, typeof performance !== "undefined" ? performance.now() : 0);
   const getSignals = _react.useCallback.call(void 0, 
     () => ({
-      [HONEYPOT_FIELD]: _nullishCoalesce(_optionalChain([ref, 'access', _13 => _13.current, 'optionalAccess', _14 => _14.value]), () => ( "")),
+      [HONEYPOT_FIELD]: _nullishCoalesce(_optionalChain([ref, 'access', _22 => _22.current, 'optionalAccess', _23 => _23.value]), () => ( "")),
       [ELAPSED_MS_FIELD]: typeof performance !== "undefined" ? Math.round(performance.now() - mountedAt.current) : 0
     }),
     []
@@ -2938,5 +3036,7 @@ function useHumanitySignals() {
 
 
 
-exports.useLocalStorage = useLocalStorage; exports.useMediaQuery = useMediaQuery; exports.breakpoints = breakpoints; exports.useSmUp = useSmUp; exports.useMdUp = useMdUp; exports.useLgUp = useLgUp; exports.useMemoizedCallback = useMemoizedCallback; exports.useOnboardingState = useOnboardingState; exports.useTablePagination = useTablePagination; exports.useThrottle = useThrottle; exports.useWindowSize = useWindowSize; exports.useHorizontalScrollbar = useHorizontalScrollbar; exports.useImageEdgeColor = useImageEdgeColor; exports.useSearch = useSearch; exports.platformIcons = platformIcons; exports.platformColors = platformColors; exports.platformDisplayNames = platformDisplayNames; exports.platformDescriptions = platformDescriptions; exports.platformSlogans = platformSlogans; exports.platformHexColors = platformHexColors; exports.platformIconNames = platformIconNames; exports.getDefaultColorForPlatform = getDefaultColorForPlatform; exports.getDefaultIconForPlatform = getDefaultIconForPlatform; exports.transformPlatformConfigsToOptions = transformPlatformConfigsToOptions; exports.getPlatformIcon = getPlatformIcon; exports.getPlatformColor = getPlatformColor; exports.getPlatformDisplayName = getPlatformDisplayName; exports.getPlatformDescription = getPlatformDescription; exports.getPlatformSlogan = getPlatformSlogan; exports.getSmallPlatformIcon = getSmallPlatformIcon; exports.getPlatformIconComponent = getPlatformIconComponent; exports.usePlatformConfig = usePlatformConfig; exports.usePlatformByValue = usePlatformByValue; exports.useValidatePlatform = useValidatePlatform; exports.ToolTypeValues = ToolTypeValues; exports.toolLabels = toolLabels; exports.ToolIcon = ToolIcon; exports.dotColorByVariant = dotColorByVariant; exports.progressColorByVariant = progressColorByVariant; exports.ToastCard = ToastCard; exports.CommandApprovalToast = CommandApprovalToast; exports.Toaster = Toaster; exports.showToast = showToast; exports.showCommandApprovalToast = showCommandApprovalToast; exports.toast = toast; exports.useToast = useToast; exports.useContactSubmission = useContactSubmission; exports.useQuickActionHint = useQuickActionHint; exports.useCopyToClipboard = useCopyToClipboard; exports.configureBatchImageFetch = configureBatchImageFetch; exports.batchFetchAuthenticatedImages = batchFetchAuthenticatedImages; exports.useBatchImages = useBatchImages; exports.configureAuthenticatedImage = configureAuthenticatedImage; exports.useAuthenticatedImage = useAuthenticatedImage; exports.extractVariablesFromQuery = extractVariablesFromQuery; exports.isScalarType = isScalarType; exports.isInputObjectType = isInputObjectType; exports.flattenQueryVariables = flattenQueryVariables; exports.mergeDefaults = mergeDefaults; exports.validateSchema = validateSchema; exports.getArrayParams = getArrayParams; exports.getRequiredParams = getRequiredParams; exports.shouldIncludeInUrl = shouldIncludeInUrl; exports.urlParamsToVariables = urlParamsToVariables; exports.variablesToUrlParams = variablesToUrlParams; exports.coerceValue = coerceValue; exports.setNestedValue = setNestedValue; exports.getNestedValue = getNestedValue; exports.mergeVariables = mergeVariables; exports.clearParams = clearParams; exports.validateVariables = validateVariables; exports.GraphQLIntrospector = GraphQLIntrospector; exports.introspector = introspector; exports.useQueryParams = useQueryParams; exports.useApiParams = useApiParams; exports.createSearchParams = createSearchParams; exports.useCursorPaginationState = useCursorPaginationState; exports.useNatsClient = useNatsClient; exports.validateAccessCode = validateAccessCode; exports.consumeAccessCode = consumeAccessCode; exports.validateAndConsumeAccessCode = validateAndConsumeAccessCode; exports.useAccessCodeIntegration = useAccessCodeIntegration; exports.HONEYPOT_FIELD = HONEYPOT_FIELD; exports.ELAPSED_MS_FIELD = ELAPSED_MS_FIELD; exports.DEFAULT_MIN_FILL_MS = DEFAULT_MIN_FILL_MS; exports.extractHumanitySignals = extractHumanitySignals; exports.evaluateHumanitySignals = evaluateHumanitySignals; exports.splitCsvEnv = splitCsvEnv; exports.useHumanitySignals = useHumanitySignals;
-//# sourceMappingURL=chunk-3DC6MHW6.cjs.map
+
+
+exports.useHeaderHeight = useHeaderHeight; exports.useHorizontalScrollbar = useHorizontalScrollbar; exports.useImageEdgeColor = useImageEdgeColor; exports.useLocalStorage = useLocalStorage; exports.useMediaQuery = useMediaQuery; exports.breakpoints = breakpoints; exports.useSmUp = useSmUp; exports.useMdUp = useMdUp; exports.useLgUp = useLgUp; exports.useMemoizedCallback = useMemoizedCallback; exports.useNotificationPermission = useNotificationPermission; exports.useOnboardingState = useOnboardingState; exports.useSearch = useSearch; exports.useTablePagination = useTablePagination; exports.useThrottle = useThrottle; exports.useWindowSize = useWindowSize; exports.platformIcons = platformIcons; exports.platformColors = platformColors; exports.platformDisplayNames = platformDisplayNames; exports.platformDescriptions = platformDescriptions; exports.platformSlogans = platformSlogans; exports.platformHexColors = platformHexColors; exports.platformIconNames = platformIconNames; exports.getDefaultColorForPlatform = getDefaultColorForPlatform; exports.getDefaultIconForPlatform = getDefaultIconForPlatform; exports.transformPlatformConfigsToOptions = transformPlatformConfigsToOptions; exports.getPlatformIcon = getPlatformIcon; exports.getPlatformColor = getPlatformColor; exports.getPlatformDisplayName = getPlatformDisplayName; exports.getPlatformDescription = getPlatformDescription; exports.getPlatformSlogan = getPlatformSlogan; exports.getSmallPlatformIcon = getSmallPlatformIcon; exports.getPlatformIconComponent = getPlatformIconComponent; exports.usePlatformConfig = usePlatformConfig; exports.usePlatformByValue = usePlatformByValue; exports.useValidatePlatform = useValidatePlatform; exports.ToolTypeValues = ToolTypeValues; exports.toolLabels = toolLabels; exports.ToolIcon = ToolIcon; exports.dotColorByVariant = dotColorByVariant; exports.progressColorByVariant = progressColorByVariant; exports.ToastCard = ToastCard; exports.CommandApprovalToast = CommandApprovalToast; exports.Toaster = Toaster; exports.showToast = showToast; exports.showCommandApprovalToast = showCommandApprovalToast; exports.toast = toast; exports.useToast = useToast; exports.useContactSubmission = useContactSubmission; exports.useQuickActionHint = useQuickActionHint; exports.useCopyToClipboard = useCopyToClipboard; exports.configureBatchImageFetch = configureBatchImageFetch; exports.batchFetchAuthenticatedImages = batchFetchAuthenticatedImages; exports.useBatchImages = useBatchImages; exports.configureAuthenticatedImage = configureAuthenticatedImage; exports.useAuthenticatedImage = useAuthenticatedImage; exports.extractVariablesFromQuery = extractVariablesFromQuery; exports.isScalarType = isScalarType; exports.isInputObjectType = isInputObjectType; exports.flattenQueryVariables = flattenQueryVariables; exports.mergeDefaults = mergeDefaults; exports.validateSchema = validateSchema; exports.getArrayParams = getArrayParams; exports.getRequiredParams = getRequiredParams; exports.shouldIncludeInUrl = shouldIncludeInUrl; exports.urlParamsToVariables = urlParamsToVariables; exports.variablesToUrlParams = variablesToUrlParams; exports.coerceValue = coerceValue; exports.setNestedValue = setNestedValue; exports.getNestedValue = getNestedValue; exports.mergeVariables = mergeVariables; exports.clearParams = clearParams; exports.validateVariables = validateVariables; exports.GraphQLIntrospector = GraphQLIntrospector; exports.introspector = introspector; exports.useQueryParams = useQueryParams; exports.useApiParams = useApiParams; exports.createSearchParams = createSearchParams; exports.useCursorPaginationState = useCursorPaginationState; exports.useNatsClient = useNatsClient; exports.validateAccessCode = validateAccessCode; exports.consumeAccessCode = consumeAccessCode; exports.validateAndConsumeAccessCode = validateAndConsumeAccessCode; exports.useAccessCodeIntegration = useAccessCodeIntegration; exports.HONEYPOT_FIELD = HONEYPOT_FIELD; exports.ELAPSED_MS_FIELD = ELAPSED_MS_FIELD; exports.DEFAULT_MIN_FILL_MS = DEFAULT_MIN_FILL_MS; exports.extractHumanitySignals = extractHumanitySignals; exports.evaluateHumanitySignals = evaluateHumanitySignals; exports.splitCsvEnv = splitCsvEnv; exports.useHumanitySignals = useHumanitySignals;
+//# sourceMappingURL=chunk-QLWBBCI5.cjs.map