@sovereignfs/ui 0.21.3 → 0.33.0

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

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { TagInput } from '../TagInput';
+
+afterEach(cleanup);
+
+describe('TagInput', () => {
+  it('adds a tag with Enter', () => {
+    const onChange = vi.fn();
+    render(<TagInput value={[]} onChange={onChange} aria-label="Tags" />);
+
+    const input = screen.getByLabelText('Tags');
+    fireEvent.change(input, { target: { value: 'launch' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(onChange).toHaveBeenCalledWith(['launch']);
+  });
+
+  it('removes the last tag with Backspace when the input is empty', () => {
+    const onChange = vi.fn();
+    render(<TagInput value={['draft', 'publish']} onChange={onChange} aria-label="Tags" />);
+
+    fireEvent.keyDown(screen.getByLabelText('Tags'), { key: 'Backspace' });
+
+    expect(onChange).toHaveBeenCalledWith(['draft']);
+  });
+
+  it('splits pasted comma-separated tags', () => {
+    const onChange = vi.fn();
+    render(<TagInput value={['draft']} onChange={onChange} aria-label="Tags" />);
+
+    fireEvent.paste(screen.getByLabelText('Tags'), {
+      clipboardData: {
+        getData: () => 'launch, release\nnotes',
+      },
+    });
+
+    expect(onChange).toHaveBeenCalledWith(['draft', 'launch', 'release', 'notes']);
+  });
+
+  it('shows validation messages and does not add invalid tags', () => {
+    const onChange = vi.fn();
+    render(
+      <TagInput
+        value={[]}
+        onChange={onChange}
+        aria-label="Tags"
+        validateTag={(tag) => (tag.length > 4 ? 'Tag is too long.' : undefined)}
+      />,
+    );
+
+    const input = screen.getByLabelText('Tags');
+    fireEvent.change(input, { target: { value: 'launch' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(screen.getByRole('alert').textContent).toBe('Tag is too long.');
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('renders removable chips with accessible names', () => {
+    const onChange = vi.fn();
+    render(<TagInput value={['draft']} onChange={onChange} aria-label="Tags" />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Remove draft' }));
+
+    expect(onChange).toHaveBeenCalledWith([]);
+  });
+});

package/src/components/Textarea/Textarea.module.css

@@ -0,0 +1,39 @@
+.textarea {
+  display: block;
+  width: 100%;
+  padding: var(--sv-space-2) var(--sv-space-3);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  line-height: 1.5;
+  color: var(--sv-color-text-primary);
+  background-color: var(--sv-color-surface);
+  border: 1px solid var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-md);
+  resize: vertical;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.textarea::placeholder {
+  color: var(--sv-color-text-muted);
+}
+
+.textarea:focus-visible {
+  outline: none;
+  border-color: var(--sv-color-accent);
+  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
+}
+
+.textarea:read-only {
+  background-color: var(--sv-color-surface-sunken);
+  color: var(--sv-color-text-muted);
+  border-color: var(--sv-color-border);
+  cursor: default;
+}
+
+.textarea:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  resize: none;
+}

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,15 @@
+import type { TextareaHTMLAttributes } from 'react';
+import styles from './Textarea.module.css';
+
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+/**
+ * Textarea — the primitive multi-line text field. Presentational and
+ * RSC-safe: it forwards all native textarea props to the underlying
+ * `<textarea>`. Styling references `--sv-*` tokens via CSS Modules; there
+ * are no hardcoded values.
+ */
+export function Textarea({ className, rows = 4, ...rest }: TextareaProps) {
+  const classes = [styles.textarea, className].filter(Boolean).join(' ');
+  return <textarea rows={rows} className={classes} {...rest} />;
+}

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

@@ -0,0 +1,29 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { Textarea } from '../Textarea';
+
+afterEach(cleanup);
+
+describe('Textarea', () => {
+  it('renders and forwards native props', () => {
+    render(<Textarea placeholder="Bio" defaultValue="Hello" />);
+    const textarea = screen.getByPlaceholderText('Bio') as HTMLTextAreaElement;
+    expect(textarea.value).toBe('Hello');
+  });
+
+  it('defaults to 4 rows', () => {
+    render(<Textarea aria-label="field" />);
+    expect((screen.getByLabelText('field') as HTMLTextAreaElement).rows).toBe(4);
+  });
+
+  it('honours an explicit rows value', () => {
+    render(<Textarea aria-label="field" rows={8} />);
+    expect((screen.getByLabelText('field') as HTMLTextAreaElement).rows).toBe(8);
+  });
+
+  it('is disabled when the disabled prop is set', () => {
+    render(<Textarea aria-label="field" disabled />);
+    expect((screen.getByLabelText('field') as HTMLTextAreaElement).disabled).toBe(true);
+  });
+});

package/src/components/Toast/Toast.module.css

@@ -80,7 +80,7 @@
 
 .message {
   font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-secondary);
+  color: var(--sv-color-text-muted);
   margin-top: var(--sv-space-1);
   line-height: 1.4;
 }
@@ -91,13 +91,15 @@
   border: none;
   padding: 0;
   cursor: pointer;
-  color: var(--sv-color-text-tertiary);
+  color: var(--sv-color-text-subtle);
   line-height: 1;
-  font-size: var(--sv-font-size-base);
+  font-size: var(--sv-font-size-md);
 }
 
-.close:hover {
-  color: var(--sv-color-text-primary);
+@media (hover: hover) {
+  .close:hover {
+    color: var(--sv-color-text-primary);
+  }
 }
 
 @keyframes toastIn {

package/src/components/Toggle/Toggle.module.css

@@ -40,7 +40,7 @@
   background: var(--sv-white);
   transition: transform 0.15s ease;
   left: 2px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--sv-shadow-control);
 }
 
 .on .thumb {

package/src/components/Tooltip/Tooltip.module.css

@@ -20,7 +20,12 @@
   transition: opacity 0.1s ease;
 }
 
-.wrapper:hover .tip,
+@media (hover: hover) {
+  .wrapper:hover .tip {
+    opacity: 1;
+  }
+}
+
 .wrapper:focus-within .tip {
   opacity: 1;
 }

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

@@ -0,0 +1,117 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, fireEvent, render } from '@testing-library/react';
+import { useDoubleTapHandler, useSingleOrDoubleTap } from '../useDoubleTap';
+
+// A minimal harness: the hook returns a handler bound to onClick. Real
+// double-clicks report detail===2; two separate taps report detail===1 each.
+function DoubleTapHarness({ onDouble }: { onDouble: () => void }) {
+  const handle = useDoubleTapHandler<React.MouseEvent>(() => onDouble());
+  return (
+    <button data-testid="btn" onClick={handle}>
+      tap
+    </button>
+  );
+}
+
+function SingleOrDoubleHarness({
+  onSingle,
+  onDouble,
+}: {
+  onSingle: () => void;
+  onDouble: () => void;
+}) {
+  const handle = useSingleOrDoubleTap<React.MouseEvent>(
+    () => onSingle(),
+    () => onDouble(),
+  );
+  return (
+    <button data-testid="btn" onClick={handle}>
+      tap
+    </button>
+  );
+}
+
+describe('useDoubleTapHandler', () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => {
+    vi.useRealTimers();
+    cleanup();
+  });
+
+  it('fires immediately on a native double-click (detail === 2)', () => {
+    const onDouble = vi.fn();
+    const { getByTestId } = render(<DoubleTapHarness onDouble={onDouble} />);
+    fireEvent.click(getByTestId('btn'), { detail: 2 });
+    expect(onDouble).toHaveBeenCalledOnce();
+  });
+
+  it('fires on two touch taps within the window', () => {
+    const onDouble = vi.fn();
+    const { getByTestId } = render(<DoubleTapHarness onDouble={onDouble} />);
+    const btn = getByTestId('btn');
+    fireEvent.click(btn, { detail: 1 });
+    act(() => void vi.advanceTimersByTime(100));
+    fireEvent.click(btn, { detail: 1 });
+    expect(onDouble).toHaveBeenCalledOnce();
+  });
+
+  it('does not fire on a single tap', () => {
+    const onDouble = vi.fn();
+    const { getByTestId } = render(<DoubleTapHarness onDouble={onDouble} />);
+    fireEvent.click(getByTestId('btn'), { detail: 1 });
+    act(() => void vi.advanceTimersByTime(1000));
+    expect(onDouble).not.toHaveBeenCalled();
+  });
+});
+
+describe('useSingleOrDoubleTap', () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => {
+    vi.useRealTimers();
+    cleanup();
+  });
+
+  it('defers the single action until the double-tap window closes', () => {
+    const onSingle = vi.fn();
+    const onDouble = vi.fn();
+    const { getByTestId } = render(
+      <SingleOrDoubleHarness onSingle={onSingle} onDouble={onDouble} />,
+    );
+    fireEvent.click(getByTestId('btn'), { detail: 1 });
+    // Single must NOT have fired yet — this deferral is the whole point.
+    expect(onSingle).not.toHaveBeenCalled();
+    act(() => void vi.advanceTimersByTime(350));
+    expect(onSingle).toHaveBeenCalledOnce();
+    expect(onDouble).not.toHaveBeenCalled();
+  });
+
+  it('fires double (and never single) when a second tap arrives in time', () => {
+    const onSingle = vi.fn();
+    const onDouble = vi.fn();
+    const { getByTestId } = render(
+      <SingleOrDoubleHarness onSingle={onSingle} onDouble={onDouble} />,
+    );
+    const btn = getByTestId('btn');
+    fireEvent.click(btn, { detail: 1 });
+    act(() => void vi.advanceTimersByTime(100));
+    fireEvent.click(btn, { detail: 1 });
+    act(() => void vi.advanceTimersByTime(500));
+    expect(onDouble).toHaveBeenCalledOnce();
+    expect(onSingle).not.toHaveBeenCalled();
+  });
+
+  it('fires double on a native double-click and cancels the pending single', () => {
+    const onSingle = vi.fn();
+    const onDouble = vi.fn();
+    const { getByTestId } = render(
+      <SingleOrDoubleHarness onSingle={onSingle} onDouble={onDouble} />,
+    );
+    const btn = getByTestId('btn');
+    fireEvent.click(btn, { detail: 1 });
+    fireEvent.click(btn, { detail: 2 });
+    act(() => void vi.advanceTimersByTime(500));
+    expect(onDouble).toHaveBeenCalledOnce();
+    expect(onSingle).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,80 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, render } from '@testing-library/react';
+import { MOBILE_BREAKPOINT_PX, useIsMobile } from '../useIsMobile';
+
+// Capture the registered change listener so a test can drive a viewport change.
+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({ breakpoint }: { breakpoint?: number }) {
+  const isMobile = useIsMobile(breakpoint);
+  return <span data-testid="out">{String(isMobile)}</span>;
+}
+
+describe('useIsMobile', () => {
+  beforeEach(() => {
+    matches = false;
+    installMatchMedia();
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    cleanup();
+  });
+
+  it('exports the canonical 768px breakpoint', () => {
+    expect(MOBILE_BREAKPOINT_PX).toBe(768);
+  });
+
+  it('defaults to the canonical breakpoint in its query', () => {
+    matches = true;
+    installMatchMedia();
+    render(<Harness />);
+    expect(lastQuery).toBe('(max-width: 768px)');
+  });
+
+  it('reflects the initial matchMedia result after mount', () => {
+    matches = true;
+    installMatchMedia();
+    const { getByTestId } = render(<Harness />);
+    expect(getByTestId('out').textContent).toBe('true');
+  });
+
+  it('updates when the viewport crosses the breakpoint', () => {
+    matches = false;
+    installMatchMedia();
+    const { getByTestId } = render(<Harness />);
+    expect(getByTestId('out').textContent).toBe('false');
+    act(() => changeHandler?.({ matches: true } as MediaQueryListEvent));
+    expect(getByTestId('out').textContent).toBe('true');
+  });
+
+  it('honours a custom breakpoint override', () => {
+    matches = false;
+    installMatchMedia();
+    render(<Harness breakpoint={640} />);
+    expect(lastQuery).toBe('(max-width: 640px)');
+  });
+});

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

@@ -0,0 +1,158 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, fireEvent, render } from '@testing-library/react';
+import { useLongPress, type UseLongPressOptions } from '../useLongPress';
+
+// Configurable matchMedia mock — usePrefersCoarsePointer reads
+// '(pointer: coarse)', and the SSR-safe hooks read it on mount. Default to a
+// coarse (touch) device so the suppression styles are exercised; individual
+// tests override `coarse` where they assert the desktop path.
+let coarse = true;
+function installMatchMedia() {
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn().mockImplementation((query: string) => ({
+      matches: query.includes('pointer: coarse') ? coarse : false,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  );
+}
+
+// A tiny harness component: spreads the hook's handlers onto a div so we can
+// fire real pointer events at it via Testing Library.
+function Harness(props: UseLongPressOptions & { testId?: string }) {
+  const { testId = 'target', ...options } = props;
+  const handlers = useLongPress(options);
+  return (
+    <div data-testid={testId} {...handlers}>
+      target
+    </div>
+  );
+}
+
+function pointer(type: 'touch' | 'mouse', x = 0, y = 0) {
+  return { pointerType: type, clientX: x, clientY: y };
+}
+
+describe('useLongPress', () => {
+  beforeEach(() => {
+    coarse = true;
+    installMatchMedia();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+    cleanup();
+  });
+
+  it('fires onLongPress after the delay on a touch press held still', () => {
+    const onLongPress = vi.fn();
+    const { getByTestId } = render(<Harness onLongPress={onLongPress} delay={500} />);
+    fireEvent.pointerDown(getByTestId('target'), pointer('touch'));
+    expect(onLongPress).not.toHaveBeenCalled();
+    act(() => void vi.advanceTimersByTime(500));
+    expect(onLongPress).toHaveBeenCalledOnce();
+  });
+
+  it('does not arm for a mouse pointer (desktop keeps its own affordance)', () => {
+    const onLongPress = vi.fn();
+    const { getByTestId } = render(<Harness onLongPress={onLongPress} delay={500} />);
+    fireEvent.pointerDown(getByTestId('target'), pointer('mouse'));
+    act(() => void vi.advanceTimersByTime(1000));
+    expect(onLongPress).not.toHaveBeenCalled();
+  });
+
+  it('tolerates finger jitter within moveTolerance', () => {
+    const onLongPress = vi.fn();
+    const { getByTestId } = render(
+      <Harness onLongPress={onLongPress} delay={500} moveTolerance={10} />,
+    );
+    const el = getByTestId('target');
+    fireEvent.pointerDown(el, pointer('touch', 0, 0));
+    fireEvent.pointerMove(el, pointer('touch', 4, 4)); // ~5.7px < 10
+    act(() => void vi.advanceTimersByTime(500));
+    expect(onLongPress).toHaveBeenCalledOnce();
+  });
+
+  it('cancels when movement exceeds moveTolerance', () => {
+    const onLongPress = vi.fn();
+    const { getByTestId } = render(
+      <Harness onLongPress={onLongPress} delay={500} moveTolerance={10} />,
+    );
+    const el = getByTestId('target');
+    fireEvent.pointerDown(el, pointer('touch', 0, 0));
+    fireEvent.pointerMove(el, pointer('touch', 20, 0)); // 20px > 10
+    act(() => void vi.advanceTimersByTime(500));
+    expect(onLongPress).not.toHaveBeenCalled();
+  });
+
+  it('cancels on pointercancel (touch converted to scroll)', () => {
+    const onLongPress = vi.fn();
+    const { getByTestId } = render(<Harness onLongPress={onLongPress} delay={500} />);
+    const el = getByTestId('target');
+    fireEvent.pointerDown(el, pointer('touch'));
+    fireEvent.pointerCancel(el, pointer('touch'));
+    act(() => void vi.advanceTimersByTime(500));
+    expect(onLongPress).not.toHaveBeenCalled();
+  });
+
+  it('suppresses the click that may follow, but only for a bounded window', () => {
+    const onLongPress = vi.fn();
+    const { getByTestId } = render(
+      <Harness onLongPress={onLongPress} delay={500} suppressClickMs={700} />,
+    );
+    const el = getByTestId('target');
+    fireEvent.pointerDown(el, pointer('touch'));
+    act(() => void vi.advanceTimersByTime(500));
+    expect(onLongPress).toHaveBeenCalledOnce();
+
+    // A click arriving right after the long-press is swallowed.
+    const suppressed = fireEvent.click(el);
+    expect(suppressed).toBe(false); // preventDefault called → fireEvent returns false
+
+    // After the suppression window, a genuinely unrelated later tap is NOT eaten.
+    act(() => void vi.advanceTimersByTime(800));
+    const allowed = fireEvent.click(el);
+    expect(allowed).toBe(true);
+  });
+
+  it('prevents the OS context menu while a press is pending', () => {
+    const { getByTestId } = render(<Harness onLongPress={vi.fn()} delay={500} />);
+    const el = getByTestId('target');
+    fireEvent.pointerDown(el, pointer('touch'));
+    const prevented = fireEvent.contextMenu(el);
+    expect(prevented).toBe(false); // preventDefault called
+  });
+
+  it('does nothing when disabled', () => {
+    const onLongPress = vi.fn();
+    const { getByTestId } = render(<Harness onLongPress={onLongPress} delay={500} disabled />);
+    fireEvent.pointerDown(getByTestId('target'), pointer('touch'));
+    act(() => void vi.advanceTimersByTime(500));
+    expect(onLongPress).not.toHaveBeenCalled();
+  });
+
+  it('emits suppression styles only on coarse-pointer devices', () => {
+    coarse = true;
+    installMatchMedia();
+    const { getByTestId, rerender } = render(<Harness onLongPress={vi.fn()} testId="coarse" />);
+    // jsdom applies the inline style object; user-select none is the tell.
+    expect(getByTestId('coarse').style.userSelect).toBe('none');
+
+    coarse = false;
+    installMatchMedia();
+    rerender(<Harness onLongPress={vi.fn()} testId="coarse" />);
+    // A remount picks up the new (fine-pointer) matchMedia result.
+    cleanup();
+    const fine = render(<Harness onLongPress={vi.fn()} testId="fine" />);
+    expect(fine.getByTestId('fine').style.userSelect).toBe('');
+  });
+});

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useLongPress } from './useLongPress';
+export type { UseLongPressOptions, LongPressHandlers } from './useLongPress';
+export { useDoubleTapHandler, useSingleOrDoubleTap } from './useDoubleTap';
+export { useIsMobile, MOBILE_BREAKPOINT_PX } from './useIsMobile';

package/src/hooks/useDoubleTap.ts

@@ -0,0 +1,91 @@
+'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);
+  };
+}