diff --git a/web/src/styles/study.css b/web/src/styles/study.css
new file mode 100644
index 0000000..08a6818
--- /dev/null
+++ b/web/src/styles/study.css
@@ -0,0 +1,649 @@
+.study-view {
+  min-width: 0;
+  min-height: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  background: var(--main);
+  color: var(--t1);
+  overflow: auto;
+  font-size: 13px;
+}
+.study-view:focus {
+  outline: none;
+}
+.study-heading {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 22px 28px 6px;
+  flex-wrap: wrap;
+}
+.study-heading > div:first-child {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+.study-heading h1 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 500;
+  letter-spacing: -0.015em;
+  overflow-wrap: anywhere;
+}
+.study-heading span,
+.study-caption,
+.study-view small {
+  color: var(--t3);
+}
+.study-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.study-heading > .study-actions {
+  margin-left: auto;
+}
+.study-view button {
+  font-size: 12.5px;
+}
+.study-content {
+  padding: 18px 28px 28px;
+  min-width: 0;
+}
+.study-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.study-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+}
+.study-stat b {
+  font-size: 24px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+.study-table-wrap {
+  max-width: 100%;
+  overflow-x: auto;
+}
+.study-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  font-size: 12.5px;
+}
+.study-table th {
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--t3);
+  text-align: left;
+  height: 26px;
+}
+.study-table th:first-child {
+  width: 34%;
+}
+.study-table td {
+  border-top: 1px solid var(--line);
+  padding: 6px 4px;
+  height: 44px;
+  color: var(--t3);
+  overflow-wrap: anywhere;
+}
+.study-table td:first-child {
+  color: var(--t1);
+}
+.study-table .study-text-button {
+  padding: 0;
+  min-height: 30px;
+  background: transparent;
+  color: var(--t1);
+  text-align: left;
+  justify-content: flex-start;
+  width: 100%;
+  border-radius: 4px;
+  overflow-wrap: anywhere;
+}
+.study-table .study-text-button:hover {
+  text-decoration: underline;
+}
+.study-table td:last-child:has(.menu-anchor) {
+  width: 36px;
+}
+.study-source {
+  background: transparent;
+  color: var(--t3);
+  padding: 2px 4px;
+  text-align: left;
+}
+.study-source:hover {
+  color: var(--t1);
+  text-decoration: underline;
+}
+.study-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  margin-top: 12px;
+}
+.study-card b {
+  font-weight: 500;
+}
+.study-card > span {
+  color: var(--t3);
+  font-size: 12px;
+}
+.study-card meter {
+  width: 100%;
+  height: 12px;
+  accent-color: var(--t1);
+}
+.study-forecast {
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+  min-width: 0;
+}
+.study-forecast > div {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  height: 106px;
+  font-size: 11px;
+  color: var(--t3);
+  font-variant-numeric: tabular-nums;
+}
+.study-forecast i {
+  display: block;
+  width: 100%;
+  max-width: 26px;
+  border-radius: 5px;
+  background: var(--t3);
+}
+.study-forecast > div:first-child i {
+  background: var(--t1);
+}
+.study-streak {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 14px;
+  color: var(--t3);
+}
+.study-streak button {
+  background: transparent;
+}
+.study-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 12px;
+  padding: 64px 24px;
+}
+.study-empty h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+}
+.study-empty p {
+  margin: 0;
+  max-width: 420px;
+  color: var(--t3);
+  line-height: 1.6;
+}
+.study-banner {
+  padding: 10px 14px;
+  margin: 12px 28px 0;
+  background: var(--raise);
+  border-radius: 9px;
+  font-size: 12px;
+}
+.study-banner button {
+  margin-left: 8px;
+}
+.study-skeleton {
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.study-skeleton div {
+  width: 100%;
+  height: 40px;
+  background: var(--raise);
+  border-radius: 9px;
+}
+.study-skeleton div:first-child {
+  width: 60%;
+}
+.study-filters {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+.study-filters button {
+  border-radius: 999px;
+  min-height: 28px;
+  padding: 3px 10px;
+}
+.study-review-heading {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 16px 24px;
+  color: var(--t3);
+  font-size: 12px;
+}
+.study-review-heading > span:not(.study-review-track) {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.study-review-track {
+  flex: 1;
+  height: 4px;
+  background: var(--raise);
+  overflow: hidden;
+  border-radius: 2px;
+}
+.study-review-track i {
+  height: 100%;
+  background: var(--t1);
+  display: block;
+}
+.study-review-heading button {
+  width: 28px;
+  height: 28px;
+  min-height: 28px;
+  padding: 0;
+  background: transparent;
+}
+.study-review-body {
+  flex: 1;
+  display: grid;
+  min-width: 0;
+  grid-template-columns: minmax(0, 1fr);
+  place-items: center;
+  padding: 12px 24px 50px;
+}
+.study-review-stack {
+  width: min(520px, 100%);
+  min-width: 0;
+  justify-self: center;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+}
+.study-flash {
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+  padding: 32px;
+  border-radius: 16px;
+  background: var(--raise);
+  text-align: center;
+  animation: study-answer-in 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  overflow-wrap: anywhere;
+}
+.study-question {
+  color: var(--t1);
+  font-size: 20px;
+  font-weight: 500;
+  white-space: pre-wrap;
+}
+.study-answer {
+  border-top: 1px solid var(--line2);
+  padding-top: 14px;
+  width: 100%;
+  font-size: 14px;
+  color: var(--t2);
+  white-space: pre-wrap;
+}
+.study-flash > .primary {
+  margin-top: 14px;
+}
+.study-grades {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+  width: 100%;
+}
+.study-grades button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 10px;
+  background: var(--main);
+  box-shadow: 0 0 0 1px var(--line);
+  border-radius: 10px;
+  color: var(--t1);
+  transition:
+    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.study-grades button:hover {
+  background: var(--raise);
+}
+.study-grades button:active:not(:disabled) {
+  transform: scale(0.97);
+  background: var(--sel);
+}
+.study-grades small {
+  font-size: 11px;
+}
+.study-grades kbd,
+.study-toast kbd {
+  font-family: inherit;
+  font-size: 10px;
+  color: var(--t3);
+}
+.study-caption {
+  font-size: 11.5px;
+  line-height: 1.5;
+}
+.study-review-stack > .study-caption {
+  margin: 0;
+  text-align: center;
+}
+.study-done {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  align-items: center;
+  text-align: center;
+  max-width: 520px;
+}
+.study-done h1 {
+  font-size: 22px;
+  font-weight: 500;
+  margin: 0;
+}
+.study-done p {
+  margin: 0;
+  color: var(--t3);
+}
+.study-toast {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-self: flex-end;
+  margin: 0 18px 18px;
+  padding: 10px 14px;
+  background: var(--main);
+  box-shadow:
+    0 10px 30px rgba(0, 0, 0, 0.14),
+    0 0 0 1px var(--line2);
+  border-radius: 12px;
+  font-size: 12.5px;
+  animation: study-toast-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+:root[data-theme="dark"] .study-toast,
+:root[data-theme="dim"] .study-toast {
+  box-shadow:
+    0 10px 30px rgba(0, 0, 0, 0.6),
+    0 0 0 1px var(--line2);
+}
+.study-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.study-form textarea {
+  min-height: 96px;
+  resize: vertical;
+}
+.study-types {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.study-form .study-actions {
+  justify-content: flex-end;
+}
+.study-card-dialog {
+  width: min(560px, calc(100% - 32px));
+}
+.study-blank-fields {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+}
+.study-blank-fields label {
+  flex: 1;
+  min-width: 0;
+}
+.study-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+@keyframes study-answer-in {
+  from {
+    opacity: 0;
+    transform: var(--study-enter-transform, scale(0.98));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes study-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes study-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media (max-width: 700px) {
+  .study-heading {
+    padding: 20px 20px 6px;
+  }
+  .study-heading > .study-actions {
+    margin-left: 0;
+    width: 100%;
+  }
+  .study-content {
+    padding: 14px 20px 24px;
+  }
+  .study-stats {
+    gap: 8px;
+  }
+  .study-stat {
+    padding: 10px;
+  }
+  .study-stat b {
+    font-size: 20px;
+  }
+  .study-table th,
+  .study-table td {
+    font-size: 11px;
+  }
+  .study-table th:first-child {
+    width: 35%;
+  }
+  .study-flash {
+    padding: 28px 20px;
+  }
+  .study-review-body {
+    padding: 12px 16px 32px;
+  }
+  .study-grades {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .study-forecast {
+    gap: 4px;
+  }
+  .study-banner {
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+  .study-toast {
+    margin-left: 16px;
+    margin-right: 16px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :root:not([data-motion="on"]) .study-flash,
+  :root:not([data-motion="on"]) .study-toast {
+    animation: study-fade 150ms !important;
+  }
+  :root:not([data-motion="on"]) .study-grades button:active {
+    transform: none;
+  }
+}
+:root[data-motion="reduced"] .study-flash,
+:root[data-motion="reduced"] .study-toast {
+  animation: study-fade 150ms !important;
+}
+:root[data-motion="reduced"] .study-grades button:active {
+  transform: none;
+}
+
+/* Explicit per-phase tokens override the global reduced animation reset. */
+.study-view .study-flash[data-study-motion] {
+  animation: none !important;
+}
+.study-view .study-flash[data-study-motion="answer-enter"] {
+  animation: study-answer-in 150ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
+}
+.study-view .study-flash[data-study-motion="next-enter"] {
+  animation: study-next-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
+}
+.study-view .study-flash[data-study-motion="reveal-exit"] {
+  animation: study-reveal-out 105ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
+}
+.study-view .study-flash[data-study-motion="confirmed-exit"] {
+  animation: study-card-out 140ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
+}
+.study-view .study-toast[data-exiting] {
+  animation: study-toast-out 140ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
+}
+:root .study-view.study-content-enter {
+  animation: study-fade 150ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
+  position: relative;
+}
+:root .study-view .study-loader-exit {
+  position: absolute;
+  inset: 60px 0 0;
+  background: var(--main);
+  pointer-events: none;
+  animation: study-loader-out 150ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
+  z-index: 1;
+}
+.study-loading-ring {
+  display: block;
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--line2);
+  border-top-color: var(--t2);
+  border-radius: 50%;
+  animation: study-ring 900ms linear infinite;
+}
+.study-done-label {
+  animation: study-fade 150ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+@keyframes study-next-in {
+  from {
+    opacity: 0;
+    transform: var(--study-enter-transform, scale(0.98));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes study-reveal-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes study-card-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes study-toast-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes study-loader-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes study-ring {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :root:not([data-motion="on"]) .study-view {
+    --study-enter-transform: none;
+  }
+  :root:not([data-motion="on"]) .study-loading-ring,
+  :root:not([data-motion="on"]) .study-done-label {
+    animation: none !important;
+  }
+}
+:root[data-motion="reduced"] .study-view {
+  --study-enter-transform: none;
+}
+:root[data-motion="reduced"] .study-loading-ring,
+:root[data-motion="reduced"] .study-done-label {
+  animation: none !important;
+}
diff --git a/web/src/ui/CardSearchPreview.tsx b/web/src/ui/CardSearchPreview.tsx
new file mode 100644
index 0000000..36ef008
--- /dev/null
+++ b/web/src/ui/CardSearchPreview.tsx
@@ -0,0 +1,248 @@
+import { useEffect, useRef, useState } from "react";
+import { Dialog } from "./primitives";
+import { SearchWork, type WorkEvent } from "../search/work";
+import {
+  buildCardContent,
+  readCardContentPage,
+  disposeCardContent,
+  type CardContentInput,
+  type CardContentReader,
+  type CardContentPage,
+  type CardContentSide,
+  type CardContentCursor,
+} from "../study/cardContent";
+
+/** Bounded read-only projection. Identity/authority remains the actual Study owner's responsibility. */
+export function CardSearchPreview({
+  input,
+  deckTitle,
+  isCurrent,
+  scopeVersion,
+  onClose,
+  onBack,
+  onOpenSource,
+}: {
+  input: CardContentInput;
+  deckTitle: string;
+  isCurrent: () => boolean;
+  scopeVersion: number;
+  onClose: () => void;
+  onBack: () => void;
+  onOpenSource?: () => void;
+}) {
+  const [side, setSide] = useState<CardContentSide>("front"),
+    [pages, setPages] = useState<
+      Partial<Record<CardContentSide, CardContentPage>>
+    >({});
+  const [busy, setBusy] = useState(false),
+    [paused, setPaused] = useState(false),
+    [error, setError] = useState("");
+  const reader = useRef<CardContentReader | null>(null),
+    running = useRef(false),
+    work = useRef<SearchWork<{
+      side: CardContentSide;
+      page: CardContentPage;
+    }> | null>(null),
+    generation = useRef(0),
+    abort = useRef<AbortController | null>(null),
+    alive = useRef(false);
+  const check = useRef(isCurrent);
+  check.current = isCurrent;
+  const valid = isCurrent();
+  function assertCurrent() {
+    if (!alive.current || !check.current())
+      throw Error("Card is no longer current.");
+  }
+  async function run(ticket: number) {
+    const operation = work.current;
+    if (!operation || running.current) return;
+    running.current = true;
+    setBusy(true);
+    setPaused(false);
+    setError("");
+    try {
+      const result = await operation.round(abort.current?.signal);
+      if (ticket !== generation.current || !alive.current) return;
+      if (result.status === "paused") setPaused(true);
+      else {
+        setPages((value) => ({
+          ...value,
+          [result.value.side]: result.value.page,
+        }));
+        work.current = null;
+        operation.close();
+      }
+    } catch {
+      if (ticket === generation.current && alive.current) {
+        work.current = null;
+        setError(
+          "This card couldn’t be displayed. Return to search to open it again.",
+        );
+      }
+    } finally {
+      if (ticket === generation.current && alive.current) {
+        running.current = false;
+        setBusy(false);
+      }
+    }
+  }
+  useEffect(() => {
+    alive.current = true;
+    running.current = false;
+    const ticket = ++generation.current;
+    abort.current = new AbortController();
+    function* initial(): Generator<
+      WorkEvent,
+      { side: CardContentSide; page: CardContentPage },
+      void
+    > {
+      const value = yield* buildCardContent(input);
+      reader.current = value;
+      const page = yield* readCardContentPage(value, "front");
+      return { side: "front", page };
+    }
+    work.current = new SearchWork(
+      initial(),
+      undefined,
+      undefined,
+      assertCurrent,
+    );
+    void run(ticket);
+    return () => {
+      alive.current = false;
+      running.current = false;
+      generation.current++;
+      abort.current?.abort();
+      work.current?.close();
+      work.current = null;
+      if (reader.current) disposeCardContent(reader.current);
+      reader.current = null;
+    };
+  }, [input]);
+  useEffect(() => {
+    if (!valid) {
+      generation.current++;
+      abort.current?.abort();
+      work.current?.close();
+      work.current = null;
+      if (reader.current) disposeCardContent(reader.current);
+      reader.current = null;
+      setPages({});
+      setBusy(false);
+      setPaused(false);
+    }
+  }, [valid, scopeVersion]);
+  function read(side: CardContentSide, cursor?: CardContentCursor) {
+    if (
+      running.current ||
+      busy ||
+      paused ||
+      !reader.current ||
+      !check.current()
+    )
+      return;
+    const value = reader.current,
+      ticket = ++generation.current;
+    abort.current?.abort();
+    abort.current = new AbortController();
+    function* next(): Generator<
+      WorkEvent,
+      { side: CardContentSide; page: CardContentPage },
+      void
+    > {
+      return { side, page: yield* readCardContentPage(value, side, cursor) };
+    }
+    work.current = new SearchWork(next(), undefined, undefined, assertCurrent);
+    void run(ticket);
+  }
+  const page = pages[side];
+  return (
+    <Dialog title="Card" onClose={onClose} className="search-card-preview">
+      {!valid ? (
+        <p role="status">
+          This card changed or is no longer available. Return to search to open
+          it again.
+        </p>
+      ) : (
+        <>
+          <p className="search-scope">
+            Deck: {deckTitle} ·{" "}
+            {input.type === "basic"
+              ? "Basic"
+              : input.type === "reversed"
+                ? input.key === "reversed:reverse"
+                  ? "Reversed · reverse"
+                  : "Reversed · forward"
+                : "Cloze"}{" "}
+            · Read-only
+          </p>
+          <h3>{side === "front" ? "Question" : "Answer"}</h3>
+          {page && (
+            <>
+              <pre className="search-card-text">{page.text || "(Empty)"}</pre>
+              <div className="search-pagination">
+                <span
+                  className="search-card-range"
+                  tabIndex={-1}
+                  aria-live="polite"
+                >
+                  {page.total === 0 ? "0" : `${page.start + 1}–${page.end}`} of{" "}
+                  {page.total} characters
+                </span>
+                <button
+                  disabled={busy || paused || !page.previous}
+                  onClick={(event) => {
+                    event.currentTarget.parentElement
+                      ?.querySelector<HTMLElement>(".search-card-range")
+                      ?.focus();
+                    if (page.previous) read(side, page.previous);
+                  }}
+                >
+                  Previous
+                </button>
+                <button
+                  disabled={busy || paused || !page.next}
+                  onClick={(event) => {
+                    event.currentTarget.parentElement
+                      ?.querySelector<HTMLElement>(".search-card-range")
+                      ?.focus();
+                    if (page.next) read(side, page.next);
+                  }}
+                >
+                  Next
+                </button>
+              </div>
+            </>
+          )}
+          {busy && <p role="status">Loading card content…</p>}
+          {paused && (
+            <div role="status">
+              <p>This card needs more time to display.</p>
+              <button onClick={() => void run(generation.current)}>
+                Continue
+              </button>
+            </div>
+          )}
+          {error && <p role="alert">{error}</p>}
+          <button
+            disabled={!reader.current}
+            aria-disabled={busy || paused}
+            onClick={() => {
+              if (running.current || busy || paused) return;
+              const next = side === "front" ? "back" : "front";
+              setSide(next);
+              if (!pages[next]) read(next);
+            }}
+          >
+            {side === "front" ? "Show answer" : "Hide answer"}
+          </button>
+          {onOpenSource && <button onClick={onOpenSource}>Open in note</button>}
+        </>
+      )}
+      <div className="actions">
+        <button onClick={onClose}>Back to Study</button>
+        <button onClick={onBack}>Back to search</button>
+      </div>
+    </Dialog>
+  );
+}
diff --git a/web/src/ui/StudyView.tsx b/web/src/ui/StudyView.tsx
new file mode 100644
index 0000000..e7c4e53
--- /dev/null
+++ b/web/src/ui/StudyView.tsx
@@ -0,0 +1,2278 @@
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { onLock, lockVersion } from "../account/session";
+import {
+  assertCollectionsAccess,
+  onCollectionsClose,
+  onCollectionsEpochChange,
+} from "../collections/store";
+import type {
+  StudySourceOpenRequest,
+  StudyEntryOpenRequest,
+} from "./studySourceNavigation";
+import type {
+  CollectionsState,
+  CollectionsStore,
+  Grade,
+  StudyEntry,
+  StudyState,
+} from "../collections/contracts";
+import { CollectionsRevisionConflictError } from "../collections/contracts";
+import {
+  createDeck,
+  saveEntry,
+  deleteEntry,
+  gradeCard,
+  undoReview,
+  reviewQueue,
+  cardText,
+  progress,
+} from "../study/model";
+import { nextSchedule, studyDay } from "../study/scheduler";
+import { parseStudyCsv, importStudyCsv, exportStudyCsv } from "../study/csv";
+import { registerCloseGuard, trackOperation } from "../desktop/closeGuard";
+import { Dialog } from "./primitives";
+import { Menu } from "./Menu";
+import "../styles/study.css";
+import { CardSearchPreview } from "./CardSearchPreview";
+import { useStudyToastLifetime } from "./useStudyToastLifetime";
+import {
+  useStudyMotion,
+  useStudyToastExit,
+  useStudyColdLoading,
+} from "./useStudyMotion";
+import type { StudyMotionLocator } from "./useStudyMotion";
+import type { CardContentInput } from "../study/cardContent";
+import type {
+  CardSearchOpenRequest,
+  SearchReaderResult,
+} from "./searchNavigation";
+
+type Session = {
+  id: string;
+  deckId?: string;
+  cards: string[];
+  position: number;
+  history: { eventId: string; position: number }[];
+};
+type ReviewIntent = {
+  epoch: string;
+  operationId: string;
+  grade: Grade;
+  at: Date;
+  cardId: string;
+  sessionId: string;
+  position: number;
+  checked: boolean;
+};
+type Form =
+  | { kind: "deck" }
+  | { kind: "card"; entry?: StudyEntry }
+  | { kind: "delete"; entry: StudyEntry }
+  | { kind: "import" }
+  | { kind: "export" };
+const grades: { grade: Grade; label: string }[] = [
+  { grade: "again", label: "Again" },
+  { grade: "hard", label: "Hard" },
+  { grade: "good", label: "Good" },
+  { grade: "easy", label: "Easy" },
+];
+const typeName = (entry: StudyEntry) =>
+  entry.type === "cloze"
+    ? "Fill in the blank"
+    : entry.type === "reversed"
+      ? "Reversed"
+      : "Basic";
+const countText = (count: number, noun: string) =>
+  `${count} ${noun}${count === 1 ? "" : "s"}`;
+function dateText(value: string) {
+  return new Date(value).toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+  });
+}
+function intervalText(due: string, at: Date) {
+  const minutes = Math.max(
+    1,
+    Math.round((Date.parse(due) - at.getTime()) / 60000),
+  );
+  return minutes < 60
+    ? `${minutes} min`
+    : minutes < 1440
+      ? `${Math.round(minutes / 60)} h`
+      : `${Math.round(minutes / 1440)} d`;
+}
+
+export function StudyView({
+  store,
+  onOpenNote,
+  onOpenSource,
+  openEntry,
+  openCard,
+  onSearchReaderResult,
+  onReturnToSearch,
+  accountId,
+  covered = false,
+  onReopen,
+}: {
+  onReopen?: () => void;
+  covered?: boolean;
+  store: CollectionsStore;
+  onOpenNote?: (noteId: string) => void;
+  onOpenSource?: (request: StudySourceOpenRequest) => void;
+  openEntry?: StudyEntryOpenRequest | null;
+  openCard?: CardSearchOpenRequest | null;
+  onSearchReaderResult?: SearchReaderResult;
+  onReturnToSearch?: () => void;
+  accountId?: string;
+}) {
+  const [cardPreview, setCardPreview] = useState<{
+    request: CardSearchOpenRequest;
+    input: CardContentInput;
+    deckTitle: string;
+    entryRevision: number;
+    cardRevision: number;
+    collectionsRevision: number;
+    hasSource: boolean;
+  } | null>(null);
+  const cardAdmission = useRef(0),
+    cardReaderResult = useRef(onSearchReaderResult);
+  cardReaderResult.current = onSearchReaderResult;
+  const [snapshot, setSnapshot] = useState<CollectionsState | null>(null);
+  const current = useRef<CollectionsState | null>(null);
+  const [unavailable, setUnavailable] = useState(false);
+  const revoked = useRef(false),
+    ownerGeneration = useRef(0),
+    ownerLockVersion = useRef(lockVersion()),
+    readOwner = useRef(-1);
+  const [readError, setReadError] = useState("");
+  const [error, setError] = useState("");
+  const [conflict, setConflict] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const working = useRef(false);
+  const dirty = useRef(false);
+  const [guardNotice, setGuardNotice] = useState("");
+  const [notice, setNotice] = useState("");
+  const [deckId, setDeckId] = useState<string | null>(null);
+  const [page, setPage] = useState<"decks" | "progress">("decks");
+  const [filter, setFilter] = useState<"all" | "due" | "new" | "learned">(
+    "all",
+  );
+  const [form, setForm] = useState<Form | null>(null);
+  const [session, setSession] = useState<Session | null>(null);
+  const [answer, setAnswer] = useState(false);
+  const [answerAt, setAnswerAt] = useState(() => new Date());
+  const pendingReview = useRef<ReviewIntent | null>(null);
+  const [toast, setToast] = useState<{ text: string; eventId: string } | null>(
+    null,
+  );
+  const effectiveCovered = covered || cardPreview !== null || form !== null;
+  const motion = useStudyMotion(effectiveCovered, validLocator);
+  const coldLoading = useStudyColdLoading(
+    snapshot !== null,
+    !!readError,
+    ownerGeneration.current,
+  );
+  const eligibleToastId =
+    snapshot &&
+    session &&
+    toast &&
+    toast.eventId === session.history.at(-1)?.eventId
+      ? toast.eventId
+      : null;
+  const toastExit = useStudyToastExit(eligibleToastId, (eventId) =>
+    setToast((current) => (current?.eventId === eventId ? null : current)),
+  );
+  const toastInteractions = useStudyToastLifetime(
+    snapshot &&
+      session &&
+      toast &&
+      toast.eventId === session.history.at(-1)?.eventId
+      ? toast.eventId
+      : null,
+    toastExit.expire,
+    effectiveCovered,
+  );
+  const [now, setNow] = useState(() => new Date());
+  const [offline, setOffline] = useState(() => !navigator.onLine);
+  const sequence = useRef(0);
+  const mounted = useRef(false);
+  const surface = useRef<HTMLElement>(null);
+  const motionFocus = useRef<Element | null>(null);
+  function locator(
+    value: CollectionsState,
+    cardId: string,
+    sessionId: string,
+    side: StudyMotionLocator["side"],
+  ): StudyMotionLocator | null {
+    const card = value.study.cards.find((item) => item.id === cardId),
+      entry =
+        card && value.study.entries.find((item) => item.id === card.entryId);
+    return card && entry
+      ? {
+          epoch: value.epoch,
+          sessionId,
+          cardId,
+          entryId: entry.id,
+          cardRevision: card.revision,
+          entryRevision: entry.revision,
+          side,
+        }
+      : null;
+  }
+  function validLocator(item: StudyMotionLocator) {
+    const value = current.current,
+      card = value?.study.cards.find((card) => card.id === item.cardId),
+      entry = value?.study.entries.find((entry) => entry.id === item.entryId);
+    return (
+      value?.epoch === item.epoch &&
+      session?.id === item.sessionId &&
+      card?.entryId === item.entryId &&
+      card.revision === item.cardRevision &&
+      entry?.revision === item.entryRevision
+    );
+  }
+  function clearPrivate(closed: boolean, synchronous = true) {
+    ownerGeneration.current++;
+    sequence.current++;
+    cardAdmission.current++;
+    revoked.current = closed;
+    current.current = null;
+    pendingReview.current = null;
+    dirty.current = false;
+    working.current = false;
+    motionFocus.current = null;
+    const clear = () => {
+      motion.invalidate();
+      setSnapshot(null);
+      setSession(null);
+      setAnswer(false);
+      setToast(null);
+      setForm(null);
+      setCardPreview(null);
+      setDeckId(null);
+      setPage("decks");
+      setFilter("all");
+      setError("");
+      setReadError("");
+      setNotice("");
+      setGuardNotice("");
+      setConflict(false);
+      setBusy(false);
+      setUnavailable(closed);
+    };
+    if (synchronous) flushSync(clear);
+    else clear();
+  }
+  function ownerCurrent(ticket: number) {
+    if (
+      revoked.current ||
+      ticket !== ownerGeneration.current ||
+      lockVersion() !== ownerLockVersion.current ||
+      !mounted.current
+    )
+      return false;
+    try {
+      assertCollectionsAccess(store);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  useLayoutEffect(() => {
+    if (motion.locator && !validLocator(motion.locator)) motion.invalidate();
+  }, [snapshot, session?.id, motion.nonce]);
+  useLayoutEffect(() => {
+    if (effectiveCovered || motion.exiting || !session) return;
+    const focused = document.activeElement;
+    if (
+      motionFocus.current &&
+      (focused === motionFocus.current ||
+        focused === document.body ||
+        focused === surface.current)
+    ) {
+      surface.current
+        ?.querySelector<HTMLElement>(
+          answer
+            ? ".study-flash:not([inert])"
+            : ".study-flash:not([inert]) .primary",
+        )
+        ?.focus({ preventScroll: true });
+    }
+    motionFocus.current = null;
+  }, [motion.phase, session?.position, answer, effectiveCovered]);
+  useEffect(() => {
+    if (!snapshot) return;
+    const time = Date.now();
+    const next = snapshot.study.cards.reduce((due, card) => {
+      const candidate = Date.parse(card.schedule.due);
+      return candidate > time ? Math.min(due, candidate) : due;
+    }, time + 60_000);
+    const timer = setTimeout(
+      () => setNow(new Date()),
+      Math.max(25, next - time + 5),
+    );
+    return () => clearTimeout(timer);
+  }, [snapshot?.study, now]);
+
+  function accept(value: CollectionsState) {
+    if (revoked.current) return;
+    if (current.current && current.current.epoch !== value.epoch) {
+      motion.invalidate();
+      setCardPreview(null);
+      cardAdmission.current++;
+      dirty.current = false;
+      pendingReview.current = null;
+      setForm(null);
+      setSession(null);
+      setAnswer(false);
+      setToast(null);
+      setDeckId(null);
+      setPage("decks");
+      setFilter("all");
+      setGuardNotice("");
+      setNotice("");
+      setError("");
+      setConflict(false);
+    } else if (current.current && value.revision < current.current.revision)
+      return;
+    current.current = value;
+    setSnapshot(value);
+    setNow(new Date());
+    confirmReview(value);
+  }
+  function confirmReview(value: CollectionsState) {
+    const intent = pendingReview.current;
+    if (!intent || intent.epoch !== value.epoch) return false;
+    const event = value.study.events.find(
+      (item) => item.id === intent.operationId,
+    );
+    if (
+      !event ||
+      event.undoneAt ||
+      !value.study.cards.some((card) => card.id === intent.cardId)
+    )
+      return false;
+    if (
+      event.cardId !== intent.cardId ||
+      event.sessionId !== intent.sessionId ||
+      event.grade !== intent.grade ||
+      event.at !== intent.at.toISOString()
+    )
+      return false;
+    pendingReview.current = null;
+    const outgoing = locator(value, intent.cardId, intent.sessionId, "answer");
+    if (outgoing) {
+      motionFocus.current = document.activeElement;
+      motion.begin("confirmed-exit", outgoing, event.id);
+    }
+    setSession((previous) =>
+      previous?.id === intent.sessionId
+        ? {
+            ...previous,
+            position: intent.position + 1,
+            history: [
+              ...previous.history,
+              { eventId: intent.operationId, position: intent.position },
+            ],
+          }
+        : previous,
+    );
+    setAnswer(false);
+    setError("");
+    setConflict(false);
+    setGuardNotice("");
+    setToast({
+      eventId: intent.operationId,
+      text: `Graded ${grades.find((item) => item.grade === intent.grade)!.label} · next review in ${intervalText(event.after.schedule.due, intent.at)}`,
+    });
+    return true;
+  }
+  async function load(resetConflict = false) {
+    const request = ++sequence.current;
+    const ownerTicket = ownerGeneration.current;
+    if (!ownerCurrent(ownerTicket)) return;
+    readOwner.current = ownerTicket;
+    if (!current.current) setReadError("");
+    try {
+      const value = await store.read();
+      if (!ownerCurrent(ownerTicket) || request !== sequence.current) return;
+      accept(value);
+      setReadError("");
+      if (resetConflict) {
+        if (pendingReview.current?.epoch === value.epoch)
+          pendingReview.current.checked = true;
+        setConflict(false);
+        setError("");
+      }
+    } catch {
+      if (ownerCurrent(ownerTicket) && request === sequence.current)
+        setReadError("Couldn’t load your decks. Try again.");
+    }
+  }
+  useLayoutEffect(() => {
+    mounted.current = true;
+    ownerLockVersion.current = lockVersion();
+    clearPrivate(false, false);
+    let stopClose: (() => void) | undefined,
+      stopEpoch: (() => void) | undefined,
+      stopLock: (() => void) | undefined,
+      unsubscribe: (() => void) | undefined;
+    try {
+      assertCollectionsAccess(store);
+      stopClose = onCollectionsClose(store, () => clearPrivate(true));
+      stopEpoch = onCollectionsEpochChange(store, () => {
+        clearPrivate(false);
+        const ticket = ownerGeneration.current;
+        queueMicrotask(() => {
+          if (ownerCurrent(ticket) && readOwner.current !== ticket) void load();
+        });
+      });
+      stopLock = onLock(() => clearPrivate(true));
+      unsubscribe = store.subscribe(() => void load());
+      void load();
+    } catch {
+      clearPrivate(true, false);
+    }
+    return () => {
+      mounted.current = false;
+      sequence.current++;
+      motion.invalidate();
+      unsubscribe?.();
+      stopClose?.();
+      stopEpoch?.();
+      stopLock?.();
+      ownerGeneration.current++;
+      revoked.current = true;
+      current.current = null;
+      pendingReview.current = null;
+      dirty.current = false;
+      working.current = false;
+    };
+  }, [store, accountId]);
+  useEffect(() => {
+    if (!openEntry) return;
+    let active = true;
+    const request = ++sequence.current;
+    const ownerTicket = ownerGeneration.current;
+    void trackOperation(() => store.read())
+      .then((value) => {
+        if (
+          !active ||
+          !ownerCurrent(ownerTicket) ||
+          request !== sequence.current
+        )
+          return;
+        accept(value);
+        const entry = value.study.entries.find(
+          (entry) => entry.id === openEntry.entryId,
+        );
+        if (!entry) {
+          setError("This card is no longer available.");
+          return;
+        }
+        setDeckId(entry.deckId);
+        setPage("decks");
+        setForm({ kind: "card", entry });
+      })
+      .catch(() => {
+        if (active && ownerCurrent(ownerTicket) && request === sequence.current)
+          setError(
+            "Couldn’t open this card. Your saved cards were not changed.",
+          );
+      });
+    return () => {
+      active = false;
+    };
+  }, [store, openEntry?.key]);
+  useLayoutEffect(() => {
+    if (!openCard) setCardPreview(null);
+  }, [openCard?.requestId]);
+  useEffect(() => {
+    const ticket = ++cardAdmission.current;
+    if (!openCard) return;
+    const request = openCard;
+    if (dirty.current || working.current || pendingReview.current) {
+      cardReaderResult.current?.(request.requestId, "blocked");
+      return;
+    }
+    void trackOperation(() => store.read())
+      .then((value) => {
+        if (!mounted.current || ticket !== cardAdmission.current) return;
+        if (dirty.current || working.current || pendingReview.current) {
+          cardReaderResult.current?.(request.requestId, "blocked");
+          return;
+        }
+        const target = request.target,
+          card = value.study.cards.find(
+            (card) =>
+              card.id === target.cardId &&
+              card.entryId === target.entryId &&
+              card.key === target.key,
+          ),
+          entry = value.study.entries.find(
+            (entry) => entry.id === target.entryId,
+          );
+        if (
+          !accountId ||
+          accountId !== target.accountId ||
+          value.epoch !== target.collectionsEpoch ||
+          !card ||
+          !entry
+        ) {
+          cardReaderResult.current?.(request.requestId, "unavailable");
+          return;
+        }
+        let input: CardContentInput;
+        if (entry.type === "basic" && card.key === "basic:forward")
+          input = {
+            type: "basic",
+            key: card.key,
+            front: entry.front,
+            back: entry.back,
+          };
+        else if (
+          entry.type === "reversed" &&
+          (card.key === "reversed:forward" || card.key === "reversed:reverse")
+        )
+          input = {
+            type: "reversed",
+            key: card.key,
+            front: entry.front,
+            back: entry.back,
+          };
+        else if (
+          entry.type === "cloze" &&
+          card.key.startsWith("cloze:") &&
+          entry.blanks.some((blank) => `cloze:${blank.id}` === card.key)
+        )
+          input = {
+            type: "cloze",
+            key: card.key as `cloze:${string}`,
+            text: entry.text,
+            blanks: entry.blanks,
+          };
+        else {
+          cardReaderResult.current?.(request.requestId, "unavailable");
+          return;
+        }
+        accept(value);
+        setForm(null);
+        setCardPreview({
+          request,
+          input,
+          deckTitle:
+            value.study.decks.find((deck) => deck.id === entry.deckId)?.title ??
+            "Untitled deck",
+          entryRevision: entry.revision,
+          cardRevision: card.revision,
+          collectionsRevision: value.revision,
+          hasSource: !!entry.source,
+        });
+        cardReaderResult.current?.(request.requestId, "opened");
+      })
+      .catch(() => {
+        if (mounted.current && ticket === cardAdmission.current)
+          cardReaderResult.current?.(request.requestId, "unavailable");
+      });
+    return () => {
+      cardAdmission.current++;
+    };
+  }, [store, accountId, openCard?.requestId]);
+  useEffect(() => {
+    const update = () => {
+      setOffline(!navigator.onLine);
+      setNow(new Date());
+    };
+    window.addEventListener("online", update);
+    window.addEventListener("offline", update);
+    window.addEventListener("focus", update);
+    return () => {
+      window.removeEventListener("online", update);
+      window.removeEventListener("offline", update);
+      window.removeEventListener("focus", update);
+    };
+  }, []);
+  useLayoutEffect(
+    () =>
+      registerCloseGuard(() => {
+        if (!dirty.current && !working.current && !pendingReview.current)
+          return true;
+        setGuardNotice(
+          pendingReview.current
+            ? "This review hasn’t been confirmed. Reload to check it before leaving."
+            : "Your Study changes are only in this window. Save or cancel before leaving.",
+        );
+        return false;
+      }),
+    [],
+  );
+  useEffect(() => {
+    const guard = (event: BeforeUnloadEvent) => {
+      if (dirty.current || working.current || pendingReview.current)
+        event.preventDefault();
+    };
+    window.addEventListener("beforeunload", guard);
+    return () => window.removeEventListener("beforeunload", guard);
+  }, []);
+  useEffect(() => {
+    if (session && !form && !effectiveCovered)
+      surface.current?.focus({ preventScroll: true });
+  }, [session?.id]);
+
+  async function commit(
+    change: (state: StudyState) => StudyState,
+    failure: string,
+  ): Promise<CollectionsState | null> {
+    const expected = current.current;
+    const ownerTicket = ownerGeneration.current;
+    if (!expected || working.current || conflict || !ownerCurrent(ownerTicket))
+      return null;
+    working.current = true;
+    setBusy(true);
+    setError("");
+    try {
+      const value = await trackOperation(() =>
+        store.update(expected, (state) => ({
+          ...state,
+          study: change(state.study),
+        })),
+      );
+      if (
+        !ownerCurrent(ownerTicket) ||
+        current.current?.epoch !== expected.epoch
+      )
+        return null;
+      sequence.current++;
+      accept(value);
+      setGuardNotice("");
+      return value;
+    } catch (cause) {
+      if (
+        !ownerCurrent(ownerTicket) ||
+        current.current?.epoch !== expected.epoch
+      )
+        return null;
+      const changed =
+        cause instanceof CollectionsRevisionConflictError ||
+        (typeof cause === "object" &&
+          cause !== null &&
+          "code" in cause &&
+          cause.code === "collections_revision_conflict");
+      setConflict(changed);
+      const entryChanged =
+        cause instanceof Error && cause.message.startsWith("entry_conflict:");
+      setError(
+        changed
+          ? "Study changed in another window. Your draft is still here. Reload before trying again."
+          : entryChanged
+            ? "This card changed in another window. Your draft is still here. Copy your changes, then reopen the card."
+            : failure,
+      );
+      return null;
+    } finally {
+      if (ownerCurrent(ownerTicket)) {
+        working.current = false;
+        setBusy(false);
+      }
+    }
+  }
+  function openForm(next: Form) {
+    setError("");
+    setGuardNotice("");
+    dirty.current = false;
+    setForm(next);
+  }
+  function closeForm() {
+    if (working.current) return;
+    dirty.current = false;
+    setGuardNotice("");
+    setError("");
+    setForm(null);
+  }
+  function markDirty() {
+    dirty.current = true;
+  }
+  async function addDeck(title: string) {
+    const ownerTicket = ownerGeneration.current;
+    const at = new Date();
+    const value = await commit(
+      (state) => createDeck(state, title, at),
+      "Couldn’t create this deck. Your name is still here. Try again.",
+    );
+    if (value && ownerCurrent(ownerTicket)) {
+      const created = value.study.decks.find(
+        (deck) =>
+          !snapshot?.study.decks.some((previous) => previous.id === deck.id),
+      );
+      closeForm();
+      if (created) setDeckId(created.id);
+    }
+  }
+  async function persistEntry(entry: StudyEntry) {
+    const ownerTicket = ownerGeneration.current;
+    const at = new Date();
+    const value = await commit(
+      (state) => saveEntry(state, entry, at),
+      "Couldn’t save this card. Your draft is still here. Try again.",
+    );
+    if (value && ownerCurrent(ownerTicket)) closeForm();
+  }
+  function startReview(more = false) {
+    const state = current.current?.study;
+    if (!state || working.current) return;
+    const at = new Date();
+    const selected = deckId
+      ? state.cards.filter((card) =>
+          state.entries.some(
+            (entry) => entry.id === card.entryId && entry.deckId === deckId,
+          ),
+        )
+      : state.cards;
+    const queue = more
+      ? [...selected].sort(
+          (a, b) =>
+            a.schedule.due.localeCompare(b.schedule.due) ||
+            a.id.localeCompare(b.id),
+        )
+      : reviewQueue(state, at, deckId ?? undefined);
+    setSession({
+      id: crypto.randomUUID(),
+      deckId: deckId ?? undefined,
+      cards: queue.map((card) => card.id),
+      position: 0,
+      history: [],
+    });
+    motion.enter();
+    setAnswer(false);
+    setAnswerAt(at);
+    setError("");
+    setToast(null);
+    setNow(at);
+  }
+  async function grade(grade: Grade) {
+    if (!session || !answer || working.current || motion.phase !== "stable")
+      return;
+    const cardId = session.cards[session.position];
+    if (!cardId) return;
+    const existing = pendingReview.current;
+    if (existing && (existing.grade !== grade || !existing.checked)) return;
+    const intent = existing ?? {
+      epoch: current.current!.epoch,
+      operationId: crypto.randomUUID(),
+      grade,
+      at: answerAt,
+      cardId,
+      sessionId: session.id,
+      position: session.position,
+      checked: true,
+    };
+    pendingReview.current = intent;
+    const value = await commit(
+      (state) =>
+        gradeCard(
+          state,
+          intent.cardId,
+          intent.grade,
+          intent.sessionId,
+          intent.operationId,
+          intent.at,
+        ),
+      "Couldn’t save this review. Your answer is still here. Try again.",
+    );
+    if (value) confirmReview(value);
+    if (pendingReview.current === intent) {
+      intent.checked = false;
+      setError(
+        "Couldn’t confirm this review. Reload to check whether it was saved.",
+      );
+    } else if (mounted.current) setError("");
+  }
+  async function undo() {
+    const last = session?.history.at(-1);
+    if (!last || !session || working.current || pendingReview.current) return;
+    motion.invalidate();
+    const at = new Date();
+    const ownerTicket = ownerGeneration.current;
+    const value = await commit(
+      (state) => undoReview(state, last.eventId, at),
+      "Couldn’t undo this review. Your saved grade was not changed. Try again.",
+    );
+    if (!value || !ownerCurrent(ownerTicket)) return;
+    setSession({
+      ...session,
+      position: last.position,
+      history: session.history.slice(0, -1),
+    });
+    setAnswer(true);
+    setAnswerAt(new Date());
+    setToast(null);
+    motion.enter();
+  }
+  function keyboard(event: React.KeyboardEvent<HTMLElement>) {
+    if (
+      !session ||
+      form ||
+      busy ||
+      event.defaultPrevented ||
+      event.repeat ||
+      event.nativeEvent.isComposing
+    )
+      return;
+    const target = event.target as HTMLElement;
+    if (
+      target.closest(
+        'input,textarea,select,button,a,[role="button"],dialog,[contenteditable="true"],[role="menu"],[role="listbox"]',
+      )
+    )
+      return;
+    if (
+      (event.ctrlKey || event.metaKey) &&
+      !event.shiftKey &&
+      event.key.toLowerCase() === "z"
+    ) {
+      event.preventDefault();
+      void undo();
+    } else if (
+      !event.ctrlKey &&
+      !event.metaKey &&
+      !event.altKey &&
+      !event.shiftKey &&
+      event.key === " " &&
+      !motion.exiting &&
+      !answer &&
+      session.position < session.cards.length
+    ) {
+      event.preventDefault();
+      reveal();
+    } else if (
+      !event.ctrlKey &&
+      !event.metaKey &&
+      !event.altKey &&
+      !event.shiftKey &&
+      answer &&
+      motion.phase === "stable" &&
+      /^[1-4]$/.test(event.key)
+    ) {
+      event.preventDefault();
+      void grade(grades[Number(event.key) - 1]!.grade);
+    }
+  }
+  function reveal() {
+    if (answer || motion.exiting || !session || !current.current) return;
+    const outgoing = locator(
+      current.current,
+      session.cards[session.position]!,
+      session.id,
+      "question",
+    );
+    if (!outgoing) return;
+    motionFocus.current = document.activeElement;
+    motion.begin("reveal-exit", outgoing);
+    setAnswerAt(new Date());
+    setAnswer(true);
+  }
+  function toggleStreak() {
+    const next = !current.current?.study.preferences.showStreak;
+    void commit(
+      (state) => ({
+        ...state,
+        preferences: { ...state.preferences, showStreak: next },
+      }),
+      "Couldn’t save this preference. Try again.",
+    );
+  }
+
+  const cachedProgress = useMemo(
+    () => (snapshot ? progress(snapshot.study, now) : null),
+    [snapshot?.study, now],
+  );
+  const cachedDue = useMemo(
+    () =>
+      snapshot ? reviewQueue(snapshot.study, now, deckId ?? undefined) : [],
+    [snapshot?.study, now, deckId],
+  );
+  if (unavailable)
+    return (
+      <section className="study-view" aria-label="Study">
+        <p role="status">Study is no longer available.</p>
+        {onReopen && <button onClick={onReopen}>Try again</button>}
+      </section>
+    );
+  if (!snapshot)
+    return (
+      <section className="study-view" aria-label="Study" aria-busy={!readError}>
+        <header className="study-heading">
+          <h1>Study</h1>
+        </header>
+        {readError ? (
+          <div className="study-empty">
+            <h2>Couldn’t load your decks.</h2>
+            <p>Your saved cards have not been changed.</p>
+            <button onClick={() => void load()}>Try again</button>
+          </div>
+        ) : coldLoading.loader ? (
+          <div className="study-skeleton" aria-label="Loading decks">
+            <span className="study-loading-ring" aria-hidden="true" />
+            <div />
+            <div />
+            <div />
+          </div>
+        ) : null}
+      </section>
+    );
+  const state = snapshot.study;
+  const showStreak = state.preferences.showStreak;
+  const metrics = cachedProgress!;
+  const deck = state.decks.find((item) => item.id === deckId);
+  const entries = deckId
+    ? state.entries.filter((entry) => entry.deckId === deckId)
+    : state.entries;
+  const cards = state.cards.filter((card) =>
+    entries.some((entry) => entry.id === card.entryId),
+  );
+  const due = cachedDue;
+  const activeCard = session
+    ? state.cards.find((card) => card.id === session.cards[session.position])
+    : undefined;
+  const activeEntry = activeCard
+    ? state.entries.find((entry) => entry.id === activeCard.entryId)
+    : undefined;
+  const reviewText =
+    activeCard && activeEntry ? cardText(activeEntry, activeCard.key) : null;
+  const outgoing =
+    motion.exiting && motion.locator && validLocator(motion.locator)
+      ? motion.locator
+      : null;
+  const shownCard = outgoing
+    ? state.cards.find((item) => item.id === outgoing.cardId)
+    : activeCard;
+  const shownEntry = outgoing
+    ? state.entries.find((item) => item.id === outgoing.entryId)
+    : activeEntry;
+  const shownAnswer = outgoing ? outgoing.side === "answer" : answer;
+  const shownText =
+    outgoing && shownCard && shownEntry
+      ? cardText(shownEntry, shownCard.key)
+      : reviewText;
+  const complete = session !== null && session.position >= session.cards.length;
+  const lastEvent = session?.history.at(-1);
+  const remainingDue = state.cards.filter(
+    (card) =>
+      Date.parse(card.schedule.due) <= now.getTime() &&
+      (!session?.deckId ||
+        state.entries.some(
+          (entry) =>
+            entry.id === card.entryId && entry.deckId === session.deckId,
+        )),
+  ).length;
+  const nextDue = cards
+    .filter((card) => Date.parse(card.schedule.due) > now.getTime())
+    .sort((a, b) => a.schedule.due.localeCompare(b.schedule.due))[0];
+  const doneForToday =
+    remainingDue === 0 &&
+    (!nextDue ||
+      studyDay(
+        new Date(nextDue.schedule.due),
+        state.preferences.timezone,
+        state.preferences.dayStartHour,
+      ) >
+        studyDay(
+          now,
+          state.preferences.timezone,
+          state.preferences.dayStartHour,
+        ));
+
+  return (
+    <section
+      className={`study-view${coldLoading.entering ? " study-content-enter" : ""}`}
+      aria-label="Study"
+      ref={surface}
+      tabIndex={-1}
+      onKeyDown={(event) => {
+        if (!cardPreview) keyboard(event);
+      }}
+    >
+      {coldLoading.entering && (
+        <div className="study-skeleton study-loader-exit" aria-hidden="true">
+          <span className="study-loading-ring" />
+          <div />
+          <div />
+          <div />
+        </div>
+      )}
+      {cardPreview && (
+        <CardSearchPreview
+          key={cardPreview.request.requestId}
+          input={cardPreview.input}
+          deckTitle={cardPreview.deckTitle}
+          scopeVersion={snapshot!.revision}
+          isCurrent={() => {
+            const value = current.current,
+              target = cardPreview.request.target;
+            return (
+              !!value &&
+              accountId === target.accountId &&
+              value.epoch === target.collectionsEpoch &&
+              value.revision === cardPreview.collectionsRevision
+            );
+          }}
+          onClose={() => setCardPreview(null)}
+          onBack={() => {
+            setCardPreview(null);
+            onReturnToSearch?.();
+          }}
+          onOpenSource={
+            cardPreview.hasSource && onOpenSource
+              ? () => {
+                  const target = cardPreview.request.target;
+                  setCardPreview(null);
+                  onOpenSource({
+                    entryId: target.entryId,
+                    cardId: target.cardId,
+                  });
+                }
+              : undefined
+          }
+        />
+      )}
+      {offline && (
+        <p className="study-banner" role="status">
+          You’re offline. Reviews are saved on this device.
+        </p>
+      )}
+      {readError && (
+        <div className="study-banner" role="alert">
+          {readError} <button onClick={() => void load()}>Try again</button>
+        </div>
+      )}
+      {guardNotice && (
+        <p className="study-banner" role="status">
+          {guardNotice}
+        </p>
+      )}
+      {notice && (
+        <p className="study-banner" role="status">
+          {notice}
+          <button
+            aria-label="Dismiss Study notification"
+            onClick={() => setNotice("")}
+          >
+            ×
+          </button>
+        </p>
+      )}
+      {error && !form && (
+        <div className="study-banner error" role="alert">
+          {error}
+          {(conflict || pendingReview.current) && (
+            <button disabled={busy} onClick={() => void load(true)}>
+              Reload
+            </button>
+          )}
+        </div>
+      )}
+      {session ? (
+        <>
+          <header className="study-review-heading">
+            <span
+              className="study-review-track"
+              role="progressbar"
+              aria-label="Review progress"
+              aria-valuemin={0}
+              aria-valuemax={Math.max(1, session.cards.length)}
+              aria-valuenow={session.position}
+            >
+              <i
+                style={{
+                  width: `${session.cards.length ? (100 * session.position) / session.cards.length : 0}%`,
+                }}
+              />
+            </span>
+            <span>
+              {complete
+                ? "Done"
+                : `${session.position + 1} of ${session.cards.length}`}
+            </span>
+            <button
+              aria-label="End session"
+              disabled={busy || !!pendingReview.current}
+              onClick={() => {
+                setSession(null);
+                setToast(null);
+                setError("");
+              }}
+            >
+              ×
+            </button>
+          </header>
+          <div className="study-review-body">
+            {complete && !outgoing ? (
+              <div className="study-done">
+                <h1 className={doneForToday ? "study-done-label" : undefined}>
+                  {doneForToday ? "Done for today" : "Session complete"}
+                </h1>
+                <p>{countText(session.history.length, "card")} reviewed</p>
+                <p>
+                  {doneForToday
+                    ? "That is everything due. Nothing is waiting for you."
+                    : "Your reviews are saved on this device."}
+                </p>
+                {nextDue && (
+                  <p>
+                    Next review ·{" "}
+                    {new Date(nextDue.schedule.due).toLocaleString()}
+                  </p>
+                )}
+                <div className="study-actions">
+                  <button
+                    disabled={busy}
+                    onClick={() => {
+                      setSession(null);
+                      setToast(null);
+                    }}
+                  >
+                    Done
+                  </button>
+                  {cards.length > 0 && (
+                    <button disabled={busy} onClick={() => startReview(true)}>
+                      Study more
+                    </button>
+                  )}
+                </div>
+                <small>
+                  Study more shows cards that are not due yet. It never changes
+                  your schedule beyond normal grading.
+                </small>
+              </div>
+            ) : shownCard && shownEntry && shownText ? (
+              <div className="study-review-stack">
+                <article
+                  key={`${shownCard.id}-${shownAnswer}-${motion.nonce}`}
+                  className="study-flash"
+                  data-study-motion={motion.phase}
+                  onAnimationEnd={(event) => {
+                    if (!motion.locator || validLocator(motion.locator))
+                      motion.onAnimationEnd(event);
+                    else motion.invalidate();
+                  }}
+                  inert={!!outgoing}
+                  aria-hidden={outgoing ? true : undefined}
+                  tabIndex={-1}
+                  aria-label={shownAnswer ? "Card answer" : "Card question"}
+                >
+                  <span className="study-caption">
+                    {
+                      state.decks.find((item) => item.id === shownEntry.deckId)
+                        ?.title
+                    }
+                  </span>
+                  <div className="study-question">{shownText.front}</div>
+                  {shownAnswer ? (
+                    <>
+                      <div className="study-answer">{shownText.back}</div>
+                      {!outgoing &&
+                        shownEntry.source &&
+                        (onOpenSource || onOpenNote) && (
+                          <button
+                            className="study-source"
+                            onClick={() =>
+                              onOpenSource
+                                ? onOpenSource({
+                                    entryId: shownEntry.id,
+                                    cardId: shownCard.id,
+                                  })
+                                : onOpenNote?.(shownEntry.source!.noteId)
+                            }
+                          >
+                            Open in note
+                          </button>
+                        )}
+                    </>
+                  ) : (
+                    <>
+                      <button className="primary" onClick={reveal}>
+                        Show answer
+                      </button>
+                      <small>Space</small>
+                    </>
+                  )}
+                </article>
+                {answer && !outgoing && (
+                  <>
+                    <div className="study-grades">
+                      {grades.map(({ grade: value, label }, index) => (
+                        <button
+                          key={value}
+                          disabled={
+                            busy ||
+                            motion.phase !== "stable" ||
+                            conflict ||
+                            (!!pendingReview.current &&
+                              (!pendingReview.current.checked ||
+                                pendingReview.current.grade !== value))
+                          }
+                          onClick={() => void grade(value)}
+                        >
+                          <span>{label}</span>
+                          {state.preferences.showNextReview && (
+                            <small>
+                              <time
+                                dateTime={
+                                  nextSchedule(
+                                    shownCard.schedule,
+                                    value,
+                                    answerAt,
+                                  ).due
+                                }
+                              >
+                                {intervalText(
+                                  nextSchedule(
+                                    shownCard.schedule,
+                                    value,
+                                    answerAt,
+                                  ).due,
+                                  answerAt,
+                                )}
+                              </time>
+                            </small>
+                          )}
+                          <kbd>{index + 1}</kbd>
+                        </button>
+                      ))}
+                    </div>
+                    <p className="study-caption">
+                      {state.preferences.showNextReview
+                        ? "Press 1, 2, 3 or 4. The interval under each button is until the next review."
+                        : "Press 1, 2, 3 or 4."}
+                    </p>
+                  </>
+                )}
+              </div>
+            ) : (
+              <div className="study-empty">
+                <h2>This card is no longer available</h2>
+                <button onClick={() => setSession(null)}>Back to Study</button>
+              </div>
+            )}
+          </div>
+          {toast && lastEvent?.eventId === toast.eventId && (
+            <div
+              className="study-toast"
+              data-exiting={toastExit.exiting || undefined}
+              inert={toastExit.exiting}
+              aria-hidden={toastExit.exiting || undefined}
+              role="status"
+              {...toastInteractions}
+              onAnimationEnd={toastExit.onAnimationEnd}
+            >
+              <span>{toast.text}</span>
+              <button
+                disabled={busy || !!pendingReview.current}
+                onClick={() => void undo()}
+              >
+                Undo
+              </button>
+              <kbd>Ctrl+Z</kbd>
+            </div>
+          )}
+        </>
+      ) : (
+        <>
+          <header className="study-heading">
+            <div>
+              <h1>
+                {page === "progress" ? "Progress" : (deck?.title ?? "Study")}
+              </h1>
+              <span>
+                {page === "progress"
+                  ? "Study · Last 30 days"
+                  : deck
+                    ? `${countText(cards.length, "card")} · ${due.length} due`
+                    : state.decks.length
+                      ? `${countText(due.length, "card")} due today`
+                      : "No decks yet"}
+              </span>
+            </div>
+            <div className="study-actions">
+              {(deckId || page === "progress") && (
+                <button
+                  onClick={() => {
+                    setDeckId(null);
+                    setPage("decks");
+                  }}
+                >
+                  Back to Study
+                </button>
+              )}
+              {page !== "progress" && (
+                <>
+                  <button
+                    onClick={() =>
+                      openForm(deck ? { kind: "card" } : { kind: "deck" })
+                    }
+                  >
+                    {deck ? "Add card" : "New deck"}
+                  </button>
+                  {deck && (
+                    <>
+                      <button onClick={() => openForm({ kind: "import" })}>
+                        Import CSV
+                      </button>
+                      <button onClick={() => openForm({ kind: "export" })}>
+                        Export CSV
+                      </button>
+                    </>
+                  )}
+                  {due.length > 0 && (
+                    <button className="primary" onClick={() => startReview()}>
+                      Study {countText(due.length, "card")}
+                    </button>
+                  )}
+                  <button onClick={() => setPage("progress")}>Progress</button>
+                </>
+              )}
+            </div>
+          </header>
+          <div className="study-content">
+            {page === "progress" ? (
+              <>
+                <div className="study-stats">
+                  <Stat
+                    label="Remembered, last 30 days"
+                    value={
+                      metrics.remembered === null
+                        ? "No reviews yet"
+                        : `${Math.round(metrics.remembered * 100)}%`
+                    }
+                  />
+                  <Stat
+                    label="Reviews, last 30 days"
+                    value={metrics.reviewedLast30Days}
+                  />
+                  <Stat label="Cards" value={metrics.cardCount} />
+                </div>
+                <Forecast
+                  days={metrics.dueNext14Days}
+                  title="Due in the next 14 days"
+                />
+                <div className="study-card">
+                  <b>Remembered</b>
+                  <span>Good and Easy answers</span>
+                  {metrics.remembered === null ? (
+                    <p>No reviews yet</p>
+                  ) : (
+                    <>
+                      <meter
+                        min={0}
+                        max={1}
+                        value={metrics.remembered}
+                        aria-label="Remembered, last 30 days"
+                      />
+                      <span>
+                        {Math.round(metrics.remembered * 100)}% over the last 30
+                        days
+                      </span>
+                    </>
+                  )}
+                </div>
+                <div className="study-streak">
+                  {showStreak && (
+                    <span>Streak {countText(metrics.streak, "day")}</span>
+                  )}
+                  <button disabled={busy} onClick={toggleStreak}>
+                    {showStreak ? "Hide streak" : "Show streak"}
+                  </button>
+                </div>
+              </>
+            ) : deckId ? (
+              deck ? (
+                <>
+                  <div
+                    className="study-filters"
+                    role="group"
+                    aria-label="Filter cards"
+                  >
+                    {(["all", "due", "new", "learned"] as const).map(
+                      (value) => (
+                        <button
+                          key={value}
+                          aria-pressed={filter === value}
+                          onClick={() => setFilter(value)}
+                        >
+                          {value === "all"
+                            ? "All"
+                            : value === "due"
+                              ? "Due"
+                              : value === "new"
+                                ? "New"
+                                : "Learned"}{" "}
+                          {value === "all"
+                            ? cards.length
+                            : value === "due"
+                              ? due.length
+                              : cards.filter((card) =>
+                                  value === "new"
+                                    ? card.schedule.state === "new"
+                                    : card.schedule.state === "review",
+                                ).length}
+                        </button>
+                      ),
+                    )}
+                  </div>
+                  {cards.length === 0 ? (
+                    <div className="study-empty">
+                      <h2>No cards in this deck yet</h2>
+                      <p>
+                        Select words in a note and choose Make a card, or add
+                        one by hand.
+                      </p>
+                      <button
+                        className="primary"
+                        onClick={() => openForm({ kind: "card" })}
+                      >
+                        Add card
+                      </button>
+                    </div>
+                  ) : (
+                    <div className="study-table-wrap">
+                      <table className="study-table">
+                        <thead>
+                          <tr>
+                            <th>Card</th>
+                            <th>Type</th>
+                            <th>Due</th>
+                            <th>From</th>
+                            <th>
+                              <span className="study-sr">Actions</span>
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {cards
+                            .filter(
+                              (card) =>
+                                filter === "all" ||
+                                (filter === "due"
+                                  ? due.some((item) => item.id === card.id)
+                                  : filter === "new"
+                                    ? card.schedule.state === "new"
+                                    : card.schedule.state === "review"),
+                            )
+                            .map((card) => {
+                              const entry = entries.find(
+                                (item) => item.id === card.entryId,
+                              )!;
+                              return (
+                                <tr key={card.id}>
+                                  <td>
+                                    <button
+                                      className="study-text-button"
+                                      onClick={() =>
+                                        openForm({ kind: "card", entry })
+                                      }
+                                    >
+                                      {cardText(entry, card.key).front}
+                                    </button>
+                                  </td>
+                                  <td>{typeName(entry)}</td>
+                                  <td>
+                                    {Date.parse(card.schedule.due) <=
+                                    now.getTime()
+                                      ? "Today"
+                                      : dateText(card.schedule.due)}
+                                  </td>
+                                  <td>
+                                    {entry.source &&
+                                    (onOpenSource || onOpenNote) ? (
+                                      <button
+                                        className="study-source"
+                                        onClick={() =>
+                                          onOpenSource
+                                            ? onOpenSource({
+                                                entryId: entry.id,
+                                                cardId: card.id,
+                                              })
+                                            : onOpenNote?.(entry.source!.noteId)
+                                        }
+                                      >
+                                        Open in note
+                                      </button>
+                                    ) : entry.source ? (
+                                      "Linked note"
+                                    ) : (
+                                      "Added by hand"
+                                    )}
+                                  </td>
+                                  <td>
+                                    <Menu
+                                      label="Card menu"
+                                      actions={[
+                                        {
+                                          label: "Edit card",
+                                          onSelect: () =>
+                                            openForm({ kind: "card", entry }),
+                                        },
+                                        {
+                                          label: "Delete card",
+                                          danger: true,
+                                          onSelect: () =>
+                                            openForm({ kind: "delete", entry }),
+                                        },
+                                      ]}
+                                    />
+                                  </td>
+                                </tr>
+                              );
+                            })}
+                        </tbody>
+                      </table>
+                    </div>
+                  )}
+                </>
+              ) : (
+                <div className="study-empty">
+                  <h2>This deck is no longer available</h2>
+                  <button onClick={() => setDeckId(null)}>Back to Study</button>
+                </div>
+              )
+            ) : state.decks.length === 0 ? (
+              <div className="study-empty">
+                <h2>Make your first card from a note</h2>
+                <p>Select words in any note and choose Make a card.</p>
+                <button
+                  className="primary"
+                  onClick={() => openForm({ kind: "deck" })}
+                >
+                  New deck
+                </button>
+              </div>
+            ) : (
+              <>
+                <div className="study-stats">
+                  <Stat label="Due today" value={due.length} />
+                  <Stat
+                    label="Reviewed this week"
+                    value={metrics.reviewedThisWeek}
+                  />
+                  <Stat
+                    label="Remembered"
+                    value={
+                      metrics.remembered === null
+                        ? "No reviews yet"
+                        : `${Math.round(metrics.remembered * 100)}%`
+                    }
+                  />
+                </div>
+                <div className="study-table-wrap">
+                  <table className="study-table">
+                    <thead>
+                      <tr>
+                        <th>Deck</th>
+                        <th>Made from</th>
+                        <th>Cards</th>
+                        <th>Due</th>
+                        <th>Last studied</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {state.decks.map((item) => {
+                        const ownEntries = state.entries.filter(
+                          (entry) => entry.deckId === item.id,
+                        );
+                        const ownCards = state.cards.filter((card) =>
+                          ownEntries.some((entry) => entry.id === card.entryId),
+                        );
+                        const ownDue = due.filter((card) =>
+                          ownCards.some((own) => own.id === card.id),
+                        ).length;
+                        const last = state.events
+                          .filter(
+                            (event) =>
+                              !event.undoneAt &&
+                              ownCards.some((card) => card.id === event.cardId),
+                          )
+                          .map((event) => event.at)
+                          .sort()
+                          .at(-1);
+                        return (
+                          <tr key={item.id}>
+                            <td>
+                              <button
+                                className="study-text-button"
+                                onClick={() => {
+                                  setDeckId(item.id);
+                                  setFilter("all");
+                                }}
+                              >
+                                {item.title}
+                              </button>
+                            </td>
+                            <td>
+                              {ownEntries.some((entry) => entry.source)
+                                ? "Linked notes"
+                                : "Added by hand"}
+                            </td>
+                            <td>{ownCards.length}</td>
+                            <td>{ownDue ? `${ownDue} due` : "Nothing due"}</td>
+                            <td>{last ? dateText(last) : "Not studied yet"}</td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                </div>
+                <Forecast
+                  days={metrics.dueNext14Days.slice(0, 7)}
+                  title="Next 7 days"
+                />
+                {showStreak && (
+                  <p className="study-caption">
+                    Streak {countText(metrics.streak, "day")}
+                  </p>
+                )}
+              </>
+            )}
+          </div>
+        </>
+      )}
+      {form && (
+        <Dialog
+          title={
+            form.kind === "deck"
+              ? "New deck"
+              : form.kind === "delete"
+                ? "Delete card?"
+                : form.kind === "import"
+                  ? "Import cards"
+                  : form.kind === "export"
+                    ? "Export CSV"
+                    : form.entry
+                      ? "Edit card"
+                      : "Add card"
+          }
+          onClose={closeForm}
+          className={form.kind === "card" ? "study-card-dialog" : undefined}
+        >
+          {guardNotice && <p role="status">{guardNotice}</p>}
+          {error && (
+            <div className="error" role="alert">
+              {error}
+              {conflict && (
+                <button
+                  type="button"
+                  disabled={busy}
+                  onClick={() => void load(true)}
+                >
+                  Reload
+                </button>
+              )}
+            </div>
+          )}
+          {form.kind === "deck" && (
+            <DeckForm
+              busy={busy || conflict}
+              onDirty={markDirty}
+              onCancel={closeForm}
+              onSave={(title) => void addDeck(title)}
+            />
+          )}
+          {form.kind === "card" && (
+            <CardForm
+              entry={form.entry}
+              deckId={deckId ?? ""}
+              decks={state.decks}
+              busy={busy || conflict}
+              onDirty={markDirty}
+              onCancel={closeForm}
+              onSave={(entry) => void persistEntry(entry)}
+            />
+          )}
+          {form.kind === "delete" && (
+            <>
+              <p>This removes this entry and its review cards from the deck.</p>
+              <button disabled={busy} onClick={closeForm}>
+                Cancel
+              </button>
+              <button
+                disabled={busy || conflict}
+                className="danger"
+                onClick={async () => {
+                  const ownerTicket = ownerGeneration.current;
+                  const value = await commit(
+                    (state) => deleteEntry(state, form.entry.id),
+                    "Couldn’t delete this card. Try again.",
+                  );
+                  if (value && ownerCurrent(ownerTicket)) closeForm();
+                }}
+              >
+                Delete card
+              </button>
+            </>
+          )}
+          {form.kind === "import" && deck && (
+            <CsvImport
+              busy={busy || conflict}
+              onDirty={markDirty}
+              onCancel={closeForm}
+              onSave={async (source, count) => {
+                const ownerTicket = ownerGeneration.current;
+                const at = new Date();
+                const value = await commit(
+                  (state) => importStudyCsv(state, deck.id, source, at),
+                  "Couldn’t import these cards. Nothing was imported. Try again.",
+                );
+                if (value && ownerCurrent(ownerTicket)) {
+                  closeForm();
+                  setNotice(`Imported ${countText(count, "card")}`);
+                }
+              }}
+            />
+          )}
+          {form.kind === "export" && deck && (
+            <CsvExport
+              state={state}
+              deckId={deck.id}
+              title={deck.title}
+              onCancel={closeForm}
+            />
+          )}
+        </Dialog>
+      )}
+    </section>
+  );
+}
+
+function Stat({ label, value }: { label: string; value: string | number }) {
+  return (
+    <div className="study-stat">
+      <small>{label}</small>
+      <b>{value}</b>
+    </div>
+  );
+}
+function Forecast({
+  days,
+  title,
+}: {
+  days: { day: string; count: number }[];
+  title: string;
+}) {
+  const max = Math.max(1, ...days.map((day) => day.count));
+  return (
+    <div className="study-card">
+      <b>{title}</b>
+      <div className="study-forecast" role="list" aria-label={title}>
+        {days.map((day, index) => (
+          <div
+            key={day.day}
+            role="listitem"
+            aria-label={`${day.day}: ${countText(day.count, "review")}`}
+          >
+            <span>{day.count}</span>
+            <i style={{ height: `${(day.count / max) * 64}px` }} />
+            <small>{index === 0 ? "Today" : Number(day.day.slice(-2))}</small>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+function DeckForm({
+  busy,
+  onDirty,
+  onSave,
+  onCancel,
+}: {
+  busy: boolean;
+  onDirty: () => void;
+  onSave: (title: string) => void;
+  onCancel: () => void;
+}) {
+  const [title, setTitle] = useState("");
+  return (
+    <form
+      className="study-form"
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (title.trim()) onSave(title.trim());
+      }}
+    >
+      <label>
+        Name
+        <input
+          autoFocus
+          required
+          maxLength={500}
+          disabled={busy}
+          value={title}
+          onChange={(event) => {
+            onDirty();
+            setTitle(event.target.value);
+          }}
+        />
+      </label>
+      <div className="study-actions">
+        <button type="button" disabled={busy} onClick={onCancel}>
+          Cancel
+        </button>
+        <button className="primary" disabled={busy || !title.trim()}>
+          {busy ? "Creating…" : "Create deck"}
+        </button>
+      </div>
+    </form>
+  );
+}
+function CardForm({
+  entry,
+  deckId,
+  decks,
+  busy,
+  onDirty,
+  onSave,
+  onCancel,
+}: {
+  entry?: StudyEntry;
+  deckId: string;
+  decks: StudyState["decks"];
+  busy: boolean;
+  onDirty: () => void;
+  onSave: (entry: StudyEntry) => void;
+  onCancel: () => void;
+}) {
+  const [type, setType] = useState<StudyEntry["type"]>(entry?.type ?? "basic");
+  const [front, setFront] = useState(
+    entry && entry.type !== "cloze" ? entry.front : "",
+  );
+  const [back, setBack] = useState(
+    entry && entry.type !== "cloze" ? entry.back : "",
+  );
+  const [text, setText] = useState(entry?.type === "cloze" ? entry.text : "");
+  const [blanks, setBlanks] = useState(
+    entry?.type === "cloze" ? entry.blanks : [{ id: "blank1", answer: "" }],
+  );
+  const [selectedDeck, setSelectedDeck] = useState(entry?.deckId ?? deckId);
+  const [tags, setTags] = useState(entry?.tags.join(", ") ?? "");
+  const [validation, setValidation] = useState("");
+  const newId = useRef(crypto.randomUUID());
+  function submit() {
+    if (type === "cloze") {
+      if (
+        !text.trim() ||
+        !blanks.length ||
+        blanks.some(
+          (blank) =>
+            !/^[A-Za-z0-9_-]+$/.test(blank.id) ||
+            !blank.answer.trim() ||
+            text.split(`{{${blank.id}}}`).length !== 2,
+        ) ||
+        new Set(blanks.map((blank) => blank.id)).size !== blanks.length ||
+        [...text.matchAll(/\{\{([^{}]+)\}\}/g)].some(
+          (match) => !blanks.some((blank) => blank.id === match[1]),
+        )
+      ) {
+        setValidation(
+          "Give each blank a unique ID and answer, and use its {{ID}} once in the text.",
+        );
+        return;
+      }
+    } else if (!front.trim() || !back.trim()) {
+      setValidation("Enter a front and a back for this card.");
+      return;
+    }
+    if (!decks.some((deck) => deck.id === selectedDeck)) {
+      setValidation("Choose an available deck.");
+      return;
+    }
+    setValidation("");
+    const base = {
+      id: entry?.id ?? newId.current,
+      deckId: selectedDeck,
+      tags: [
+        ...new Set(
+          tags
+            .split(",")
+            .map((tag) => tag.trim())
+            .filter(Boolean),
+        ),
+      ],
+      source: entry?.source ?? null,
+      revision: entry ? entry.revision + 1 : 1,
+    };
+    onSave(
+      type === "cloze"
+        ? { ...base, type, text, blanks }
+        : { ...base, type, front, back },
+    );
+  }
+  return (
+    <form
+      className="study-form"
+      onSubmit={(event) => {
+        event.preventDefault();
+        submit();
+      }}
+    >
+      <div className="study-types" role="group" aria-label="Card type">
+        {(["basic", "reversed", "cloze"] as const).map((value) => (
+          <button
+            type="button"
+            key={value}
+            aria-pressed={type === value}
+            disabled={busy}
+            onClick={() => {
+              onDirty();
+              setType(value);
+            }}
+          >
+            {value === "cloze"
+              ? "Fill in the blank"
+              : value === "reversed"
+                ? "Reversed"
+                : "Basic"}
+          </button>
+        ))}
+      </div>
+      {type === "cloze" ? (
+        <>
+          <label>
+            Text
+            <textarea
+              autoFocus
+              required
+              disabled={busy}
+              value={text}
+              onChange={(event) => {
+                onDirty();
+                setText(event.target.value);
+              }}
+            />
+          </label>
+          <p className="study-caption">
+            Use a blank ID in double braces, such as {"{{capital}}"}. Each blank
+            becomes its own card.
+          </p>
+          {blanks.map((blank, index) => (
+            <div className="study-blank-fields" key={index}>
+              <label>
+                Blank ID {index + 1}
+                <input
+                  required
+                  disabled={busy}
+                  value={blank.id}
+                  onChange={(event) => {
+                    onDirty();
+                    setBlanks((items) =>
+                      items.map((item, position) =>
+                        position === index
+                          ? { ...item, id: event.target.value }
+                          : item,
+                      ),
+                    );
+                  }}
+                />
+              </label>
+              <label>
+                Answer {index + 1}
+                <input
+                  required
+                  disabled={busy}
+                  value={blank.answer}
+                  onChange={(event) => {
+                    onDirty();
+                    setBlanks((items) =>
+                      items.map((item, position) =>
+                        position === index
+                          ? { ...item, answer: event.target.value }
+                          : item,
+                      ),
+                    );
+                  }}
+                />
+              </label>
+              {blanks.length > 1 && (
+                <button
+                  type="button"
+                  disabled={busy}
+                  aria-label={`Remove blank ${index + 1}`}
+                  onClick={() => {
+                    onDirty();
+                    setBlanks((items) =>
+                      items.filter((_, position) => position !== index),
+                    );
+                  }}
+                >
+                  ×
+                </button>
+              )}
+            </div>
+          ))}
+          <button
+            type="button"
+            disabled={busy}
+            onClick={() => {
+              onDirty();
+              setBlanks((items) => [
+                ...items,
+                { id: `blank${items.length + 1}`, answer: "" },
+              ]);
+            }}
+          >
+            Add blank
+          </button>
+        </>
+      ) : (
+        <>
+          <label>
+            Front
+            <textarea
+              autoFocus
+              required
+              disabled={busy}
+              value={front}
+              onChange={(event) => {
+                onDirty();
+                setFront(event.target.value);
+              }}
+            />
+          </label>
+          <label>
+            Back
+            <textarea
+              required
+              disabled={busy}
+              value={back}
+              onChange={(event) => {
+                onDirty();
+                setBack(event.target.value);
+              }}
+            />
+          </label>
+          {type === "reversed" && (
+            <p className="study-caption">
+              Reviewed in both directions, as two cards with their own
+              schedules.
+            </p>
+          )}
+        </>
+      )}
+      <label>
+        Deck
+        <select
+          disabled={busy}
+          value={selectedDeck}
+          onChange={(event) => {
+            onDirty();
+            setSelectedDeck(event.target.value);
+          }}
+        >
+          {decks.map((deck) => (
+            <option key={deck.id} value={deck.id}>
+              {deck.title}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label>
+        Tags
+        <input
+          disabled={busy}
+          value={tags}
+          placeholder="Tags, separated by commas"
+          onChange={(event) => {
+            onDirty();
+            setTags(event.target.value);
+          }}
+        />
+      </label>
+      {entry?.source && (
+        <div className="study-card">
+          <span>Linked to a note</span>
+          <small>Cancel editing to open the saved card’s source.</small>
+        </div>
+      )}
+      {validation && (
+        <p role="alert" className="error">
+          {validation}
+        </p>
+      )}
+      <div className="study-actions">
+        <button type="button" disabled={busy} onClick={onCancel}>
+          Cancel
+        </button>
+        <button className="primary" disabled={busy}>
+          {busy ? "Saving…" : entry ? "Save card" : "Add card"}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+function CsvImport({
+  busy,
+  onDirty,
+  onCancel,
+  onSave,
+}: {
+  busy: boolean;
+  onDirty: () => void;
+  onCancel: () => void;
+  onSave: (source: string, count: number) => Promise<void>;
+}) {
+  const [preview, setPreview] = useState<{
+    source: string;
+    name: string;
+    rows: ReturnType<typeof parseStudyCsv>;
+  } | null>(null);
+  const [error, setError] = useState("");
+  const [reading, setReading] = useState(false);
+  async function read(file: File | undefined) {
+    if (!file) return;
+    setError("");
+    setPreview(null);
+    setReading(true);
+    try {
+      if (!/\.csv$/i.test(file.name) || file.size > 10_000_000)
+        throw new Error("Choose a CSV file up to 10 MB.");
+      const source = await trackOperation(() => file.text());
+      const rows = parseStudyCsv(source);
+      onDirty();
+      setPreview({ source, name: file.name, rows });
+    } catch (cause) {
+      setError(
+        cause instanceof Error
+          ? cause.message.replace(/^[a-z_]+: /, "")
+          : "Couldn’t read this file. Nothing was imported.",
+      );
+    } finally {
+      setReading(false);
+    }
+  }
+  return (
+    <div className="study-form">
+      <p>
+        CSV uses Front, Back and optional Tags columns. Tags use a JSON list,
+        such as ["biology"]. Imported rows become new Basic cards with fresh
+        schedules; card types and source links are not restored.
+      </p>
+      <label>
+        Choose CSV file
+        <input
+          type="file"
+          accept=".csv,text/csv"
+          disabled={busy || reading}
+          onChange={(event) => {
+            const file = event.target.files?.[0];
+            event.target.value = "";
+            void read(file);
+          }}
+        />
+      </label>
+      {reading && <p role="status">Reading file…</p>}
+      {error && (
+        <p role="alert" className="error">
+          {error} Nothing was imported.
+        </p>
+      )}
+      {preview && (
+        <div className="study-card">
+          <b>
+            {preview.name} · {countText(preview.rows.length, "card")}
+          </b>
+          <span>Preview · row 1</span>
+          <p>{preview.rows[0]!.front}</p>
+          <p>{preview.rows[0]!.back}</p>
+        </div>
+      )}
+      <div className="study-actions">
+        <button disabled={busy || reading} onClick={onCancel}>
+          Cancel
+        </button>
+        <button
+          className="primary"
+          disabled={busy || reading || !preview}
+          onClick={() => {
+            if (preview) void onSave(preview.source, preview.rows.length);
+          }}
+        >
+          {busy
+            ? "Importing…"
+            : preview
+              ? `Import ${countText(preview.rows.length, "card")}`
+              : "Import cards"}
+        </button>
+      </div>
+    </div>
+  );
+}
+function CsvExport({
+  state,
+  deckId,
+  title,
+  onCancel,
+}: {
+  state: StudyState;
+  deckId: string;
+  title: string;
+  onCancel: () => void;
+}) {
+  const [url, setUrl] = useState<string | null>(null);
+  const [error, setError] = useState("");
+  useEffect(
+    () => () => {
+      if (url) URL.revokeObjectURL(url);
+    },
+    [url],
+  );
+  return (
+    <div className="study-form">
+      <p>
+        Card text and tags only. Scheduling, card types and source links are not
+        retained. Imported rows become new Basic cards with fresh schedules.
+      </p>
+      <p>The file is not encrypted. Keep it somewhere safe.</p>
+      {error && (
+        <p className="error" role="alert">
+          {error}
+        </p>
+      )}
+      <div className="study-actions">
+        <button onClick={onCancel}>{url ? "Done" : "Cancel"}</button>
+        {url ? (
+          <a
+            href={url}
+            download={`${
+              title
+                .replace(/[<>:"/\\|?*\u0000-\u001f]/g, "-")
+                .replace(/[. ]+$/g, "")
+                .slice(0, 100) || "Study deck"
+            }.csv`}
+          >
+            Download CSV
+          </a>
+        ) : (
+          <button
+            className="primary"
+            onClick={() => {
+              try {
+                setUrl(
+                  URL.createObjectURL(
+                    new Blob([exportStudyCsv(state, deckId)], {
+                      type: "text/csv;charset=utf-8",
+                    }),
+                  ),
+                );
+              } catch {
+                setError(
+                  "Couldn’t export this deck. Your cards were not changed.",
+                );
+              }
+            }}
+          >
+            Export
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/ui/searchNavigation.ts b/web/src/ui/searchNavigation.ts
new file mode 100644
index 0000000..714efc2
--- /dev/null
+++ b/web/src/ui/searchNavigation.ts
@@ -0,0 +1,13 @@
+import type { SearchLocator } from "../search/results";
+export type ClipSearchOpenRequest = Readonly<{
+  requestId: string;
+  target: Extract<SearchLocator, { kind: "clip" }>;
+}>;
+export type CardSearchOpenRequest = Readonly<{
+  requestId: string;
+  target: Extract<SearchLocator, { kind: "card" }>;
+}>;
+export type SearchReaderResult = (
+  requestId: string,
+  status: "opened" | "blocked" | "unavailable",
+) => void;
diff --git a/web/src/ui/studySourceNavigation.ts b/web/src/ui/studySourceNavigation.ts
new file mode 100644
index 0000000..de383ff
--- /dev/null
+++ b/web/src/ui/studySourceNavigation.ts
@@ -0,0 +1,2 @@
+export type StudySourceOpenRequest = { entryId: string; cardId?: string };
+export type StudyEntryOpenRequest = { key: string; entryId: string };
diff --git a/web/src/ui/useStudyMotion.ts b/web/src/ui/useStudyMotion.ts
new file mode 100644
index 0000000..43c090d
--- /dev/null
+++ b/web/src/ui/useStudyMotion.ts
@@ -0,0 +1,280 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import type { AnimationEvent } from "react";
+
+/** Presentation identity only: never retain an entry, card, text or snapshot. */
+export type StudyMotionLocator = Readonly<{
+  epoch: string;
+  sessionId: string;
+  cardId: string;
+  entryId: string;
+  cardRevision: number;
+  entryRevision: number;
+  side: "question" | "answer";
+}>;
+type Phase =
+  "stable" | "reveal-exit" | "answer-enter" | "confirmed-exit" | "next-enter";
+type Presence = {
+  phase: Phase;
+  nonce: number;
+  locator: StudyMotionLocator | null;
+  eventId: string | null;
+};
+const duration: Record<Phase, number> = {
+  stable: 0,
+  "reveal-exit": 105,
+  "answer-enter": 150,
+  "confirmed-exit": 140,
+  "next-enter": 200,
+};
+const animation: Record<Phase, string> = {
+  stable: "",
+  "reveal-exit": "study-reveal-out",
+  "answer-enter": "study-answer-in",
+  "confirmed-exit": "study-card-out",
+  "next-enter": "study-next-in",
+};
+
+export function useStudyMotion(
+  covered: boolean,
+  isCurrent?: (locator: StudyMotionLocator) => boolean,
+) {
+  const [presence, setPresence] = useState<Presence>({
+    phase: "stable",
+    nonce: 0,
+    locator: null,
+    eventId: null,
+  });
+  const live = useRef(presence),
+    alive = useRef(true),
+    timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const validate = useRef(isCurrent);
+  validate.current = isCurrent;
+  function publish(next: Presence) {
+    live.current = next;
+    setPresence(next);
+  }
+  function clearTimer() {
+    if (timer.current !== null) clearTimeout(timer.current);
+    timer.current = null;
+  }
+  function invalidate() {
+    clearTimer();
+    const next: Presence = {
+      phase: "stable",
+      nonce: live.current.nonce + 1,
+      locator: null,
+      eventId: null,
+    };
+    live.current = next;
+    if (alive.current) setPresence(next);
+  }
+  function finish(nonce: number) {
+    const current = live.current;
+    if (!alive.current || nonce !== current.nonce || current.phase === "stable")
+      return;
+    if (
+      current.locator &&
+      validate.current &&
+      !validate.current(current.locator)
+    ) {
+      invalidate();
+      return;
+    }
+    clearTimer();
+    publish({
+      ...current,
+      nonce: current.nonce + (current.locator ? 1 : 0),
+      locator: null,
+      phase:
+        current.phase === "reveal-exit"
+          ? "answer-enter"
+          : current.phase === "confirmed-exit"
+            ? "next-enter"
+            : "stable",
+    });
+  }
+  function begin(
+    phase: "reveal-exit" | "confirmed-exit",
+    locator: StudyMotionLocator,
+    eventId: string | null = null,
+  ) {
+    if (covered || document.hidden) {
+      invalidate();
+      return;
+    }
+    if (
+      phase === "confirmed-exit" &&
+      eventId &&
+      live.current.eventId === eventId
+    )
+      return;
+    clearTimer();
+    publish({
+      phase,
+      locator: Object.freeze({ ...locator }),
+      eventId,
+      nonce: live.current.nonce + 1,
+    });
+  }
+  useLayoutEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+      clearTimer();
+      live.current = {
+        phase: "stable",
+        nonce: live.current.nonce + 1,
+        locator: null,
+        eventId: null,
+      };
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (covered) invalidate();
+  }, [covered]);
+  useEffect(() => {
+    const changed = () => {
+      if (document.hidden) invalidate();
+    };
+    document.addEventListener("visibilitychange", changed);
+    const observer = new MutationObserver(() => invalidate());
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-motion"],
+    });
+    const media =
+      typeof matchMedia === "function"
+        ? matchMedia("(prefers-reduced-motion: reduce)")
+        : null;
+    media?.addEventListener("change", invalidate);
+    return () => {
+      document.removeEventListener("visibilitychange", changed);
+      observer.disconnect();
+      media?.removeEventListener("change", invalidate);
+    };
+  }, []);
+  useEffect(() => {
+    if (presence.phase === "stable") return;
+    // Missing animation events settle presentation only; 34ms is a two-frame safety margin.
+    timer.current = setTimeout(
+      () => finish(presence.nonce),
+      duration[presence.phase] + 34,
+    );
+    return clearTimer;
+  }, [presence.nonce, presence.phase]);
+  function onAnimationEnd(event: AnimationEvent<HTMLElement>) {
+    if (
+      event.target !== event.currentTarget ||
+      event.animationName !== animation[presence.phase]
+    )
+      return;
+    finish(presence.nonce);
+  }
+  function enter() {
+    clearTimer();
+    publish({
+      phase: "answer-enter",
+      nonce: live.current.nonce + 1,
+      locator: null,
+      eventId: null,
+    });
+  }
+  return {
+    ...presence,
+    exiting:
+      presence.phase === "reveal-exit" || presence.phase === "confirmed-exit",
+    begin,
+    enter,
+    invalidate,
+    onAnimationEnd,
+  };
+}
+
+/** No dwell clock here: expiry is admitted exclusively by useStudyToastLifetime. */
+export function useStudyToastExit(
+  eventId: string | null,
+  remove: (id: string) => void,
+) {
+  const [exiting, setExiting] = useState<string | null>(null),
+    current = useRef(eventId),
+    timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  current.current = eventId;
+  const removeRef = useRef(remove);
+  removeRef.current = remove;
+  function finish(id: string) {
+    if (current.current === id) removeRef.current(id);
+  }
+  useLayoutEffect(() => {
+    setExiting(null);
+    return () => {
+      if (timer.current !== null) clearTimeout(timer.current);
+    };
+  }, [eventId]);
+  useEffect(() => {
+    if (!exiting || exiting !== eventId) return;
+    timer.current = setTimeout(() => finish(exiting), 174);
+    return () => {
+      if (timer.current !== null) clearTimeout(timer.current);
+    };
+  }, [exiting, eventId]);
+  return {
+    exiting: exiting !== null && exiting === eventId,
+    expire(id: string) {
+      if (current.current === id) setExiting(id);
+    },
+    onAnimationEnd(event: AnimationEvent<HTMLElement>) {
+      if (
+        event.target === event.currentTarget &&
+        event.animationName === "study-toast-out" &&
+        exiting === current.current &&
+        exiting
+      )
+        finish(exiting);
+    },
+  };
+}
+
+export function useStudyColdLoading(
+  hasSnapshot: boolean,
+  failed: boolean,
+  scopeKey = 0,
+) {
+  const [loader, setLoader] = useState(false),
+    [entering, setEntering] = useState(false),
+    ticket = useRef(0),
+    wasShown = useRef(false),
+    priorScope = useRef(scopeKey);
+  useLayoutEffect(() => {
+    const scope = ++ticket.current;
+    if (priorScope.current !== scopeKey) {
+      priorScope.current = scopeKey;
+      wasShown.current = false;
+    }
+    if (failed) {
+      setLoader(false);
+      setEntering(false);
+      wasShown.current = false;
+      return;
+    }
+    if (hasSnapshot) {
+      setLoader(false);
+      if (!wasShown.current) return;
+      wasShown.current = false;
+      setEntering(true);
+      const timer = setTimeout(() => {
+        if (ticket.current === scope) setEntering(false);
+      }, 184);
+      return () => clearTimeout(timer);
+    }
+    setEntering(false);
+    setLoader(false);
+    const timer = setTimeout(() => {
+      if (ticket.current === scope) {
+        wasShown.current = true;
+        setLoader(true);
+      }
+    }, 400);
+    return () => clearTimeout(timer);
+  }, [hasSnapshot, failed, scopeKey]);
+  return { loader, entering };
+}
diff --git a/web/src/ui/useStudyToastLifetime.ts b/web/src/ui/useStudyToastLifetime.ts
new file mode 100644
index 0000000..ccd8841
--- /dev/null
+++ b/web/src/ui/useStudyToastLifetime.ts
@@ -0,0 +1,124 @@
+import { useCallback, useLayoutEffect, useRef } from "react";
+import type { FocusEvent } from "react";
+
+const DWELL_MS = 5000;
+type Clock = {
+  id: string | null;
+  remaining: number;
+  started: number | null;
+  expired: boolean;
+};
+
+/** Presentation lifetime only: never grades, undoes, writes or changes review authority. */
+export function useStudyToastLifetime(
+  eventId: string | null,
+  onExpire: (eventId: string) => void,
+  covered = false,
+) {
+  const callback = useRef(onExpire),
+    active = useRef(false),
+    timer = useRef<ReturnType<typeof setTimeout> | null>(null),
+    reasons = useRef({ hover: false, focus: false, hidden: false, covered }),
+    clock = useRef<Clock>({
+      id: null,
+      remaining: DWELL_MS,
+      started: null,
+      expired: false,
+    });
+
+  const settle = useCallback(() => {
+    if (timer.current !== null) clearTimeout(timer.current);
+    timer.current = null;
+    const current = clock.current;
+    if (current.started !== null) {
+      current.remaining = Math.max(
+        0,
+        current.remaining - Math.max(0, performance.now() - current.started),
+      );
+      current.started = null;
+    }
+  }, []);
+
+  const reconcile = useCallback(() => {
+    settle();
+    const current = clock.current,
+      paused = reasons.current;
+    if (
+      !active.current ||
+      !current.id ||
+      current.expired ||
+      paused.hover ||
+      paused.focus ||
+      paused.hidden ||
+      paused.covered
+    )
+      return;
+    if (current.remaining <= 0) {
+      current.expired = true;
+      callback.current(current.id);
+      return;
+    }
+    current.started = performance.now();
+    timer.current = setTimeout(reconcile, current.remaining);
+  }, [settle]);
+
+  useLayoutEffect(() => {
+    callback.current = onExpire;
+  });
+  useLayoutEffect(() => {
+    active.current = true;
+    reasons.current.hidden = document.hidden;
+    const visibility = () => {
+      reasons.current.hidden = document.hidden;
+      reconcile();
+    };
+    document.addEventListener("visibilitychange", visibility);
+    reconcile();
+    return () => {
+      active.current = false;
+      settle();
+      document.removeEventListener("visibilitychange", visibility);
+    };
+  }, [reconcile, settle]);
+
+  useLayoutEffect(() => {
+    if (clock.current.id !== eventId) {
+      settle();
+      clock.current = {
+        id: eventId,
+        remaining: DWELL_MS,
+        started: null,
+        expired: false,
+      };
+      // An absent toast has no hover/focus surface. A replacement still on the
+      // same visible surface keeps its independent interaction pause reasons.
+      if (eventId === null) {
+        reasons.current.hover = false;
+        reasons.current.focus = false;
+      }
+    }
+    reasons.current.covered = covered;
+    reconcile();
+  }, [eventId, covered, reconcile, settle]);
+
+  const pause = useCallback(
+    (reason: "hover" | "focus", value: boolean) => {
+      reasons.current[reason] = value;
+      reconcile();
+    },
+    [reconcile],
+  );
+  return {
+    onMouseEnter: () => pause("hover", true),
+    onMouseLeave: () => pause("hover", false),
+    onFocus: () => pause("focus", true),
+    onBlur: (event: FocusEvent<HTMLElement>) => {
+      if (
+        event.relatedTarget instanceof Node &&
+        event.currentTarget.contains(event.relatedTarget)
+      )
+        return;
+      pause("focus", false);
+    },
+  };
+}
diff --git a/web/tests/ui/study-motion.test.tsx b/web/tests/ui/study-motion.test.tsx
new file mode 100644
index 0000000..c2c03ba
--- /dev/null
+++ b/web/tests/ui/study-motion.test.tsx
@@ -0,0 +1,420 @@
+import {
+  act,
+  fireEvent,
+  render,
+  renderHook,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { StudyView } from "../../src/ui/StudyView";
+import {
+  useStudyMotion,
+  useStudyColdLoading,
+  useStudyToastExit,
+} from "../../src/ui/useStudyMotion";
+import type { StudyMotionLocator } from "../../src/ui/useStudyMotion";
+import type {
+  CollectionsState,
+  CollectionsStore,
+} from "../../src/collections/contracts";
+import { emptyStudy } from "../../src/collections/validation";
+import { createDeck, saveEntry } from "../../src/study/model";
+import { checkClose } from "../../src/desktop/closeGuard";
+const owners = vi.hoisted(
+  () =>
+    new WeakMap<
+      object,
+      { closed: boolean; close: Set<() => void>; epoch: Set<() => void> }
+    >(),
+);
+const scope = vi.hoisted(() => ({ version: 0, locks: new Set<() => void>() }));
+vi.mock("../../src/account/session", () => ({
+  lockVersion: () => scope.version,
+  onLock: (fn: () => void) => {
+    scope.locks.add(fn);
+    return () => scope.locks.delete(fn);
+  },
+}));
+vi.mock("../../src/collections/store", () => ({
+  assertCollectionsAccess: (store: object) => {
+    if (owners.get(store)?.closed) throw Error("closed");
+  },
+  onCollectionsClose: (store: object, fn: () => void) => {
+    owners.get(store)!.close.add(fn);
+    return () => owners.get(store)!.close.delete(fn);
+  },
+  onCollectionsEpochChange: (store: object, fn: () => void) => {
+    owners.get(store)!.epoch.add(fn);
+    return () => owners.get(store)!.epoch.delete(fn);
+  },
+}));
+afterEach(() => {
+  vi.useRealTimers();
+  scope.locks.clear();
+  scope.version = 0;
+});
+const loc: StudyMotionLocator = {
+  epoch: "epoch",
+  sessionId: "session",
+  cardId: "card",
+  entryId: "entry",
+  cardRevision: 1,
+  entryRevision: 1,
+  side: "question",
+};
+function animation(element: Element, name: string) {
+  // React/JSDOM may select the prefixed DOM event during feature detection.
+  for (const type of ["animationend", "webkitAnimationEnd"]) {
+    const event = new Event(type, { bubbles: true });
+    Object.defineProperty(event, "animationName", { value: name });
+    fireEvent(element, event);
+  }
+}
+// Explicit boundary adapter: real encrypted browser evidence uses the genuine fixture instead.
+function fixture(count = 2) {
+  const at = new Date(Date.now() - 60000);
+  let study = createDeck(emptyStudy("UTC"), "Motion deck", at);
+  for (let i = 0; i < count; i++)
+    study = saveEntry(
+      study,
+      {
+        id: crypto.randomUUID(),
+        deckId: study.decks[0]!.id,
+        type: "basic",
+        front: `Question ${i + 1}`,
+        back: `Answer ${i + 1}`,
+        tags: [],
+        source: null,
+        revision: 1,
+      },
+      at,
+    );
+  let state: CollectionsState = {
+    version: 3,
+    epoch: crypto.randomUUID(),
+    revision: 0,
+    study,
+    journal: null,
+    clips: { items: [], receipts: [] },
+  };
+  const listeners = new Set<() => void>(),
+    owner = {
+      closed: false,
+      close: new Set<() => void>(),
+      epoch: new Set<() => void>(),
+    };
+  const store: CollectionsStore = {
+    read: vi.fn(async () => structuredClone(state)),
+    update: vi.fn(async (_token, change) => {
+      state = {
+        ...change(structuredClone(state)),
+        revision: state.revision + 1,
+      };
+      listeners.forEach((fn) => fn());
+      return structuredClone(state);
+    }),
+    subscribe: (fn) => {
+      if (owner.closed) throw Error("closed owner");
+      listeners.add(fn);
+      return () => listeners.delete(fn);
+    },
+    persistence: () => ({ status: "ready" }),
+    close: () => {
+      owner.closed = true;
+      owner.close.forEach((fn) => fn());
+    },
+  };
+  owners.set(store, owner);
+  const view = render(<StudyView store={store} />);
+  return {
+    store,
+    view,
+    value: () => state,
+    edit: () => {
+      const entry = state.study.entries.find(
+        (item) =>
+          item.type === "basic" &&
+          item.front === document.querySelector(".study-question")?.textContent,
+      );
+      if (!entry || entry.type !== "basic")
+        throw Error("No actual shown basic entry");
+      state = {
+        ...state,
+        revision: state.revision + 1,
+        study: saveEntry(
+          state.study,
+          {
+            ...entry,
+            revision: entry.revision + 1,
+            front: "Edited same card",
+          },
+          new Date(),
+        ),
+      };
+      listeners.forEach((fn) => fn());
+    },
+    erase: (notify = true) => {
+      state = {
+        ...state,
+        epoch: crypto.randomUUID(),
+        study: emptyStudy("UTC"),
+      };
+      owner.epoch.forEach((fn) => fn());
+      if (notify) listeners.forEach((fn) => fn());
+    },
+  };
+}
+async function start(count = 2) {
+  const f = fixture(count);
+  fireEvent.click(
+    await screen.findByRole("button", {
+      name: `Study ${count} card${count === 1 ? "" : "s"}`,
+    }),
+  );
+  return f;
+}
+async function reveal() {
+  fireEvent.click(screen.getByRole("button", { name: "Show answer" }));
+  const old = screen.getByRole("article", { hidden: true });
+  expect(old).toHaveAttribute("data-study-motion", "reveal-exit");
+  animation(old, "study-reveal-out");
+  const answer = await screen.findByRole("article", { name: "Card answer" });
+  animation(answer, "study-answer-in");
+}
+it("rejects grade clicks and numeric keys until actual answer entrance completes, with no queued grade", async () => {
+  const f = await start();
+  fireEvent.click(screen.getByRole("button", { name: "Show answer" }));
+  animation(screen.getByRole("article", { hidden: true }), "study-reveal-out");
+  const answer = await screen.findByRole("article", { name: "Card answer" });
+  const good = screen.getByRole("button", { name: /^Good/ });
+  const preview = good.querySelector("time")!.getAttribute("datetime");
+  expect(good).toBeDisabled();
+  fireEvent.click(good);
+  fireEvent.keyDown(answer, { key: "1" });
+  animation(answer, "study-next-in");
+  expect(good).toBeDisabled();
+  expect(f.store.update).not.toHaveBeenCalled();
+  animation(answer, "study-answer-in");
+  expect(good).toBeEnabled();
+  await act(async () => {});
+  expect(f.store.update).not.toHaveBeenCalled();
+  fireEvent.click(good);
+  await waitFor(() => expect(f.store.update).toHaveBeenCalledTimes(1));
+  expect(f.value().study.events).toHaveLength(1);
+  expect(f.value().study.events[0]!.after.schedule.due).toBe(preview);
+});
+it("keeps reveal and confirmed phases distinct, filters bubbled/wrong events and retires duplicate completions", () => {
+  vi.useFakeTimers();
+  const { result } = renderHook(() => useStudyMotion(false));
+  act(() => result.current.begin("reveal-exit", loc));
+  expect(result.current.phase).toBe("reveal-exit");
+  act(() => vi.advanceTimersByTime(138));
+  expect(result.current.phase).toBe("reveal-exit");
+  act(() => vi.advanceTimersByTime(1));
+  expect(result.current.phase).toBe("answer-enter");
+  act(() => vi.advanceTimersByTime(184));
+  expect(result.current.phase).toBe("stable");
+  act(() =>
+    result.current.begin("confirmed-exit", { ...loc, side: "answer" }, "event"),
+  );
+  act(() => vi.advanceTimersByTime(174));
+  expect(result.current.phase).toBe("next-enter");
+  act(() => vi.advanceTimersByTime(234));
+  expect(result.current.phase).toBe("stable");
+  act(() => result.current.begin("confirmed-exit", loc, "event"));
+  expect(result.current.phase).toBe("stable");
+});
+it("covered and explicit invalidation retire every pending presentation deadline", () => {
+  vi.useFakeTimers();
+  const { result, rerender } = renderHook(
+    ({ covered }) => useStudyMotion(covered),
+    { initialProps: { covered: false } },
+  );
+  act(() => result.current.begin("reveal-exit", loc));
+  rerender({ covered: true });
+  expect(result.current.locator).toBeNull();
+  act(() => vi.advanceTimersByTime(1000));
+  expect(result.current.phase).toBe("stable");
+  rerender({ covered: false });
+  act(() => result.current.begin("confirmed-exit", loc, "new"));
+  act(() => result.current.invalidate());
+  act(() => vi.advanceTimersByTime(1000));
+  expect(result.current.locator).toBeNull();
+});
+it("cold loading gates at400ms, cancels fast results, fades only an actually shown loader", () => {
+  vi.useFakeTimers();
+  const { result, rerender } = renderHook(
+    ({ ready, error }) => useStudyColdLoading(ready, error),
+    { initialProps: { ready: false, error: false } },
+  );
+  act(() => vi.advanceTimersByTime(399));
+  expect(result.current.loader).toBe(false);
+  rerender({ ready: true, error: false });
+  expect(result.current.entering).toBe(false);
+  rerender({ ready: false, error: false });
+  act(() => vi.advanceTimersByTime(400));
+  expect(result.current.loader).toBe(true);
+  rerender({ ready: true, error: false });
+  expect(result.current.entering).toBe(true);
+  act(() => vi.advanceTimersByTime(184));
+  expect(result.current.entering).toBe(false);
+  rerender({ ready: false, error: false });
+  rerender({ ready: false, error: true });
+  act(() => vi.advanceTimersByTime(1000));
+  expect(result.current.loader).toBe(false);
+});
+it("toast expiry adds only an exit and cannot remove a replacement event", () => {
+  vi.useFakeTimers();
+  const remove = vi.fn();
+  const { result, rerender } = renderHook(
+    ({ id }) => useStudyToastExit(id, remove),
+    { initialProps: { id: "a" } },
+  );
+  act(() => result.current.expire("a"));
+  expect(result.current.exiting).toBe(true);
+  act(() => vi.advanceTimersByTime(173));
+  expect(remove).not.toHaveBeenCalled();
+  rerender({ id: "b" });
+  act(() => vi.advanceTimersByTime(1000));
+  expect(remove).not.toHaveBeenCalled();
+  act(() => result.current.expire("b"));
+  act(() => vi.advanceTimersByTime(174));
+  expect(remove).toHaveBeenCalledExactlyOnceWith("b");
+});
+it("retires the old cold-loader gate when a replacement owner is still pending", () => {
+  vi.useFakeTimers();
+  const { result, rerender } = renderHook(
+    ({ scope }) => useStudyColdLoading(false, false, scope),
+    { initialProps: { scope: 1 } },
+  );
+  act(() => vi.advanceTimersByTime(399));
+  rerender({ scope: 2 });
+  act(() => vi.advanceTimersByTime(1));
+  expect(result.current.loader).toBe(false);
+  act(() => vi.advanceTimersByTime(399));
+  expect(result.current.loader).toBe(true);
+});
+it("captures real answerAt once, begins departure only after actual confirmation, and Undo interrupts", async () => {
+  const f = await start();
+  await reveal();
+  const times = [...document.querySelectorAll(".study-grades time")].map((el) =>
+    el.getAttribute("datetime"),
+  );
+  const answer = screen.getByRole("article", { name: "Card answer" });
+  animation(answer, "study-answer-in");
+  expect(
+    [...document.querySelectorAll(".study-grades time")].map((el) =>
+      el.getAttribute("datetime"),
+    ),
+  ).toEqual(times);
+  fireEvent.click(screen.getByRole("button", { name: /^Good/ }));
+  await waitFor(() =>
+    expect(
+      document.querySelector('[data-study-motion="confirmed-exit"]'),
+    ).not.toBeNull(),
+  );
+  expect(f.value().study.events).toHaveLength(1);
+  fireEvent.click(screen.getByRole("button", { name: "Undo" }));
+  await screen.findByRole("article", { name: "Card answer" });
+  expect(f.value().study.events[0]!.undoneAt).not.toBeNull();
+  expect(
+    document.querySelector('[data-study-motion="confirmed-exit"]'),
+  ).toBeNull();
+});
+it("does not animate success for an unconfirmed failed grade", async () => {
+  const f = await start();
+  await reveal();
+  vi.mocked(f.store.update).mockRejectedValueOnce(Error("unknown"));
+  fireEvent.click(screen.getByRole("button", { name: /^Good/ }));
+  await screen.findByText(
+    "Couldn’t confirm this review. Reload to check whether it was saved.",
+  );
+  expect(
+    document.querySelector('[data-study-motion="confirmed-exit"]'),
+  ).toBeNull();
+  expect(f.value().study.events).toHaveLength(0);
+});
+it("same-ID compatible body edit interrupts an outgoing locator immediately", async () => {
+  const f = await start();
+  fireEvent.click(screen.getByRole("button", { name: "Show answer" }));
+  act(f.edit);
+  await waitFor(() =>
+    expect(
+      document.querySelector('[data-study-motion="reveal-exit"]'),
+    ).toBeNull(),
+  );
+  expect(screen.queryByText("Question 1")).not.toBeInTheDocument();
+});
+it("direct close and account lock synchronously remove private answer and prevent late phase revival", async () => {
+  const f = await start();
+  await reveal();
+  act(() => f.store.close());
+  expect(screen.queryByText(/Answer [12]/)).not.toBeInTheDocument();
+  expect(screen.getByText("Study is no longer available.")).toBeVisible();
+  f.view.unmount();
+  await start();
+  await reveal();
+  act(() => {
+    scope.version++;
+    scope.locks.forEach((fn) => fn());
+  });
+  expect(screen.queryByText(/Answer [12]/)).not.toBeInTheDocument();
+});
+it("epoch replacement clears the answer before the genuine separate next-epoch read", async () => {
+  const f = await start();
+  await reveal();
+  act(() => f.erase(false));
+  expect(screen.queryByText(/Answer [12]/)).not.toBeInTheDocument();
+  await screen.findByRole("heading", {
+    name: "Make your first card from a note",
+  });
+});
+it("renders a closed owner truthfully without subscribing/reading it and uses only actual reopen callback", async () => {
+  const f = fixture();
+  await screen.findByRole("button", { name: "Study 2 cards" });
+  f.view.unmount();
+  f.store.close();
+  const count = vi.mocked(f.store.read).mock.calls.length,
+    reopen = vi.fn();
+  render(<StudyView store={f.store} onReopen={reopen} />);
+  expect(screen.getByText("Study is no longer available.")).toBeVisible();
+  expect(f.store.read).toHaveBeenCalledTimes(count);
+  fireEvent.click(screen.getByRole("button", { name: "Try again" }));
+  expect(reopen).toHaveBeenCalledOnce();
+  expect(f.store.read).toHaveBeenCalledTimes(count);
+});
+it("ignores child and wrong animation events and focuses only the actual revealed answer", async () => {
+  await start();
+  const button = screen.getByRole("button", { name: "Show answer" });
+  button.focus();
+  fireEvent.click(button);
+  const question = screen.getByRole("article", { hidden: true });
+  animation(question.querySelector(".study-question")!, "study-reveal-out");
+  animation(question, "study-card-out");
+  expect(question).toHaveAttribute("data-study-motion", "reveal-exit");
+  animation(question, "study-reveal-out");
+  const answer = await screen.findByRole("article", { name: "Card answer" });
+  expect(answer).toHaveFocus();
+  expect(answer).toHaveAttribute("data-study-motion", "answer-enter");
+});
+it("keeps actual operation tracking pending after synchronous private close and ignores its late result", async () => {
+  const f = await start();
+  await reveal();
+  let resolve!: (value: CollectionsState) => void;
+  vi.mocked(f.store.update).mockReturnValueOnce(
+    new Promise<CollectionsState>((yes) => {
+      resolve = yes;
+    }),
+  );
+  fireEvent.click(screen.getByRole("button", { name: /^Good/ }));
+  expect(checkClose()).toBe("draft");
+  act(() => f.store.close());
+  expect(screen.queryByText(/Answer [12]/)).not.toBeInTheDocument();
+  expect(checkClose()).toBe("working");
+  await act(async () => resolve(f.value()));
+  expect(screen.getByText("Study is no longer available.")).toBeVisible();
+  expect(
+    screen.queryByRole("button", { name: "Undo" }),
+  ).not.toBeInTheDocument();
+});
diff --git a/web/tests/ui/study-toast-lifetime.test.tsx b/web/tests/ui/study-toast-lifetime.test.tsx
new file mode 100644
index 0000000..ce45300
--- /dev/null
+++ b/web/tests/ui/study-toast-lifetime.test.tsx
@@ -0,0 +1,164 @@
+import { StrictMode } from "react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { useStudyToastLifetime } from "../../src/ui/useStudyToastLifetime";
+
+// Presentation clock only. These tests do not qualify review persistence or native input.
+let hidden = false;
+beforeEach(() => {
+  vi.useFakeTimers();
+  hidden = false;
+  vi.spyOn(document, "hidden", "get").mockImplementation(() => hidden);
+});
+afterEach(() => {
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+});
+function Probe({
+  id,
+  covered = false,
+  expire,
+}: {
+  id: string | null;
+  covered?: boolean;
+  expire: (id: string) => void;
+}) {
+  const interactions = useStudyToastLifetime(id, expire, covered);
+  return (
+    <div data-testid="toast" {...interactions}>
+      <button>Undo</button>
+      <button>Other toast action</button>
+    </div>
+  );
+}
+function advance(ms: number) {
+  act(() => vi.advanceTimersByTime(ms));
+}
+function visibility(value: boolean) {
+  hidden = value;
+  fireEvent(document, new Event("visibilitychange"));
+}
+
+it("expires once after exactly five seconds of unpaused presentation time", () => {
+  const expire = vi.fn();
+  const view = render(<Probe id="first" expire={expire} />);
+  advance(4999);
+  expect(expire).not.toHaveBeenCalled();
+  advance(1);
+  expect(expire).toHaveBeenCalledExactlyOnceWith("first");
+  view.rerender(<Probe id="first" expire={expire} />);
+  advance(10000);
+  expect(expire).toHaveBeenCalledTimes(1);
+});
+
+it("pointer leave cannot resume expiry while keyboard focus remains in the toast", () => {
+  const expire = vi.fn();
+  render(<Probe id="first" expire={expire} />);
+  advance(1000);
+  const toast = screen.getByTestId("toast"),
+    undo = screen.getByRole("button", { name: "Undo" });
+  fireEvent.mouseEnter(toast);
+  fireEvent.focus(undo);
+  fireEvent.mouseLeave(toast);
+  advance(9000);
+  expect(expire).not.toHaveBeenCalled();
+  fireEvent.blur(undo, { relatedTarget: document.body });
+  advance(3999);
+  expect(expire).not.toHaveBeenCalled();
+  advance(1);
+  expect(expire).toHaveBeenCalledExactlyOnceWith("first");
+});
+
+it("focus movement between descendants stays paused, and blur cannot override hover", () => {
+  const expire = vi.fn();
+  render(<Probe id="first" expire={expire} />);
+  const toast = screen.getByTestId("toast"),
+    undo = screen.getByRole("button", { name: "Undo" }),
+    other = screen.getByRole("button", { name: "Other toast action" });
+  fireEvent.focus(undo);
+  fireEvent.blur(undo, { relatedTarget: other });
+  fireEvent.focus(other, { relatedTarget: undo });
+  advance(7000);
+  expect(expire).not.toHaveBeenCalled();
+  fireEvent.mouseEnter(toast);
+  fireEvent.blur(other, { relatedTarget: document.body });
+  advance(7000);
+  expect(expire).not.toHaveBeenCalled();
+  fireEvent.mouseLeave(toast);
+  advance(5000);
+  expect(expire).toHaveBeenCalledExactlyOnceWith("first");
+});
+
+it("covered and document-hidden pauses overlap without resetting the remaining time", () => {
+  const expire = vi.fn();
+  const view = render(<Probe id="first" expire={expire} />);
+  advance(2000);
+  view.rerender(<Probe id="first" covered expire={expire} />);
+  visibility(true);
+  advance(9000);
+  view.rerender(<Probe id="first" expire={expire} />);
+  advance(9000);
+  expect(expire).not.toHaveBeenCalled();
+  visibility(false);
+  advance(2999);
+  expect(expire).not.toHaveBeenCalled();
+  advance(1);
+  expect(expire).toHaveBeenCalledExactlyOnceWith("first");
+});
+
+it("a new confirmed event replaces the old deadline but retains actual pause reasons", () => {
+  const expire = vi.fn();
+  const view = render(<Probe id="first" expire={expire} />);
+  advance(4000);
+  fireEvent.focus(screen.getByRole("button", { name: "Undo" }));
+  view.rerender(<Probe id="second" expire={expire} />);
+  advance(9000);
+  expect(expire).not.toHaveBeenCalled();
+  fireEvent.blur(screen.getByRole("button", { name: "Undo" }), {
+    relatedTarget: document.body,
+  });
+  advance(4999);
+  expect(expire).not.toHaveBeenCalled();
+  advance(1);
+  expect(expire).toHaveBeenCalledExactlyOnceWith("second");
+});
+
+it("null event and unmount retire pending callbacks, including after a prior pause", () => {
+  const expire = vi.fn();
+  const view = render(<Probe id="first" expire={expire} />);
+  fireEvent.mouseEnter(screen.getByTestId("toast"));
+  view.rerender(<Probe id={null} expire={expire} />);
+  advance(9000);
+  expect(expire).not.toHaveBeenCalled();
+  view.rerender(<Probe id="second" expire={expire} />);
+  advance(4999);
+  expect(expire).not.toHaveBeenCalled();
+  view.unmount();
+  advance(9000);
+  expect(expire).not.toHaveBeenCalled();
+});
+
+it("uses monotonic elapsed time when the wall clock changes", () => {
+  const expire = vi.fn();
+  render(<Probe id="first" expire={expire} />);
+  advance(2000);
+  vi.setSystemTime(Date.now() + 86_400_000);
+  fireEvent.mouseEnter(screen.getByTestId("toast"));
+  advance(7000);
+  fireEvent.mouseLeave(screen.getByTestId("toast"));
+  advance(2999);
+  expect(expire).not.toHaveBeenCalled();
+  advance(1);
+  expect(expire).toHaveBeenCalledExactlyOnceWith("first");
+});
+
+it("StrictMode setup/cleanup does not duplicate or cancel the current event deadline", () => {
+  const expire = vi.fn();
+  render(
+    <StrictMode>
+      <Probe id="first" expire={expire} />
+    </StrictMode>,
+  );
+  advance(5000);
+  expect(expire).toHaveBeenCalledExactlyOnceWith("first");
+});