Mockups: isolate calculator and therapy navigation concepts

docs/site-map.md

@@ -1020,6 +1020,9 @@ This file is generated by `npm run sitemap:update`. Run `npm run sitemap:check`
 - `/mockups/settings-search-clinical` - Route discovered from app directory Source: `src/app/mockups/settings-search-clinical/page.tsx`.
 - `/mockups/settings-search-general` - Route discovered from app directory Source: `src/app/mockups/settings-search-general/page.tsx`.
 - `/mockups/settings-search-privacy` - Route discovered from app directory Source: `src/app/mockups/settings-search-privacy/page.tsx`.
+- `/mockups/therapy-navigation-context` - Route discovered from app directory Source: `src/app/mockups/therapy-navigation-context/page.tsx`.
+- `/mockups/therapy-navigation-dock` - Route discovered from app directory Source: `src/app/mockups/therapy-navigation-dock/page.tsx`.
+- `/mockups/therapy-navigation-rail` - Route discovered from app directory Source: `src/app/mockups/therapy-navigation-rail/page.tsx`.
 - `/mockups/tools-action-workbench` - Route discovered from app directory Source: `src/app/mockups/tools-action-workbench/page.tsx`.
 - `/mockups/tools-clinical-lanes` - Route discovered from app directory Source: `src/app/mockups/tools-clinical-lanes/page.tsx`.
 - `/mockups/tools-command-center` - Route discovered from app directory Source: `src/app/mockups/tools-command-center/page.tsx`.

playwright.config.ts

@@ -17,13 +17,14 @@ const chromiumExecutablePath = process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH;
 // production matcher and tag exclusion.
 const productionSpecPattern =
   /.*(?:answer-progress-ui-smoke|ui-(smoke|stress|accessibility|tools|overlap|universal-search|specifiers|formulation|chrome-scroll|therapy-nav-scroll|phone-scroll|pwa|route-coverage|visual-artifacts|hydration))\.spec\.ts/;
