@sovereignfs/ui 0.83.1 → 0.89.1

package/src/hooks/__tests__/useSwipeReveal.test.tsx

@@ -1,110 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render } from '@testing-library/react';
-import { useSwipeReveal, type UseSwipeRevealOptions } from '../useSwipeReveal';
-
-// jsdom doesn't implement pointer capture — stub it as a no-op so
-// `e.currentTarget.setPointerCapture(...)` doesn't throw.
-beforeEach(() => {
-  if (!HTMLElement.prototype.setPointerCapture) {
-    HTMLElement.prototype.setPointerCapture = vi.fn();
-  }
-});
-
-afterEach(cleanup);
-
-function Harness(props: UseSwipeRevealOptions) {
-  const { rowRef, handlers } = useSwipeReveal(props);
-  return (
-    <div data-testid="row" ref={rowRef} {...handlers}>
-      row
-    </div>
-  );
-}
-
-function pointer(x: number, y: number) {
-  return { clientX: x, clientY: y, pointerId: 1 };
-}
-
-describe('useSwipeReveal', () => {
-  it('calls onOpen when a horizontal drag crosses the halfway point', () => {
-    const onOpen = vi.fn();
-    const onClose = vi.fn();
-    const { getByTestId } = render(
-      <Harness revealWidth={100} open={false} onOpen={onOpen} onClose={onClose} />,
-    );
-    const el = getByTestId('row');
-    fireEvent.pointerDown(el, pointer(0, 0));
-    fireEvent.pointerMove(el, pointer(-60, 0));
-    fireEvent.pointerUp(el, pointer(-60, 0));
-    expect(onOpen).toHaveBeenCalledOnce();
-    expect(onClose).not.toHaveBeenCalled();
-  });
-
-  it('calls onClose when the drag does not cross the halfway point', () => {
-    const onOpen = vi.fn();
-    const onClose = vi.fn();
-    const { getByTestId } = render(
-      <Harness revealWidth={100} open={false} onOpen={onOpen} onClose={onClose} />,
-    );
-    const el = getByTestId('row');
-    fireEvent.pointerDown(el, pointer(0, 0));
-    fireEvent.pointerMove(el, pointer(-20, 0));
-    fireEvent.pointerUp(el, pointer(-20, 0));
-    expect(onClose).toHaveBeenCalledOnce();
-    expect(onOpen).not.toHaveBeenCalled();
-  });
-
-  it('locks to vertical and ignores a mostly-vertical drag', () => {
-    const onOpen = vi.fn();
-    const onClose = vi.fn();
-    const { getByTestId } = render(
-      <Harness revealWidth={100} open={false} onOpen={onOpen} onClose={onClose} />,
-    );
-    const el = getByTestId('row');
-    fireEvent.pointerDown(el, pointer(0, 0));
-    fireEvent.pointerMove(el, pointer(2, 60));
-    fireEvent.pointerUp(el, pointer(2, 60));
-    expect(onOpen).not.toHaveBeenCalled();
-    expect(onClose).not.toHaveBeenCalled();
-  });
-
-  it('does nothing when disabled', () => {
-    const onOpen = vi.fn();
-    const onClose = vi.fn();
-    const { getByTestId } = render(
-      <Harness revealWidth={100} open={false} onOpen={onOpen} onClose={onClose} disabled />,
-    );
-    const el = getByTestId('row');
-    fireEvent.pointerDown(el, pointer(0, 0));
-    fireEvent.pointerMove(el, pointer(-60, 0));
-    fireEvent.pointerUp(el, pointer(-60, 0));
-    expect(onOpen).not.toHaveBeenCalled();
-    expect(onClose).not.toHaveBeenCalled();
-  });
-
-  it('closes from an already-open state when dragged back past halfway', () => {
-    const onOpen = vi.fn();
-    const onClose = vi.fn();
-    const { getByTestId } = render(
-      <Harness revealWidth={100} open onOpen={onOpen} onClose={onClose} />,
-    );
-    const el = getByTestId('row');
-    fireEvent.pointerDown(el, pointer(0, 0));
-    fireEvent.pointerMove(el, pointer(60, 0));
-    fireEvent.pointerUp(el, pointer(60, 0));
-    expect(onClose).toHaveBeenCalledOnce();
-    expect(onOpen).not.toHaveBeenCalled();
-  });
-
-  it('ignores pointerup without a preceding pointerdown', () => {
-    const onOpen = vi.fn();
-    const onClose = vi.fn();
-    const { getByTestId } = render(
-      <Harness revealWidth={100} open={false} onOpen={onOpen} onClose={onClose} />,
-    );
-    fireEvent.pointerUp(getByTestId('row'), pointer(-60, 0));
-    expect(onOpen).not.toHaveBeenCalled();
-    expect(onClose).not.toHaveBeenCalled();
-  });
-});

