diff --git a/__tests__/popoverFocusOpens.test.tsx b/__tests__/popoverFocusOpens.test.tsx
new file mode 100644
index 00000000..5e13e5cb
--- /dev/null
+++ b/__tests__/popoverFocusOpens.test.tsx
@@ -0,0 +1,102 @@
+// Copyright 2026 Qore Technologies, s.r.o.
+import { act, fireEvent, render } from '@testing-library/react';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ReqoreContent, ReqoreDropdown, ReqoreInput, ReqoreLayoutContent, ReqoreUIProvider } from '../src';
+
+/**
+ * A list opened by focus is opened by the field being focused - however it came to be.
+ *
+ * The popover listened for `focusin` only, so a field focused as it mounts (an editor that opens with the
+ * cursor in its field) was focused before the listener was there, and the list of what can go in it (a
+ * form's templates) did not appear until the user left the field and came back.
+ */
+
+const isOpen = () => document.querySelectorAll('.reqore-popover-content').length === 1;
+
+/** An input focused as it mounts, before the popover's effects run. */
+const AutoFocusedInput = forwardRef<HTMLInputElement | null, any>((_props, ref) => {
+  const inner = useRef<HTMLInputElement>(null);
+  useImperativeHandle(ref, () => inner.current as HTMLInputElement);
+  useEffect(() => {
+    inner.current?.focus();
+  }, []);
+  return <input ref={inner} className='auto-focused' />;
+});
+
+const items = [
+  { label: 'qty', value: '$record:{qty}' },
+  { label: 'price', value: '$record:{price}' },
+];
+
+const Field = ({ autoFocused }: { autoFocused?: boolean }) => (
+  <ReqoreUIProvider>
+    <ReqoreLayoutContent>
+      <ReqoreContent>
+        <ReqoreDropdown component={autoFocused ? AutoFocusedInput : ReqoreInput} handler='focus' items={items} />
+      </ReqoreContent>
+    </ReqoreLayoutContent>
+  </ReqoreUIProvider>
+);
+
+const show = (autoFocused?: boolean) => {
+  act(() => {
+    render(<Field autoFocused={autoFocused} />);
+  });
+  vi.advanceTimersByTime(1);
+};
+
+const settle = () => {
+  act(() => {
+    vi.advanceTimersByTime(1);
+  });
+};
+
+describe('a list opened by focus', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('opens when the field is focused', () => {
+    show();
+    expect(isOpen()).toBe(false);
+    fireEvent.focus(document.querySelector('.reqore-input') as HTMLElement);
+    settle();
+    expect(isOpen()).toBe(true);
+  });
+
+  it('opens for a field focused as it mounts', () => {
+    show(true);
+    settle();
+    expect(document.activeElement?.className).toBe('auto-focused');
+    expect(isOpen()).toBe(true);
+  });
+
+  it('stays closed after Escape while the field keeps the focus', () => {
+    // the focus check is made once per field: the list's own opening and closing re-run the popover's
+    // listener effect, and a check on every re-run reopened the list Escape had just closed
+    show();
+    const field = document.querySelector('.reqore-input') as HTMLInputElement;
+    act(() => {
+      field.focus();
+    });
+    settle();
+    expect(isOpen()).toBe(true);
+    act(() => {
+      fireEvent.keyDown(document, { key: 'Escape' });
+    });
+    settle();
+    expect(document.activeElement).toBe(field);
+    expect(isOpen()).toBe(false);
+  });
+
+  it('stays closed for a field nobody is in', () => {
+    show();
+    settle();
+    expect(document.activeElement).toBe(document.body);
+    expect(isOpen()).toBe(false);
+  });
+});
diff --git a/__tests__/richTextEditorValueSync.test.tsx b/__tests__/richTextEditorValueSync.test.tsx
new file mode 100644
index 00000000..9de526a7
--- /dev/null
+++ b/__tests__/richTextEditorValueSync.test.tsx
@@ -0,0 +1,78 @@
+// Copyright 2026 Qore Technologies, s.r.o.
+import { act, render } from '@testing-library/react';
+import { createRef, startTransition, useLayoutEffect, useState } from 'react';
+import { Editor, Transforms } from 'slate';
+import {
+  ReqoreContent,
+  ReqoreLayoutContent,
+  ReqoreRichTextEditor,
+  ReqoreUIProvider,
+  TReqoreRichTextEditorRef,
+} from '../src';
+
+/**
+ * A value the editor is given is compared with its document when it is committed, not later.
+ *
+ * The comparison ran in a passive effect, which the browser runs after painting - and, under load, after
+ * the next key. A value that matched the document when it was rendered was compared with a document that
+ * had a key more by then, read as a value from outside, and put in place of the document: the key was lost
+ * and the caret went to the end (reqraft's With Markdown Docs typed "arr.for" and got "arr.fr" in CI).
+ */
+const doc = (text: string) => [{ type: 'paragraph' as const, children: [{ text }] }];
+const textOf = (editor: TReqoreRichTextEditorRef) => Editor.string(editor as never, []);
+
+let setValue: (text: string) => void = () => undefined;
+/** Runs once the commit that renders a new value is laid out - before its passive effects. */
+let onCommit: (() => void) | undefined;
+
+const CommitProbe = ({ value }: { value: string }) => {
+  useLayoutEffect(() => {
+    const run = onCommit;
+    onCommit = undefined;
+    run?.();
+  }, [value]);
+  return null;
+};
+
+const Host = ({ editorRef }: { editorRef: React.RefObject<TReqoreRichTextEditorRef> }) => {
+  const [value, setState] = useState('ab');
+  setValue = setState;
+  return (
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreContent>
+          <ReqoreRichTextEditor ref={editorRef} value={doc(value)} onChange={() => undefined} />
+          <CommitProbe value={value} />
+        </ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+};
+
+test('a key typed between a value and its passive effects is kept', async () => {
+  const editorRef = createRef<TReqoreRichTextEditorRef>();
+  render(<Host editorRef={editorRef} />);
+  const editor = editorRef.current!;
+  // the user typed "c": the editor holds "abc", and its host hands that back
+  act(() => {
+    Transforms.select(editor as never, Editor.end(editor as never, []));
+    Transforms.insertText(editor as never, 'c');
+  });
+  expect(textOf(editor)).toBe('abc');
+  // the host's render of "abc" is committed; before its passive effects run, the next key comes in
+  onCommit = () => Transforms.insertText(editor as never, 'd');
+  await act(async () => {
+    startTransition(() => setValue('abc'));
+  });
+  // the key is kept: "abc" matched the document when it was committed, and is not applied after
+  expect(textOf(editor)).toBe('abcd');
+});
+
+test('a value from outside still replaces the document', async () => {
+  const editorRef = createRef<TReqoreRichTextEditorRef>();
+  render(<Host editorRef={editorRef} />);
+  await act(async () => {
+    setValue('x == 1');
+  });
+  expect(textOf(editorRef.current!)).toBe('x == 1');
+});
diff --git a/__tests__/table-drag-to-scroll.test.tsx b/__tests__/table-drag-to-scroll.test.tsx
new file mode 100644
index 00000000..f1ee9fb0
--- /dev/null
+++ b/__tests__/table-drag-to-scroll.test.tsx
@@ -0,0 +1,140 @@
+import { fireEvent, render } from '@testing-library/react';
+import { ReqoreContent, ReqoreLayoutContent, ReqoreTable, ReqoreUIProvider } from '../src';
+import tableData from '../src/mock/tableData';
+
+/**
+ * A table wider than its frame, scrolled by pressing and pulling it - on its body and,
+ * the part that did not work, on its header.
+ *
+ * The header is scrolled WITH the body (the body syncs it) but is not a scroller of its
+ * own, so neither a finger nor the mouse could move the table from it: a swipe on the
+ * header did nothing on a phone while the same swipe on the rows scrolled them.
+ */
+
+/** jsdom lays nothing out: say that the body overflows. */
+const setOverflow = (element: HTMLElement, { scrollWidth = 2000, clientWidth = 500 } = {}) => {
+  Object.defineProperty(element, 'scrollWidth', { value: scrollWidth, configurable: true });
+  Object.defineProperty(element, 'clientWidth', { value: clientWidth, configurable: true });
+};
+
+/** jsdom has no PointerEvent; these are the fields the gesture branches on. */
+const pointer = (
+  element: Element,
+  type: 'pointerDown' | 'pointerMove' | 'pointerUp',
+  { clientX = 0, pointerType = 'mouse', buttons = type === 'pointerUp' ? 0 : 1 } = {}
+) => fireEvent[type](element, { clientX, pointerType, button: 0, buttons, pointerId: 1 });
+
+const renderTable = (props: Record<string, unknown> = {}) => {
+  // the first column's header reports its clicks
+  const onHeaderClick = vi.fn();
+  const columns = tableData.columns.map((column, index) =>
+    index === 0 ? { ...column, header: { ...column.header, onClick: onHeaderClick } } : column
+  );
+  const { container } = render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreContent>
+          <ReqoreTable {...tableData} columns={columns} height={300} {...props} />
+        </ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+  const body = container.querySelector('.reqore-table-body') as HTMLElement;
+  const header = container.querySelector('.reqore-table-header-wrapper') as HTMLElement;
+  const headerCell = header.querySelector('.reqore-table-header-cell') as HTMLElement;
+  setOverflow(body);
+  return { body, header, headerCell, onHeaderClick };
+};
+
+test('a finger swiped sideways on the header scrolls the table', () => {
+  const { body, headerCell } = renderTable();
+
+  pointer(headerCell, 'pointerDown', { clientX: 300, pointerType: 'touch' });
+  pointer(headerCell, 'pointerMove', { clientX: 180, pointerType: 'touch' });
+  pointer(headerCell, 'pointerUp', { clientX: 180, pointerType: 'touch' });
+
+  expect(body.scrollLeft).toBe(120);
+});
+
+test('the header leaves up-and-down to the page and takes sideways swipes', () => {
+  const { header } = renderTable();
+
+  expect(getComputedStyle(header).touchAction).toBe('pan-y');
+});
+
+// A header cell's click is its own: it opens the column's options, and the column's own onClick runs.
+test('with dragToScroll, the mouse pulls the table by its header, and the press is not a click on it', () => {
+  const { body, headerCell, onHeaderClick } = renderTable({ dragToScroll: true });
+
+  pointer(headerCell, 'pointerDown', { clientX: 400 });
+  pointer(headerCell, 'pointerMove', { clientX: 250 });
+  pointer(headerCell, 'pointerUp', { clientX: 250 });
+  fireEvent.click(headerCell);
+
+  expect(body.scrollLeft).toBe(150);
+  expect(onHeaderClick).not.toHaveBeenCalled();
+});
+
+test('with dragToScroll, a press on the header that does not move is still a click', () => {
+  const { body, headerCell, onHeaderClick } = renderTable({ dragToScroll: true });
+
+  pointer(headerCell, 'pointerDown', { clientX: 400 });
+  pointer(headerCell, 'pointerMove', { clientX: 398 });
+  pointer(headerCell, 'pointerUp', { clientX: 398 });
+  fireEvent.click(headerCell);
+
+  expect(body.scrollLeft).toBe(0);
+  expect(onHeaderClick).toHaveBeenCalled();
+});
+
+test('with dragToScroll, the mouse pulls the table by its body', () => {
+  const { body } = renderTable({ dragToScroll: true });
+  const cell = body.querySelector('.reqore-table-cell') ?? body;
+
+  pointer(cell, 'pointerDown', { clientX: 400 });
+  pointer(cell, 'pointerMove', { clientX: 330 });
+  pointer(cell, 'pointerUp', { clientX: 330 });
+
+  expect(body.scrollLeft).toBe(70);
+});
+
+test('without dragToScroll the mouse does not drag the table, as before', () => {
+  const { body, headerCell } = renderTable();
+
+  pointer(headerCell, 'pointerDown', { clientX: 400 });
+  pointer(headerCell, 'pointerMove', { clientX: 250 });
+  pointer(headerCell, 'pointerUp', { clientX: 250 });
+
+  expect(body.scrollLeft).toBe(0);
+});
+
+test('Shift with a plain wheel on the header scrolls the table sideways', () => {
+  const { body, header } = renderTable();
+  body.scrollTo = ((options: ScrollToOptions) => {
+    body.scrollLeft = options.left ?? body.scrollLeft;
+  }) as typeof body.scrollTo;
+
+  fireEvent.wheel(header, { deltaY: 90, shiftKey: true });
+
+  expect(body.scrollLeft).toBe(90);
+});
+
+test('with dragToScroll, the body says it can be pulled', () => {
+  const { body } = renderTable({ dragToScroll: true });
+
+  expect(body.closest('.reqore-table-wrapper-draggable')).not.toBeNull();
+});
+
+test('a finger keeps scrolling when the cell it landed on loses its own capture', () => {
+  // A touch pointer is captured by the element it lands on; the drag taking the capture for
+  // the header makes that element report losing it. That is the drag starting, not ending.
+  const { body, headerCell } = renderTable();
+
+  pointer(headerCell, 'pointerDown', { clientX: 300, pointerType: 'touch' });
+  pointer(headerCell, 'pointerMove', { clientX: 290, pointerType: 'touch' });
+  fireEvent(headerCell, Object.assign(new Event('lostpointercapture', { bubbles: true }), { pointerId: 1 }));
+  pointer(headerCell, 'pointerMove', { clientX: 200, pointerType: 'touch' });
+  pointer(headerCell, 'pointerUp', { clientX: 200, pointerType: 'touch' });
+
+  expect(body.scrollLeft).toBe(100);
+});
diff --git a/package.json b/package.json
index a43a1bd1..1e2fb07d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.78.0",
+  "version": "0.78.3",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/src/components/COMPONENTS.md b/src/components/COMPONENTS.md
index 6e486d7d..57c63461 100644
--- a/src/components/COMPONENTS.md
+++ b/src/components/COMPONENTS.md
@@ -49,11 +49,11 @@
 | **ReqorePaging** | Pagination controls component with page buttons, load more, and scroll-based infinite loading options. |
 | **ReqorePanel** | Container component with optional header, footer, actions, and resizable panels with breadcrumbs support. **An action's `responsive: false` is honoured by the panel itself as of 0.76.0.** A narrow panel drops its actions' labels and keeps the icons — the right trade for a toolbar, since the label is a verb the icon already carries — and `responsive: false` is how an action says it is not one of those. The prop existed and the panel never read it: only the `ReqoreControlGroup` rendering the actions did, so the panel stripped the label back off and the action rendered as a bare icon anyway. It now reads it where the label is decided, which is why `Layout/Panel → Fluid` finally shows the contrast its fixture was written for ("Visible" keeps its label, "Hidden when small" does not). Use it for an action whose icon cannot carry its meaning alone — a destructive one, or either half of a two-way choice. Optional `raised` adds a subtle 3D inset highlight when paired with `flat`, suppressed whenever the panel actually draws a border — normally that means an `intent` is set, but an `accentPosition` panel draws no border, so `raised` applies there too. Optional `accentPosition` (`'left'` \| `'top'`) + `accentSize` (px or a `TSizes` name via `ACCENT_SIZE_TO_PX`; default `5` = `'normal'`) render the intent as a single edge strip instead of tinting the whole border (the border goes neutral — at rest AND on hover — or disappears on `flat` panels) — mirroring ReqoreCallout's accent API. With `stickyHeader` the wrapper stops clipping, so the strip rounds its own corners to match the panel. `stickyHeader` pins flush to the visible top edge of whatever scrolls, even when that scrollport carries its own top padding — which every default panel/drawer/modal body does, since the panel body puts `padding` and `overflow` on one element. The panel measures that padding at runtime and subtracts it from the sticky `top`; `stickyHeaderOffset` remains a deliberate caller offset applied on top of that corrected zero. Note the scroll ancestor is resolved by walking for `overflow-y: auto | scroll | overlay | hidden` — `hidden` counts, because it is a scroll container and does capture sticky. Header layout is configurable via `iconWithLabel` (default `false`; when `true`, the leading icon renders inside the label+badge row so the description sits beneath both icon and label) and `iconVerticalAlign` (`'top'` \| `'center'` \| `'bottom'` — default `'center'`; only takes effect when `iconWithLabel={false}`). Accepts an optional `radiusSize` (`TSizes`) that overrides the default `size`-derived corner roundness using the pronounced `RADIUS_FROM_RADIUS_SIZE` scale. An action declared `show: 'hover'` is hidden until the panel is hovered — but ONLY where the pointer can hover: the hiding rule sits inside a `@media (hover: hover) and (pointer: fine)` query, so on touch the action stays visible instead of being `display: none` with no route to it. **Media** (new in 0.78.0): `media` (an image URL, or any node — `<img>`, `<picture>`, `<video>`, an illustration) is drawn edge to edge across the panel, outside its padding, in a `.reqore-panel-media` frame whose outer corners take the panel's inner curve (its radius, less the 1px border when it draws one) — so it is clipped to the panel's shape even with a sticky header, which makes the panel overflow visible. `mediaPosition` (`'top'` default, above the title bar — and above the sticky-header sentinel, so stuck detection still starts at the header; or `'bottom'`, under the bottom actions); `mediaAlt` (the text of a URL's `<img>`, default `''`: decorative); `mediaAspectRatio` (any CSS `aspect-ratio`; the media then covers the frame with `object-fit: cover` rather than setting its height); `mediaProps` (the frame's `div` props, `data-*` included; `className` merged). A URL renders `<img decoding="async">`; an `img`, `picture`, `video`, `svg`, `canvas` or `iframe` child fills the frame's width. Hidden while the panel is collapsed. A panel with only `media` and `padded={false}` is a photo card. |
 | **ReqoreP** | Text paragraph component with theme support, effects, and size customization. |
-| **ReqorePopover** | Popover/tooltip component with multiple trigger handlers (`handler`: `hover` — the default — `hoverStay`, `click`, `focus`) and smart positioning. `interactive` says whether the popover's own surface takes the pointer; `interactive={false}` renders it `pointer-events: none`, so the pointer falls through to whatever is underneath. **It defaults to whether the pointer can actually REACH the surface:** `false` for a plain `hover` popover, which closes as soon as the pointer is off it and therefore unmounts as the pointer arrives, and `true` for `hoverStay`, `click` and `focus`, and for a `hover` popover held open with `keepOpenOnHover`. Set it explicitly to override either way. **Breaking in 0.76.0:** a DEFAULT-handler popover was interactive before and is not now, and nothing warns — a link, a button, a scrollable region or any other target inside a plain hover popover silently stops responding, and `closeOnInsideClick` (default `true`) becomes unreachable with it, because a click that cannot land inside can never be the inside click it acts on. A hover popover whose content is meant to be USED wants `keepOpenOnHover` — the pointer has to survive the trip to the surface, not merely be caught by it — and `interactive` alone, without it, keeps the pointer but still closes as soon as the pointer leaves. A hover popover is closed by its trigger's `mouseleave` OR, if that event is never delivered, by the reconciliation that notices the pointer somewhere else — so a missed event costs a moment rather than leaving the popover up for good. The one exception is a consumer whose `onBeforeClose` refuses: on a plain hover popover that close is immediate and asks first, so a veto strands it whether or not any event went missing. A vetoing consumer owns dismissal. **The general case, of which the veto is one instance: a hover popover that is open while the pointer is NOT on its trigger.** Such a popover stays visible, and being a plain hover popover it is now `pointer-events: none`, so a button, link or scrollable region inside it is no longer merely unwanted but unreachable — the pointer falls through to whatever is behind — and nothing in the types says so. Two arrangements reach that state: a vetoing `onBeforeClose`, and **`openOnMount` on a popover anchored to something that never receives a `mouseleave`** (the LSP-hover idiom — a zero-size fixed `<span>` at a caret position, often with `pointerEvents: 'none'` of its own, opened programmatically rather than by a pointer). **The reconciliation deliberately does NOT touch the second arrangement.** It closes a `hover` popover on the first `mouseover` landing neither on the trigger nor on a popover surface — which is evidence of something only for a popover the POINTER opened. An `openOnMount` popover was opened by the component, the pointer has never been on its trigger, so a pointer elsewhere says nothing about it; reading it as a reason to close took such a popover down on the first mouse movement anywhere (it cost reqore's own `Clamped To Viewport` and `Progress → With Tooltip` their auto-opened popovers). The reconciliation is therefore gated on the popover having been opened by a pointer. This changes nothing about closing it: the trigger keeps its own `mouseenter` / `mouseleave` handling whatever opened the popover, so hovering an already-open hover popover's trigger still closes it exactly as before. What an auto-opened popover loses is only its `interactive` surface — its content is still unreachable, which is the first arrangement above. A hover popover held open deliberately whose content is meant to be USED needs `keepOpenOnHover` or an explicit `interactive`. Note that no jsdom test can catch this class of breakage: synthetic clicks ignore `pointer-events` entirely, so only a browser story that hit-tests with `document.elementFromPoint()` will see it. Content that is only READ (the tooltip case) wants the new default: an unclipped surface sitting in the pointer's path used to take hover away from what it covered, which read as a tooltip flickering out mid-sentence and as an element that could not be clicked while its neighbour's tooltip was up. |
+| **ReqorePopover** | Popover/tooltip component with multiple trigger handlers (`handler`: `hover` — the default — `hoverStay`, `click`, `focus`) and smart positioning. A `focus` popover whose trigger already holds the focus when its listener is attached (a field focused as it mounts) opens at once, since no `focusin` will come; the check is made once per trigger, so a list closed with Escape stays closed while the field keeps the focus. `interactive` says whether the popover's own surface takes the pointer; `interactive={false}` renders it `pointer-events: none`, so the pointer falls through to whatever is underneath. **It defaults to whether the pointer can actually REACH the surface:** `false` for a plain `hover` popover, which closes as soon as the pointer is off it and therefore unmounts as the pointer arrives, and `true` for `hoverStay`, `click` and `focus`, and for a `hover` popover held open with `keepOpenOnHover`. Set it explicitly to override either way. **Breaking in 0.76.0:** a DEFAULT-handler popover was interactive before and is not now, and nothing warns — a link, a button, a scrollable region or any other target inside a plain hover popover silently stops responding, and `closeOnInsideClick` (default `true`) becomes unreachable with it, because a click that cannot land inside can never be the inside click it acts on. A hover popover whose content is meant to be USED wants `keepOpenOnHover` — the pointer has to survive the trip to the surface, not merely be caught by it — and `interactive` alone, without it, keeps the pointer but still closes as soon as the pointer leaves. A hover popover is closed by its trigger's `mouseleave` OR, if that event is never delivered, by the reconciliation that notices the pointer somewhere else — so a missed event costs a moment rather than leaving the popover up for good. The one exception is a consumer whose `onBeforeClose` refuses: on a plain hover popover that close is immediate and asks first, so a veto strands it whether or not any event went missing. A vetoing consumer owns dismissal. **The general case, of which the veto is one instance: a hover popover that is open while the pointer is NOT on its trigger.** Such a popover stays visible, and being a plain hover popover it is now `pointer-events: none`, so a button, link or scrollable region inside it is no longer merely unwanted but unreachable — the pointer falls through to whatever is behind — and nothing in the types says so. Two arrangements reach that state: a vetoing `onBeforeClose`, and **`openOnMount` on a popover anchored to something that never receives a `mouseleave`** (the LSP-hover idiom — a zero-size fixed `<span>` at a caret position, often with `pointerEvents: 'none'` of its own, opened programmatically rather than by a pointer). **The reconciliation deliberately does NOT touch the second arrangement.** It closes a `hover` popover on the first `mouseover` landing neither on the trigger nor on a popover surface — which is evidence of something only for a popover the POINTER opened. An `openOnMount` popover was opened by the component, the pointer has never been on its trigger, so a pointer elsewhere says nothing about it; reading it as a reason to close took such a popover down on the first mouse movement anywhere (it cost reqore's own `Clamped To Viewport` and `Progress → With Tooltip` their auto-opened popovers). The reconciliation is therefore gated on the popover having been opened by a pointer. This changes nothing about closing it: the trigger keeps its own `mouseenter` / `mouseleave` handling whatever opened the popover, so hovering an already-open hover popover's trigger still closes it exactly as before. What an auto-opened popover loses is only its `interactive` surface — its content is still unreachable, which is the first arrangement above. A hover popover held open deliberately whose content is meant to be USED needs `keepOpenOnHover` or an explicit `interactive`. Note that no jsdom test can catch this class of breakage: synthetic clicks ignore `pointer-events` entirely, so only a browser story that hit-tests with `document.elementFromPoint()` will see it. Content that is only READ (the tooltip case) wants the new default: an unclipped surface sitting in the pointer's path used to take hover away from what it covered, which read as a tooltip flickering out mid-sentence and as an element that could not be clicked while its neighbour's tooltip was up. |
 | **ReqoreProgress** | Progress bar component with optional animations, indeterminate state, customizable labels/icons, and an optional target marker for visualising goals (e.g. "90% target coverage"). |
 | **ReqoreRadioGroup** | Radio button group component allowing single selection from multiple options with optional dividers. **Breaking in 0.76.0:** an option marked `readOnly` can no longer be selected; it used to select like any other, which is what the shipped "Read Only Option" in the stories did. It is shown and can be hovered and read — it keeps its pointer events and is only marked `cursor: not-allowed` — but selecting it now does nothing, so a reason in its `tooltip` or `description` is still reachable. `disabled` remains the way to take an option out of interaction altogether. **A native radio group** (new in 0.77.4): the group is `role="radiogroup"` (label it with `aria-label` / `aria-labelledby`) and every option is a `ReqoreCheckbox` with a native `type='radio'` input carrying the option's `value`. Give the group a **`name`** and the options become ONE native group: the form posts `name=<selected value>`, the group is a single tab stop and the arrow keys move the choice (skipping disabled options). Without `name` each option is still a native radio (focusable, `Space` selects it) but they are not grouped and nothing is posted — so a group that used to sit inside a form posts nothing new. `required` marks the choice as required. |
 | **ReqoreRating** | Star rating component supporting half-steps, keyboard navigation, and optional clear functionality. |
-| **ReqoreRichTextEditor** | Rich text editor using Slate framework with support for inline tags and text formatting options. |
+| **ReqoreRichTextEditor** | Rich text editor using Slate framework with support for inline tags and text formatting options. A new `value` from the caller replaces the editor content as it is committed (a layout effect), and only when it differs from what the editor holds, so a key typed between the commit and the passive effects is never overwritten by an older value. |
 | **ReqoreSelect** | Single-select input: the chosen item is a chip and the dropdown holds the candidates, with optional filtering and value creation (`canCreateItems`, `canRemoveItems`, `enterKeySelects`). An item is a pair of concerns — how it LOOKS (`label`, `icon`, `intent`, `actions`) and what it MEANS (`value`, `metadata`, `items`, `isNew`). Only the presentation half is passed to the chip: the tag spreads whatever it does not consume onto the DOM node, so an item's own data would otherwise be published as element attributes — and a structured `value` (a hash preset, as Qorus forms use) arrived as `value="[object Object]"`. An item with no `label` still falls back to showing its value, but only when that value is a scalar; a structured one has no label form and would be handed to React as a child, which throws rather than degrading. Because a label names WHICH preset was picked and cannot show what is in it, a structured value is offered on hover instead: `selectItemTooltip` previews it as capped, pretty-printed JSON set in `MONO_FONT` with its whitespace preserved — a value is data, and the indentation is its structure. (Deliberately not `ReqoreDataView`: that is a panel with collapsible sections, which is how to READ a value and not what belongs inside a hover tooltip.) An item's own `tooltip` always wins over that default. A value that cannot be serialised (a circular structure) simply gets no tooltip. An unlabelled item shows its value stringified, so a flag reads as `true` / `false` rather than as an empty chip — the same rule serves the chip and the dropdown row. **What it holds** is a type parameter, `string` by default: `ReqoreSelect<number>` / `<boolean>` hold and hand back that kind, and an `items` entry of another kind is a type error, since identity matching could never select it (a structured `object` value stays allowed whatever the select holds). `canCreateItems` is offered only by a select over strings, because a created value IS the text typed. **Breaking in 0.76.0:** `onItemAdded` / `onItemRemoved` receive the VALUE, not the item — a consumer reading `item.label` in one of them gets `undefined` at runtime with no type error where the handler's parameter is inferred. **Breaking in 0.76.0:** an item marked `readOnly` can no longer be selected — the same change as `ReqoreDropdown`, whose list this uses. It was fully selectable before, by click and by keyboard. **An allowed value that cannot currently be chosen is `readOnly`, not `disabled`.** An item's `disabled` reaches the row AND the chip as `pointer-events: none`, so it takes the tooltip and any row control with it — the two places the reason could be read. An item's `readOnly` leaves both alive at full opacity with `cursor: not-allowed`, the list refuses the selection by click and by keyboard, and the reason lives in the item's own `description`, `tooltip`, `badge`, `intent` or a pressable `rightAction`. Reqore's own "no existing items found" / "no items exist" placeholder rows are read-only, which is why clicking one no longer pushes an empty value into the selection. |
 | **ReqoreSegmentedControl** | Compact button-bar toggle for selecting one of 2-4 exclusive options with a sliding indicator animation. **Per-item `props`** (new in 0.78.0; `TReqoreSegmentedControlItemProps` — `ReqoreButton` props plus `data-*`): attributes and props for one segment's button — a `data-track-click` for analytics, an `aria-label` for an icon-only segment, `id`, `style`, `className` (merged). They go under the control's own, so the segments stay the radio group the control runs: the selection handler, `role`, `aria-checked`, `tabIndex`, `disabled` and the selected look stay the control's (`onClick`, `role`, `tabIndex`, `aria-checked`, `label` and `children` are not in the type), and the item's own `icon`, `rightIcon`, `badge`, `tooltip` and `effect` win where set. A segment folded into the "More" menu passes them to its menu item. |
 | **ReqoreSeverityRow** | Row primitive for issue/alert/anomaly lists with a left severity strip, leading slot for a severity tag, label/description body, badge support (TReqoreBadge), and right-side action buttons. Supports the standard prop set: intent (info/success/warning/danger with tinted backgrounds), size, flat (border on `false`), rounded, fluid, transparent, raised (subtle 3D inset highlight when paired with `flat`), customTheme, tooltip, disabled, effect / labelEffect / descriptionEffect, wrap (single-line ellipsis on `false`), optional strip-hide, `padded` (`true` \| `false` \| `'horizontal'` \| `'vertical'` — default `true`), `paddingSize` (`TSizes` — defaults to `size`), and click handlers. **Row actions do not bubble into the row's own `onClick`** — every action button stops propagation (as `ReqorePanel` and `ReqoreEntityRow` do), so a caret action and the row can toggle the same disclosure state without cancelling each other out; an action that *should* also trigger the row calls the row's handler itself. On a container narrower than 640px the actions wrap onto their own row under the label — measured from the row's OWN container via `ResizeObserver` (stamped as `data-narrow`), not the viewport, so a narrow drawer on a wide screen wraps correctly. |
@@ -63,7 +63,7 @@
 | **ReqoreSpan** | Inline text component with theme support and text effects. |
 | **ReqoreSpinner** | Animated loading indicator with optional text label and multiple icon variants. |
 | **ReqoreStatistic** | Metric display component showing values with optional prefixes, suffixes, trends, and labels. Optional `raised` adds a subtle 3D inset highlight when the surface is also `rounded` and `flat`. Outer padding is configurable via `padded` (`true` \| `false` \| `'horizontal'` \| `'vertical'` — default `true`; only applies when the tile has a background) and `paddingSize` (`TSizes` — defaults to `size`). Accepts an optional `radiusSize` (`TSizes`) that overrides the `size`-derived corner roundness using the pronounced `RADIUS_FROM_RADIUS_SIZE` scale. **`valueAs`** (new in 0.78.0; `'h1'`–`'h6'` \| `'p'` \| `'div'` \| `'span'`): by default the prefix, the value and the suffix are each a heading (`h1`–`h4`, from `size`), so a row of KPI tiles puts one to three headings per tile into the page outline. With `valueAs` the whole value is ONE element of that kind — a heading level you choose, or a plain element for a figure that is content — drawn exactly as before: the same size (still from `size`), bold where the element is not a heading, no margins; prefix, value and suffix become spans inside it, keeping their classes. **`countUp`** (new in 0.78.0; `boolean` \| `{ duration?, from?, threshold?, format? }`): the value counts up once the tile is on screen — from `from` (0) over `duration` ms (1000, easing out) when `threshold` (0.35) of the value is in view, showing `from` until then — keeping the value's own format (decimals, thousands separator, text around the number: `'$1.2M'`, `'99.8%'`, `'1,234'`, `'1.234,5'`), or writing each frame with `format`. The last frame is the value exactly as given. A value that is not one number (`'2–4'`, `'24/7'`, `'N/A'`) shows at once, and so does every value under `prefers-reduced-motion` or with `duration: 0`; a value that changes after the count is shown at once, and one that changes mid-count is counted to. While it counts, the moving number is `aria-hidden` and the value itself is read from a visually hidden copy, so assistive technology never reads a frame. Where IntersectionObserver is missing the count starts on mount. Parsing and formatting are `parseCountUpValue` / `formatCountUpValue` in `hooks/useCountUp`. |
-| **ReqoreTable** | Advanced data table with sorting, filtering, column pinning, resizing, paging, and export capabilities. The global filter matches a row when the query appears anywhere in its data (hidden fields included) and keeps the arriving order; `filterRanking="relevance"` opts a table into ranking the matches while a query is active, taking precedence over `sort` (which decides between equal matches and returns when the box is cleared): by the first shown column that matches (the first column is the row's identity, so a name containing the word beats a description starting with it), then within it exact cell, cell prefix, word prefix, substring, ties in arriving order. Filled tables measure only their flex-allocated table wrapper, so top or bottom paging controls reserve space without clipping the last rows. When `selected` is supplied, selection is controlled: external prop changes are authoritative and `onSelectedChange` is emitted only for user selection actions, never while synchronizing props. The select-all header toggle is scoped to the currently visible rows — it recomputes whenever the data, the global query or a column filter changes, so its icon and its click action always reflect the filtered set rather than the full one. Virtualized bodies render one viewport of rows beyond the visible band in each direction (minimum 8); `overscanRowCount` overrides that. react-window's own default of 2 rows is not enough to survive a trackpad flick — the window is advanced from a passive scroll handler, so the browser paints the scrolled container before React commits the rows, and anything the overscan does not cover is a blank strip that fills in a frame later. `renderExpandedRow` draws a panel under its row: it is laid out at the table's MEASURED visible width rather than the full scroll width, and pinned with `position: sticky; left: 0`, so a panel stays put and readable while the row above it scrolls sideways (a panel sized to the scroll width would start off-screen the moment a table is wider than its viewport). Its group clips with `overflow: clip` rather than `hidden`, because `hidden` makes the group a scroll container and a scroll container captures the `position: sticky` of the panel and of any pinned cell. A column's `cell.content` function is rendered through a component of the table's own, so rebuilding the `columns` array re-renders cells instead of remounting them — see the `content` prop for the one case that still needs care. A cell contains its content, whatever the content is: a body row is drawn at ONE height (a virtualised list has to know it before anything is laid out), so every cell resets the flex automatic minimum size on what it holds, bounds it to the cell on both axes, and — when the cell does not wrap — gives it one line ending in an ellipsis. That covers the elements a caller's own `cell.content` returns, not just the paragraph the built-in `'text'` / `'number'` / `'time-ago'` renderers produce; before it did, a description column of prose printed over the two rows below it and a long URL printed across the next column's chips. Pair a truncating column with `cell.tooltip` so the whole value is a hover away, or use `wrap` (rows grow to their content, virtualisation off) or `wrap` + `maxCellHeight` (rows grow, but only so far, with a "Show more") when the value has to be readable in place. `findTableGeometryViolations` is published for a consumer's own tests from **`@qoretechnologies/reqore/testing`**, not from the main entry point: it measures every rendered cell and returns the ones whose content leaves its box. It lives behind its own entry point because reqore ships CommonJS with no `sideEffects` flag, so anything re-exported from `index` reaches every consumer's bundle whether it is imported or not, and this is two hundred lines of layout measuring that no application renders with. It needs a real layout, so it answers meaningfully only in a browser (a Storybook play function, a browser-mode test runner) — under jsdom every rectangle is zero. |
+| **ReqoreTable** | Advanced data table with sorting, filtering, column pinning, resizing, paging, and export capabilities. `dragToScroll` (default `false`) lets a mouse or pen press and pull a table wider than its frame sideways, by its body or by its header; a press that does not move is still a click (a header cell keeps opening its options), the click that ends a real drag is not delivered, and a press on a text field is the field's. A finger swipes the table either way: the body pans natively, and the header, which is scrolled with the body but is not a scroller itself, scrolls the body under a sideways swipe (`touch-action: pan-y`, so the page still pans up and down). The gesture is the same `useDragToScroll` hook `ReqoreFadeScroller` uses. With `dragToScroll` the body shows a grab cursor (grabbing, and no text selection, while pulled). Shift with a plain wheel over the header scrolls the table sideways, as over the body. The global filter matches a row when the query appears anywhere in its data (hidden fields included) and keeps the arriving order; `filterRanking="relevance"` opts a table into ranking the matches while a query is active, taking precedence over `sort` (which decides between equal matches and returns when the box is cleared): by the first shown column that matches (the first column is the row's identity, so a name containing the word beats a description starting with it), then within it exact cell, cell prefix, word prefix, substring, ties in arriving order. Filled tables measure only their flex-allocated table wrapper, so top or bottom paging controls reserve space without clipping the last rows. When `selected` is supplied, selection is controlled: external prop changes are authoritative and `onSelectedChange` is emitted only for user selection actions, never while synchronizing props. The select-all header toggle is scoped to the currently visible rows — it recomputes whenever the data, the global query or a column filter changes, so its icon and its click action always reflect the filtered set rather than the full one. Virtualized bodies render one viewport of rows beyond the visible band in each direction (minimum 8); `overscanRowCount` overrides that. react-window's own default of 2 rows is not enough to survive a trackpad flick — the window is advanced from a passive scroll handler, so the browser paints the scrolled container before React commits the rows, and anything the overscan does not cover is a blank strip that fills in a frame later. `renderExpandedRow` draws a panel under its row: it is laid out at the table's MEASURED visible width rather than the full scroll width, and pinned with `position: sticky; left: 0`, so a panel stays put and readable while the row above it scrolls sideways (a panel sized to the scroll width would start off-screen the moment a table is wider than its viewport). Its group clips with `overflow: clip` rather than `hidden`, because `hidden` makes the group a scroll container and a scroll container captures the `position: sticky` of the panel and of any pinned cell. A column's `cell.content` function is rendered through a component of the table's own, so rebuilding the `columns` array re-renders cells instead of remounting them — see the `content` prop for the one case that still needs care. A cell contains its content, whatever the content is: a body row is drawn at ONE height (a virtualised list has to know it before anything is laid out), so every cell resets the flex automatic minimum size on what it holds, bounds it to the cell on both axes, and — when the cell does not wrap — gives it one line ending in an ellipsis. That covers the elements a caller's own `cell.content` returns, not just the paragraph the built-in `'text'` / `'number'` / `'time-ago'` renderers produce; before it did, a description column of prose printed over the two rows below it and a long URL printed across the next column's chips. Pair a truncating column with `cell.tooltip` so the whole value is a hover away, or use `wrap` (rows grow to their content, virtualisation off) or `wrap` + `maxCellHeight` (rows grow, but only so far, with a "Show more") when the value has to be readable in place. `findTableGeometryViolations` is published for a consumer's own tests from **`@qoretechnologies/reqore/testing`**, not from the main entry point: it measures every rendered cell and returns the ones whose content leaves its box. It lives behind its own entry point because reqore ships CommonJS with no `sideEffects` flag, so anything re-exported from `index` reaches every consumer's bundle whether it is imported or not, and this is two hundred lines of layout measuring that no application renders with. It needs a real layout, so it answers meaningfully only in a browser (a Storybook play function, a browser-mode test runner) — under jsdom every rectangle is zero. |
 | **ReqoreTabs** | Tab interface component supporting closeable tabs, vertical orientation, and uncontrolled/controlled states. |
 | **ReqoreTag** | Compact labeled component with optional icons, actions, colors, and badge styling. **`appearance`** (new in 0.77.2; `'solid' | 'soft' | 'text'`, default `'solid'` = the look every tag had before) sets how much of the tag the colour (`intent`, `color`, or `effect.color` when neither is set) paints: `'soft'` is an outlined status pill — a 1px ring (drawn as an inset shadow, so the tag keeps the exact box of a solid one) and the label and icons in the colour, over a 20% wash of it; `'text'` colours only the label and icons, with no border and no background. The label is the colour pushed lighter on a dark theme or darker on a light one until it reaches 4.5:1 against what it sits on (`getReadableAccentColor` in `helpers/colors`), so the same intent reads on both themes; with no colour at all the tag is neutral. `minimal` and `flat={false}`'s border have no effect on a soft or text tag. `ReqoreTagGroup` takes `appearance` too and hands it to every tag that does not set its own. Accepts an optional `radiusSize` (`TSizes`) that overrides the `size`-derived corner roundness using the pronounced `TAG_RADIUS_FROM_RADIUS_SIZE` / `BADGE_RADIUS_FROM_RADIUS_SIZE` scales (the latter when `asBadge` is set). **Changed in 0.76.0 — every minimal tag with an achromatic colour is repainted.** `minimal` lays the colour down at 20% alpha, so the label is read against mostly the surface underneath rather than against the colour. For a CHROMATIC colour a light tint of it reads on either theme; for an ACHROMATIC one there is no tint to take — a 20% wash of grey over the surface IS the surface — so the label now takes the readable colour for the SURFACE, exactly as the no-colour case does. It used to fall through to the readable colour for the colour at full strength, and a near-white muted intent is light, so that returned BLACK: black text on a 20% wash over a near-black page, reported as "very hard to read" and true of every minimal tag with a grey intent. **`readOnly` is honoured** (new in 0.76.0): the tag keeps its pointer events, its tooltip and its actions, and only stops advertising itself as pressable — no pointer cursor, no hover lift, and no tab stop. Refusing the CHANGE stays the caller's job, which is why the `onClick` is still called; `disabled` remains the way to take a tag out of interaction altogether. An action declared `show: 'hover'` hides until hover only where hover exists (same `@media (hover: hover) and (pointer: fine)` guard as ReqorePanel). An action's own `className` is MERGED with the component's classes rather than replacing them — passing one used to clobber `reqore-tag-action-hidden` and silently disable the hover-hiding. `readOnly` (new in 0.76.0) marks a tag as not-currently-actionable WITHOUT taking its pointer events away: `cursor: not-allowed`, full opacity, no hover lift, but its tooltip and its actions still answer — so it can say why. **It does not withhold `onClick`.** A read-only `ReqoreTag`, `ReqoreButton` or `ReqoreCheckbox` still fires the handler it was given, because refusing the CHANGE belongs to whatever owns the choice and not to the control that draws it — a caller who wants the press refused withholds the handler itself. Only the components that DO own a choice refuse it: `ReqoreDropdown` / `ReqoreSelect` items, `ReqoreRadioGroup` items, `ReqoreRating` and `ReqoreSegmentedControl`. `disabled` stays what it was: dimmed and `pointer-events: none`, which also silences any explanation. |
 | **ReqoreTestimonial** | Quote-card surface for social proof, customer testimonials, and endorsements. Renders an optional decorative leading quote glyph, an optional star `rating`, the `quote` body (or `children`), an attribution footer (built on `ReqoreEntityRow`) with `avatar` (image) or `avatarIcon`, `author`, and `role`, plus badge support (TReqoreBadge) and right-side action buttons. Supports the standard prop set: intent (controls accent + border + tinted background), size, flat (border on `false`), rounded, `radiusSize` (`TSizes` — overrides the `size`-derived radius using the pronounced `RADIUS_FROM_RADIUS_SIZE` scale), fluid, fixed, transparent, raised (subtle 3D inset highlight when paired with `flat`), customTheme, tooltip, disabled, interactive (auto-detected from `onClick`), effect / quoteEffect / authorEffect / roleEffect, wrap (single-line ellipsis on `false`), `padded` (`true` \| `false` \| `'horizontal'` \| `'vertical'` — default `true`), and `paddingSize` (`TSizes` — defaults to `size`). |
diff --git a/src/components/FadeScroller/index.tsx b/src/components/FadeScroller/index.tsx
index 36ff92dc..f6e1fcd3 100644
--- a/src/components/FadeScroller/index.tsx
+++ b/src/components/FadeScroller/index.tsx
@@ -4,6 +4,7 @@ import { GAP_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { TReqoreHexColor } from '../Effect';
 import { getMainBackgroundColor } from '../../helpers/colors';
+import { useDragToScroll } from '../../hooks/useDragToScroll';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { IReqoreScrollFadeMeasurement, useScrollFade } from '../../hooks/useScrollFade';
 import { useReqoreTheme } from '../../hooks/useTheme';
@@ -107,29 +108,6 @@ export interface IReqoreFadeScrollerProps
   marqueePauseOnHover?: boolean;
 }
 
-/**
- * How far the pointer must travel before a press becomes a drag.
- *
- * Zero would make every click a one-pixel drag and swallow it; too large and the
- * row feels stuck before it moves. Four pixels is the usual hysteresis for
- * distinguishing a click from a drag.
- */
-const DRAG_THRESHOLD = 4;
-
-/**
- * Elements a drag must never start on.
- *
- * Deliberately NOT "anything interactive". The rows this is built for are made
- * OF interactive things — a rail of clickable KPI tiles is the motivating case —
- * so excluding buttons would leave nowhere to grab and the feature would do
- * nothing. Their clicks are protected instead by suppressing the click that
- * follows a real drag, which is what makes press-and-release still activate a
- * tile while press-and-pull scrolls past it.
- *
- * What IS excluded is text entry, where a press-and-move already means
- * "select within this value" and there is no other way to ask for it.
- */
-const NON_DRAGGABLE = 'input, textarea, select, [contenteditable=""], [contenteditable="true"]';
 
 interface IStyledFadeScrollerProps {
   $fadeColor: string;
@@ -453,195 +431,21 @@ export const ReqoreFadeScroller = memo(
         return () => observer.disconnect();
       }, [marqueeActive, marqueeSpeed]);
 
+      useDragToScroll({
+        scrollRef,
+        mouse: canDrag,
+        draggingClass: 'reqore-fade-scroller-dragging',
+      });
+
+      // The draggable class is set by the measurement pass; a row that stops being
+      // draggable drops it here.
       useEffect(() => {
         const element = scrollRef.current;
-
-        if (!canDrag || !element) {
+        if (canDrag || !element) {
           return undefined;
         }
-
-        let activePointer: number | undefined;
-        let startX = 0;
-        let startScrollLeft = 0;
-        let engaged = false;
-        // Set when a drag actually moved the row, and consumed by the click that
-        // the browser fires next. Without it, pulling the row sideways and
-        // letting go on top of a clickable tile ALSO activates that tile.
-        let swallowNextClick = false;
-
-        /* The live gesture is tracked on the WINDOW, not on the row.
-         *
-         * A pull leaves the row almost immediately — the edges are where you are
-         * pulling TO — and the release can land anywhere, including outside the
-         * browser window entirely. Listening on the row alone meant a release it
-         * never saw left `activePointer` set: the next move over the row resumed
-         * the drag with no button held, and there was no way to let go, because
-         * the only thing that could have ended it was a pointerup on the row that
-         * was never coming.
-         *
-         * Pointer capture alone does not cover this — it is taken only once the
-         * drag ENGAGES, and a fast pull can be past the row's edge before the
-         * first qualifying move arrives.
-         *
-         * Bound per-gesture rather than permanently, so an idle scroller adds no
-         * global pointermove listener. */
-        const stopTracking = () => {
-          window.removeEventListener('pointermove', onPointerMove);
-          window.removeEventListener('pointerup', onPointerEnd);
-          window.removeEventListener('pointercancel', onPointerEnd);
-          window.removeEventListener('lostpointercapture', onPointerEnd);
-          window.removeEventListener('blur', endGesture);
-        };
-
-        const startTracking = () => {
-          window.addEventListener('pointermove', onPointerMove);
-          window.addEventListener('pointerup', onPointerEnd);
-          window.addEventListener('pointercancel', onPointerEnd);
-          window.addEventListener('lostpointercapture', onPointerEnd);
-          // Alt-tabbing mid-pull: the release happens in another window.
-          window.addEventListener('blur', endGesture);
-        };
-
-        /* Ends the gesture however it got here — a normal release, a release the
-         * page never saw, a cancelled pointer, or the window losing focus.
-         * Idempotent: `activePointer` is cleared before the capture is released,
-         * so the `lostpointercapture` our own release fires re-enters and returns. */
-        const endGesture = () => {
-          if (activePointer === undefined) {
-            return;
-          }
-
-          const pointerId = activePointer;
-
-          activePointer = undefined;
-          stopTracking();
-
-          if (element.hasPointerCapture?.(pointerId)) {
-            element.releasePointerCapture(pointerId);
-          }
-
-          if (engaged) {
-            engaged = false;
-            element.classList.remove('reqore-fade-scroller-dragging');
-          }
-        };
-
-        const onPointerEnd = (event: PointerEvent) => {
-          if (activePointer === undefined || event.pointerId !== activePointer) {
-            return;
-          }
-          endGesture();
-        };
-
-        const onPointerMove = (event: PointerEvent) => {
-          if (activePointer === undefined || event.pointerId !== activePointer) {
-            return;
-          }
-
-          /* Nothing is held down, so the button came up somewhere this page could
-           * never observe it — off the edge of the window, the usual way. Recover
-           * on the first move back rather than wait for a pointerup that is never
-           * coming; `buttons` is a bitmask of what is CURRENTLY pressed, so during
-           * a real drag it can only be non-zero. */
-          if (event.buttons === 0) {
-            endGesture();
-            return;
-          }
-
-          const distance = event.clientX - startX;
-
-          if (!engaged) {
-            // Below the threshold this is still a click, so do nothing at all —
-            // not even preventDefault, which would break focus on the target.
-            if (Math.abs(distance) < DRAG_THRESHOLD) {
-              return;
-            }
-            engaged = true;
-            swallowNextClick = true;
-            element.classList.add('reqore-fade-scroller-dragging');
-            // Capture keeps the moves addressed to the row while the pointer is
-            // over other elements. The window listeners are what make the drag
-            // survive leaving it; this is what keeps hover states elsewhere quiet.
-            try {
-              element.setPointerCapture(event.pointerId);
-            } catch {
-              // Capture is a nicety, not the mechanism.
-            }
-          }
-
-          // Stops the browser starting a native text/image drag mid-pull.
-          event.preventDefault();
-          element.scrollLeft = startScrollLeft - distance;
-        };
-
-        const onPointerDown = (event: PointerEvent) => {
-          /* Before any guard. A previous gesture whose click never arrived —
-           * released off-window, so nothing followed it — leaves this armed, and
-           * the next genuine click would be eaten. A fresh press always makes the
-           * previous gesture's click moot, INCLUDING a press this handler goes on
-           * to decline: pressing an input or holding shift must not inherit a
-           * swallow from a drag that ended somewhere the page never saw. */
-          swallowNextClick = false;
-
-          // Touch already pans natively and long-press already selects; taking
-          // the gesture over would replace two working behaviours with one.
-          if (event.pointerType === 'touch') {
-            return;
-          }
-          // Middle/right are paste and context menu.
-          if (event.button !== 0) {
-            return;
-          }
-          // Shift is the documented escape hatch to "select instead of drag".
-          if (event.shiftKey) {
-            return;
-          }
-          if ((event.target as HTMLElement | null)?.closest?.(NON_DRAGGABLE)) {
-            return;
-          }
-          // Nothing to scroll: leave the press alone entirely so a click on a
-          // row that happens to fit behaves exactly as it did before.
-          if (element.scrollWidth <= element.clientWidth) {
-            return;
-          }
-
-          activePointer = event.pointerId;
-          startX = event.clientX;
-          startScrollLeft = element.scrollLeft;
-          engaged = false;
-          startTracking();
-        };
-
-        const onClickCapture = (event: MouseEvent) => {
-          if (!swallowNextClick) {
-            return;
-          }
-          swallowNextClick = false;
-          event.preventDefault();
-          event.stopPropagation();
-        };
-
-        // A native drag beats pointer events to the punch on links and images.
-        const onDragStart = (event: DragEvent) => {
-          if (engaged) {
-            event.preventDefault();
-          }
-        };
-
-        element.addEventListener('pointerdown', onPointerDown);
-        element.addEventListener('dragstart', onDragStart);
-        // Capture phase: the click has to be stopped before it reaches the tile.
-        element.addEventListener('click', onClickCapture, true);
-
-        return () => {
-          element.removeEventListener('pointerdown', onPointerDown);
-          element.removeEventListener('dragstart', onDragStart);
-          element.removeEventListener('click', onClickCapture, true);
-          // A gesture live at unmount would otherwise leave window listeners behind.
-          stopTracking();
-          element.classList.remove('reqore-fade-scroller-dragging');
-          element.classList.remove('reqore-fade-scroller-draggable');
-        };
+        element.classList.remove('reqore-fade-scroller-draggable');
+        return undefined;
       }, [canDrag]);
 
       /* An intent tints the fade, because the fade IS this component's only
diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx
index a1d0eed3..482cb159 100644
--- a/src/components/Popover/index.tsx
+++ b/src/components/Popover/index.tsx
@@ -216,6 +216,10 @@ export const ReqorePopover = memo(
       const popperRef = useRef(null);
 
       const [isOpen, setIsOpen] = React.useState(false);
+      /* The trigger whose focus was checked when its listener was attached. The listener effect re-runs
+         whenever the list opens or closes (it depends on `open`, which depends on `isOpen`); a check on
+         every re-run reopened a list Escape had just closed while the field kept the focus. */
+      const focusCheckedFor = useRef<HTMLElement | null>(null);
       const timeoutRef = useRef<number | null>(null);
       const isTargetHovered = useRef(false);
       const isPopoverHovered = useRef(false);
@@ -627,6 +631,17 @@ export const ReqorePopover = memo(
             if (handler === 'hoverStay') {
               componentRef.addEventListener('mouseleave', cancelTimeout);
             }
+
+            /* A popover opened by focus is opened by the user being in the field, however they got there.
+               A field focused as it mounts (an editor that opens with the cursor in its field) was focused
+               before this listener was attached: no `focusin` came, and its list stayed closed until the
+               user left the field and came back. Checked once per trigger, as it is attached. */
+            if (handler === 'focus' && focusCheckedFor.current !== componentRef) {
+              focusCheckedFor.current = componentRef;
+              if (componentRef.contains(document.activeElement)) {
+                open();
+              }
+            }
           }
         }
 
diff --git a/src/components/RichTextEditor/index.tsx b/src/components/RichTextEditor/index.tsx
index 2e48dd0f..0eb78c85 100644
--- a/src/components/RichTextEditor/index.tsx
+++ b/src/components/RichTextEditor/index.tsx
@@ -1,7 +1,15 @@
 import isPropValid from '@emotion/is-prop-valid';
 import { map, size } from 'lodash';
-import { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useState } from 'react';
-import { useUpdateEffect } from 'react-use';
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { BaseEditor, createEditor, Editor, Range, Transforms } from 'slate';
 import { HistoryEditor, withHistory } from 'slate-history';
 import {
@@ -408,9 +416,20 @@ export const ReqoreRichTextEditor = forwardRef<
     useImperativeHandle(ref, () => editor, [editor]);
     const [target, setTarget] = useState<Range | undefined>();
 
-    useUpdateEffect(() => {
+    /* The value is compared with the document as it is committed - in a layout effect, which runs before
+       the browser handles another key. A passive effect ran after painting and, under load, after the next
+       key: a value that matched the document when it was rendered was then compared with a document that
+       had a key more, taken as a value from outside, and put in its place - the key was lost and the caret
+       went to the end ("arr.for" typed came out "arr.fr"). */
+    const valueKey = JSON.stringify(value);
+    const mounted = useRef(false);
+    useLayoutEffect(() => {
+      if (!mounted.current) {
+        mounted.current = true;
+        return;
+      }
       // Only update the editor's children if the value has changed
-      if (JSON.stringify(value) === JSON.stringify(editor.children)) {
+      if (valueKey === JSON.stringify(editor.children)) {
         return;
       }
       // Use Slate transforms instead of direct mutation
@@ -432,7 +451,7 @@ export const ReqoreRichTextEditor = forwardRef<
         editor.selection = null;
         editor.children = value;
       }
-    }, [JSON.stringify(value)]);
+    }, [valueKey]);
 
     const isEmpty = useMemo(() => {
       return size(value) === 1 && size(value[0].children) === 1 && value[0].children[0].text === '';
diff --git a/src/components/Table/header.tsx b/src/components/Table/header.tsx
index 9e3f1d6a..9810d5e2 100644
--- a/src/components/Table/header.tsx
+++ b/src/components/Table/header.tsx
@@ -101,6 +101,9 @@ const StyledTableHeaderWrapper = styled.div<IReqoreTableSectionStyle>`
 
     overflow-x: hidden;
     overflow-y: hidden;
+    /* A sideways swipe is the table's to handle (it scrolls the body, which this
+       header follows); the page still pans up and down under a finger. */
+    touch-action: pan-y;
 
     flex-shrink: 0;
     flex-flow: column;
@@ -209,10 +212,13 @@ const ReqoreTableHeader = forwardRef<HTMLDivElement, IReqoreTableSectionProps>(
         return undefined;
       }
 
+      // The header does not scroll by itself: the wheel's sideways motion scrolls the body, which
+      // it follows - a trackpad's, or a plain wheel's with Shift held (Shift+wheel is sideways).
       const handleWheel = (e: WheelEvent) => {
-        if (e.deltaX) {
+        const dx = e.deltaX || (e.shiftKey ? e.deltaY : 0);
+        if (dx) {
           e.preventDefault();
-          bodyRef.current?.scrollTo({ left: bodyRef.current.scrollLeft + e.deltaX });
+          bodyRef.current?.scrollTo({ left: bodyRef.current.scrollLeft + dx });
         }
       };
 
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index ae2dec1f..b0c43874 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -17,6 +17,7 @@ import { TReqorePaginationType, getPagingObjectFromType } from '../../constants/
 import { RADIUS_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
+import { useDragToScroll } from '../../hooks/useDragToScroll';
 import { useQueryWithDelay } from '../../hooks/useQueryWithDelay';
 import { IReqoreIntent, IReqoreTooltip } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
@@ -406,6 +407,18 @@ export interface IReqoreTableProps extends IReqorePanelProps {
    */
   getRowProps?: IReqoreTableRowOptions['getRowProps'];
 
+  /**
+   * Press and pull the table sideways with the mouse or a pen to scroll it, on its
+   * body and on its header alike - for a table wider than its frame, where a plain
+   * wheel mouse has no sideways axis. A press that does not move is still a click
+   * (a header's sort and options keep working), the click that ends a real drag is
+   * not delivered, and a press on a text field is the field's. Off by default.
+   *
+   * A finger swipes the table either way: the body pans natively, and the header,
+   * which is not a scroller of its own, scrolls the body under a sideways swipe.
+   */
+  dragToScroll?: boolean;
+
   exportMapper?:
     | TReqoreKeyValueTableExportMapper
     | ((data: unknown[]) => IReqoreExportModalProps['data']);
@@ -434,6 +447,16 @@ const StyledTableWrapper = styled.div`
   flex: 1;
   overflow: hidden;
 
+  /* dragToScroll: the body says it can be pulled, and while a pull is on, nothing under
+     it is selected. Only a body that overflows sideways can be pulled. */
+  &.reqore-table-wrapper-draggable .reqore-table-body {
+    cursor: grab;
+  }
+  .reqore-table-dragging {
+    cursor: grabbing;
+    user-select: none;
+  }
+
   ${({ rounded, size = 'normal' }) => css`
     border-radius: ${rounded === false ? 0 : RADIUS_FROM_SIZE[size]}px;
   `}
@@ -534,11 +557,29 @@ const ReqoreTable = ({
   resetSizeLabel = 'Reset size',
   otherActionsLabel = 'Other',
   columnFilterPlaceholder = 'Filter by this column...',
+  dragToScroll = false,
   ...rest
 }: IReqoreTableProps) => {
   const mainTableRef = useRef<HTMLDivElement>(null);
   const mainHeaderRef = useRef<HTMLDivElement>(null);
 
+  // The body is the table's sideways scroller. The header is scrolled WITH it (the body
+  // syncs it) but is not a scroller itself, so a gesture on the header has to scroll
+  // the body: a finger always (the browser cannot pan an element that does not
+  // overflow-scroll), the mouse when `dragToScroll` asks for it.
+  useDragToScroll({
+    scrollRef: mainTableRef,
+    mouse: dragToScroll,
+    draggingClass: 'reqore-table-dragging',
+  });
+  useDragToScroll({
+    scrollRef: mainTableRef,
+    handleRef: mainHeaderRef,
+    mouse: dragToScroll,
+    touch: true,
+    draggingClass: 'reqore-table-dragging',
+  });
+
   const hasColumnWrap = useMemo(() => {
     const walk = (cols: IReqoreTableColumn[]): boolean =>
       cols.some((column) => {
@@ -1251,7 +1292,7 @@ const ReqoreTable = ({
     return (
       <StyledTableWrapper
         ref={wrapperRef}
-        className='reqore-table-wrapper'
+        className={`reqore-table-wrapper${dragToScroll ? ' reqore-table-wrapper-draggable' : ''}`}
         rounded={rest.rounded !== false && rest.flat !== false}
         size={rest.flat === false ? wrapperSize : zoomSize}
       >
diff --git a/src/hooks/useDragToScroll.ts b/src/hooks/useDragToScroll.ts
new file mode 100644
index 00000000..43028532
--- /dev/null
+++ b/src/hooks/useDragToScroll.ts
@@ -0,0 +1,318 @@
+import { RefObject, useEffect, useRef } from 'react';
+
+/**
+ * How far the pointer must travel before a press becomes a drag.
+ *
+ * Zero would make every click a one-pixel drag and swallow it; too large and the
+ * row feels stuck before it moves. Four pixels is the usual hysteresis for
+ * distinguishing a click from a drag.
+ */
+export const DRAG_TO_SCROLL_THRESHOLD = 4;
+
+/**
+ * Elements a drag must never start on.
+ *
+ * Deliberately NOT "anything interactive". The surfaces this is built for are made
+ * OF interactive things - a rail of clickable KPI tiles, a table header of sort
+ * buttons - so excluding buttons would leave nowhere to grab and the feature would
+ * do nothing. Their clicks are protected instead by suppressing the click that
+ * follows a real drag, which is what makes press-and-release still activate a
+ * tile while press-and-pull scrolls past it.
+ *
+ * What IS excluded is text entry, where a press-and-move already means
+ * "select within this value" and there is no other way to ask for it.
+ */
+export const NON_DRAGGABLE =
+  'input, textarea, select, [contenteditable=""], [contenteditable="true"]';
+
+export interface IUseDragToScrollOptions {
+  /** What scrolls sideways. */
+  scrollRef: RefObject<HTMLElement>;
+  /**
+   * Where the gesture is taken, when that is not the scroller itself: a table's
+   * header, which is scrolled with its body but is not a scroller of its own.
+   */
+  handleRef?: RefObject<HTMLElement>;
+  /** Mouse and pen: press and pull sideways to scroll. */
+  mouse?: boolean;
+  /**
+   * Touch: a sideways swipe on the handle scrolls the scroller. Only for a handle
+   * the browser cannot pan by itself (it does not overflow-scroll); on a real
+   * scroller touch already pans natively, and taking it over would replace that.
+   * The handle's own CSS must leave sideways panning to the page script
+   * (`touch-action: pan-y`), or the browser cancels the pointer before it moves.
+   */
+  touch?: boolean;
+  /** Set on the handle while a drag is engaged. */
+  draggingClass?: string;
+}
+
+/**
+ * Press and pull a sideways-scrolling surface to scroll it.
+ *
+ * Shared by `ReqoreFadeScroller` (`dragToScroll`) and `ReqoreTable` (`dragToScroll`,
+ * and its header's touch swipes): one implementation of the gesture, so a fix to it
+ * reaches every surface.
+ */
+export const useDragToScroll = ({
+  scrollRef,
+  handleRef,
+  mouse = false,
+  touch = false,
+  draggingClass,
+}: IUseDragToScrollOptions) => {
+  /* What the gesture is bound to. The elements can come and go after the hook
+     mounts - a table renders no body until it has rows - so every commit compares
+     them with what is bound and rebinds when they changed, instead of binding once
+     on mount and silently never seeing a body that appeared later. */
+  const bound = useRef<{
+    scroller: HTMLElement;
+    handle: HTMLElement;
+    key: string;
+    unbind: () => void;
+  }>();
+
+  useEffect(() => {
+    const scroller = scrollRef.current;
+    const handle = handleRef ? handleRef.current : scroller;
+    const key = `${mouse}:${touch}:${draggingClass ?? ''}`;
+
+    if (
+      bound.current &&
+      bound.current.scroller === scroller &&
+      bound.current.handle === handle &&
+      bound.current.key === key
+    ) {
+      return;
+    }
+    bound.current?.unbind();
+    bound.current = undefined;
+
+    if ((!mouse && !touch) || !scroller || !handle) {
+      return;
+    }
+    bound.current = {
+      scroller,
+      handle,
+      key,
+      unbind: bind(scroller, handle, mouse, touch, draggingClass),
+    };
+  });
+
+  // Unbound when the component goes, whatever is bound then.
+  useEffect(
+    () => () => {
+      bound.current?.unbind();
+      bound.current = undefined;
+    },
+    []
+  );
+};
+
+/** Binds the gesture; returns what unbinds it. */
+const bind = (
+  scroller: HTMLElement,
+  handle: HTMLElement,
+  mouse: boolean,
+  touch: boolean,
+  draggingClass: string | undefined
+): (() => void) => {
+  {
+    let activePointer: number | undefined;
+    let startX = 0;
+    let startScrollLeft = 0;
+    let engaged = false;
+    // Set when a drag actually moved the surface, and consumed by the click that
+    // the browser fires next. Without it, pulling sideways and letting go on top
+    // of a clickable tile ALSO activates that tile.
+    let swallowNextClick = false;
+
+    /* The live gesture is tracked on the WINDOW, not on the handle.
+     *
+     * A pull leaves the handle almost immediately - the edges are where you are
+     * pulling TO - and the release can land anywhere, including outside the
+     * browser window entirely. Listening on the handle alone meant a release it
+     * never saw left `activePointer` set: the next move over it resumed the drag
+     * with no button held, and there was no way to let go.
+     *
+     * Pointer capture alone does not cover this - it is taken only once the drag
+     * ENGAGES, and a fast pull can be past the edge before the first qualifying
+     * move arrives.
+     *
+     * Bound per-gesture rather than permanently, so an idle surface adds no global
+     * pointermove listener. */
+    const stopTracking = () => {
+      window.removeEventListener('pointermove', onPointerMove);
+      window.removeEventListener('pointerup', onPointerEnd);
+      window.removeEventListener('pointercancel', onPointerEnd);
+      window.removeEventListener('lostpointercapture', onPointerEnd);
+      window.removeEventListener('blur', endGesture);
+    };
+
+    const startTracking = () => {
+      window.addEventListener('pointermove', onPointerMove);
+      window.addEventListener('pointerup', onPointerEnd);
+      window.addEventListener('pointercancel', onPointerEnd);
+      window.addEventListener('lostpointercapture', onPointerEnd);
+      // Alt-tabbing mid-pull: the release happens in another window.
+      window.addEventListener('blur', endGesture);
+    };
+
+    /* Ends the gesture however it got here - a normal release, a release the page
+     * never saw, a cancelled pointer, or the window losing focus. Idempotent:
+     * `activePointer` is cleared before the capture is released, so the
+     * `lostpointercapture` our own release fires re-enters and returns. */
+    const endGesture = () => {
+      if (activePointer === undefined) {
+        return;
+      }
+
+      const pointerId = activePointer;
+
+      activePointer = undefined;
+      stopTracking();
+
+      if (handle.hasPointerCapture?.(pointerId)) {
+        handle.releasePointerCapture(pointerId);
+      }
+
+      if (engaged) {
+        engaged = false;
+        if (draggingClass) {
+          handle.classList.remove(draggingClass);
+        }
+      }
+    };
+
+    const onPointerEnd = (event: PointerEvent) => {
+      if (activePointer === undefined || event.pointerId !== activePointer) {
+        return;
+      }
+      /* Only the capture THIS gesture took ends it. A finger's pointer is captured by
+         the element it lands on (implicit touch capture); taking the capture for the
+         handle moves it away from that element, which then reports losing it - and
+         that is the drag starting, not ending. Ending there stopped a swipe on a
+         table's header after its first few pixels. */
+      if (event.type === 'lostpointercapture' && event.target !== handle) {
+        return;
+      }
+      endGesture();
+    };
+
+    const onPointerMove = (event: PointerEvent) => {
+      if (activePointer === undefined || event.pointerId !== activePointer) {
+        return;
+      }
+
+      /* Nothing is held down, so the button came up somewhere this page could
+       * never observe it - off the edge of the window, the usual way. Recover on
+       * the first move back rather than wait for a pointerup that is never coming;
+       * `buttons` is a bitmask of what is CURRENTLY pressed, so during a real drag
+       * (or a finger on the screen) it can only be non-zero. */
+      if (event.buttons === 0) {
+        endGesture();
+        return;
+      }
+
+      const distance = event.clientX - startX;
+
+      if (!engaged) {
+        // Below the threshold this is still a click, so do nothing at all - not
+        // even preventDefault, which would break focus on the target.
+        if (Math.abs(distance) < DRAG_TO_SCROLL_THRESHOLD) {
+          return;
+        }
+        engaged = true;
+        swallowNextClick = true;
+        if (draggingClass) {
+          handle.classList.add(draggingClass);
+        }
+        // Capture keeps the moves addressed to the handle while the pointer is over
+        // other elements. The window listeners are what make the drag survive
+        // leaving it; this is what keeps hover states elsewhere quiet.
+        try {
+          handle.setPointerCapture(event.pointerId);
+        } catch {
+          // Capture is a nicety, not the mechanism.
+        }
+      }
+
+      // Stops the browser starting a native text/image drag mid-pull.
+      event.preventDefault();
+      scroller.scrollLeft = startScrollLeft - distance;
+    };
+
+    const onPointerDown = (event: PointerEvent) => {
+      /* Before any guard. A previous gesture whose click never arrived - released
+       * off-window, so nothing followed it - leaves this armed, and the next
+       * genuine click would be eaten. A fresh press always makes the previous
+       * gesture's click moot, INCLUDING a press this handler goes on to decline. */
+      swallowNextClick = false;
+
+      if (event.pointerType === 'touch') {
+        // A real scroller pans natively under a finger, and long-press selects.
+        if (!touch) {
+          return;
+        }
+      } else {
+        if (!mouse) {
+          return;
+        }
+        // Middle/right are paste and context menu.
+        if (event.button !== 0) {
+          return;
+        }
+        // Shift is the documented escape hatch to "select instead of drag".
+        if (event.shiftKey) {
+          return;
+        }
+      }
+      if ((event.target as HTMLElement | null)?.closest?.(NON_DRAGGABLE)) {
+        return;
+      }
+      // Nothing to scroll: leave the press alone entirely so a click on a surface
+      // that happens to fit behaves exactly as it did before.
+      if (scroller.scrollWidth <= scroller.clientWidth) {
+        return;
+      }
+
+      activePointer = event.pointerId;
+      startX = event.clientX;
+      startScrollLeft = scroller.scrollLeft;
+      engaged = false;
+      startTracking();
+    };
+
+    const onClickCapture = (event: MouseEvent) => {
+      if (!swallowNextClick) {
+        return;
+      }
+      swallowNextClick = false;
+      event.preventDefault();
+      event.stopPropagation();
+    };
+
+    // A native drag beats pointer events to the punch on links and images.
+    const onDragStart = (event: DragEvent) => {
+      if (engaged) {
+        event.preventDefault();
+      }
+    };
+
+    handle.addEventListener('pointerdown', onPointerDown);
+    handle.addEventListener('dragstart', onDragStart);
+    // Capture phase: the click has to be stopped before it reaches the tile.
+    handle.addEventListener('click', onClickCapture, true);
+
+    return () => {
+      handle.removeEventListener('pointerdown', onPointerDown);
+      handle.removeEventListener('dragstart', onDragStart);
+      handle.removeEventListener('click', onClickCapture, true);
+      // A gesture live at unmount would otherwise leave window listeners behind.
+      stopTracking();
+      if (draggingClass) {
+        handle.classList.remove(draggingClass);
+      }
+    };
+  }
+};
diff --git a/src/stories/Table/Table.stories.tsx b/src/stories/Table/Table.stories.tsx
index 51ad58ad..32e167f8 100644
--- a/src/stories/Table/Table.stories.tsx
+++ b/src/stories/Table/Table.stories.tsx
@@ -459,6 +459,56 @@ export const ScrollChange: Story = {
   },
 };
 
+/** A press-and-pull on the table, by the browser's own pointer events (the story runner's mouse moves
+ *  the real pointer, so the table sees them as a person's drag). */
+const pullSideways = (element: Element, from: number, to: number, pointerType = 'mouse') => {
+  const box = element.getBoundingClientRect();
+  const y = box.top + box.height / 2;
+  const fire = (type: string, x: number, buttons: number) =>
+    element.dispatchEvent(
+      new PointerEvent(type, { bubbles: true, cancelable: true, clientX: x, clientY: y, pointerId: 7, pointerType, button: 0, buttons })
+    );
+  fire('pointerdown', from, 1);
+  fire('pointermove', (from + to) / 2, 1);
+  fire('pointermove', to, 1);
+  fire('pointerup', to, 0);
+};
+
+export const DragToScroll: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders a table wider than its 400px frame with `dragToScroll`. Pulled sideways by its header or its rows, it scrolls; a swipe on the header scrolls it on a touch screen too.',
+      },
+    },
+  },
+  args: {
+    dragToScroll: true,
+    width: 400,
+    height: 300,
+    label: 'Pull me sideways',
+  },
+  play: async ({ canvasElement }) => {
+    const body = await waitFor(() => {
+      const el = canvasElement.querySelector('.reqore-table-body') as HTMLElement | null;
+      expect(el).not.toBeNull();
+      expect(el!.scrollWidth).toBeGreaterThan(el!.clientWidth);
+      return el!;
+    });
+    const headerCell = canvasElement.querySelector('.reqore-table-header-wrapper .reqore-table-header-cell') as HTMLElement;
+    // by the header, with the mouse
+    pullSideways(headerCell, 300, 200);
+    await waitFor(() => expect(body.scrollLeft).toBe(100));
+    // by the header, with a finger
+    pullSideways(headerCell, 300, 250, 'touch');
+    await waitFor(() => expect(body.scrollLeft).toBe(150));
+    // and the header follows the body
+    const header = canvasElement.querySelector('.reqore-table-header-wrapper') as HTMLElement;
+    await waitFor(() => expect(header.scrollLeft).toBe(150));
+  },
+};
+
 export const GroupedColumns: Story = {
   parameters: {
     docs: {