@sovereignfs/ui 0.45.0 → 0.54.0

package/src/components/SwipableMobileCarouselDots/SwipableMobileCarouselDots.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import styles from './SwipableMobileCarouselDots.module.css';
+
+export interface SwipableMobileCarouselDotsProps {
+  count: number;
+  activeIndex: number;
+  onJump: (index: number) => void;
+  /** Per-dot accessible names, e.g. ["Lists", "Starred", "Groceries"]. Falls
+   *  back to "Slide N of count" for any index without one. */
+  labels?: (string | undefined)[];
+  /** Labels the whole group — required, no generic fallback (mirrors
+   *  SwipableMobileCarousel's own required aria-label). */
+  'aria-label': string;
+  className?: string;
+}
+
+/**
+ * SwipableMobileCarouselDots — a real, tappable, labeled slide indicator.
+ * Standalone (not carousel-only): reusable anywhere a set of positions needs
+ * a dot indicator (e.g. an image gallery, an onboarding stepper), and is also
+ * SwipableMobileCarousel's default `renderIndicator`.
+ *
+ * Replaces the `aria-hidden`, non-interactive dots pattern both
+ * sovereign-tasks and sovereign-shopper currently hand-roll — every dot here
+ * is a real `role="tab"` button with its own accessible name, reachable by
+ * keyboard. No roving tabIndex/arrow-key handling: `Tabs` (this library's
+ * other `role="tablist"` component) has none either, so this stays
+ * consistent with it rather than gold-plating past its sibling.
+ */
+export function SwipableMobileCarouselDots({
+  count,
+  activeIndex,
+  onJump,
+  labels,
+  'aria-label': ariaLabel,
+  className,
+}: SwipableMobileCarouselDotsProps) {
+  return (
+    <div
+      role="tablist"
+      aria-label={ariaLabel}
+      className={[styles.dots, className].filter(Boolean).join(' ')}
+    >
+      {Array.from({ length: count }, (_, i) => {
+        const active = i === activeIndex;
+        const label = labels?.[i] ?? `Slide ${i + 1} of ${count}`;
+        return (
+          <button
+            key={i}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            aria-label={label}
+            className={[styles.dot, active ? styles.dotActive : ''].filter(Boolean).join(' ')}
+            onClick={() => onJump(i)}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/src/components/SwipableMobileCarouselDots/__tests__/SwipableMobileCarouselDots.test.tsx

@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { SwipableMobileCarouselDots } from '../SwipableMobileCarouselDots';
+
+afterEach(cleanup);
+
+describe('SwipableMobileCarouselDots', () => {
+  it('renders a tablist with one tab per count, none aria-hidden', () => {
+    render(
+      <SwipableMobileCarouselDots count={3} activeIndex={0} onJump={() => {}} aria-label="Lists" />,
+    );
+    const list = screen.getByRole('tablist', { name: 'Lists' });
+    expect(list.getAttribute('aria-hidden')).toBeNull();
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs).toHaveLength(3);
+    tabs.forEach((tab) => expect(tab.getAttribute('aria-hidden')).toBeNull());
+  });
+
+  it('marks only the active dot as aria-selected', () => {
+    render(
+      <SwipableMobileCarouselDots count={3} activeIndex={1} onJump={() => {}} aria-label="Lists" />,
+    );
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs[0]?.getAttribute('aria-selected')).toBe('false');
+    expect(tabs[1]?.getAttribute('aria-selected')).toBe('true');
+    expect(tabs[2]?.getAttribute('aria-selected')).toBe('false');
+  });
+
+  it('uses the provided per-dot labels, falling back to "Slide N of count"', () => {
+    render(
+      <SwipableMobileCarouselDots
+        count={3}
+        activeIndex={0}
+        onJump={() => {}}
+        labels={['Lists', undefined, 'Groceries']}
+        aria-label="Lists"
+      />,
+    );
+    expect(screen.getByRole('tab', { name: 'Lists' })).toBeDefined();
+    expect(screen.getByRole('tab', { name: 'Slide 2 of 3' })).toBeDefined();
+    expect(screen.getByRole('tab', { name: 'Groceries' })).toBeDefined();
+  });
+
+  it('clicking a dot calls onJump with its index', () => {
+    const onJump = vi.fn();
+    render(
+      <SwipableMobileCarouselDots count={3} activeIndex={0} onJump={onJump} aria-label="Lists" />,
+    );
+    const thirdTab = screen.getAllByRole('tab')[2];
+    if (!thirdTab) throw new Error('expected a 3rd tab');
+    fireEvent.click(thirdTab);
+    expect(onJump).toHaveBeenCalledWith(2);
+  });
+
+  it('every dot is a real, focusable button (not a decorative element)', () => {
+    render(
+      <SwipableMobileCarouselDots count={2} activeIndex={0} onJump={() => {}} aria-label="Lists" />,
+    );
+    const tabs = screen.getAllByRole('tab');
+    tabs.forEach((tab) => expect(tab.tagName).toBe('BUTTON'));
+  });
+});

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

@@ -0,0 +1,126 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, render } from '@testing-library/react';
+import { useCarouselRouteSync } from '../useCarouselRouteSync';
+
+const SLIDES = ['/a', '/b', '/c'];
+function indexForPathname(pathname: string) {
+  const i = SLIDES.indexOf(pathname);
+  return i === -1 ? 0 : i;
+}
+function pathForIndex(index: number) {
+  return SLIDES[index] ?? '/a';
+}
+
+function Harness({
+  pathname,
+  onNavigate,
+  onResult,
+}: {
+  pathname: string;
+  onNavigate: (path: string) => void;
+  onResult: (result: { activeIndex: number; onSettle: (i: number) => void }) => void;
+}) {
+  const result = useCarouselRouteSync({ indexForPathname, pathForIndex, pathname, onNavigate });
+  onResult(result);
+  return <span data-testid="active">{result.activeIndex}</span>;
+}
+
+afterEach(cleanup);
+
+describe('useCarouselRouteSync', () => {
+  it('initializes activeIndex from the current pathname', () => {
+    const onNavigate = vi.fn();
+    const { getByTestId } = render(
+      <Harness pathname="/b" onNavigate={onNavigate} onResult={() => {}} />,
+    );
+    expect(getByTestId('active').textContent).toBe('1');
+    expect(onNavigate).not.toHaveBeenCalled();
+  });
+
+  it('an external pathname change (tapped Link, browser back/forward) updates activeIndex without calling onNavigate', () => {
+    const onNavigate = vi.fn();
+    const { getByTestId, rerender } = render(
+      <Harness pathname="/a" onNavigate={onNavigate} onResult={() => {}} />,
+    );
+    expect(getByTestId('active').textContent).toBe('0');
+
+    rerender(<Harness pathname="/c" onNavigate={onNavigate} onResult={() => {}} />);
+    expect(getByTestId('active').textContent).toBe('2');
+    expect(onNavigate).not.toHaveBeenCalled();
+  });
+
+  it("onSettle calls onNavigate with pathForIndex's output and updates activeIndex synchronously", () => {
+    const onNavigate = vi.fn();
+    let latest: { activeIndex: number; onSettle: (i: number) => void } = {
+      activeIndex: -1,
+      onSettle: () => {},
+    };
+    const { getByTestId } = render(
+      <Harness
+        pathname="/a"
+        onNavigate={onNavigate}
+        onResult={(r) => {
+          latest = r;
+        }}
+      />,
+    );
+
+    act(() => void latest.onSettle(2));
+
+    expect(getByTestId('active').textContent).toBe('2');
+    expect(onNavigate).toHaveBeenCalledWith('/c');
+    expect(onNavigate).toHaveBeenCalledTimes(1);
+  });
+
+  it('does NOT re-trigger the external-nav branch on the pathname-effect run that follows its own onSettle-driven navigation', () => {
+    // This is the isInternalNav dance: onSettle navigates via onNavigate; the
+    // caller's router then re-renders this hook with the new pathname — that
+    // pathname change must be recognized as "our own settle, already
+    // applied" and NOT reprocessed as an external nav. Both existing plugins'
+    // code comments describe a real double-flicker bug from getting this
+    // wrong, so this is the highest-value assertion in this file.
+    const onNavigate = vi.fn();
+    let latest: { activeIndex: number; onSettle: (i: number) => void } = {
+      activeIndex: -1,
+      onSettle: () => {},
+    };
+    const { getByTestId, rerender } = render(
+      <Harness
+        pathname="/a"
+        onNavigate={onNavigate}
+        onResult={(r) => {
+          latest = r;
+        }}
+      />,
+    );
+
+    // Settle on /b (index 1) — this is the carousel's own gesture-driven navigation.
+    act(() => void latest.onSettle(1));
+    expect(getByTestId('active').textContent).toBe('1');
+    expect(onNavigate).toHaveBeenCalledWith('/b');
+
+    // The caller's router "commits" the navigation by re-rendering with the
+    // new pathname (exactly what onNavigate's real router.replace would
+    // eventually cause). If this were misidentified as an external nav, the
+    // effect would recompute indexForPathname('/b') anyway — same value, so
+    // a bug here wouldn't show up as a *wrong* index, only as an extra,
+    // redundant setState (the actual symptom in the original bug was a
+    // visible re-snap/flicker, not a wrong end state) — so this test also
+    // asserts onNavigate is never called a second time as a side effect of
+    // that re-render, which would happen if the effect treated it as new
+    // settle-worthy input rather than a no-op resync.
+    rerender(<Harness pathname="/b" onNavigate={onNavigate} onResult={(r) => (latest = r)} />);
+
+    expect(getByTestId('active').textContent).toBe('1');
+    expect(onNavigate).toHaveBeenCalledTimes(1);
+  });
+
+  it('an unrecognized pathname falls back to index 0', () => {
+    const onNavigate = vi.fn();
+    const { getByTestId } = render(
+      <Harness pathname="/unknown" onNavigate={onNavigate} onResult={() => {}} />,
+    );
+    expect(getByTestId('active').textContent).toBe('0');
+  });
+});

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

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, render } from '@testing-library/react';
+import { useIsOffline } from '../useIsOffline';
+
+function Harness() {
+  const isOffline = useIsOffline();
+  return <span data-testid="out">{String(isOffline)}</span>;
+}
+
+describe('useIsOffline', () => {
+  beforeEach(() => {
+    vi.stubGlobal('navigator', { ...window.navigator, onLine: true });
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    cleanup();
+  });
+
+  it('reflects navigator.onLine after mount', () => {
+    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
+    const { getByTestId } = render(<Harness />);
+    expect(getByTestId('out').textContent).toBe('true');
+  });
+
+  it('does not report offline when navigator.onLine is true', () => {
+    const { getByTestId } = render(<Harness />);
+    expect(getByTestId('out').textContent).toBe('false');
+  });
+
+  it('flips on the offline event', () => {
+    const { getByTestId } = render(<Harness />);
+    expect(getByTestId('out').textContent).toBe('false');
+    act(() => window.dispatchEvent(new Event('offline')));
+    expect(getByTestId('out').textContent).toBe('true');
+  });
+
+  it('flips back on the online event', () => {
+    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
+    const { getByTestId } = render(<Harness />);
+    expect(getByTestId('out').textContent).toBe('true');
+    act(() => window.dispatchEvent(new Event('online')));
+    expect(getByTestId('out').textContent).toBe('false');
+  });
+
+  it('removes its listeners on unmount', () => {
+    const removeSpy = vi.spyOn(window, 'removeEventListener');
+    const { unmount } = render(<Harness />);
+    unmount();
+    expect(removeSpy).toHaveBeenCalledWith('offline', expect.any(Function));
+    expect(removeSpy).toHaveBeenCalledWith('online', expect.any(Function));
+  });
+});

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

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render } from '@testing-library/react';
+import { useOfflineTileState } from '../useOfflineTileState';
+
+function Harness({
+  offline,
+  deviceOnlyAvailable,
+}: {
+  offline: 'offline-first' | 'device-only' | undefined;
+  deviceOnlyAvailable: boolean;
+}) {
+  const state = useOfflineTileState(offline, deviceOnlyAvailable);
+  return <span data-testid="out">{String(state)}</span>;
+}
+
+describe('useOfflineTileState', () => {
+  beforeEach(() => {
+    vi.stubGlobal('navigator', { ...window.navigator, onLine: true });
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    cleanup();
+  });
+
+  it('is null for a no-tier app while online', () => {
+    const { getByTestId } = render(<Harness offline={undefined} deviceOnlyAvailable={false} />);
+    expect(getByTestId('out').textContent).toBe('null');
+  });
+
+  it('connectivity-dims a no-tier app while offline', () => {
+    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
+    const { getByTestId } = render(<Harness offline={undefined} deviceOnlyAvailable={false} />);
+    expect(getByTestId('out').textContent).toBe('connectivity-dimmed');
+  });
+
+  it('never dims an offline-first app, online or offline', () => {
+    const online = render(<Harness offline="offline-first" deviceOnlyAvailable={false} />);
+    expect(online.getByTestId('out').textContent).toBe('null');
+    cleanup();
+
+    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
+    const offline = render(<Harness offline="offline-first" deviceOnlyAvailable={false} />);
+    expect(offline.getByTestId('out').textContent).toBe('null');
+  });
+
+  it('capability-restricts a device-only app when unavailable, regardless of connectivity', () => {
+    const online = render(<Harness offline="device-only" deviceOnlyAvailable={false} />);
+    expect(online.getByTestId('out').textContent).toBe('capability-restricted');
+    cleanup();
+
+    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
+    const offline = render(<Harness offline="device-only" deviceOnlyAvailable={false} />);
+    expect(offline.getByTestId('out').textContent).toBe('capability-restricted');
+  });
+
+  it('is not restricted for a device-only app when available, and not dimmed offline either', () => {
+    const online = render(<Harness offline="device-only" deviceOnlyAvailable={true} />);
+    expect(online.getByTestId('out').textContent).toBe('null');
+    cleanup();
+
+    // Availability is a capability signal, not a connectivity one — a
+    // device-only app that IS available behaves like offline-first once the
+    // capability question is settled.
+    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
+    const offline = render(<Harness offline="device-only" deviceOnlyAvailable={true} />);
+    expect(offline.getByTestId('out').textContent).toBe('null');
+  });
+});

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

@@ -0,0 +1,87 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, render } from '@testing-library/react';
+import { useResponsiveLayout } from '../useResponsiveLayout';
+
+// Same matchMedia mocking approach as useIsMobile.test.tsx, since this hook
+// is a thin wrapper over it and must not diverge in SSR/breakpoint behavior.
+let changeHandler: ((e: MediaQueryListEvent) => void) | null = null;
+let matches = false;
+let lastQuery = '';
+
+function installMatchMedia() {
+  changeHandler = null;
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn().mockImplementation((query: string) => {
+      lastQuery = query;
+      return {
+        matches,
+        media: query,
+        addEventListener: (_: string, cb: (e: MediaQueryListEvent) => void) => {
+          changeHandler = cb;
+        },
+        removeEventListener: vi.fn(),
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      };
+    }),
+  );
+}
+
+function Harness({ breakpointPx }: { breakpointPx?: number }) {
+  const { isMobile, value } = useResponsiveLayout({
+    web: 'web-tree',
+    mobile: 'mobile-tree',
+    breakpointPx,
+  });
+  return (
+    <span data-testid="out" data-is-mobile={String(isMobile)}>
+      {value}
+    </span>
+  );
+}
+
+describe('useResponsiveLayout', () => {
+  beforeEach(() => {
+    matches = false;
+    installMatchMedia();
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    cleanup();
+  });
+
+  it('defaults to the web value before/without a mobile match (SSR-safe default)', () => {
+    matches = false;
+    installMatchMedia();
+    const { getByTestId } = render(<Harness />);
+    expect(getByTestId('out').textContent).toBe('web-tree');
+    expect(getByTestId('out').dataset.isMobile).toBe('false');
+  });
+
+  it('picks the mobile value once matchMedia reports a match', () => {
+    matches = true;
+    installMatchMedia();
+    const { getByTestId } = render(<Harness />);
+    expect(getByTestId('out').textContent).toBe('mobile-tree');
+    expect(getByTestId('out').dataset.isMobile).toBe('true');
+  });
+
+  it('swaps live when the viewport crosses the breakpoint', () => {
+    matches = false;
+    installMatchMedia();
+    const { getByTestId } = render(<Harness />);
+    expect(getByTestId('out').textContent).toBe('web-tree');
+    act(() => changeHandler?.({ matches: true } as MediaQueryListEvent));
+    expect(getByTestId('out').textContent).toBe('mobile-tree');
+  });
+
+  it('passes a custom breakpointPx straight through to useIsMobile', () => {
+    matches = false;
+    installMatchMedia();
+    render(<Harness breakpointPx={640} />);
+    expect(lastQuery).toBe('(max-width: 640px)');
+  });
+});

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