package/src/hooks/__tests__/useSwipeStack.test.tsx

@@ -1,155 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render } from '@testing-library/react';
-import { useSwipeStack, type SwipeDirection, type UseSwipeStackOptions } from '../useSwipeStack';
-
-// jsdom doesn't implement pointer capture — stub it as a no-op so
-// `e.currentTarget.setPointerCapture(...)` doesn't throw.
-beforeEach(() => {
-  if (!HTMLElement.prototype.setPointerCapture) {
-    HTMLElement.prototype.setPointerCapture = vi.fn();
-  }
-});
-
-afterEach(cleanup);
-
-function Harness(props: UseSwipeStackOptions & { triggerDirection?: SwipeDirection }) {
-  const { triggerDirection, ...options } = props;
-  const { cardRef, wrapRef, handlers, touchAction, triggerCommit } = useSwipeStack(options);
-  return (
-    <div data-testid="wrap" ref={wrapRef}>
-      <div data-testid="card" ref={cardRef} data-touch-action={touchAction} {...handlers}>
-        card
-      </div>
-      {triggerDirection && (
-        <button data-testid="trigger" onClick={() => triggerCommit(triggerDirection)}>
-          trigger
-        </button>
-      )}
-    </div>
-  );
-}
-
-function pointer(x: number, y: number) {
-  return { clientX: x, clientY: y, pointerId: 1 };
-}
-
-function drag(el: HTMLElement, dx: number, dy: number) {
-  fireEvent.pointerDown(el, pointer(0, 0));
-  fireEvent.pointerMove(el, pointer(dx, dy));
-  fireEvent.pointerUp(el, pointer(dx, dy));
-}
-
-describe('useSwipeStack', () => {
-  it('commits when a drag crosses threshold in a live direction', () => {
-    const onCommit = vi.fn();
-    const { getByTestId } = render(
-      <Harness directions={['up', 'down', 'left', 'right']} threshold={100} onCommit={onCommit} />,
-    );
-    drag(getByTestId('card'), 0, -120);
-    expect(onCommit).toHaveBeenCalledWith('up');
-    expect(onCommit).toHaveBeenCalledOnce();
-  });
-
-  it('springs back without committing when under threshold', () => {
-    const onCommit = vi.fn();
-    const { getByTestId } = render(
-      <Harness directions={['up', 'down', 'left', 'right']} threshold={100} onCommit={onCommit} />,
-    );
-    drag(getByTestId('card'), 0, -40);
-    expect(onCommit).not.toHaveBeenCalled();
-  });
-
-  it('does not commit within the deadzone even if threshold is set very low', () => {
-    const onCommit = vi.fn();
-    const { getByTestId } = render(
-      <Harness directions={['up']} threshold={2} onCommit={onCommit} />,
-    );
-    drag(getByTestId('card'), 0, -5);
-    expect(onCommit).not.toHaveBeenCalled();
-  });
-
-  it('treats a non-configured direction as a wall — no commit even past what would be threshold distance', () => {
-    const onCommit = vi.fn();
-    const { getByTestId } = render(
-      <Harness directions={['up', 'down']} threshold={100} onCommit={onCommit} />,
-    );
-    drag(getByTestId('card'), 150, 0);
-    expect(onCommit).not.toHaveBeenCalled();
-  });
-
-  it('does nothing when disabled', () => {
-    const onCommit = vi.fn();
-    const { getByTestId } = render(
-      <Harness
-        directions={['up', 'down', 'left', 'right']}
-        threshold={100}
-        onCommit={onCommit}
-        disabled
-      />,
-    );
-    drag(getByTestId('card'), 0, -150);
-    expect(onCommit).not.toHaveBeenCalled();
-  });
-
-  it('ignores pointerup without a preceding pointerdown', () => {
-    const onCommit = vi.fn();
-    const { getByTestId } = render(
-      <Harness directions={['up', 'down', 'left', 'right']} threshold={100} onCommit={onCommit} />,
-    );
-    fireEvent.pointerUp(getByTestId('card'), pointer(0, -150));
-    expect(onCommit).not.toHaveBeenCalled();
-  });
-
-  it('triggerCommit commits a live direction without a drag', () => {
-    const onCommit = vi.fn();
-    const { getByTestId } = render(
-      <Harness directions={['up']} onCommit={onCommit} triggerDirection="up" />,
-    );
-    fireEvent.click(getByTestId('trigger'));
-    expect(onCommit).toHaveBeenCalledWith('up');
-    expect(onCommit).toHaveBeenCalledOnce();
-  });
-
-  it('triggerCommit no-ops for a direction that is not live', () => {
-    const onCommit = vi.fn();
-    const { getByTestId } = render(
-      <Harness directions={['up']} onCommit={onCommit} triggerDirection="down" />,
-    );
-    fireEvent.click(getByTestId('trigger'));
-    expect(onCommit).not.toHaveBeenCalled();
-  });
-
-  it('triggerCommit does nothing when disabled', () => {
-    const onCommit = vi.fn();
-    const { getByTestId } = render(
-      <Harness directions={['up']} onCommit={onCommit} triggerDirection="up" disabled />,
-    );
-    fireEvent.click(getByTestId('trigger'));
-    expect(onCommit).not.toHaveBeenCalled();
-  });
-
-  describe('touchAction', () => {
-    it('is none when both axes have a live direction', () => {
-      const { getByTestId } = render(
-        <Harness directions={['left', 'right', 'up', 'down']} onCommit={vi.fn()} />,
-      );
-      expect(getByTestId('card').dataset.touchAction).toBe('none');
-    });
-
-    it('is pan-y when only horizontal directions are live', () => {
-      const { getByTestId } = render(<Harness directions={['left', 'right']} onCommit={vi.fn()} />);
-      expect(getByTestId('card').dataset.touchAction).toBe('pan-y');
-    });
-
-    it('is pan-x when only vertical directions are live', () => {
-      const { getByTestId } = render(<Harness directions={['up', 'down']} onCommit={vi.fn()} />);
-      expect(getByTestId('card').dataset.touchAction).toBe('pan-x');
-    });
-
-    it('is auto when no directions are live', () => {
-      const { getByTestId } = render(<Harness directions={[]} onCommit={vi.fn()} />);
-      expect(getByTestId('card').dataset.touchAction).toBe('auto');
-    });
-  });
-});

