@remit/web-client 0.0.233 → 0.0.235

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.233",
+  "version": "0.0.235",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/calendar/AgendaStrip.tsx

@@ -63,6 +63,15 @@ export interface AgendaStripProps {
 	onGoToDate: (date: string) => void;
 	onReachStart: () => void;
 	onReachEnd: () => void;
+	/**
+	 * The run has grown as far as scrolling takes it. The strip says so at that
+	 * end and offers the next stretch, so a diary too sparse to fill the pane
+	 * cannot fetch its way across years nobody asked for.
+	 */
+	atStartCap?: boolean;
+	atEndCap?: boolean;
+	onLoadEarlier?: () => void;
+	onLoadLater?: () => void;
 	/** The day under the sticky header, which the address follows. */
 	onVisibleDayChange: (date: string) => void;
 }
@@ -86,6 +95,10 @@ export function AgendaStrip({
 	onGoToDate,
 	onReachStart,
 	onReachEnd,
+	atStartCap,
+	atEndCap,
+	onLoadEarlier,
+	onLoadLater,
 	onVisibleDayChange,
 }: AgendaStripProps) {
 	const nextUp = useMemo(() => readNextUp(days, now), [days, now]);
@@ -126,6 +139,10 @@ export function AgendaStrip({
 			onZoomDay={onZoomDay}
 			onReachStart={onReachStart}
 			onReachEnd={onReachEnd}
+			atStartCap={atStartCap}
+			atEndCap={atEndCap}
+			onLoadEarlier={onLoadEarlier}
+			onLoadLater={onLoadLater}
 			onVisibleDayChange={onVisibleDayChange}
 			todayLead={
 				settledToday ? (

package/src/components/calendar/AgendaView.tsx

@@ -15,7 +15,11 @@ import {
 	extendRangeEnd,
 	extendRangeStart,
 	freeStretchesByDate,
+	liftRangeCeiling,
+	liftRangeFloor,
 	rangeAround,
+	rangeAtCeiling,
+	rangeAtFloor,
 	rangeCovering,
 	readCalendarInstanceId,
 	useCalendarEventWeeks,
@@ -44,16 +48,22 @@ import {
  * you drop into and leave" means in practice.
  *
  * The days it holds are fetched a week at a time, on the grid's own cache keys.
- * That is what makes the range able to grow without limit — a single read may
- * not cover more than a year, and one request that widened every time the
- * reader reached an end would eventually be refused and replace the strip with
- * the refusal — and it is what makes the two zooms share everything they have
- * already read.
+ * That is what lets the range grow at all — a single read may not cover more
+ * than a year, and one request that widened every time the reader reached an
+ * end would eventually be refused and replace the strip with the refusal — and
+ * it is what makes the two zooms share everything they have already read.
+ *
+ * It grows on the reader's scroll and on nothing else, a week at a time, and
+ * only as far as a year either way. Past that it says so and offers the next
+ * stretch: a sparse diary draws shorter than the distance the strip fetches at,
+ * so an end measured off the content alone is reached on the first layout pass
+ * and never stops being reached.
  *
  * Scrolling writes the day back to the address, debounced and by `replace`.
  * Debounced because a flick past a fortnight is one move rather than fourteen,
  * and `replace` because scrolling is not somewhere a reader went — Back belongs
- * to the screen they came from, not to the row they scrolled past.
+ * to the screen they came from, not to the row they scrolled past. Growing the
+ * range writes nothing: days arriving at an end is not the reader moving.
  */
 
 /** Long enough that a flick lands before the address moves. */
@@ -183,6 +193,11 @@ export function AgendaView({ density, onPickSlot }: AgendaViewProps) {
 		[openEvent],
 	);
 
+	const growStart = useCallback(() => setRange(extendRangeStart), []);
+	const growEnd = useCallback(() => setRange(extendRangeEnd), []);
+	const loadEarlier = useCallback(() => setRange(liftRangeFloor), []);
+	const loadLater = useCallback(() => setRange(liftRangeCeiling), []);
+
 	/** Whichever read was refused is the one a retry re-sends. */
 	const retry = useCallback(() => {
 		events.refetch();
@@ -214,8 +229,12 @@ export function AgendaView({ density, onPickSlot }: AgendaViewProps) {
 			onPickSlot={onPickSlot}
 			onZoomDay={zoomToDay}
 			onGoToDate={goToDate}
-			onReachStart={() => setRange(extendRangeStart)}
-			onReachEnd={() => setRange(extendRangeEnd)}
+			onReachStart={growStart}
+			onReachEnd={growEnd}
+			atStartCap={rangeAtFloor(range)}
+			atEndCap={rangeAtCeiling(range)}
+			onLoadEarlier={loadEarlier}
+			onLoadLater={loadLater}
 			onVisibleDayChange={setVisibleDate}
 		/>
 	);

package/src/components/calendar/agenda-address.render.test.ts

@@ -1,14 +1,14 @@
 /**
  * The strip and the address, bound together.
  *
- * Three claims, and every one of them is about the URL rather than about
- * pixels: the strip opens on the day the path names, reaching an end asks for
- * more days rather than replacing the ones on screen, and the day the reader
- * scrolls to is written by `replace` — scrolling is not somewhere they went, so
- * Back belongs to the screen they arrived from and not to every row they
- * passed. The last one is the reason this suite drives the real router instead
- * of a callback: a `push` here would bury the way out under a fortnight of
- * history entries.
+ * Four claims, and every one of them is about the URL rather than about pixels:
+ * the strip opens on the day the path names, the reader reaching an end asks
+ * for a week more rather than replacing the days on screen, a strip nobody
+ * scrolled asks for nothing at all, and the day the reader scrolls to is
+ * written by `replace` — scrolling is not somewhere they went, so Back belongs
+ * to the screen they arrived from and not to every row they passed. The last
+ * one is the reason this suite drives the real router instead of a callback: a
+ * `push` here would bury the way out under a fortnight of history entries.
  */
 import assert from "node:assert/strict";
 import { afterEach, describe, it } from "node:test";
@@ -201,15 +201,49 @@ const mount = async (path = `/calendar/agenda/${DATE}`): Promise<Mounted> => {
 	};
 };
 
-/** The one element the strip scrolls; jsdom has no layout, only the event. */
-const scroller = (dom: DomHarness): Element => {
-	const found = dom.query(".overflow-y-auto");
+/**
+ * The one element the strip scrolls. jsdom has no layout, so it is given the
+ * one part of it these cases turn on: an offset that moves and stays where it
+ * was put. Everything else about the strip's geometry is zero, which is the
+ * sparse diary this suite is about — every end within reach of every other.
+ */
+const stubbed = new WeakSet<Element>();
+
+const scroller = (dom: DomHarness): HTMLElement => {
+	const found = dom.query<HTMLElement>(".overflow-y-auto");
 	if (!found) throw new Error("the strip rendered no scroller");
+	if (stubbed.has(found)) return found;
+	let top = 0;
+	Object.defineProperty(found, "scrollTop", {
+		configurable: true,
+		get: () => top,
+		set: (next: number) => {
+			top = Math.max(0, next);
+		},
+	});
+	stubbed.add(found);
 	return found;
 };
 
-const scroll = (dom: DomHarness) => {
-	dom.dispatch(scroller(dom), new Event("scroll", { bubbles: false }));
+/** A reader scrolling: the gesture, where it took the strip, then the event. */
+const scrollBy = (dom: DomHarness, delta: number) => {
+	const element = scroller(dom);
+	dom.dispatch(element, new Event("wheel", { bubbles: true }));
+	element.scrollTop += delta;
+	dom.dispatch(element, new Event("scroll", { bubbles: false }));
+};
+
+const scrollDown = (dom: DomHarness) => scrollBy(dom, 200);
+const scrollUp = (dom: DomHarness) => scrollBy(dom, -400);
+
+/**
+ * The same movement with nobody behind it: a font swapping under a month of
+ * rows, a pane resized, the offset taken back after days were prepended.
+ */
+const settle = (dom: DomHarness) => {
+	const element = scroller(dom);
+	element.scrollTop += 120;
+	dom.dispatch(element, new Event("scroll", { bubbles: false }));
 };
 
 describe("the day the address names", () => {
@@ -238,21 +272,35 @@ describe("reaching an end of the strip", () => {
 	it("asks for more days without giving up the ones on screen", async () => {
 		const { dom } = await mount();
 		const before = dom.text();
-		assert.doesNotMatch(before, /17 May/);
+		assert.doesNotMatch(before, /11 Jul/);
 
-		scroll(dom);
+		scrollDown(dom);
 		await dom.flush();
 
 		const after = dom.text();
-		assert.match(after, /17 May/, "the days before the window did not arrive");
+		assert.match(after, /11 Jul/, "the days past the window did not arrive");
 		assert.match(after, /9 Jun/, "the days it opened with were thrown away");
 	});
 
+	it("grows the end the reader went to, a week at a time, and only that one", async () => {
+		const { dom } = await mount();
+		scrollDown(dom);
+		await dom.flush();
+		assert.match(dom.text(), /11 Jul/);
+		assert.doesNotMatch(dom.text(), /24 May/, "the end nobody went to grew");
+
+		scrollUp(dom);
+		await dom.flush();
+		assert.match(dom.text(), /24 May/, "the days behind never arrived");
+	});
+
 	it("adds week keys rather than widening the one it holds", async () => {
 		const { dom } = await mount();
 		const opening = eventWindows(dom).map((window) => window.from);
 
-		scroll(dom);
+		scrollDown(dom);
+		await dom.flush();
+		scrollUp(dom);
 		await dom.flush();
 
 		const after = eventWindows(dom).map((window) => window.from);
@@ -269,7 +317,7 @@ describe("reaching an end of the strip", () => {
 	it("never grows a single read past what the server will answer", async () => {
 		const { dom } = await mount();
 		for (let reach = 0; reach < 6; reach += 1) {
-			scroll(dom);
+			scrollDown(dom);
 			await dom.flush();
 		}
 		for (const window of eventWindows(dom)) {
@@ -280,10 +328,50 @@ describe("reaching an end of the strip", () => {
 	});
 });
 
+/**
+ * The bug this suite exists to keep out. A diary with two events in it draws
+ * shorter than the distance the strip fetches at, so both ends are reached from
+ * the first layout pass, and every extension raised another scroll event to
+ * reach them again. Left to run it walked a five-week window out to 2032 and
+ * wrote every day of the way into the path.
+ */
+describe("a strip nobody has scrolled", () => {
+	it("asks for the weeks it opened with and no others", async () => {
+		const { dom } = await mount();
+		const opening = eventWindows(dom)
+			.map((window) => window.from)
+			.sort();
+
+		for (let pass = 0; pass < 5; pass += 1) {
+			settle(dom);
+			await dom.flush();
+		}
+
+		assert.deepEqual(
+			eventWindows(dom)
+				.map((window) => window.from)
+				.sort(),
+			opening,
+		);
+	});
+
+	it("leaves the address on the day it was opened with", async () => {
+		const { dom, router } = await mount();
+		for (let pass = 0; pass < 5; pass += 1) {
+			settle(dom);
+			await dom.flush();
+		}
+		await dom.wait(600);
+		await dom.flush();
+
+		assert.equal(router.state.location.pathname, `/calendar/agenda/${DATE}`);
+	});
+});
+
 describe("the day the reader scrolled to", () => {
 	it("is written to the path, so a reload comes back to it", async () => {
 		const { dom, router } = await mount();
-		scroll(dom);
+		scrollDown(dom);
 		await dom.wait(600);
 		await dom.flush();
 
@@ -297,13 +385,29 @@ describe("the day the reader scrolled to", () => {
 
 	it("replaces rather than pushes, so Back is still the way out", async () => {
 		const mounted = await mount();
-		scroll(mounted.dom);
+		scrollDown(mounted.dom);
 		await mounted.dom.wait(600);
 		await mounted.dom.flush();
 
 		assert.ok(mounted.replaces > 0, "the address was never written");
 		assert.equal(mounted.pushes, 0, "scrolling stacked up history entries");
 	});
+
+	it("stays there while the days it asked for arrive", async () => {
+		const { dom, router } = await mount();
+		scrollDown(dom);
+		await dom.wait(600);
+		await dom.flush();
+		const landed = router.state.location.pathname;
+
+		// The prepend takes the scroll offset back, which is another scroll event.
+		// It is not the reader moving, so it writes nothing.
+		settle(dom);
+		await dom.wait(600);
+		await dom.flush();
+
+		assert.equal(router.state.location.pathname, landed);
+	});
 });
 
 describe("dropping into the grid and back out", () => {

package/src/components/config-import/config-import.stories.tsx

@@ -233,6 +233,24 @@ export const DryRunReportPhone: Story = {
 	),
 };
 
+/**
+ * A household's worth of rules and senders, on the 1512×827 laptop where this
+ * report was found running off the bottom of the screen with "Import n changes"
+ * unreachable below it (#1021). The report scrolls inside the card; the
+ * verdict summary at the top and the import button at the bottom both stay put.
+ */
+export const DryRunReportLongShortViewport: Story = {
+	globals: { viewport: { value: "laptopShort" } },
+	render: () => (
+		<StepDryRunReport
+			sections={groupReportSections(
+				Array.from({ length: 6 }, () => dryRunReport.items).flat(),
+			)}
+			fileName={CONFIG_FILE_NAME}
+		/>
+	),
+};
+
 const HELD =
 	"2 accounts, 14 rules and 31 flagged senders are set up here already.";
 

package/src/components/config-import/steps.viewport.test.ts

@@ -0,0 +1,216 @@
+/**
+ * A report longer than the screen still leaves the reader somewhere to press.
+ *
+ * On a 1512×827 laptop the dry run of a real configuration drew taller than the
+ * viewport. The wizard sat in a fixed box with nothing scrolling, so "Import n
+ * changes" was rendered below the fold with no way to reach it and the import
+ * could not be finished at all (#1021).
+ *
+ * The shape that fixes it is structural, and structure is what this file holds:
+ * the growable part of a step lives in its own scroll box, the title and the
+ * footer actions sit outside that box, and the shell is capped to the viewport
+ * so nothing can push the footer off it. jsdom has no layout engine, so the
+ * pixels are pinned by the "long report, short viewport" Storybook stories
+ * instead — what is asserted here is the arrangement those stories depend on,
+ * which is the part a refactor silently takes away.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { createElement } from "react";
+import type { ReportSection } from "../../lib/config-import";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import type { ImportedAccount } from "./steps";
+import { StepCredentialsOverview, StepDryRunReport } from "./steps";
+
+let harness: DomHarness | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+});
+
+const LONG_REPORT: ReportSection[] = [
+	{
+		id: "accounts",
+		title: "Accounts",
+		entries: Array.from({ length: 40 }, (_, index) => ({
+			id: `accounts-${index}`,
+			label: `mailbox-${index}@example.test`,
+			verdict: "created" as const,
+		})),
+	},
+	{
+		id: "filters",
+		title: "Rules & filters",
+		entries: Array.from({ length: 40 }, (_, index) => ({
+			id: `filters-${index}`,
+			label: `Rule ${index}`,
+			verdict: "skipped" as const,
+			reason: "The folder this rule files into is not here yet.",
+		})),
+	},
+];
+
+const MANY_ACCOUNTS: ImportedAccount[] = Array.from(
+	{ length: 30 },
+	(_, index) => ({
+		accountId: `acct-${index}`,
+		address: `mailbox-${index}@example.test`,
+		displayName: `Mailbox ${index}`,
+		connector: "imap" as const,
+		server: "imap.example.test",
+		state: "needed" as const,
+	}),
+);
+
+const classes = (element: Element): string[] =>
+	(element.getAttribute("class") ?? "").split(/\s+/).filter(Boolean);
+
+const shellOf = (mounted: DomHarness): Element => {
+	const body = mounted.query("[data-testid=wizard-body]");
+	assert.ok(body, "the step renders a wizard body region");
+	const shell = body.closest("div.h-dvh");
+	assert.ok(shell, "the wizard body sits inside the shell root");
+	return shell;
+};
+
+const FOCUSABLE =
+	'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+describe("a wizard step longer than the viewport (#1021)", () => {
+	it("puts the whole report inside the scroll box and the footer outside it", () => {
+		harness = createDomHarness({ viewportWidth: 1512 });
+		harness.render(
+			createElement(StepDryRunReport, {
+				sections: LONG_REPORT,
+				fileName: "reader-config.example.json",
+			}),
+		);
+
+		const body = harness.query("[data-testid=wizard-body]");
+		const footer = harness.query("[data-testid=wizard-footer]");
+		assert.ok(body && footer);
+
+		// The rail above the card renders a list item per step, so the count is
+		// the assertion: all 80 report rows are inside the scroll box, and a row
+		// left outside it would show up as a shortfall here.
+		assert.equal(
+			body.querySelectorAll("li").length,
+			80,
+			"every report row grows inside the scroll box",
+		);
+
+		assert.ok(
+			!body.contains(footer),
+			"the footer sits outside the scroll box, so the report cannot scroll it away",
+		);
+		const primary = harness.byText("button", "Import");
+		assert.ok(
+			footer.contains(primary),
+			"the primary action lives in the footer",
+		);
+	});
+
+	it("scrolls the body and never the shell", () => {
+		harness = createDomHarness({ viewportWidth: 1512 });
+		harness.render(
+			createElement(StepDryRunReport, {
+				sections: LONG_REPORT,
+				fileName: "reader-config.example.json",
+			}),
+		);
+
+		const body = harness.query("[data-testid=wizard-body]");
+		assert.ok(body);
+		const bodyClasses = classes(body);
+		assert.ok(
+			bodyClasses.includes("overflow-y-auto"),
+			"the body region is the scrolling element",
+		);
+		assert.ok(
+			bodyClasses.includes("min-h-0"),
+			"the body region can shrink below its content, or it never scrolls",
+		);
+
+		const shell = shellOf(harness);
+		assert.ok(
+			classes(shell).includes("overflow-hidden"),
+			"the shell root does not scroll — the footer would ride out of view with it",
+		);
+		assert.deepEqual(
+			harness
+				.queryAll('[class*="overflow-y-auto"]')
+				.map((element) => element.getAttribute("data-testid")),
+			["wizard-body"],
+			"exactly one region scrolls, and it is the one holding the growable content",
+		);
+	});
+
+	it("caps the shell at the viewport rather than growing past it", () => {
+		harness = createDomHarness({ viewportWidth: 1512 });
+		harness.render(
+			createElement(StepDryRunReport, {
+				sections: LONG_REPORT,
+				fileName: "reader-config.example.json",
+			}),
+		);
+
+		const shellClasses = classes(shellOf(harness));
+		assert.ok(
+			shellClasses.includes("h-dvh"),
+			"the shell is exactly the viewport, so no content length can extend it",
+		);
+		assert.ok(
+			!shellClasses.some((token) => token.startsWith("min-h-")),
+			"a minimum height would let the content push the shell past the fold again",
+		);
+	});
+
+	it("keeps the footer action last in the tab order", () => {
+		harness = createDomHarness({ viewportWidth: 1512 });
+		harness.render(
+			createElement(StepDryRunReport, {
+				sections: LONG_REPORT,
+				fileName: "reader-config.example.json",
+			}),
+		);
+
+		const footer = harness.query("[data-testid=wizard-footer]");
+		assert.ok(footer);
+		const focusable = harness.queryAll(FOCUSABLE);
+		assert.ok(focusable.length >= 2, "the step has controls to tab through");
+		assert.ok(
+			focusable.every((element) => {
+				const order = element.getAttribute("tabindex");
+				return order === null || Number.parseInt(order, 10) <= 0;
+			}),
+			"nothing claims a positive tabindex, so DOM order is the tab order",
+		);
+		const last = focusable[focusable.length - 1];
+		assert.ok(
+			last && footer.contains(last),
+			"tabbing forward through the report ends on the footer action",
+		);
+	});
+
+	it("holds the same shape for a long list of accounts needing credentials", () => {
+		harness = createDomHarness({ viewportWidth: 1512 });
+		harness.render(
+			createElement(StepCredentialsOverview, { accounts: MANY_ACCOUNTS }),
+		);
+
+		const body = harness.query("[data-testid=wizard-body]");
+		const footer = harness.query("[data-testid=wizard-footer]");
+		assert.ok(body && footer);
+		assert.equal(
+			body.querySelectorAll("li").length,
+			MANY_ACCOUNTS.length,
+			"the account list grows inside the scroll box",
+		);
+		assert.ok(
+			footer.contains(harness.byText("button", "Finish later")),
+			"the way on stays pinned however many accounts the file carried",
+		);
+	});
+});

package/src/hooks/calendar/agenda-window.test.ts

@@ -13,19 +13,24 @@ import { describe, it } from "node:test";
 import { freeStretchesFromSpans } from "@remit/ui";
 import {
 	busySpansByDate,
+	CAP_WEEKS,
 	datesInRange,
 	extendRangeEnd,
 	extendRangeStart,
 	freeStretchesByDate,
 	LEAD_IN,
 	LEAD_OUT,
+	liftRangeCeiling,
+	liftRangeFloor,
 	PAGE,
 	rangeAround,
+	rangeAtCeiling,
+	rangeAtFloor,
 	rangeCovering,
 	weekKeyOf,
 	weekWindowsOver,
 } from "./agenda-window.js";
-import { calendarWindow, startOfDay } from "./window.js";
+import { addDays, calendarWindow, startOfDay } from "./window.js";
 
 const DATE = "2026-06-10";
 
@@ -53,14 +58,8 @@ describe("the days the strip holds", () => {
 
 	it("grows the run at whichever end was reached, keeping the other", () => {
 		const range = rangeAround(DATE);
-		assert.deepEqual(extendRangeStart(range), {
-			from: "2026-05-17",
-			to: range.to,
-		});
-		assert.deepEqual(extendRangeEnd(range), {
-			from: range.from,
-			to: "2026-07-18",
-		});
+		assert.deepEqual(extendRangeStart(range), { ...range, from: "2026-05-24" });
+		assert.deepEqual(extendRangeEnd(range), { ...range, to: "2026-07-11" });
 		assert.equal(
 			datesInRange(extendRangeEnd(range)).length,
 			datesInRange(range).length + PAGE,
@@ -87,6 +86,71 @@ describe("the days the strip holds", () => {
 	});
 });
 
+/**
+ * The strip is shorter than the distance it fetches at whenever the diary is
+ * sparse, so an end measured off the content is reached on the first layout
+ * pass and stays reached however many days arrive. What stops that is the
+ * strip only growing on a scroll the reader drove; this is the backstop that
+ * makes the runaway it caused — a two-event diary walking out to 2032, with the
+ * address following it — arithmetically impossible rather than merely unlikely.
+ */
+describe("how far the run grows before it asks", () => {
+	const CAP_DAYS = CAP_WEEKS * 7;
+
+	/** Far more reaches than a year of weeks needs, so the cap is what stops it. */
+	const reachEnd = (range = rangeAround(DATE), times = 200) => {
+		let grown = range;
+		for (let reach = 0; reach < times; reach += 1)
+			grown = extendRangeEnd(grown);
+		return grown;
+	};
+
+	const reachStart = (range = rangeAround(DATE), times = 200) => {
+		let grown = range;
+		for (let reach = 0; reach < times; reach += 1)
+			grown = extendRangeStart(grown);
+		return grown;
+	};
+
+	it("stops a year either way, however often an end is reached", () => {
+		const range = reachEnd(reachStart());
+		assert.equal(range.from, addDays(DATE, -CAP_DAYS));
+		assert.equal(range.to, addDays(DATE, CAP_DAYS));
+		assert.equal(rangeAtFloor(range), true);
+		assert.equal(rangeAtCeiling(range), true);
+	});
+
+	it("hands back the run it was given at the cap, so nothing refetches", () => {
+		const capped = reachEnd();
+		assert.equal(extendRangeEnd(capped), capped);
+		const behind = reachStart();
+		assert.equal(extendRangeStart(behind), behind);
+	});
+
+	it("opens the next year where the reader asked, keeping the days held", () => {
+		const capped = reachEnd();
+		const more = liftRangeCeiling(capped);
+		assert.equal(more.from, capped.from);
+		assert.equal(more.to, addDays(capped.to, PAGE));
+		assert.equal(rangeAtCeiling(more), false);
+		assert.equal(rangeAtFloor(more), false);
+	});
+
+	it("does the same behind, without moving the end ahead", () => {
+		const capped = reachStart();
+		const more = liftRangeFloor(capped);
+		assert.equal(more.to, capped.to);
+		assert.equal(more.from, addDays(capped.from, -PAGE));
+		assert.equal(rangeAtFloor(more), false);
+	});
+
+	it("gives a jump its own year, measured from where it landed", () => {
+		const jumped = rangeCovering(reachEnd(), "2028-03-01");
+		assert.deepEqual(jumped, rangeAround("2028-03-01"));
+		assert.equal(rangeAtCeiling(jumped), false);
+	});
+});
+
 /**
  * The range is not a window. A read may not cover more than a year
  * (`CALENDAR_MAX_WINDOW_DAYS`), and the strip's range grows every time the
@@ -105,6 +169,15 @@ describe("the weeks a range is fetched as", () => {
 		assert.equal(new Set(windows.map((w) => w.from)).size, windows.length);
 	});
 
+	/**
+	 * What a strip that has just opened issues, and all it issues: the six weeks
+	 * its opening run falls in. Anything past those is a week the reader has
+	 * scrolled to.
+	 */
+	it("is the six weeks the opening run falls in, and no more", () => {
+		assert.equal(weekWindowsOver(datesInRange(rangeAround(DATE))).length, 6);
+	});
+
 	it("covers every day the strip holds and nothing before or after", () => {
 		const dates = datesInRange(rangeAround(DATE));
 		const held = new Set(weekWindowsOver(dates).map((window) => window.from));

package/src/hooks/calendar/agenda-window.ts

@@ -28,30 +28,70 @@ import { addDays, type CalendarWindow, calendarWindow } from "./window";
 export const LEAD_IN = 10;
 export const LEAD_OUT = 24;
 
-/** What reaching an end adds to it. */
-export const PAGE = 14;
+/** What reaching an end adds to it: the next week, and no more. */
+export const PAGE = 7;
+
+/**
+ * How far the run grows on the reader's scroll before it stops and asks.
+ *
+ * A year either way is further than anyone scrolls in one sitting, so the cap
+ * costs a reader nothing and bounds the damage of anything that asks for more
+ * days without one behind it. The strip is shorter than the reach it fetches at
+ * whenever the diary is sparse, and a run that grew on that alone walked out to
+ * a decade of empty weeks and took the address with it.
+ */
+export const CAP_WEEKS = 52;
+const CAP_DAYS = CAP_WEEKS * 7;
 
 export interface AgendaRange {
 	/** `YYYY-MM-DD`, inclusive. */
 	from: string;
 	/** `YYYY-MM-DD`, inclusive. */
 	to: string;
+	/** The earliest day scrolling alone may reach. */
+	floor: string;
+	/** The latest. */
+	ceiling: string;
 }
 
 export const rangeAround = (date: string): AgendaRange => ({
 	from: addDays(date, -LEAD_IN),
 	to: addDays(date, LEAD_OUT),
+	floor: addDays(date, -CAP_DAYS),
+	ceiling: addDays(date, CAP_DAYS),
 });
 
-export const extendRangeStart = (range: AgendaRange): AgendaRange => ({
-	...range,
-	from: addDays(range.from, -PAGE),
-});
+/** The run has grown as far back as it may on its own. */
+export const rangeAtFloor = (range: AgendaRange): boolean =>
+	range.from <= range.floor;
 
-export const extendRangeEnd = (range: AgendaRange): AgendaRange => ({
-	...range,
-	to: addDays(range.to, PAGE),
-});
+export const rangeAtCeiling = (range: AgendaRange): boolean =>
+	range.to >= range.ceiling;
+
+const later = (a: string, b: string): string => (a > b ? a : b);
+const earlier = (a: string, b: string): string => (a < b ? a : b);
+
+/** At the cap this is the range it was given, identically, so nothing refetches. */
+export const extendRangeStart = (range: AgendaRange): AgendaRange =>
+	rangeAtFloor(range)
+		? range
+		: { ...range, from: later(addDays(range.from, -PAGE), range.floor) };
+
+export const extendRangeEnd = (range: AgendaRange): AgendaRange =>
+	rangeAtCeiling(range)
+		? range
+		: { ...range, to: earlier(addDays(range.to, PAGE), range.ceiling) };
+
+/**
+ * The cap lifted, by a reader who said so. Another year opens behind the day
+ * the run has reached and the days already held stay where they are, so the
+ * strip keeps growing on the scroll from there.
+ */
+export const liftRangeFloor = (range: AgendaRange): AgendaRange =>
+	extendRangeStart({ ...range, floor: addDays(range.from, -CAP_DAYS) });
+
+export const liftRangeCeiling = (range: AgendaRange): AgendaRange =>
+	extendRangeEnd({ ...range, ceiling: addDays(range.to, CAP_DAYS) });
 
 /**
  * The range that has a day in it. A day already held keeps the range it is in —

package/src/hooks/calendar/index.ts

@@ -8,6 +8,7 @@
 export {
 	type AgendaRange,
 	busySpansByDate,
+	CAP_WEEKS,
 	datesInRange,
 	extendRangeEnd,
 	extendRangeStart,
@@ -15,8 +16,12 @@ export {
 	freeStretchesByDate,
 	LEAD_IN,
 	LEAD_OUT,
+	liftRangeCeiling,
+	liftRangeFloor,
 	PAGE,
 	rangeAround,
+	rangeAtCeiling,
+	rangeAtFloor,
 	rangeCovering,
 	weekKeyOf,
 	weekWindowsOver,