@remit/ui 0.0.54 → 0.0.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "type": "module",
   "files": [
     "src"

package/src/components/filter-sheet.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { UNCLASSIFIED_CATEGORY } from "../filter-presets.js";
 import {
 	FilterSheet,
 	type FilterSheetCategory,
@@ -11,7 +10,7 @@ import {
 const CATEGORIES: FilterSheetCategory[] = [
 	{ id: "all", label: "All", tone: "neutral" },
 	{ id: "personal", label: "Personal", tone: "positive" },
-	UNCLASSIFIED_CATEGORY,
+	{ id: "uncategorized", label: "Unclassified", tone: "neutral" },
 	{ id: "newsletters", label: "Newsletters", tone: "accent" },
 	{ id: "marketing", label: "Marketing", tone: "warning" },
 	{ id: "automated", label: "Automated", tone: "neutral" },
@@ -136,10 +135,7 @@ export const CollapsedWithActiveFilters: Story = {
  */
 export const CollapsedWithUnclassified: Story = {
 	render: () => (
-		<ControlledShell
-			initialExpanded={false}
-			initialCategory={UNCLASSIFIED_CATEGORY.id}
-		/>
+		<ControlledShell initialExpanded={false} initialCategory="uncategorized" />
 	),
 };
 

package/src/components/message-list-pane.render.test.ts

@@ -121,6 +121,37 @@ describe("MessageListPane", () => {
 		assert.match(html, /Report a problem/);
 	});
 
+	it("forwards the filter to the empty state so a narrowed list says so (#306)", () => {
+		const html = renderToString(
+			createElement(MessageListPane, {
+				...baseProps,
+				isDesktop: true,
+				listState: "empty",
+				listFilter: {
+					label: "Personal",
+					reach: "whole-folder",
+					onClear: () => undefined,
+				},
+				listScopeLabel: "Inbox",
+			}),
+		);
+		assert.match(html, /No Personal mail in Inbox/);
+		assert.match(html, /Every message in this folder was checked\./);
+		assert.doesNotMatch(html, /No messages in this mailbox/);
+	});
+
+	it("keeps the plain empty copy when nothing narrows the list", () => {
+		const html = renderToString(
+			createElement(MessageListPane, {
+				...baseProps,
+				isDesktop: true,
+				listState: "empty",
+			}),
+		);
+		assert.match(html, /No messages in this mailbox/);
+		assert.doesNotMatch(html, /Every message in this folder was checked\./);
+	});
+
 	it("renders the selectionBar slot instead of the pane header when provided", () => {
 		const html = renderToString(
 			createElement(MessageListPane, {

package/src/components/message-list-pane.stories.tsx

@@ -258,6 +258,36 @@ export const NarrowExternalSelectionBar: Story = {
 	decorators: [narrowFrame],
 };
 
+/** An empty mailbox, unfiltered: one plain line and no completeness claim. */
+export const EmptyState: Story = {
+	args: {
+		isDesktop: true,
+		flatList: true,
+		listState: "empty",
+	},
+	decorators: [desktopFrame],
+};
+
+/**
+ * The same pane under a category filter — the composition the inbox ships
+ * (#306). The pane forwards the filter and the scope to the empty state, so a
+ * narrowed list states what was read instead of reading as an empty mailbox.
+ */
+export const FilteredEmptyState: Story = {
+	args: {
+		isDesktop: true,
+		flatList: true,
+		listState: "empty",
+		listFilter: {
+			label: "Personal",
+			reach: "whole-folder",
+			onClear: () => undefined,
+		},
+		listScopeLabel: "Inbox",
+	},
+	decorators: [desktopFrame],
+};
+
 /** Fail-loud error state — the specific failure detail is surfaced under the
  *  headline (not a bare "something went wrong"), with a way back (Retry) and a
  *  place for the failure to go (Report a problem). */

package/src/components/message-list-state.stories.tsx

@@ -1,6 +1,6 @@
 import type { Decorator, Meta, StoryObj } from "@storybook/react";
 import type { ReactNode } from "react";
-import { inboxFilterConfig, UNCLASSIFIED_CATEGORY } from "../filter-presets.js";
+import { inboxFilterConfig } from "../filter-presets.js";
 import type { ThreadRowData } from "./app-shell-types.js";
 import { FilterSheet } from "./filter-sheet.js";
 import {
@@ -89,7 +89,7 @@ function FilteredShell({
 	return (
 		<div className="flex h-full flex-col">
 			<FilterSheet
-				categories={[...preset.categories, UNCLASSIFIED_CATEGORY]}
+				categories={preset.categories}
 				filters={preset.filters}
 				selectedCategory={category}
 				activeFilters={new Set<string>()}
@@ -220,7 +220,7 @@ export const FilteredEmptyUnclassified: Story = {
 		scopeLabel: "Inbox",
 	},
 	render: (args) => (
-		<FilteredShell category={UNCLASSIFIED_CATEGORY.id}>
+		<FilteredShell category="uncategorized">
 			<MessageListEmpty {...args} />
 		</FilteredShell>
 	),

package/src/components/swipeable-row.gesture.test.ts

@@ -11,6 +11,13 @@
  * The fix tags SwipeableRow's own axis-abort cancel so it can tell the two
  * apart; these tests exercise both paths against the real hook, not a
  * description of the fix.
+ *
+ * The second: a finger held on glass drifts, and it drifts past the distance
+ * at which the drag starts tracking. Cancelling the press there meant a real
+ * hold on a phone never entered selection mode — the row followed the drift
+ * and snapped back, and nothing else happened. The drift cases below run
+ * against the anchor (`linkComponent`) row the mailbox list actually renders,
+ * which is also where the native link menu has to stay suppressed.
  */
 
 import assert from "node:assert/strict";
@@ -116,6 +123,45 @@ function mount(handlers: Handlers) {
 	return row;
 }
 
+// The mailbox list renders the open affordance as a real anchor via
+// `linkComponent`; the native long-press menu only bites on an `<a href>`.
+function mountAnchor(handlers: Handlers) {
+	act(() => {
+		root.render(
+			createElement(SwipeableRow, {
+				thread,
+				selectionMode: false,
+				checked: false,
+				active: false,
+				peek: "none",
+				onPeek: handlers.onPeek,
+				onToggleCheck: () => undefined,
+				onLongPress: handlers.onLongPress,
+				onOpen: handlers.onOpen,
+				onAct: () => undefined,
+				linkComponent: ({ onOpenClick, children, ...rowProps }) =>
+					createElement(
+						"a",
+						{ ...rowProps, id: "row", href: "/thread/1", onClick: onOpenClick },
+						children,
+					),
+			}),
+		);
+	});
+	const row = dom.window.document.getElementById("row");
+	assert.ok(row, "anchor row did not mount");
+	return row;
+}
+
+function contextMenu(row: Element) {
+	const event = new dom.window.MouseEvent("contextmenu", {
+		bubbles: true,
+		cancelable: true,
+	});
+	row.dispatchEvent(event);
+	return event;
+}
+
 // Each dispatch is wrapped in a synchronous act() so React commits the
 // resulting state update before the next call reads it. Without this, a
 // handler in the next dispatch can close over a stale pre-commit value (a
@@ -195,7 +241,7 @@ describe("SwipeableRow gesture wiring (react-aria long press + axis arbitration)
 		);
 	});
 
-	it("a horizontal drag past the axis threshold cancels the long press and commits a swipe peek, not onOpen", async () => {
+	it("a horizontal drag past the escape distance cancels the long press and commits a swipe peek, not onOpen", async () => {
 		let longPressed = 0;
 		let opened = 0;
 		let committed: SwipePeek | undefined;
@@ -221,7 +267,7 @@ describe("SwipeableRow gesture wiring (react-aria long press + axis arbitration)
 		assert.equal(committed, "leading");
 	});
 
-	it("a vertical drag past the axis threshold cancels the long press and lets scroll win (no peek, no open)", async () => {
+	it("a vertical drag past the escape distance cancels the long press and lets scroll win (no peek, no open)", async () => {
 		let longPressed = 0;
 		let opened = 0;
 		let peeked = 0;
@@ -255,4 +301,84 @@ describe("SwipeableRow gesture wiring (react-aria long press + axis arbitration)
 
 		assert.equal(longPressed, 1);
 	});
+
+	it("a hold that drifts past the axis threshold still enters selection mode", async () => {
+		// The reported phone bug: the row tracked the drift (the visible shiver)
+		// and the press died, but the drift was too short to commit a peek, so
+		// the whole gesture produced nothing.
+		let longPressed = 0;
+		let opened = 0;
+		const peeks: SwipePeek[] = [];
+		const row = mountAnchor({
+			onLongPress: () => longPressed++,
+			onOpen: () => opened++,
+			onPeek: (next) => peeks.push(next),
+		});
+
+		pointerDown(row, 100, 200);
+		pointerMove(row, 103, 201);
+		pointerMove(row, 106, 203);
+		pointerMove(row, 109, 205);
+		pointerMove(row, 112, 206); // dx=12 — past the axis threshold, under the escape
+		await wait(THRESHOLD_WAIT);
+		pointerUp(row);
+
+		assert.equal(longPressed, 1);
+		assert.equal(opened, 0);
+		assert.deepEqual(peeks, [], "drift must not commit or reset a peek");
+	});
+
+	it("a hold that drifts vertically past the axis threshold still enters selection mode", async () => {
+		let longPressed = 0;
+		const peeks: SwipePeek[] = [];
+		const row = mountAnchor({
+			onLongPress: () => longPressed++,
+			onOpen: () => undefined,
+			onPeek: (next) => peeks.push(next),
+		});
+
+		pointerDown(row, 100, 200);
+		pointerMove(row, 101, 206);
+		pointerMove(row, 102, 213); // dy=13 — past the axis threshold, under the escape
+		await wait(THRESHOLD_WAIT);
+		pointerUp(row);
+
+		assert.equal(longPressed, 1);
+		assert.deepEqual(peeks, []);
+	});
+
+	it("an aborted short drag opens nothing on release", async () => {
+		// The drag claimed the axis but never reached the escape distance, so the
+		// press was still live. react-aria synthesizes a click for an unresolved
+		// press, which on the anchor row is a navigation.
+		let clicks = 0;
+		const row = mountAnchor({
+			onLongPress: () => undefined,
+			onOpen: () => undefined,
+			onPeek: () => undefined,
+		});
+		row.addEventListener("click", () => clicks++);
+
+		pointerDown(row, 100, 200);
+		pointerMove(row, 120, 201); // dx=20 — past the axis threshold, under the escape
+		pointerUp(row);
+		await wait(200); // react-aria synthesizes its click 80ms after release
+
+		assert.equal(clicks, 0);
+	});
+
+	it("suppresses the native link menu raised over a drifting hold", async () => {
+		// Android Chrome raises the anchor's context menu at its own threshold,
+		// which can land mid-drift and ahead of the app's long press.
+		const row = mountAnchor({
+			onLongPress: () => undefined,
+			onOpen: () => undefined,
+			onPeek: () => undefined,
+		});
+
+		pointerDown(row, 100, 200);
+		pointerMove(row, 112, 206);
+
+		assert.equal(contextMenu(row).defaultPrevented, true);
+	});
 });

package/src/components/swipeable-row.stories.tsx

@@ -192,6 +192,60 @@ export const LongPressToSelect: Story = {
 	},
 };
 
+/**
+ * The same gesture with a real finger's drift. A hand holding still on glass
+ * wanders several pixels over the 500ms hold — further than the distance at
+ * which the drag starts tracking the row, which is why a hold used to nudge
+ * the row and then do nothing. The swipe only takes the gesture once it has
+ * travelled far enough to commit a peek, so the drifting hold below still ends
+ * in selection mode. The play step drives the press, the drift and the hold.
+ */
+export const LongPressWithDrift: Story = {
+	name: "Long press with finger drift (interactive)",
+	render: () => {
+		const [selected, setSelected] = useState(false);
+		return (
+			<div className="space-y-2">
+				<AnchorRow
+					selectionMode={selected}
+					checked={selected}
+					onLongPress={() => setSelected(true)}
+				/>
+				<p data-testid="drift-outcome" className="text-xs text-fg-muted">
+					{selected
+						? "Drifting hold entered selection mode."
+						: "Waiting for the drifting hold…"}
+				</p>
+			</div>
+		);
+	},
+	play: async ({ canvasElement }) => {
+		const anchor = canvasElement.querySelector<HTMLAnchorElement>("a[href]");
+		if (!anchor) return;
+		const touch = (type: string, clientX: number, clientY: number) =>
+			anchor.dispatchEvent(
+				new PointerEvent(type, {
+					bubbles: true,
+					pointerType: "touch",
+					pointerId: 1,
+					clientX,
+					clientY,
+				}),
+			);
+		touch("pointerdown", 100, 200);
+		for (const [x, y] of [
+			[103, 201],
+			[106, 203],
+			[109, 205],
+			[112, 206],
+		]) {
+			touch("pointermove", x, y);
+		}
+		await new Promise((resolve) => setTimeout(resolve, 700));
+		touch("pointerup", 112, 206);
+	},
+};
+
 /**
  * A touch long press over a link row normally raises the browser's own link
  * context menu ("Open in new tab / Copy link address"), which collides with the

package/src/components/swipeable-row.tsx

@@ -16,20 +16,36 @@ export type SwipePeek = "none" | "leading" | "trailing";
 /** Width a peeked row settles at to reveal its action; also the drag distance
  *  past which a release commits the peek rather than snapping back. */
 const SWIPE_ACTION_WIDTH = 72;
-/** Movement (px) before a pointer drag claims the horizontal (swipe) axis; below
- *  this a press is still a tap / long-press and vertical scroll wins. */
+/** Movement (px) before a pointer drag claims an axis; below this a press is
+ *  still a tap / long-press and vertical scroll wins. Claiming an axis only
+ *  decides what the row tracks — it does not decide the long press. */
 const SWIPE_AXIS_THRESHOLD = 10;
+/**
+ * Movement (px) along the claimed axis before a drag takes the gesture away
+ * from a still-pending long press.
+ *
+ * A finger resting on glass for the 500ms hold drifts, and it drifts further
+ * than the axis threshold — that threshold is calibrated for a drag starting
+ * to track, which has to feel immediate. Killing the press at that distance
+ * meant a real hold read as a swipe: the row followed the drift, the press
+ * died, and on release the drift was too short to commit a peek, so the
+ * gesture produced nothing at all.
+ *
+ * The escape distance is the commit distance, so the swipe only takes the
+ * gesture once it has moved far enough to actually produce a peek. Below it a
+ * release snaps back, which is to say the swipe was never worth the press.
+ */
+const LONG_PRESS_ESCAPE = SWIPE_ACTION_WIDTH / 2;
 
 /**
- * Tags a pointercancel dispatched by this component's own axis arbitration
- * (see `cancelLongPress` below) so `onPointerCancel` can tell it apart from
- * one react-aria dispatches itself when its own long press fires, or a
- * genuine browser-triggered cancel. Both of those arrive with no axis
- * claimed yet and must reset gesture state silently; a tagged one arrives
- * *because* `onPointerMove` just claimed an axis and is already handling
- * gesture state inline, so `onPointerCancel` must ignore it — otherwise it
- * re-reads a gesture with no axis claimed and mistakes the abort for a tap,
- * firing a spurious onOpen/onToggleCheck.
+ * Tags a pointercancel dispatched by this component's own arbitration (see
+ * `cancelLongPress` below) so `onPointerCancel` can tell it apart from one
+ * react-aria dispatches itself when its own long press fires, or a genuine
+ * browser-triggered cancel. Both of those end the gesture and must reset it
+ * silently; a tagged one arrives *because* `onPointerMove`/`onPointerUp` is
+ * already handling that gesture inline, so `onPointerCancel` must ignore it —
+ * otherwise it drops the drag and the release reads as a tap, firing a
+ * spurious onOpen/onToggleCheck.
  */
 const AXIS_CANCEL = "__swipeableRowAxisCancel";
 
@@ -104,7 +120,8 @@ export function SwipeableRow({
 		startX: number;
 		startY: number;
 		axis: "none" | "horizontal" | "vertical";
-		moved: boolean;
+		/** The drag has passed LONG_PRESS_ESCAPE and already cancelled the press. */
+		escaped: boolean;
 	} | null>(null);
 	const [dragX, setDragX] = useState<number | null>(null);
 
@@ -131,7 +148,7 @@ export function SwipeableRow({
 			startX: e.clientX,
 			startY: e.clientY,
 			axis: "none",
-			moved: false,
+			escaped: false,
 		};
 	};
 
@@ -143,19 +160,25 @@ export function SwipeableRow({
 		const dy = e.clientY - g.startY;
 		if (g.axis === "none") {
 			if (Math.abs(dy) > SWIPE_AXIS_THRESHOLD && Math.abs(dy) > Math.abs(dx)) {
-				// vertical scroll wins: abandon the swipe + long-press, let the list scroll
+				// vertical scroll wins: stop tracking the swipe, let the list scroll
 				g.axis = "vertical";
-				cancelLongPress(e);
-				gesture.current = null;
-				return;
-			}
-			if (Math.abs(dx) > SWIPE_AXIS_THRESHOLD) {
+			} else if (
+				Math.abs(dx) > SWIPE_AXIS_THRESHOLD &&
+				Math.abs(dx) > Math.abs(dy)
+			) {
 				g.axis = "horizontal";
-				g.moved = true;
-				cancelLongPress(e);
 				e.currentTarget.setPointerCapture(e.pointerId);
 			}
 		}
+		if (g.axis === "none") return;
+		// The drag only takes the gesture from a pending long press once it has
+		// travelled the commit distance along the axis it claimed (see
+		// LONG_PRESS_ESCAPE). Latched so the cancel is dispatched once.
+		const travel = g.axis === "horizontal" ? Math.abs(dx) : Math.abs(dy);
+		if (!g.escaped && travel > LONG_PRESS_ESCAPE) {
+			g.escaped = true;
+			cancelLongPress(e);
+		}
 		if (g.axis !== "horizontal") return;
 		const base = peekOffset(peek);
 		const next = Math.max(
@@ -165,18 +188,25 @@ export function SwipeableRow({
 		setDragX(next);
 	};
 
-	const onPointerUp = () => {
+	const onPointerUp = (e: React.PointerEvent) => {
 		const g = gesture.current;
 		gesture.current = null;
 		const offset = dragX;
 		setDragX(null);
-		// g is null when the gesture was already consumed (long-press fired, or
-		// a vertical scroll took over) — those handle themselves, so do nothing.
+		// g is null when the gesture was already consumed (the long press fired,
+		// or a real cancel arrived) — those handle themselves, so do nothing.
 		if (!g) return;
-		if (g.axis === "horizontal" && offset !== null) {
-			onPeek(commitPeek(offset));
+		// A drag that claimed an axis but never escaped left react-aria's press
+		// live, and an unresolved press synthesizes a click on release — which on
+		// the anchor row means navigating. The drag was neither a swipe nor a
+		// tap, so end the press with it.
+		if (g.axis !== "none" && !g.escaped) cancelLongPress(e);
+		if (g.axis === "horizontal") {
+			if (offset !== null) onPeek(commitPeek(offset));
 			return;
 		}
+		// The list scrolled under the finger; the release is not a tap.
+		if (g.axis === "vertical") return;
 		// a tap: no axis claimed
 		if (selectionMode) {
 			onToggleCheck();
@@ -192,11 +222,10 @@ export function SwipeableRow({
 	};
 
 	// A genuine cancel — react-aria's own dispatch when its long press fires,
-	// or a real browser-triggered interruption — always resets silently, never
-	// as a tap-to-open/toggle/peek-commit. An axis-claim cancel (tagged, see
-	// AXIS_CANCEL) is a no-op here: onPointerMove already handled that gesture
-	// inline, either continuing to track it (horizontal) or nulling it itself
-	// (vertical) — see the comment there.
+	// or a real browser-triggered interruption (the browser taking over the
+	// pan, say) — always resets silently, never as a tap-to-open/toggle/peek
+	// -commit. This component's own cancel (tagged, see AXIS_CANCEL) is a no-op
+	// here: the handler that dispatched it owns that gesture's state.
 	const onPointerCancel = (e: React.PointerEvent) => {
 		const tagged = (e.nativeEvent as unknown as Record<string, boolean>)[
 			AXIS_CANCEL

package/src/filter-presets.test.ts

@@ -5,7 +5,6 @@ import {
 	type FilterAccount,
 	flaggedFilterConfig,
 	inboxFilterConfig,
-	UNCLASSIFIED_CATEGORY,
 } from "./filter-presets.js";
 
 const accounts: FilterAccount[] = [
@@ -23,6 +22,7 @@ describe("briefFilterConfig", () => {
 			[
 				"all",
 				"personal",
+				"uncategorized",
 				"transactional",
 				"newsletter",
 				"marketing",
@@ -100,26 +100,31 @@ describe("flaggedFilterConfig", () => {
 	});
 });
 
-describe("UNCLASSIFIED_CATEGORY", () => {
-	it("is held out of every shipped preset until the server filters it", () => {
+describe("the Unclassified category", () => {
+	it("is offered by every shipped preset", () => {
 		for (const preset of [
 			briefFilterConfig(),
 			inboxFilterConfig(),
 			flaggedFilterConfig(),
 		]) {
 			assert.equal(
-				preset.categories.some((c) => c.id === UNCLASSIFIED_CATEGORY.id),
-				false,
+				preset.categories.some((c) => c.id === "uncategorized"),
+				true,
 			);
 		}
 	});
 
+	it("follows Personal, the order the brief already uses", () => {
+		const ids = inboxFilterConfig().categories.map((c) => c.id);
+		assert.equal(ids.indexOf("uncategorized"), ids.indexOf("personal") + 1);
+	});
+
 	it("carries its own label and tone, never personal's (#45)", () => {
-		const personal = briefFilterConfig().categories.find(
-			(c) => c.id === "personal",
-		);
-		assert.equal(UNCLASSIFIED_CATEGORY.label, "Unclassified");
-		assert.notEqual(UNCLASSIFIED_CATEGORY.label, personal?.label);
-		assert.notEqual(UNCLASSIFIED_CATEGORY.tone, personal?.tone);
+		const categories = briefFilterConfig().categories;
+		const unclassified = categories.find((c) => c.id === "uncategorized");
+		const personal = categories.find((c) => c.id === "personal");
+		assert.equal(unclassified?.label, "Unclassified");
+		assert.notEqual(unclassified?.label, personal?.label);
+		assert.notEqual(unclassified?.tone, personal?.tone);
 	});
 });

package/src/filter-presets.ts

@@ -27,35 +27,20 @@ export interface FilterPreset {
 	sources?: FilterSheetSource[];
 }
 
-/**
- * The Unclassified chip D6 requires, built and storied but not offered yet.
- *
- * This module is a runtime dependency of three live surfaces that filter over
- * the loaded window, so a chip in the list below is a chip a user can click
- * today. Offering it before #306 makes the predicate a server-side `where`
- * would add a fresh instance of the bug this epic exists to fix: a category
- * whose mail sits below the newest page reads as a category with no mail.
- *
- * #306 splices this entry into `MESSAGE_CATEGORIES` after `Personal` — matching
- * `briefCategories`' order — and deletes this constant.
- */
-export const UNCLASSIFIED_CATEGORY: FilterSheetCategory = {
-	id: "uncategorized",
-	label: "Unclassified",
-	tone: "neutral",
-};
-
 /**
  * Content-type categories, mirroring the `MessageCategory` enum
  * (@remit/remit-imap) by value. The leading "all" clears the category. Per
  * message, not per mailbox — so they apply in the brief and an inbox alike.
  *
- * `uncategorized` is absent on purpose and is not folded into `personal`
- * (issue #45) — see `UNCLASSIFIED_CATEGORY`.
+ * `uncategorized` is a category of its own here, never folded into `personal`
+ * (issue #45): mail the classifier has not reached is a pending state with a
+ * name, and it carries its own label and tone so the two can never read alike.
+ * It sits after `Personal` to match `briefCategories`' order.
  */
 const MESSAGE_CATEGORIES: FilterSheetCategory[] = [
 	{ id: "all", label: "All", tone: "neutral" },
 	{ id: "personal", label: "Personal", tone: "accent" },
+	{ id: "uncategorized", label: "Unclassified", tone: "neutral" },
 	{ id: "transactional", label: "Transactional", tone: "positive" },
 	{ id: "newsletter", label: "Newsletter", tone: "neutral" },
 	{ id: "marketing", label: "Marketing", tone: "warning" },

package/src/index.ts

@@ -249,6 +249,7 @@ export {
 } from "./components/message-header.js";
 export { MessageListPane } from "./components/message-list-pane.js";
 export {
+	type FilterReach,
 	type ListState,
 	MessageListEmpty,
 	type MessageListEmptyProps,
@@ -545,7 +546,6 @@ export {
 	type FilterPreset,
 	flaggedFilterConfig,
 	inboxFilterConfig,
-	UNCLASSIFIED_CATEGORY,
 } from "./filter-presets.js";
 export {
 	buildCidResolver,