Open where the doctor is, keyboard shortcuts, quiet motion and one offline line

docs/design-system/COMPONENTS.md

@@ -1094,7 +1094,7 @@ This generated snapshot is a local source-derived inventory. It does not assert
 | `SearchField`            | controls | yes   | yes                | inherited-global-root | yes            | no                 |               5 |
 | `SegmentedControl`       | controls | yes   | yes                | inherited-global-root | yes            | no                 |              33 |
 | `Select`                 | controls | yes   | yes                | inherited-global-root | yes            | no                 |              16 |
-| `Sheet`                  | layout   | yes   | yes                | inherited-global-root | yes            | no                 |             136 |
+| `Sheet`                  | layout   | yes   | yes                | inherited-global-root | yes            | no                 |             137 |
 | `Skeleton`               | feedback | yes   | yes                | inherited-global-root | yes            | no                 |               9 |
 | `SourceDesignationBadge` | source   | yes   | yes                | inherited-global-root | yes            | no                 |               4 |
 | `SourceProvenance`       | source   | yes   | yes                | inherited-global-root | yes            | no                 |               1 |

docs/design-system/adoption-manifest.json

@@ -2313,6 +2313,7 @@
         "src/components/first-nations/where-is-home.tsx",
         "src/components/forms/form-priority-facts-section.tsx",
         "src/components/in-page-nav/in-page-nav-header.tsx",
+        "src/components/keyboard-shortcuts/keyboard-shortcuts-sheet.tsx",
         "src/components/mode-kit/dial-sheet.tsx",
         "src/components/mode-nav/mode-nav.tsx",
         "src/components/my-day/my-day-calendar-page.tsx",
@@ -2455,6 +2456,7 @@
         "src/components/first-nations/where-is-home.tsx",
         "src/components/forms/form-priority-facts-section.tsx",
         "src/components/in-page-nav/in-page-nav-header.tsx",
+        "src/components/keyboard-shortcuts/keyboard-shortcuts-sheet.tsx",
         "src/components/mode-kit/dial-sheet.tsx",
         "src/components/mode-nav/mode-nav.tsx",
         "src/components/my-day/my-day-calendar-page.tsx",

src/app/(search-app)/layout.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 
 import { SharedSearchAppShell } from "@/components/clinical-dashboard/shared-search-app-shell";
+import { AppHelpersDeferred } from "@/components/app-helpers-deferred";
 import { PsychiatryVisitRecorder } from "@/components/psychiatry/psychiatry-visit-recorder";
 import { RecentPagesRecorderDeferred } from "@/components/recent-pages/recent-pages-recorder-deferred";
 import { WorkModeLaunchProvider } from "@/components/work-mode-launch/work-mode-launch-provider";
@@ -30,6 +31,8 @@ export default async function SearchAppLayout({ children }: { children: ReactNod
         <PsychiatryVisitRecorder />
         <RecentPagesRecorderDeferred />
       </SharedSearchAppShell>
+      {/* Outside the shell: on `/` the shell draws the dashboard in place of its children. */}
+      <AppHelpersDeferred />
     </WorkModeLaunchProvider>
   );
 }

src/app/globals.css

@@ -15,6 +15,9 @@
 @import "./work-mode-tokens.css";
 /* Clinical header glass and title band, in line with Work (12 Oct 2026). */
 @import "./clinical-mode.css";
+/* Quiet tab and row motion (12 Oct 2026). Here rather than in the search-app layout so
+   it adds no separate stylesheet to that layout's first download. */
+@import "./motion.css";
 
 @custom-variant dark (&:where(.dark, .dark *));
 @custom-variant pointer-fine (@media (pointer: fine));

src/app/motion.css