-const mockupSpecPattern = /.*ui-(document-top-navigation-mockup|tools|tools-collapse|tools-task-directory)\.spec\.ts/;
+const mockupSpecPattern =
+  /.*ui-(document-top-navigation-mockup|therapy-navigation-mockup|tools|tools-collapse|tools-task-directory)\.spec\.ts/;
 const mockupTag = /@mockup/;
 
 export default defineConfig({
   testDir: "./tests",
   testMatch:
-    /.*(?:answer-progress-ui-smoke|ui-(smoke|stress|accessibility|document-top-navigation-mockup|tools|tools-collapse|tools-task-directory|overlap|universal-search|specifiers|formulation|chrome-scroll|therapy-nav-scroll|phone-scroll|pwa|route-coverage|visual-artifacts|hydration))\.spec\.ts/,
+    /.*(?:answer-progress-ui-smoke|ui-(smoke|stress|accessibility|document-top-navigation-mockup|therapy-navigation-mockup|tools|tools-collapse|tools-task-directory|overlap|universal-search|specifiers|formulation|chrome-scroll|therapy-nav-scroll|phone-scroll|pwa|route-coverage|visual-artifacts|hydration))\.spec\.ts/,
   timeout: 60_000,
   retries: 0,
   // Fail the run if a stray `test.only` is committed: otherwise it silently

src/app/mockups/calculators-bedside-sheet/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 
-import { CalculatorsBedsideSheetMockup } from "@/components/calculators";
+import { CalculatorsBedsideSheetMockup } from "@/components/calculator-mockups";
 
 export const metadata: Metadata = {
   title: "Calculators Bedside Sheet Mockup - Clinical KB",

src/app/mockups/calculators-clinical-console/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 
-import { CalculatorsClinicalConsoleMockup } from "@/components/calculators";
+import { CalculatorsClinicalConsoleMockup } from "@/components/calculator-mockups";
 
 export const metadata: Metadata = {
   title: "Calculators Clinical Console Mockup - Clinical KB",

src/app/mockups/calculators-directory-grid/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 
-import { CalculatorsDirectoryGridMockup } from "@/components/calculators";
+import { CalculatorsDirectoryGridMockup } from "@/components/calculator-mockups";
 
 export const metadata: Metadata = {
   title: "Calculators Directory Grid Mockup - Clinical KB",

src/app/mockups/calculators-guided-flow/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 
-import { CalculatorsGuidedFlowMockup } from "@/components/calculators";
+import { CalculatorsGuidedFlowMockup } from "@/components/calculator-mockups";
 
 export const metadata: Metadata = {
   title: "Calculators Guided Flow Mockup - Clinical KB",

src/app/mockups/calculators-popup-sheet/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 
-import { CalculatorsPopupSheetMockup } from "@/components/calculators";
+import { CalculatorsPopupSheetMockup } from "@/components/calculator-mockups";
 
 export const metadata: Metadata = {
   title: "Calculators Popup Sheet Mockup - Clinical KB",

src/app/mockups/calculators-search-page/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 
-import { CalculatorsSearchPage } from "@/components/calculators";
+import { CalculatorsSearchPageMockup } from "@/components/calculator-mockups";
 
 export const metadata: Metadata = {
   title: "Calculators Search Page Mockup - Clinical KB",
@@ -9,5 +9,5 @@ export const metadata: Metadata = {
 };
 
 export default function CalculatorsSearchPageMockupRoute() {
-  return <CalculatorsSearchPage />;
+  return <CalculatorsSearchPageMockup />;
 }

src/app/mockups/calculators-search/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 
-import { CalculatorsSearchDetailMockup } from "@/components/calculators";
+import { CalculatorsSearchDetailMockup } from "@/components/calculator-mockups";
 
 export const metadata: Metadata = {
   title: "Calculators Search Mockup - Clinical KB",

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

@@ -24,6 +24,9 @@ export function MockupsLayoutClient({ children }: { children: ReactNode }) {
   const isUniversalSearchRedesignMockup = pathname === "/mockups/universal-search-redesign";
   const isSearchHeadingMockup = pathname === "/mockups/search-heading";
   const isPhoneInPageNavigationMockup = pathname === "/mockups/phone-inpage-navigation";
+  // These studies render their own top bar and composer inside each device
+  // frame. Suppress shared chrome so it cannot be mistaken for the concept.
+  const isTherapyNavigationMockup = pathname.startsWith("/mockups/therapy-navigation-");
   // The calculators search page owns its own search input (top on desktop, docked
   // at the bottom on phones), so the shared universal composer is suppressed here
   // to avoid a second, floating search bar.
@@ -36,13 +39,15 @@ export function MockupsLayoutClient({ children }: { children: ReactNode }) {
           ? "tools"
           : isFavouritesPageMockup
             ? "favourites"
-            : isDocumentSearchMockup ||
-                isDocumentTopNavigationMockup ||
-                isDocumentNavigationPaneMockup ||
-                isDocumentPhoneTitleMockup ||
-                isDocumentNavigationContractMockup
-              ? "documents"
-              : "answer"
+            : isTherapyNavigationMockup
+              ? "therapy-compass"
+              : isDocumentSearchMockup ||
+                  isDocumentTopNavigationMockup ||
+                  isDocumentNavigationPaneMockup ||
+                  isDocumentPhoneTitleMockup ||
+                  isDocumentNavigationContractMockup
+                ? "documents"
+                : "answer"
       }
       searchComposerVisible={
         !isToolsPageMockup &&
@@ -54,9 +59,15 @@ export function MockupsLayoutClient({ children }: { children: ReactNode }) {
         !isDocumentNavigationContractMockup &&
         !isUniversalSearchRedesignMockup &&
         !isCalculatorsSearchPageMockup &&
-        !isPhoneInPageNavigationMockup
+        !isPhoneInPageNavigationMockup &&
+        !isTherapyNavigationMockup
+      }
+      chromeVisible={
+        !isSourceOverlayRedesignMockup &&
+        !isSearchHeadingMockup &&
+        !isPhoneInPageNavigationMockup &&
+        !isTherapyNavigationMockup
       }
-      chromeVisible={!isSourceOverlayRedesignMockup && !isSearchHeadingMockup && !isPhoneInPageNavigationMockup}
     >
       {children}
     </GlobalMockupSearchShell>

src/app/mockups/therapy-navigation-context/page.tsx

@@ -0,0 +1,13 @@
+import type { Metadata } from "next";
+
+import { TherapyNavigationContextMockups } from "@/components/therapy-navigation-mockups/context";
+
+export const metadata: Metadata = {
+  title: "Therapy navigation B · Context row - Clinical KB",
+  description:
+    "Direction B for the Therapy navigation panel: a two-line context row with a weighted stage track and a jump panel, shown at desktop, tablet and phone.",
+};
+
+export default function TherapyNavigationContextMockupPage() {
+  return <TherapyNavigationContextMockups />;
+}

src/app/mockups/therapy-navigation-dock/page.tsx

@@ -0,0 +1,13 @@
+import type { Metadata } from "next";
+
+import { TherapyNavigationDockMockups } from "@/components/therapy-navigation-mockups/dock";
+
+export const metadata: Metadata = {
+  title: "Therapy navigation C · Working-set dock - Clinical KB",
+  description:
+    "Direction C for the Therapy navigation panel: navigation as a readout of the therapy, basket and artifacts you are carrying, shown at desktop, tablet and phone.",
+};
+
+export default function TherapyNavigationDockMockupPage() {
+  return <TherapyNavigationDockMockups />;
+}

src/app/mockups/therapy-navigation-rail/page.tsx

@@ -0,0 +1,13 @@
+import type { Metadata } from "next";
+
+import { TherapyNavigationRailMockups } from "@/components/therapy-navigation-mockups/rail";
+
+export const metadata: Metadata = {
+  title: "Therapy navigation A · Grouped rail - Clinical KB",
+  description:
+    "Direction A for the Therapy navigation panel: three ranked groups on a rail, shown at desktop, tablet and phone.",
+};
+
+export default function TherapyNavigationRailMockupPage() {
+  return <TherapyNavigationRailMockups />;
+}