@remit/ui 0.0.63 → 0.0.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.63",
+  "version": "0.0.65",
   "type": "module",
   "files": [
     "src"
@@ -26,8 +26,7 @@
     "react-resizable-panels": "^2.1.9",
     "react-simple-pull-to-refresh": "^1.3.4",
     "tailwind-merge": "^2",
-    "tldts": "^7.4.9",
-    "@types/dompurify": "*"
+    "tldts": "^7.4.9"
   },
   "peerDependencies": {
     "react": "^19",

package/src/components/selection-wizard.render.test.ts

@@ -625,6 +625,42 @@ describe("RunFooter", () => {
 		);
 		assert.match(html, /Close/);
 	});
+
+	// Leaving the screen and ending the run are two intents (#521). The screen
+	// says the run keeps going once it is closed, so the only thing that ends it
+	// is a control that says so.
+	it("offers stopping the run beside leaving it, while it is in flight", () => {
+		const html = renderToString(
+			createElement(RunFooter, {
+				...runProps,
+				state: "backApplyRunning",
+				onCancelRun: noop,
+			}),
+		);
+		assert.match(html, /Stop the run/);
+		assert.match(html, /Close/);
+	});
+
+	it("offers only the way out where there is no run to stop", () => {
+		const html = renderToString(
+			createElement(RunFooter, { ...runProps, state: "backApplyRunning" }),
+		);
+		assert.match(html, /Close/);
+		assert.doesNotMatch(html, /Stop the run/);
+	});
+
+	it("keeps the retry on a run that already stopped", () => {
+		const html = renderToString(
+			createElement(RunFooter, {
+				...runProps,
+				state: "runStopped",
+				failures: messages,
+				onCancelRun: noop,
+			}),
+		);
+		assert.match(html, /Retry 2/);
+		assert.doesNotMatch(html, /Stop the run/);
+	});
 });
 
 describe("SelectionWizard", () => {

package/src/components/selection-wizard.tsx

@@ -967,6 +967,13 @@ export interface RunStepProps {
 	failedCount?: number;
 	onRetry: () => void;
 	onDismiss: () => void;
+	/**
+	 * Ends the run. Leaving the screen and ending the run are two intents and
+	 * two presses: the screen says the run keeps going once it is closed, so
+	 * stopping it has to be asked for. Supplied only where there is something
+	 * to stop — a server-side pass runs to its own end.
+	 */
+	onCancelRun?: () => void;
 }
 
 const runOutcomeOf = (props: RunStepProps): RunOutcome => ({
@@ -1042,9 +1049,34 @@ export function RunStepBody(props: RunStepProps) {
 }
 
 export function RunFooter(props: RunStepProps) {
-	const { onRetry, onDismiss } = props;
+	const { onRetry, onDismiss, onCancelRun } = props;
 	const copy = runCopy(runOutcomeOf(props));
 
+	// Closing is the movement the screen invites, so it keeps the primary place;
+	// ending the run is the deliberate one beside it.
+	if (copy.cancelLabel !== undefined && onCancelRun) {
+		return (
+			<div className="flex items-center gap-3">
+				<Button
+					variant="ghost"
+					size="md"
+					className="min-h-11 shrink-0"
+					onClick={onCancelRun}
+				>
+					{copy.cancelLabel}
+				</Button>
+				<Button
+					variant="primary"
+					size="md"
+					className="min-h-11 flex-1"
+					onClick={onDismiss}
+				>
+					{copy.dismissLabel}
+				</Button>
+			</div>
+		);
+	}
+
 	if (copy.retryLabel === undefined) {
 		return (
 			<Button

package/src/lib/wizard-steps.ts

@@ -344,6 +344,13 @@ export interface RunCopy {
 	showProgress: boolean;
 	/** Leaves the wizard. Never absent — there is always a way out. */
 	dismissLabel: string;
+	/**
+	 * What ending the run is called, on a state where a run is in flight. Whether
+	 * this one can be ended at all is the caller's answer — a server-side pass
+	 * runs to its own end — so the control appears only alongside
+	 * `RunStepProps.onCancelRun`.
+	 */
+	cancelLabel?: string;
 	/** Offers the part that did not happen again. Absent when nothing is outstanding. */
 	retryLabel?: string;
 	/** Heads the list of messages the mail server rejected. */
@@ -397,6 +404,7 @@ export const runCopy = ({
 			detail: "This keeps running if you close the wizard.",
 			tone: "progress",
 			dismissLabel: "Close",
+			cancelLabel: "Stop the run",
 		};
 	}
 	if (state === "backApplyComplete") {