@@ -0,0 +1,60 @@
+/*
+ * Quiet, consistent motion (site recommendations, 12 Oct 2026, item 9).
+ *
+ * One small set, on the design system's motion tokens:
+ * - Tab content cross-fades in (--duration-quick, 150 ms) when a tab changes:
+ *   a role="tab" switch, or a move between two Work pages (Work's tabs are
+ *   pages). `src/components/motion/motion-enter.tsx` marks the new content with
+ *   `data-motion-enter`; only opacity moves, so nothing shifts position and no
+ *   layout or composer timing changes.
+ * - A tapped list row lights at once and lets go slowly (--duration-deliberate),
+ *   so the highlight is still visible as the next page opens.
+ * - Bottom sheets already rise with a soft settle: the shared Sheet's
+ *   `sheet-up` (250 ms on --ease-standard's curve). Nothing is added here.
+ *
+ * Everything is off under prefers-reduced-motion, and under the in-app Motion
+ * setting's "reduced"; the in-app "full" opts back in, matching the
+ * motion-safe variant in globals.css. The search composer is never targeted.
+ */
+
+@keyframes motion-enter-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html:not([data-motion="reduced"]) [data-motion-enter] {
+    animation: motion-enter-fade var(--duration-quick) var(--ease-standard) both;
+  }
+
+  html:not([data-motion="reduced"]) a.work-row,
+  html:not([data-motion="reduced"]) button.work-row {
+    transition: background-color var(--duration-deliberate) var(--ease-standard);
+  }
+
+  html:not([data-motion="reduced"]) a.work-row:active,
+  html:not([data-motion="reduced"]) button.work-row:active {
+    transition: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-motion="full"] [data-motion-enter] {
+    animation: motion-enter-fade var(--duration-quick) var(--ease-standard) both;
+  }
+
+  html[data-motion="full"] a.work-row,
+  html[data-motion="full"] button.work-row {
+    transition: background-color var(--duration-deliberate) var(--ease-standard);
+  }
+
+  html[data-motion="full"] a.work-row:active,
+  html[data-motion="full"] button.work-row:active {
+    transition: none;
+  }
+}

src/components/app-helpers-deferred.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+/*
+ * Open where you were, keyboard shortcuts and page motion (site recommendations,
+ * 12 Oct 2026). None of them draws anything a page needs to show, so they load
+ * just after the page instead of adding to every page's first download.
+ */
+const LastPlace = dynamic(() => import("@/components/last-place/last-place").then((m) => m.LastPlace), {
+  ssr: false,
+});
+const KeyboardShortcuts = dynamic(
+  () => import("@/components/keyboard-shortcuts/keyboard-shortcuts").then((m) => m.KeyboardShortcuts),
+  { ssr: false },
+);
+const MotionEnter = dynamic(() => import("@/components/motion/motion-enter").then((m) => m.MotionEnter), {
+  ssr: false,
+});
+
+export function AppHelpersDeferred() {
+  return (
+    <>
+      <LastPlace />
+      <KeyboardShortcuts />
+      <MotionEnter />
+    </>
+  );
+}