package/src/hooks/index.ts

@@ -1,33 +0,0 @@
-export { useLongPress } from './useLongPress';
-export type { UseLongPressOptions, LongPressHandlers } from './useLongPress';
-export { useDoubleTapHandler, useSingleOrDoubleTap } from './useDoubleTap';
-export { useIsMobile, MOBILE_BREAKPOINT_PX } from './useIsMobile';
-export { useIsOffline } from './useIsOffline';
-export { useOfflineTileState } from './useOfflineTileState';
-export type { OfflineTileState } from './useOfflineTileState';
-export { useCommitOnEnterOrBlur } from './useCommitOnEnterOrBlur';
-export type { CommitOnEnterOrBlurHandlers } from './useCommitOnEnterOrBlur';
-export { useSwipeReveal } from './useSwipeReveal';
-export type {
-  UseSwipeRevealOptions,
-  UseSwipeRevealHandlers,
-  UseSwipeRevealResult,
-} from './useSwipeReveal';
-export { useSnapCarousel } from './useSnapCarousel';
-export type { UseSnapCarouselOptions, UseSnapCarouselResult } from './useSnapCarousel';
-export { useResponsiveLayout } from './useResponsiveLayout';
-export type { UseResponsiveLayoutOptions, UseResponsiveLayoutResult } from './useResponsiveLayout';
-export { useCarouselRouteSync } from './useCarouselRouteSync';
-export type {
-  UseCarouselRouteSyncOptions,
-  UseCarouselRouteSyncResult,
-} from './useCarouselRouteSync';
-export { useReorderSensors, shouldHandleDndEvent } from './useReorderSensors';
-export type { UseReorderSensorsOptions } from './useReorderSensors';
-export { useSwipeStack, SWIPE_STACK_TRANSITION_MS } from './useSwipeStack';
-export type {
-  SwipeDirection,
-  UseSwipeStackOptions,
-  UseSwipeStackHandlers,
-  UseSwipeStackResult,
-} from './useSwipeStack';

