From b51196a6be1f1c611dba936e99ce43cd8fdeb810 Mon Sep 17 00:00:00 2001 From: BigSimmo <87357024+BigSimmo@users.noreply.github.com> Date: Sun, 5 Jul 2026 22:01:45 +0800 Subject: [PATCH 1/7] fix(ui): center mobile hero search and harden composer portal - Hide footer Evidence/Sources chips on phone hero composers; scope stays in + menu - Suppress bottom-dock composer flash until hero portal slot is ready - Increase composer action/send touch targets to 44px on phones - Update Playwright tests for scope menu, Answer home geometry, and stress fallback --- docs/site-map.md | 5 +- next.config.ts | 9 + scripts/generate-site-map.ts | 5 +- src/app/applications/layout.tsx | 11 - src/app/applications/loading.tsx | 5 - src/app/applications/page.tsx | 12 - src/app/globals.css | 23 +- src/components/ClinicalDashboard.tsx | 33 +-- src/components/applications-launcher-page.tsx | 166 ++----------- .../clinical-dashboard/dashboard-nav.tsx | 22 +- .../master-search-header.tsx | 221 ++---------------- .../clinical-dashboard/mode-action-popup.tsx | 17 +- tests/ui-accessibility.spec.ts | 9 +- tests/ui-smoke.spec.ts | 22 +- tests/ui-stress.spec.ts | 16 +- tests/ui-tools.spec.ts | 46 ++-- 16 files changed, 157 insertions(+), 465 deletions(-) delete mode 100644 src/app/applications/layout.tsx delete mode 100644 src/app/applications/loading.tsx delete mode 100644 src/app/applications/page.tsx diff --git a/docs/site-map.md b/docs/site-map.md index 65e6e3f52..b8a3dec8a 100644 --- a/docs/site-map.md +++ b/docs/site-map.md @@ -5,7 +5,6 @@ This file is generated by `npm run sitemap:update`. Run `npm run sitemap:check` ## Main product pages - `/` - Main Clinical KB shell. Source: `src/app/page.tsx`. -- `/applications` - Application and tool launcher. Source: `src/app/applications/page.tsx`. - `/differentials` - Differentials home and search surface. Source: `src/app/differentials/page.tsx`. - `/differentials/diagnoses` - Diagnosis stream. Source: `src/app/differentials/diagnoses/page.tsx`. - `/differentials/presentations` - Presentation workflow stream. Source: `src/app/differentials/presentations/page.tsx`. @@ -40,7 +39,7 @@ This file is generated by `npm run sitemap:update`. Run `npm run sitemap:check` | Favourites | `/favourites` | `/favourites?q=clozapine+set&focus=1&run=1` | Saved set and saved item detail render inside the favourites page surface. | | Differentials | `/differentials` | `/differentials?q=acute+confusion&focus=1&run=1` | `/differentials/diagnoses`, `/differentials/diagnoses/[slug]`, and `/differentials/presentations`. | | Medication | `/?mode=prescribing` | `/?mode=prescribing&q=acamprosate+renal+dose&focus=1&run=1` | `/medications/[slug]`; `/medications` redirects to medication mode. | -| Tools | `/?mode=tools` | `/?mode=tools&q=medications&focus=1&run=1` | `/applications` launcher and tool detail panels inside tools mode. | +| Tools | `/?mode=tools` | `/?mode=tools&q=medications&focus=1&run=1` | Tool launcher and detail panels inside dashboard tools mode (`/?mode=tools`). | ## Documents flow index @@ -601,5 +600,5 @@ This file is generated by `npm run sitemap:update`. Run `npm run sitemap:check` | Differentials | `src/app/differentials, src/lib/differentials.ts` | | Medications | `src/app/medications, src/components/clinical-dashboard/medication-prescribing-workspace.tsx` | | Documents | `src/app/documents, src/lib/document-flow-routes.ts` | -| Applications and tools | `src/app/applications, src/components/applications-launcher-page.tsx` | +| Tools | `src/components/applications-launcher-page.tsx` | | Mockups | `src/app/mockups` | diff --git a/next.config.ts b/next.config.ts index a89b5d615..4bb1b02e4 100644 --- a/next.config.ts +++ b/next.config.ts @@ -64,6 +64,15 @@ const nextConfig: NextConfig = { }, ]; }, + async redirects() { + return [ + { + source: "/applications", + destination: "/?mode=tools", + permanent: true, + }, + ]; + }, }; export default nextConfig; diff --git a/scripts/generate-site-map.ts b/scripts/generate-site-map.ts index 115c74068..3e60cb961 100644 --- a/scripts/generate-site-map.ts +++ b/scripts/generate-site-map.ts @@ -40,7 +40,6 @@ type SiteMapData = { const routeDescriptions: Record = { "/": "Main Clinical KB shell.", - "/applications": "Application and tool launcher.", "/differentials": "Differentials home and search surface.", "/differentials/diagnoses": "Diagnosis stream.", "/differentials/diagnoses/[slug]": "Differential diagnosis detail.", @@ -97,7 +96,7 @@ const routeOwnershipRows = [ ["Differentials", "src/app/differentials, src/lib/differentials.ts"], ["Medications", "src/app/medications, src/components/clinical-dashboard/medication-prescribing-workspace.tsx"], ["Documents", "src/app/documents, src/lib/document-flow-routes.ts"], - ["Applications and tools", "src/app/applications, src/components/applications-launcher-page.tsx"], + ["Tools", "src/components/applications-launcher-page.tsx"], ["Mockups", "src/app/mockups"], ] as const; @@ -279,7 +278,7 @@ function renderModePageIndex() { mode: "Tools", home: appModeHomeHref("tools"), search: appModeHomeHref("tools", { query: "medications", focus: true, run: true }), - detail: "`/applications` launcher and tool detail panels inside tools mode.", + detail: "Tool launcher and detail panels inside dashboard tools mode (`/?mode=tools`).", }, ]); } diff --git a/src/app/applications/layout.tsx b/src/app/applications/layout.tsx deleted file mode 100644 index c9a012540..000000000 --- a/src/app/applications/layout.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import type { ReactNode } from "react"; - -import { GlobalSearchShell } from "@/components/clinical-dashboard/global-search-shell"; - -export default function ApplicationsLayout({ children }: { children: ReactNode }) { - return ( - - {children} - - ); -} diff --git a/src/app/applications/loading.tsx b/src/app/applications/loading.tsx deleted file mode 100644 index 59334e70b..000000000 --- a/src/app/applications/loading.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { ModeHomeRouteLoading } from "@/components/mode-home-page-skeleton"; - -export default function Loading() { - return ; -} diff --git a/src/app/applications/page.tsx b/src/app/applications/page.tsx deleted file mode 100644 index 2f7fd01fd..000000000 --- a/src/app/applications/page.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import type { Metadata } from "next"; - -import { ApplicationsLauncherPage } from "@/components/applications-launcher-page"; - -export const metadata: Metadata = { - title: "Applications - Clinical KB", - description: "Launch Clinical KB applications, workflows, and connected clinical tools.", -}; - -export default function ApplicationsRoute() { - return ; -} diff --git a/src/app/globals.css b/src/app/globals.css index b1873a02d..f04f05ebd 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1101,14 +1101,14 @@ summary::-webkit-details-marker { .answer-footer-search-action, .answer-footer-search-send { - height: 2.05rem; - width: 2.05rem; + height: 2.75rem; + width: 2.75rem; } .answer-footer-search-action svg, .answer-footer-search-send svg { - height: 1rem; - width: 1rem; + height: 1.1rem; + width: 1.1rem; } } @@ -1172,14 +1172,21 @@ summary::-webkit-details-marker { @media (max-width: 430px) { .answer-footer-search-action, .answer-footer-search-send { - height: 2.05rem !important; - width: 2.05rem !important; + height: 2.75rem !important; + width: 2.75rem !important; + min-height: 2.75rem; + min-width: 2.75rem; } .answer-footer-search-action svg, .answer-footer-search-send svg { - height: 1rem; - width: 1rem; +<<<<<<< Updated upstream + height: 1.125rem; + width: 1.125rem; +======= + height: 1.1rem; + width: 1.1rem; +>>>>>>> Stashed changes } } diff --git a/src/components/ClinicalDashboard.tsx b/src/components/ClinicalDashboard.tsx index f73ad11e2..5e8d7c75b 100644 --- a/src/components/ClinicalDashboard.tsx +++ b/src/components/ClinicalDashboard.tsx @@ -1067,26 +1067,8 @@ function SettingsHelpFooter({ onClick }: { onClick: () => void }) { ); } -function ToolsHub({ - query, - onQueryChange, - desktopComposerSlotId, - showDetailPanel, -}: { - query: string; - onQueryChange: (nextQuery: string) => void; - desktopComposerSlotId?: string; - showDetailPanel?: boolean; -}) { - return ( - - ); +function ToolsHub({ query, desktopComposerSlotId }: { query: string; desktopComposerSlotId?: string }) { + return ; } type MobileSectionFabItem = { @@ -1587,7 +1569,7 @@ export function ClinicalDashboard({ const activeModeSearch = appModeSearchConfig(searchMode); const activeModeResultKind = appModeResultKind(searchMode); const requestQueryMode = appModeQueryMode(searchMode, queryMode); - const requestedRun = searchParams.get("run") === "1"; + // Record matches come from the owner-scoped registry API (mock fixtures in // demo mode); ranking stays client-side so live-typing behaviour is // unchanged and the registry is fetched once per active mode. @@ -2473,7 +2455,7 @@ export function ClinicalDashboard({ urlDocumentSearchBootstrappedRef.current = true; void executeSearch(searchText, mode, scopeFilters); // URL search intentionally runs once when the selected mode can execute. - // eslint-disable-next-line react-hooks/exhaustive-deps + }, [canRunSearch, answerThreadBootstrapped]); useEffect(() => { @@ -3958,12 +3940,7 @@ export function ClinicalDashboard({ }} /> ) : activeModeResultKind === "tools" ? ( - + ) : activeModeResultKind === "favourites" ? ( void; - onSubmit: () => void; - copy: LauncherCopy; - className?: string; -}) { - return ( -
) => { - event.preventDefault(); - onSubmit(); - }} - className={cn( - "grid min-h-13 grid-cols-[2.75rem_minmax(0,1fr)_2.75rem] items-center rounded-full border border-[color:var(--border)] bg-[color:var(--surface-lux)] text-left shadow-[var(--shadow-card)]", - className, - )} - > - - - - - -
- ); -} - function QuickActions({ onSelect, mobile }: { onSelect: (id: string) => void; mobile?: boolean }) { return (
void; desktopComposerSlotId?: string; - showDetailPanel?: boolean; className?: string; }; export function ApplicationsLauncherWorkspace({ - variant = "standalone", - query: controlledQuery, - onQueryChange, + query = "", desktopComposerSlotId, - showDetailPanel, className, }: ApplicationsLauncherWorkspaceProps) { - const [uncontrolledQuery, setUncontrolledQuery] = useState(""); const [activeFilter, setActiveFilter] = useState("all"); - const isDashboardTools = variant === "dashboard-tools"; - const [detailOpen, setDetailOpen] = useState(!isDashboardTools && showDetailPanel === true); - const copy = isDashboardTools ? dashboardToolsLauncherCopy : standaloneLauncherCopy; - const query = controlledQuery ?? uncontrolledQuery; + const composerSlotId = desktopComposerSlotId ?? modeHomeDesktopComposerSlotId; + const [selectedId, setSelectedId] = useState(() => initialToolId(query)); + const [detailOpen, setDetailOpen] = useState(false); + const copy = toolsLauncherCopy; const normalizedQuery = query.trim().toLowerCase(); - const queryDerivedId = useMemo(() => initialToolId(query), [query]); - const [selection, setSelection] = useState(() => ({ - queryKey: (controlledQuery ?? "").trim().toLowerCase(), - id: initialToolId(controlledQuery), - })); - const selectedId = selection.queryKey === normalizedQuery ? selection.id : queryDerivedId; + + useEffect(() => { + setSelectedId((current) => initialToolId(query) || current); + }, [query]); const filteredApps = useMemo(() => { return launcherApps.filter((app) => { @@ -940,34 +847,25 @@ export function ApplicationsLauncherWorkspace({ : (filteredApps[0]?.id ?? selectedId); const selectedApp = appById(effectiveSelectedId); - function updateQuery(nextQuery: string) { - if (controlledQuery === undefined) setUncontrolledQuery(nextQuery); - onQueryChange?.(nextQuery); - } - function openTool(id: string) { - setSelection({ queryKey: normalizedQuery, id }); + setSelectedId(id); setDetailOpen(true); } - function submitSearch() { - if (filteredApps[0]) openTool(filteredApps[0].id); - } - return (
@@ -975,7 +873,7 @@ export function ApplicationsLauncherWorkspace({

{copy.heading} @@ -985,22 +883,14 @@ export function ApplicationsLauncherWorkspace({

- {desktopComposerSlotId ? ( + {composerSlotId ? (
- ) : ( - - )} + ) : null} -
+
@@ -1012,7 +902,7 @@ export function ApplicationsLauncherWorkspace({
@@ -1055,15 +945,9 @@ export function ApplicationsLauncherWorkspace({

- {isDashboardTools ? ( - - ) : null} + setDetailOpen(false)} />
); } - -export function ApplicationsLauncherPage() { - return ; -} diff --git a/src/components/clinical-dashboard/dashboard-nav.tsx b/src/components/clinical-dashboard/dashboard-nav.tsx index bf6621cb6..4ffe93ec2 100644 --- a/src/components/clinical-dashboard/dashboard-nav.tsx +++ b/src/components/clinical-dashboard/dashboard-nav.tsx @@ -12,26 +12,8 @@ import { cn } from "@/components/ui-primitives"; import { useDismissableLayer } from "@/components/use-dismissable-layer"; import { type AppModeId, appModeSearchConfig } from "@/lib/app-modes"; -export function ToolsHub({ - query, - onQueryChange, - desktopComposerSlotId, - showDetailPanel, -}: { - query: string; - onQueryChange: (nextQuery: string) => void; - desktopComposerSlotId?: string; - showDetailPanel?: boolean; -}) { - return ( - - ); +export function ToolsHub({ query, desktopComposerSlotId }: { query: string; desktopComposerSlotId?: string }) { + return ; } type MobileSectionFabItem = { diff --git a/src/components/clinical-dashboard/master-search-header.tsx b/src/components/clinical-dashboard/master-search-header.tsx index 58761d61a..624214196 100644 --- a/src/components/clinical-dashboard/master-search-header.tsx +++ b/src/components/clinical-dashboard/master-search-header.tsx @@ -16,17 +16,13 @@ import { createPortal } from "react-dom"; import { Activity, - BadgeCheck, CalendarDays, Check, CheckCircle2, ChevronDown, FileText, Filter, - FolderOpen, - GitBranch, Globe2, - ListChecks, Loader2, Menu, MessageSquarePlus, @@ -328,7 +324,6 @@ export function MasterSearchHeader({ [documentById, selectedDocumentIds], ); const scopeSummary = selectedDocumentIds.length === 0 ? "All documents" : `${selectedDocumentIds.length} scoped`; - const footerScopeLabel = selectedDocumentIds.length === 0 ? "All sources" : `${selectedDocumentIds.length} scoped`; const scopePreview = useMemo( () => selectedDocuments @@ -675,6 +670,7 @@ export function MasterSearchHeader({ ); let frame: number | null = null; let retryTimeout: number | null = null; + let portalRetryCount = 0; const syncTarget = () => { if (retryTimeout !== null) { window.clearTimeout(retryTimeout); @@ -682,14 +678,16 @@ export function MasterSearchHeader({ } const slot = mediaQuery.matches ? document.getElementById(desktopHomeComposerSlotId) : null; if (slot) { + portalRetryCount = 0; if (host.parentNode !== slot) slot.appendChild(host); setDesktopHomeComposerHost(host); setDesktopHomeComposerActive(true); } else { host.parentNode?.removeChild(host); setDesktopHomeComposerActive(false); - if (mediaQuery.matches) { - retryTimeout = window.setTimeout(syncTarget, 50); + if (mediaQuery.matches && portalRetryCount < 24) { + portalRetryCount += 1; + retryTimeout = window.setTimeout(syncTarget, Math.min(40 * portalRetryCount, 400)); } } }; @@ -1017,144 +1015,6 @@ export function MasterSearchHeader({ ); } - // "open-evidence" is the one footer-chip action that isn't already a mode-action - // id — every other chip dispatches through the existing runModeAction handler - // (the same dispatcher the "+" action menu already uses for these ids). - type FooterChipActionId = ModeActionId | "open-evidence"; - - type FooterActionChip = { - icon: typeof Search; - shortLabel: string; - longLabel: string; - actionId: FooterChipActionId; - ariaLabel: string; - }; - - // The first ("trust") chip on the universal small-screen footer. Every mode gets - // one, mirroring Answer's "Evidence-based" chip in tone, each wired to a real - // action from that mode's own action menu rather than being decorative. - function footerTrustChipFor(mode: AppModeId): FooterActionChip | null { - switch (mode) { - case "answer": - return { - icon: ListChecks, - shortLabel: "Evidence", - longLabel: "Evidence-based", - actionId: "open-evidence", - ariaLabel: "Open evidence-backed answer sources", - }; - case "documents": - return { - icon: BadgeCheck, - shortLabel: "Indexed", - longLabel: "Fully indexed", - actionId: "documents-collections", - ariaLabel: "Open the indexed document library", - }; - case "forms": - return { - icon: BadgeCheck, - shortLabel: "Library", - longLabel: "Form library", - actionId: "forms-records", - ariaLabel: "Open the form library", - }; - case "services": - return { - icon: BadgeCheck, - shortLabel: "Verified", - longLabel: "Verified directory", - actionId: "services-records", - ariaLabel: "Browse verified service records", - }; - case "favourites": - return { - icon: BadgeCheck, - shortLabel: "Trusted", - longLabel: "Trusted picks", - actionId: "favourites-browse", - ariaLabel: "Browse trusted favourites", - }; - case "differentials": - return { - icon: ListChecks, - shortLabel: "Evidence", - longLabel: "Evidence-linked", - actionId: "differentials-evidence", - ariaLabel: "Review cited differential evidence", - }; - case "prescribing": - return { - icon: ShieldCheck, - shortLabel: "Safety", - longLabel: "Safety-checked", - actionId: "medication-safety", - ariaLabel: "Review contraindications and cautions", - }; - case "tools": - return { - icon: BadgeCheck, - shortLabel: "Curated", - longLabel: "Curated registry", - actionId: "tools-browse", - ariaLabel: "Browse the curated tools registry", - }; - default: - return null; - } - } - - // The second footer chip. Answer/Documents/Forms use the shared document-scope - // trigger instead (see hasScopeFooterChip below) since scope is a real, existing - // concept for those three modes. Tools has no genuine second action yet, so it - // intentionally ships with a single chip rather than an invented one. - function footerSecondaryChipFor(mode: AppModeId): FooterActionChip | null { - switch (mode) { - case "services": - return { - icon: ListChecks, - shortLabel: "Pathways", - longLabel: "Pathways", - actionId: "services-pathways", - ariaLabel: "Browse referral pathways", - }; - case "favourites": - return { - icon: FolderOpen, - shortLabel: "Sets", - longLabel: "Sets", - actionId: "favourites-sets", - ariaLabel: "Open saved sets", - }; - case "differentials": - return { - icon: GitBranch, - shortLabel: "Criteria", - longLabel: "Criteria", - actionId: "differentials-criteria", - ariaLabel: "Compare distinguishing criteria", - }; - case "prescribing": - return { - icon: Activity, - shortLabel: "Monitor", - longLabel: "Monitoring", - actionId: "medication-monitoring", - ariaLabel: "Review the monitoring schedule", - }; - default: - return null; - } - } - - function runFooterChipAction(actionId: FooterChipActionId) { - if (actionId === "open-evidence") { - onOpenEvidence?.(); - return; - } - runModeAction(actionId); - } - function renderSearchComposer(placement: "default" | "desktop-home") { const isDesktopHomeComposer = placement === "desktop-home"; const usesAnswerFooterStyle = isAnswerFooterComposer && !isDesktopHomeComposer; @@ -1162,23 +1022,22 @@ export function MasterSearchHeader({ const usesCompactMobileBottomStyle = usesMobileBottomStyle && mobileBottomSearchVariant === "compact"; const usesBottomComposerPlacement = usesAnswerFooterStyle || (usesMobileBottomStyle && usesPhoneSearchLayout); const usesFooterChipLayout = usesBottomComposerPlacement || isDesktopHomeComposer; +<<<<<<< Updated upstream +======= // Compact search views drop the chip row on phones so the pill can sit // flush with the bottom edge; the same actions stay reachable via the // integrated "+" menu. - const showFooterSearchChips = usesFooterChipLayout && !usesCompactMobileBottomStyle; + const showFooterSearchChips = + usesFooterChipLayout && + !usesCompactMobileBottomStyle && + !(isDesktopHomeComposer && usesPhoneSearchLayout); +>>>>>>> Stashed changes // The visible footer/hero composer chrome is universal; submit semantics still // come from the active mode. const usesSendAffordance = searchMode === "answer" || usesFooterChipLayout; const usesModeIdentityAffordance = usesBottomComposerPlacement && !usesSendAffordance; const ModeIdentityIcon = appModeIcons[searchMode]; const hasScopeFooterChip = searchMode === "answer" || searchMode === "documents" || searchMode === "forms"; - const trustFooterChip = footerTrustChipFor(searchMode); - const secondaryFooterChip = footerSecondaryChipFor(searchMode); - // Fallback icons here are never rendered — both are only used inside a JSX guard - // on the corresponding chip being non-null — but keep the icon variables typed as - // components (not `| null`) so the JSX below type-checks without a cast. - const TrustFooterChipIcon = trustFooterChip?.icon ?? BadgeCheck; - const SecondaryFooterChipIcon = secondaryFooterChip?.icon ?? ListChecks; const composerPlaceholder = usesMobileBottomStyle && searchMode === "differentials" ? "Search a presentation" : queryPlaceholder; @@ -1285,6 +1144,7 @@ export function MasterSearchHeader({ onModeSelect={selectAppModeById} onPlacementChange={setActionMenuPlacement} triggerClassName="answer-footer-search-action" + triggerRef={scopeSummaryRef} integrated={usesFooterChipLayout} /> @@ -1348,53 +1208,8 @@ export function MasterSearchHeader({ - {showFooterSearchChips && (trustFooterChip || hasScopeFooterChip || secondaryFooterChip) ? ( -
- {trustFooterChip ? ( - - ) : null} - {hasScopeFooterChip ? ( - - ) : null} - {!hasScopeFooterChip && secondaryFooterChip ? ( - - ) : null} -
- ) : null} - {/* Rendered as a sibling of the chip row (not nested inside it) so the "+" - menu's "Set scope" action still opens this popover on screens where the - chip row itself is hidden (documents/forms desktop widths) — the popover - still anchors correctly since the form stays position:fixed/sticky there. */} + {/* Scope popover is a form sibling so the "+" menu's "Set scope" action can + open it even when the footer chip row is not shown. */} {hasScopeFooterChip && !usesScopeSheet && scopeOpen ? (
- {desktopHomeComposerActive && desktopHomeComposerHost ? null : renderSearchComposer("default")} + {desktopHomeComposerActive && desktopHomeComposerHost + ? null + : desktopHomeComposerSlotId + ? null + : renderSearchComposer("default")} {desktopHomeComposerActive && desktopHomeComposerHost ? createPortal(renderSearchComposer("desktop-home"), desktopHomeComposerHost) : null} diff --git a/src/components/clinical-dashboard/mode-action-popup.tsx b/src/components/clinical-dashboard/mode-action-popup.tsx index 2e54e7886..9dd64da10 100644 --- a/src/components/clinical-dashboard/mode-action-popup.tsx +++ b/src/components/clinical-dashboard/mode-action-popup.tsx @@ -8,6 +8,7 @@ import { useState, type CSSProperties, type KeyboardEvent as ReactKeyboardEvent, + type Ref, } from "react"; import { BadgeCheck, @@ -245,6 +246,15 @@ export function modeActionItemsFor(setId: ModeActionSetId): readonly ModeActionI return modeActionSets[setId]; } +function assignTriggerRef(ref: Ref | undefined, element: HTMLButtonElement | null) { + if (!ref) return; + if (typeof ref === "function") { + ref(element); + return; + } + ref.current = element; +} + export function ModeActionPopup({ open, title, @@ -260,6 +270,7 @@ export function ModeActionPopup({ onModeSelect, onPlacementChange, triggerClassName, + triggerRef, integrated = false, }: { open: boolean; @@ -276,6 +287,7 @@ export function ModeActionPopup({ onModeSelect?: (modeId: string) => void; onPlacementChange?: (placement: ModeActionPlacement) => void; triggerClassName?: string; + triggerRef?: Ref; integrated?: boolean; }) { const buttonRef = useRef(null); @@ -643,7 +655,10 @@ export function ModeActionPopup({