@@ -0,0 +1,93 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, fireEvent, render } from '@testing-library/react';
+import { useSnapCarousel, type UseSnapCarouselOptions } from '../useSnapCarousel';
+
+// jsdom doesn't implement scrollTo on elements.
+beforeEach(() => {
+  vi.useFakeTimers();
+  if (!Element.prototype.scrollTo) {
+    Element.prototype.scrollTo = vi.fn();
+  }
+});
+
+afterEach(() => {
+  vi.runOnlyPendingTimers();
+  vi.useRealTimers();
+  cleanup();
+});
+
+function setLayout(el: HTMLElement, clientWidth: number, scrollLeft: number) {
+  Object.defineProperty(el, 'clientWidth', { value: clientWidth, configurable: true });
+  Object.defineProperty(el, 'scrollLeft', { value: scrollLeft, configurable: true });
+}
+
+function Harness(
+  props: UseSnapCarouselOptions & { onScrollTo?: (fn: (i: number) => void) => void },
+) {
+  const { onScrollTo, ...options } = props;
+  const { scrollRef, scrollToIndex } = useSnapCarousel(options);
+  onScrollTo?.(scrollToIndex);
+  return <div data-testid="scroller" ref={scrollRef} />;
+}
+
+describe('useSnapCarousel', () => {
+  it('calls onSettle with the new index after the debounce window', () => {
+    const onSettle = vi.fn();
+    const { getByTestId } = render(<Harness itemCount={3} onSettle={onSettle} debounceMs={120} />);
+    const el = getByTestId('scroller');
+    setLayout(el, 300, 300); // scrollLeft 300 / width 300 -> index 1
+    fireEvent.scroll(el);
+    expect(onSettle).not.toHaveBeenCalled();
+    act(() => void vi.advanceTimersByTime(120));
+    expect(onSettle).toHaveBeenCalledWith(1);
+  });
+
+  it('debounces repeated scroll events into a single settle call', () => {
+    const onSettle = vi.fn();
+    const { getByTestId } = render(<Harness itemCount={3} onSettle={onSettle} debounceMs={120} />);
+    const el = getByTestId('scroller');
+    setLayout(el, 300, 0);
+    fireEvent.scroll(el);
+    act(() => void vi.advanceTimersByTime(60));
+    setLayout(el, 300, 300);
+    fireEvent.scroll(el);
+    act(() => void vi.advanceTimersByTime(120));
+    expect(onSettle).toHaveBeenCalledOnce();
+    expect(onSettle).toHaveBeenCalledWith(1);
+  });
+
+  it('does not call onSettle again for the same index', () => {
+    const onSettle = vi.fn();
+    const { getByTestId } = render(<Harness itemCount={3} onSettle={onSettle} debounceMs={120} />);
+    const el = getByTestId('scroller');
+    setLayout(el, 300, 300);
+    fireEvent.scroll(el);
+    act(() => void vi.advanceTimersByTime(120));
+    fireEvent.scroll(el);
+    act(() => void vi.advanceTimersByTime(120));
+    expect(onSettle).toHaveBeenCalledOnce();
+  });
+
+  it('clamps the settled index within [0, itemCount - 1]', () => {
+    const onSettle = vi.fn();
+    const { getByTestId } = render(<Harness itemCount={2} onSettle={onSettle} debounceMs={120} />);
+    const el = getByTestId('scroller');
+    setLayout(el, 300, 900); // rounds to index 3, clamps to itemCount - 1 = 1
+    fireEvent.scroll(el);
+    act(() => void vi.advanceTimersByTime(120));
+    expect(onSettle).toHaveBeenCalledWith(1);
+  });
+
+  it('scrollToIndex scrolls the container to the target slide', () => {
+    let scrollToIndex: ((index: number) => void) | undefined;
+    const { getByTestId } = render(
+      <Harness itemCount={3} onScrollTo={(fn) => (scrollToIndex = fn)} />,
+    );
+    const el = getByTestId('scroller');
+    setLayout(el, 400, 0);
+    const spy = vi.spyOn(el, 'scrollTo');
+    scrollToIndex?.(2);
+    expect(spy).toHaveBeenCalledWith({ left: 800, behavior: 'smooth' });
+  });
+});

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

@@ -0,0 +1,110 @@
+// @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();
+  });
+});