package/src/hooks/useCarouselRouteSync.ts

@@ -1,92 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-
-export interface UseCarouselRouteSyncOptions {
-  /** Maps the current pathname to a slide index — the caller's own routing
-   *  logic (e.g. special-casing a virtual "starred" slide), unchanged from
-   *  whatever a plugin already has today. This hook has no idea what a
-   *  plugin's routes look like, by design — it never imports a router. */
-  indexForPathname: (pathname: string) => number;
-  /** Inverse mapping — given a settled slide index, the path to navigate to. */
-  pathForIndex: (index: number) => string;
-  /** The current pathname. The caller reads this via their own router (e.g.
-   *  `usePathname()` from `next/navigation`) and passes it in every render —
-   *  this package stays framework-generic and has zero runtime dependencies. */
-  pathname: string;
-  /** Called when this hook wants to navigate — typically
-   *  `(path) => router.replace(path, { scroll: false })`. */
-  onNavigate: (path: string) => void;
-}
-
-export interface UseCarouselRouteSyncResult {
-  /** Feed directly into SwipableMobileCarousel's `activeIndex` prop. */
-  activeIndex: number;
-  /** Feed directly into SwipableMobileCarousel's `onSettle` prop. */
-  onSettle: (index: number) => void;
-}
-
-/**
- * useCarouselRouteSync — centralizes the pathname↔slide-index mapping and the
- * "was this pathname change our own settle, or an external navigation"
- * distinction that carousel-driving plugins otherwise hand-roll per plugin
- * (a tapped `<Link>`, browser back/forward, vs. this hook's own
- * `router.replace` after a swipe settles). Router-agnostic on purpose: the
- * caller owns the actual `usePathname()`/`router.replace()` calls and only
- * hands this hook plain values/callbacks.
- *
- * Deliberately does not own neighbor-prefetch (SwipableMobileCarousel's
- * `prefetchDistance`/mount-window covers that) or scroll mechanics (the
- * carousel component reacts to `activeIndex` changes itself) — this hook is
- * pathname↔index mapping only, keeping routing glue decoupled from
- * data-fetching and DOM scrolling.
- */
-export function useCarouselRouteSync({
-  indexForPathname,
-  pathForIndex,
-  pathname,
-  onNavigate,
-}: UseCarouselRouteSyncOptions): UseCarouselRouteSyncResult {
-  // Kept in refs and refreshed every render (not effect deps) so an inline
-  // arrow function passed by the caller each render doesn't retrigger the
-  // pathname-sync effect below — only an actual pathname change should.
-  const indexForPathnameRef = useRef(indexForPathname);
-  indexForPathnameRef.current = indexForPathname;
-  const pathForIndexRef = useRef(pathForIndex);
-  pathForIndexRef.current = pathForIndex;
-  const onNavigateRef = useRef(onNavigate);
-  onNavigateRef.current = onNavigate;
-
-  const [activeIndex, setActiveIndex] = useState(() => indexForPathname(pathname));
-  // Set synchronously inside onSettle, right before this hook's own
-  // navigation call — lets the pathname-sync effect below tell "this
-  // pathname change is our own settle, already reflected in activeIndex"
-  // apart from a genuinely external navigation.
-  const isInternalNavRef = useRef(false);
-  const didMountRef = useRef(false);
-
-  useEffect(() => {
-    if (!didMountRef.current) {
-      // The very first render's activeIndex already reflects pathname via
-      // the lazy useState initializer above — nothing to resync on mount.
-      didMountRef.current = true;
-      return;
-    }
-    if (isInternalNavRef.current) {
-      isInternalNavRef.current = false;
-      return;
-    }
-    const newIndex = indexForPathnameRef.current(pathname);
-    setActiveIndex((current) => (newIndex === current ? current : newIndex));
-    // Only re-run when pathname itself changes — indexForPathname is read
-    // through a ref precisely so its identity doesn't matter here.
-  }, [pathname]);
-
-  function onSettle(index: number) {
-    isInternalNavRef.current = true;
-    setActiveIndex(index);
-    onNavigateRef.current(pathForIndexRef.current(index));
-  }
-
-  return { activeIndex, onSettle };
-}