src/components/keyboard-shortcuts/keyboard-shortcuts-sheet.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Sheet } from "@/components/ui/sheet";
+import { shortcutRows } from "@/lib/keyboard-shortcuts";
+
+function isApple(): boolean {
+  if (typeof navigator === "undefined") return false;
+  return /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent);
+}
+
+const keyCap =
+  "inline-flex min-w-7 items-center justify-center rounded-md border border-[color:var(--border-strong)] bg-[color:var(--surface-raised)] px-1.5 font-sans text-xs font-semibold leading-6 text-[color:var(--text-heading)]";
+
+/**
+ * The short "Keyboard shortcuts" list for the whole app, opened with "?" on a
+ * Clinical page or from the Help page. Work pages keep their AI Search list,
+ * which adds the keys that work inside AI Search. Loaded only when first asked for.
+ */
+export function KeyboardShortcutsSheet({ open, onClose }: { readonly open: boolean; readonly onClose: () => void }) {
+  return (
+    <Sheet
+      open={open}
+      onClose={onClose}
+      title="Keyboard shortcuts"
+      description="On a computer, when you are not typing in a box."
+      closeLabel="Close keyboard shortcuts"
+      portal
+      testId="keyboard-shortcuts"
+    >
+      <dl className="m-0 grid gap-0 divide-y divide-[color:var(--border)]">
+        {shortcutRows(isApple()).map((row) => (
+          <div key={row.label} className="flex min-h-12 items-center justify-between gap-4 py-2">
+            <dt className="text-sm text-[color:var(--text-heading)]">{row.label}</dt>
+            <dd className="m-0 flex shrink-0 items-center gap-1.5 text-xs text-[color:var(--text-muted)]">
+              {row.keys.map((combo, index) => (
+                <span key={combo.join("+")} className="inline-flex items-center gap-1">
+                  {index > 0 ? <span className="px-0.5">or</span> : null}
+                  {combo.map((key) => (
+                    <kbd key={key} className={keyCap}>
+                      {key}
+                    </kbd>
+                  ))}
+                </span>
+              ))}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </Sheet>
+  );
+}

src/components/keyboard-shortcuts/keyboard-shortcuts.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
+
+import { OPEN_KEYBOARD_SHORTCUTS_EVENT, isTypingTarget, shortcutFor } from "@/lib/keyboard-shortcuts";
+
+const KeyboardShortcutsSheet = dynamic(
+  () => import("@/components/keyboard-shortcuts/keyboard-shortcuts-sheet").then((mod) => mod.KeyboardShortcutsSheet),
+  { ssr: false },
+);
+
+/** Another dialog is open over the page: its keys belong to it. */
+function dialogOpen(): boolean {
+  return document.querySelector('[role="dialog"][aria-modal="true"]') !== null;
+}
+
+function shown(element: Element): boolean {
+  return element.getClientRects().length > 0;
+}
+
+/**
+ * The page's own search box when the shared composer is not on screen (the
+ * Psychiatry and Medicines homes draw their own). Null when there is none.
+ */
+function pageSearchBox(): HTMLInputElement | null {
+  const composer = document.getElementById("global-search-input");
+  if (composer && shown(composer)) return null;
+  const boxes = document.querySelectorAll<HTMLInputElement>('#main-content input[type="search"]:not([disabled])');
+  for (const box of boxes) if (shown(box)) return box;
+  return null;
+}
+
+/**
+ * Keyboard shortcuts on a computer (site recommendations, 12 Oct 2026, item 5).
+ *
+ * Fills the gaps the page owners leave, and only on a screen with a mouse or
+ * trackpad, never while typing in a field and never over an open dialog:
+ * - "/" and Ctrl K (Command K on a Mac) go to a page's own search box where
+ *   the shared composer is not on screen. Where it is, its own shortcut
+ *   already does this; on Work pages AI Search owns both keys.
+ * - "?" shows the "Keyboard shortcuts" list on Clinical pages (Work pages show
+ *   their AI Search list). The Help page opens the same list.
+ * Esc already closes every sheet and dialog (the shared Sheet owns it).
+ *
+ * Page owners that handle a key mark it handled (`preventDefault`), so a key
+ * is never acted on twice. The composer's position and behaviour are untouched.
+ */
+export function KeyboardShortcuts() {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const finePointer = typeof window.matchMedia === "function" ? window.matchMedia("(pointer: fine)") : null;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented || !finePointer?.matches) return;
+      const action = shortcutFor(event);
+      if (!action || isTypingTarget(event.target) || dialogOpen()) return;
+      if (action === "help") {
+        event.preventDefault();
+        setOpen(true);
+        return;
+      }
+      const box = pageSearchBox();
+      if (!box) return;
+      event.preventDefault();
+      box.focus();
+    };
+    const onOpen = () => setOpen(true);
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener(OPEN_KEYBOARD_SHORTCUTS_EVENT, onOpen);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener(OPEN_KEYBOARD_SHORTCUTS_EVENT, onOpen);
+    };
+  }, []);
+
+  // Loaded on first ask, then kept, so closing can play the sheet's own exit.
+  const [asked, setAsked] = useState(false);
+  if (open && !asked) setAsked(true);
+  return asked ? <KeyboardShortcutsSheet open={open} onClose={() => setOpen(false)} /> : null;
+}