Add Dictionary Browse header redesign study with three directions

docs/branch-review-records/2149be40c9723dfdcf39c3831bee991df0e35a86a2f2426a566763d4c7df1916.record.md

@@ -0,0 +1 @@
+| 2026-08-18 | claude/header-redesign-mockups-3ms5kn | 430a58a98f9d8bedd21cbbf8e4e522381aa5c4c9 | Dictionary browse header rebuilt on the selected direction (production /dictionary/browse) | approved | verify:pr-local all 18 steps completed / none failed, check:bundle-budget within tolerance, Chromium 390px+1440px dark/light review; Playwright suite delegated to CI Production UI (browser-revision drift #255) |

docs/branch-review-records/599419ed3f41f0407ee7e9c44816a1c23691e853437cb963c33d0dcd860f4099.record.md

@@ -0,0 +1 @@
+| 2026-08-18 | claude/header-redesign-mockups-3ms5kn | a33ab97e5b55edcb26ace179471d97b7cf71118e | Dictionary Browse header redesign mockup study (design scratch) | approved | verify:pr-local (673 files/7276 tests pass), build, check:bundle-budget, check:rag:fixtures, check:medication-interactions, check:medication-lexicon-report, Chromium dark+light screenshot review |

docs/branch-review-records/5f15d81f006cc85637c12e37a6c1fc41c800de4a1f9f93e6f6d66745a57a5636.record.md

@@ -0,0 +1 @@
+| 2026-08-18 | claude/header-redesign-mockups-3ms5kn | 8083a20d6a3496ed154b927157bd621735886795 | Dictionary Browse header round two — letter dropdown + Abbreviations in Filters (design scratch) | approved | verify:pr-local all 18 steps completed / none failed, check:bundle-budget within tolerance, Chromium dark+light screenshot review |

docs/design-system/COMPONENTS.md

@@ -999,7 +999,7 @@ This generated snapshot is a local source-derived inventory. It does not assert
 | `RetrievalStateBanner` | answer | yes | yes | inherited-global-root | yes | no | 1 |
 | `SafeBoldText` | layout | yes | yes | inherited-global-root | yes | no | 8 |
 | `SearchField` | controls | yes | yes | no | yes | no | 0 |
-| `SegmentedControl` | controls | yes | yes | inherited-global-root | yes | no | 8 |
+| `SegmentedControl` | controls | yes | yes | inherited-global-root | yes | no | 9 |
 | `Select` | controls | yes | yes | inherited-global-root | yes | no | 2 |
 | `Sheet` | layout | yes | yes | inherited-global-root | yes | no | 25 |
 | `Skeleton` | feedback | yes | yes | inherited-global-root | yes | no | 6 |

docs/design-system/adoption-manifest.json

@@ -1454,6 +1454,7 @@
  "src/components/applications-launcher-page.tsx",
  "src/components/clinical-dashboard/patient-profile-panel.tsx",
  "src/components/clinical-dashboard/settings-dialog.tsx",
+ "src/components/dictionary/dictionary-catalogue-pages.tsx",
  "src/components/factsheets/factsheets-search-page.tsx",
  "src/components/in-page-nav/in-page-nav-header.tsx",
  "src/components/therapy-compass/screens/compare-screen.tsx",
@@ -1464,6 +1465,7 @@
  "src/components/applications-launcher-page.tsx",
  "src/components/clinical-dashboard/patient-profile-panel.tsx",
  "src/components/clinical-dashboard/settings-dialog.tsx",
+ "src/components/dictionary/dictionary-catalogue-pages.tsx",
  "src/components/factsheets/factsheets-search-page.tsx",
  "src/components/in-page-nav/in-page-nav-header.tsx",
  "src/components/therapy-compass/screens/compare-screen.tsx",

docs/site-map.md

@@ -1018,6 +1018,8 @@ This file is generated by `npm run docs:update` (or `npm run sitemap:update` dir
 - `/mockups/caring-contacts/templates` - Route discovered from app directory Source: `src/app/mockups/caring-contacts/templates/page.tsx`.
 - `/mockups/caring-contacts/templates/[pathwayId]` - Route discovered from app directory Source: `src/app/mockups/caring-contacts/templates/[pathwayId]/page.tsx`.
 - `/mockups/development` - Route discovered from app directory Source: `src/app/mockups/development/page.tsx`.
+- `/mockups/dictionary-browse-header` - Route discovered from app directory Source: `src/app/mockups/dictionary-browse-header/page.tsx`.
+- `/mockups/dictionary-browse-header-compact` - Route discovered from app directory Source: `src/app/mockups/dictionary-browse-header-compact/page.tsx`.
 - `/mockups/document-navigation-contract` - Route discovered from app directory Source: `src/app/mockups/document-navigation-contract/page.tsx`.
 - `/mockups/document-navigation-final` - Route discovered from app directory Source: `src/app/mockups/document-navigation-final/page.tsx`.
 - `/mockups/document-navigation-final-review` - Route discovered from app directory Source: `src/app/mockups/document-navigation-final-review/page.tsx`.

mockups/README.md

@@ -43,6 +43,42 @@ Some document-search mockups include live handoff routes (for example `document-
 - Full three-direction study: [`/mockups/privacy-page-directions`](../src/app/mockups/privacy-page-directions/page.tsx)
 - Static comps: [`public/mockups/privacy-page-redesign-2026-08/`](../public/mockups/privacy-page-redesign-2026-08/README.md)
 
+## Dictionary Browse header study (2026-08-18)
+
+Runnable study at [`/mockups/dictionary-browse-header`](../src/app/mockups/dictionary-browse-header/page.tsx). The
+brief was to drop the description line under **Browse terms** and the orphaned A–Z / Z–A sort pill that floats on its
+own row, then rebuild the header for the phone. All three directions move sort into the Filters sheet, where the other
+modes already keep it; they differ in how much letter navigation stays on screen.
+
+| Direction | Phone chrome before a result | Trade-off |
+| --------------------------- | ---------------------------- | ------------------------------------------------------------- |
+| 01 Compact title bar | 2 bands | Keeps both browse views explicit; least vertical saving |
+| 02 Fused letter rail (rec.) | 2 bands | Abbreviations becomes a rail chip rather than a separate view |
+| 03 Index rail + jump sheet | 1 band | Edge rail is a fine-motor target; jump sheet is the a11y path |
+
+The current header is rendered side by side at the top of the page for comparison. Shared mockup chrome is suppressed
+because each frame draws its own top bar, mode nav and composer.
+
+## Dictionary Browse header, round two (2026-08-18)
+
+Runnable study at [`/mockups/dictionary-browse-header-compact`](../src/app/mockups/dictionary-browse-header-compact/page.tsx),
+a follow-up to the round-one study above. Every version replaces the 27-chip horizontal letter rail with a **letter
+dropdown on phones** and moves **Abbreviations out of the header into the Filters sheet** beside sort.
+
+| Version | Phone chrome | Trade-off |
+| ------------------------------ | ------------ | ------------------------------------------------------------------- |
+| 01 Title bar + letter dropdown | 2 rows | Title still costs a row the mode nav already implies |
+| 02 Single fused row (rec.) | 1 row | An active filter chip costs the row its title and count at 390 px |
+| 03 Slim toolbar, title retired | 1 slim bar | Phone loses its visual page title; depends on the mode nav above it |
+
+Demoting a view switch into a sheet hides state, so each version surfaces an active **Abbreviations** chip beside the
+letter control. Without it the header would claim 96 terms while listing 24 abbreviations.
+
+Note for anyone extending these: the mockup stylesheet only emits Tailwind classes that some source actually uses, and
+no production file uses a bare `grid-cols-6` (only `xl:grid-cols-6`). The 26-letter pickers therefore pin
+`gridTemplateColumns` inline rather than depending on class generation — a bare `grid-cols-6` silently collapses them
+to one column.
+
 ## Phone Choose mode sheet YES comps
 
 Runnable study at [`/mockups/phone-mode-sheet-yes`](../src/app/mockups/phone-mode-sheet-yes/page.tsx): design review of the shipping phone mode sheet plus **YES 01 perfected** (sectioned clinical list — shipping recommendation) and YES 02 (icon deck alternate). Shared mockup chrome is suppressed so only the in-frame sheet is judged.

src/app/mockups/dictionary-browse-header-compact/page.tsx

@@ -0,0 +1,5 @@
+import { DictionaryBrowseHeaderCompactMockupsPage } from "@/components/dictionary-browse-header-compact-mockups";
+
+export default function DictionaryBrowseHeaderCompactMockupRoute() {
+ return <DictionaryBrowseHeaderCompactMockupsPage />;
+}

src/app/mockups/dictionary-browse-header/page.tsx

@@ -0,0 +1,5 @@
+import { DictionaryBrowseHeaderMockupsPage } from "@/components/dictionary-browse-header-mockups";
+
+export default function DictionaryBrowseHeaderMockupRoute() {
+ return <DictionaryBrowseHeaderMockupsPage />;
+}

src/app/mockups/mockups-layout-client.tsx

@@ -24,6 +24,9 @@ export function MockupsLayoutClient({ children }: { children: ReactNode }) {
  const isStandaloneDocumentFlow = pathname === "/mockups/document-search";
  const isUniversalSearchRedesignMockup = pathname === "/mockups/universal-search-redesign";
  const isSearchHeadingMockup = pathname === "/mockups/search-heading";
+ // Draws its own phone/desktop frames with a top bar, mode nav and composer in
+ // every frame, because the header under study sits directly beneath them.
+ const isDictionaryBrowseHeaderMockup = pathname.startsWith("/mockups/dictionary-browse-header");
  // Renders the results header inside its own device frames; the shared composer
  // would read as a second, real search bar over the study.
  const isSearchRefineAdaptiveMockup = pathname === "/mockups/search-refine-adaptive";
@@ -122,7 +125,8 @@ export function MockupsLayoutClient({ children }: { children: ReactNode }) {
  !isPinnedPlusMenuMockup &&
  !isPhoneModeSheetYesMockup &&
  !isSidebarLiveMockup &&
- !isCaringContactMockup
+ !isCaringContactMockup &&
+ !isDictionaryBrowseHeaderMockup
  }
  chromeVisible={
  !isSourceOverlayRedesignMockup &&
@@ -144,7 +148,8 @@ export function MockupsLayoutClient({ children }: { children: ReactNode }) {
  !isPinnedPlusMenuMockup &&
  !isPhoneModeSheetYesMockup &&
  !isSidebarLiveMockup &&
- !isCaringContactMockup
+ !isCaringContactMockup &&
+ !isDictionaryBrowseHeaderMockup
  }
  >
  {children}