package/src/hooks/useCommitOnEnterOrBlur.ts

@@ -1,39 +0,0 @@
-'use client';
-
-import type { KeyboardEvent } from 'react';
-
-export interface CommitOnEnterOrBlurHandlers {
-  onKeyDown: (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-  onBlur: () => void;
-}
-
-/**
- * useCommitOnEnterOrBlur — spreads onto a quick-entry input/textarea so
- * Enter and losing focus both commit through the same callback.
- *
- * iOS Safari adds its own "Previous / Next / Done" toolbar above the
- * software keyboard whenever more than one focusable field is nearby (a
- * Sheet with several fields, a form, etc.) — there is no supported way to
- * suppress it, since it's WebKit's own field-detection heuristic, not
- * something the page controls. Tapping that toolbar's Done/checkmark only
- * ever fires a native `blur`; it is not a form submit and dispatches no
- * keydown, so a field that commits only on Enter silently discards whatever
- * was typed the moment a user dismisses the keyboard that way instead of
- * pressing the on-screen Return key — the two dismissal paths look
- * identical to the user but produce different outcomes.
- *
- * `onCommit` is called unconditionally on both Enter and blur — it owns any
- * empty-value no-op itself, matching how every call site's own commit
- * function already guards against an empty value before doing anything.
- * Callers needing more key handling (e.g. Escape-to-cancel) compose their
- * own `onKeyDown` around the returned one rather than this hook growing
- * options for every caller's own key bindings.
- */
-export function useCommitOnEnterOrBlur(onCommit: () => void): CommitOnEnterOrBlurHandlers {
-  return {
-    onKeyDown: (e) => {
-      if (e.key === 'Enter') onCommit();
-    },
-    onBlur: onCommit,
-  };
-}

package/src/hooks/useDoubleTap.ts

@@ -1,91 +0,0 @@
-'use client';
-
-import { useRef } from 'react';
-
-// Real double-clicks (desktop mouse) report e.detail === 2 natively — no extra
-// work needed there. Touch-generated click events always report detail === 1
-// (no browser synthesizes a dblclick-style count from two taps), so
-// double-tap has to be detected by timing two clicks against each other
-// instead. Sharing one implementation for both means every double-click-style
-// affordance behaves the same way on mouse and touch without the caller
-// duplicating the two code paths.
-const DOUBLE_TAP_MS = 350;
-
-/**
- * useDoubleTapHandler — fires `onDoubleTap` on a real double-click (desktop)
- * or two taps within `DOUBLE_TAP_MS` (touch).
- *
- * Only safe when the *single* tap/click has no default action of its own to
- * preempt — e.g. a colour swatch with nothing to cancel. If the single tap
- * navigates, opens something, or otherwise does something a following double
- * needs to be able to undo before it happens, use `useSingleOrDoubleTap`
- * instead: this hook fires `onDoubleTap` only, leaving any single-tap handling
- * to the caller's own `onClick`, which already ran immediately and can't be
- * un-done here.
- *
- * The event is passed through to `onDoubleTap` rather than calling
- * `preventDefault` internally — not every call site needs to cancel
- * something, so the decision is left to the caller.
- */
-export function useDoubleTapHandler<E extends { detail: number }>(
-  onDoubleTap: (e: E) => void,
-): (e: E) => void {
-  const lastTime = useRef(0);
-  return (e: E) => {
-    if (e.detail === 2) {
-      onDoubleTap(e);
-      return;
-    }
-    const now = Date.now();
-    if (now - lastTime.current < DOUBLE_TAP_MS) {
-      lastTime.current = 0;
-      onDoubleTap(e);
-    } else {
-      lastTime.current = now;
-    }
-  };
-}
-
-/**
- * useSingleOrDoubleTap — for call sites where the single tap/click *does*
- * have a default action (e.g. navigating) that a following double-tap must be
- * able to preempt.
- *
- * A real double-click gets away with firing the single action immediately and
- * only detecting the double afterward, because `e.detail === 2` is the
- * browser's own resolved signal, arriving on the very click that matters. A
- * touch double-tap has no equivalent "hold on, there might be a second one"
- * signal — the only way to know is to wait out the window before committing
- * to the single action, which is what this hook does: `onSingle` is deferred
- * by `DOUBLE_TAP_MS` and only actually runs if no second tap arrives in that
- * time. This means every single tap through this hook incurs that latency —
- * only use it where a genuine double-tap gesture must be able to preempt the
- * single action; `useDoubleTapHandler` above has no such delay.
- */
-export function useSingleOrDoubleTap<E extends { detail: number }>(
-  onSingle: (e: E) => void,
-  onDouble: (e: E) => void,
-): (e: E) => void {
-  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  return (e: E) => {
-    if (e.detail === 2) {
-      if (timer.current) {
-        clearTimeout(timer.current);
-        timer.current = null;
-      }
-      onDouble(e);
-      return;
-    }
-    if (timer.current) {
-      clearTimeout(timer.current);
-      timer.current = null;
-      onDouble(e);
-      return;
-    }
-    timer.current = setTimeout(() => {
-      timer.current = null;
-      onSingle(e);
-    }, DOUBLE_TAP_MS);
-  };
-}

package/src/hooks/useIsMobile.ts

@@ -1,33 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-
-// The platform's canonical mobile breakpoint — matches the shell chrome and
-// Dialog's own full-screen-sheet switch (`runtime/app/globals.css`,
-// `Dialog.module.css`). A plugin whose own layout genuinely needs a different
-// threshold may still hardcode its own value (e.g. a three-column layout that
-// only needs to fork earlier than 768px) — this constant is the *default* every
-// consumer should reach for first, so the platform's idea of "mobile" doesn't
-// silently drift across components again.
-export const MOBILE_BREAKPOINT_PX = 768;
-
-/**
- * useIsMobile — whether the viewport is at or below the platform's mobile
- * breakpoint. SSR-safe: defaults to `false` (desktop) until the client mounts
- * and reads the real viewport, avoiding a hydration mismatch on first paint.
- */
-export function useIsMobile(breakpointPx: number = MOBILE_BREAKPOINT_PX): boolean {
-  const [isMobile, setIsMobile] = useState(false);
-
-  useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${breakpointPx}px)`);
-    setIsMobile(mql.matches);
-    function handleChange(e: MediaQueryListEvent) {
-      setIsMobile(e.matches);
-    }
-    mql.addEventListener('change', handleChange);
-    return () => mql.removeEventListener('change', handleChange);
-  }, [breakpointPx]);
-
-  return isMobile;
-}

package/src/hooks/useIsOffline.ts

@@ -1,41 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-
-/**
- * useIsOffline — whether the browser currently has no network connection.
- *
- * SSR-safe: always initialises to `false` (online) so the server-rendered HTML
- * matches the first client render, then reads the real `navigator.onLine`
- * value in `useEffect`. This picks up the case where the page loaded already
- * offline (e.g. served from the service-worker cache) at the cost of an
- * imperceptible one-frame delay before the offline state appears — the same
- * trade-off `OfflineBanner` makes, which this hook was extracted from so every
- * consumer shares one connectivity source instead of re-deriving it slightly
- * differently (research 0012, epic task 2.32).
- *
- * Reflects only `navigator.onLine` — true whenever the OS reports a network
- * interface is up, even without real upstream connectivity (e.g. Wi-Fi with no
- * internet). That is a known limitation of the browser API itself, not of this
- * hook; there is currently no better cross-browser signal available.
- */
-export function useIsOffline(): boolean {
-  const [isOffline, setIsOffline] = useState(false);
-
-  useEffect(() => {
-    setIsOffline(!navigator.onLine);
-
-    const handleOffline = () => setIsOffline(true);
-    const handleOnline = () => setIsOffline(false);
-
-    window.addEventListener('offline', handleOffline);
-    window.addEventListener('online', handleOnline);
-
-    return () => {
-      window.removeEventListener('offline', handleOffline);
-      window.removeEventListener('online', handleOnline);
-    };
-  }, []);
-
-  return isOffline;
-}