diff --git a/.design-sync/config.json b/.design-sync/config.json
index f63a82a5f7..d022658458 100644
--- a/.design-sync/config.json
+++ b/.design-sync/config.json
@@ -58,7 +58,7 @@
     "SearchField": "about?: string; accept?: string; accessKey?: string; alt?: string; \"aria-activedescendant\"?: string; \"aria-atomic\"?: (boolean | \"true\" | \"false\"); \"aria-autocomplete\"?: \"none\" | \"list\" | \"inline\" | \"both\"; \"aria-braillelabel\"?: string; \"aria-brailleroledescription\"?: string; \"aria-busy\"?: (boolean | \"true\" | \"false\"); \"aria-checked\"?: boolean | \"true\" | \"false\" | \"mixed\"; \"aria-colcount\"?: number; \"aria-colindex\"?: number; \"aria-colindextext\"?: string; \"aria-colspan\"?: number; \"aria-controls\"?: string; \"aria-current\"?: boolean | \"true\" | \"false\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\"; \"aria-describedby\"?: string; \"aria-description\"?: string; \"aria-details\"?: string; \"aria-disabled\"?: (boolean | \"true\" | \"false\"); \"aria-dropeffect\"?: \"none\" | \"link\" | \"copy\" | \"execute\" | \"move\" | \"popup\"; \"aria-errormessage\"?: string; \"aria-expanded\"?: (boolean | \"true\" | \"false\"); \"aria-flowto\"?: string; \"aria-grabbed\"?: (boolean | \"true\" | \"false\"); \"aria-haspopup\"?: boolean | \"true\" | \"false\" | \"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\"; \"aria-hidden\"?: (boolean | \"true\" | \"false\"); \"aria-invalid\"?: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"; \"aria-keyshortcuts\"?: string; \"aria-label\"?: string; \"aria-labelledby\"?: string; \"aria-level\"?: number; \"aria-live\"?: \"off\" | \"assertive\" | \"polite\"; \"aria-modal\"?: (boolean | \"true\" | \"false\"); \"aria-multiline\"?: (boolean | \"true\" | \"false\"); \"aria-multiselectable\"?: (boolean | \"true\" | \"false\"); \"aria-orientation\"?: \"horizontal\" | \"vertical\"; \"aria-owns\"?: string; \"aria-placeholder\"?: string; \"aria-posinset\"?: number; \"aria-pressed\"?: boolean | \"true\" | \"false\" | \"mixed\"; \"aria-readonly\"?: (boolean | \"true\" | \"false\"); \"aria-relevant\"?: \"text\" | \"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text additions\" | \"text removals\"; \"aria-required\"?: (boolean | \"true\" | \"false\"); \"aria-roledescription\"?: string; \"aria-rowcount\"?: number; \"aria-rowindex\"?: number; \"aria-rowindextext\"?: string; \"aria-rowspan\"?: number; \"aria-selected\"?: (boolean | \"true\" | \"false\"); \"aria-setsize\"?: number; \"aria-sort\"?: \"none\" | \"ascending\" | \"descending\" | \"other\"; \"aria-valuemax\"?: number; \"aria-valuemin\"?: number; \"aria-valuenow\"?: number; \"aria-valuetext\"?: string; autoCapitalize?: \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}); autoComplete?: import(\"react\").HTMLInputAutoCompleteAttribute; autoCorrect?: string; autoFocus?: boolean; autoSave?: string; capture?: boolean | \"user\" | \"environment\"; checked?: boolean; children?: import(\"react\").ReactNode; className?: string; clearLabel?: string; color?: string; content?: string; contentEditable?: (boolean | \"true\" | \"false\") | \"inherit\" | \"plaintext-only\"; contextMenu?: string; dangerouslySetInnerHTML?: { __html: string | TrustedHTML; }; datatype?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; dir?: string; disabled?: boolean; draggable?: (boolean | \"true\" | \"false\"); enterKeyHint?: \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\"; error?: string; exportparts?: string; fieldClassName?: string; form?: string; formAction?: string | ((formData: FormData) => void | Promise<void>); formEncType?: string; formMethod?: string; formNoValidate?: boolean; formTarget?: string; height?: string | number; hidden?: boolean; hideLabel?: boolean; hint?: string; id?: string; inert?: boolean; inlist?: any; inputMode?: \"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\"; is?: string; itemID?: string; itemProp?: string; itemRef?: string; itemScope?: boolean; itemType?: string; label: string; lang?: string; list?: string; max?: string | number; maxLength?: number; min?: string | number; minLength?: number; multiple?: boolean; name?: string; nonce?: string; onAbort?: import(\"react\").ReactEventHandler<HTMLInputElement>; onAbortCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onAnimationEnd?: import(\"react\").AnimationEventHandler<HTMLInputElement>; onAnimationEndCapture?: import(\"react\").AnimationEventHandler<HTMLInputElement>; onAnimationIteration?: import(\"react\").AnimationEventHandler<HTMLInputElement>; onAnimationIterationCapture?: import(\"react\").AnimationEventHandler<HTMLInputElement>; onAnimationStart?: import(\"react\").AnimationEventHandler<HTMLInputElement>; onAnimationStartCapture?: import(\"react\").AnimationEventHandler<HTMLInputElement>; onAuxClick?: import(\"react\").MouseEventHandler<HTMLInputElement>; onAuxClickCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onBeforeInput?: import(\"react\").InputEventHandler<HTMLInputElement>; onBeforeInputCapture?: import(\"react\").InputEventHandler<HTMLInputElement>; onBeforeToggle?: import(\"react\").ToggleEventHandler<HTMLInputElement>; onBlur?: import(\"react\").FocusEventHandler<HTMLInputElement>; onBlurCapture?: import(\"react\").FocusEventHandler<HTMLInputElement>; onCanPlay?: import(\"react\").ReactEventHandler<HTMLInputElement>; onCanPlayCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onCanPlayThrough?: import(\"react\").ReactEventHandler<HTMLInputElement>; onCanPlayThroughCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onChange?: import(\"react\").ChangeEventHandler<HTMLInputElement, HTMLInputElement>; onChangeCapture?: import(\"react\").ChangeEventHandler<HTMLInputElement, Element>; onClear?: (() => void); onClick?: import(\"react\").MouseEventHandler<HTMLInputElement>; onClickCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onCompositionEnd?: import(\"react\").CompositionEventHandler<HTMLInputElement>; onCompositionEndCapture?: import(\"react\").CompositionEventHandler<HTMLInputElement>; onCompositionStart?: import(\"react\").CompositionEventHandler<HTMLInputElement>; onCompositionStartCapture?: import(\"react\").CompositionEventHandler<HTMLInputElement>; onCompositionUpdate?: import(\"react\").CompositionEventHandler<HTMLInputElement>; onCompositionUpdateCapture?: import(\"react\").CompositionEventHandler<HTMLInputElement>; onContextMenu?: import(\"react\").MouseEventHandler<HTMLInputElement>; onContextMenuCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onCopy?: import(\"react\").ClipboardEventHandler<HTMLInputElement>; onCopyCapture?: import(\"react\").ClipboardEventHandler<HTMLInputElement>; onCut?: import(\"react\").ClipboardEventHandler<HTMLInputElement>; onCutCapture?: import(\"react\").ClipboardEventHandler<HTMLInputElement>; onDoubleClick?: import(\"react\").MouseEventHandler<HTMLInputElement>; onDoubleClickCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onDrag?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragEnd?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragEndCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragEnter?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragEnterCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragExit?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragExitCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragLeave?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragLeaveCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragOver?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragOverCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragStart?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragStartCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDrop?: import(\"react\").DragEventHandler<HTMLInputElement>; onDropCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDurationChange?: import(\"react\").ReactEventHandler<HTMLInputElement>; onDurationChangeCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onEmptied?: import(\"react\").ReactEventHandler<HTMLInputElement>; onEmptiedCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onEncrypted?: import(\"react\").ReactEventHandler<HTMLInputElement>; onEncryptedCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onEnded?: import(\"react\").ReactEventHandler<HTMLInputElement>; onEndedCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onError?: import(\"react\").ReactEventHandler<HTMLInputElement>; onErrorCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onFocus?: import(\"react\").FocusEventHandler<HTMLInputElement>; onFocusCapture?: import(\"react\").FocusEventHandler<HTMLInputElement>; onGotPointerCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onGotPointerCaptureCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onInput?: import(\"react\").InputEventHandler<HTMLInputElement>; onInputCapture?: import(\"react\").InputEventHandler<HTMLInputElement>; onInvalid?: import(\"react\").ReactEventHandler<HTMLInputElement>; onInvalidCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onKeyDown?: import(\"react\").KeyboardEventHandler<HTMLInputElement>; onKeyDownCapture?: import(\"react\").KeyboardEventHandler<HTMLInputElement>; onKeyPress?: import(\"react\").KeyboardEventHandler<HTMLInputElement>; onKeyPressCapture?: import(\"react\").KeyboardEventHandler<HTMLInputElement>; onKeyUp?: import(\"react\").KeyboardEventHandler<HTMLInputElement>; onKeyUpCapture?: import(\"react\").KeyboardEventHandler<HTMLInputElement>; onLoad?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadedData?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadedDataCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadedMetadata?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadedMetadataCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadStart?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadStartCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLostPointerCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onLostPointerCaptureCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onMouseDown?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseDownCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseEnter?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseLeave?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseMove?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseMoveCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseOut?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseOutCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseOver?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseOverCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseUp?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseUpCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onPaste?: import(\"react\").ClipboardEventHandler<HTMLInputElement>; onPasteCapture?: import(\"react\").ClipboardEventHandler<HTMLInputElement>; onPause?: import(\"react\").ReactEventHandler<HTMLInputElement>; onPauseCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onPlay?: import(\"react\").ReactEventHandler<HTMLInputElement>; onPlayCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onPlaying?: import(\"react\").ReactEventHandler<HTMLInputElement>; onPlayingCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onPointerCancel?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerCancelCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerDown?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerDownCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerEnter?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerLeave?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerMove?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerMoveCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerOut?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerOutCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerOver?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerOverCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerUp?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerUpCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onProgress?: import(\"react\").ReactEventHandler<HTMLInputElement>; onProgressCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onRateChange?: import(\"react\").ReactEventHandler<HTMLInputElement>; onRateChangeCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onReset?: import(\"react\").ReactEventHandler<HTMLInputElement>; onResetCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onScroll?: import(\"react\").UIEventHandler<HTMLInputElement>; onScrollCapture?: import(\"react\").UIEventHandler<HTMLInputElement>; onScrollEnd?: import(\"react\").UIEventHandler<HTMLInputElement>; onScrollEndCapture?: import(\"react\").UIEventHandler<HTMLInputElement>; onSeeked?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSeekedCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSeeking?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSeekingCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSelect?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSelectCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onStalled?: import(\"react\").ReactEventHandler<HTMLInputElement>; onStalledCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSubmit?: import(\"react\").SubmitEventHandler<HTMLInputElement>; onSubmitCapture?: import(\"react\").SubmitEventHandler<HTMLInputElement>; onSuspend?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSuspendCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onTimeUpdate?: import(\"react\").ReactEventHandler<HTMLInputElement>; onTimeUpdateCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onToggle?: import(\"react\").ToggleEventHandler<HTMLInputElement>; onTouchCancel?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchCancelCapture?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchEnd?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchEndCapture?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchMove?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchMoveCapture?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchStart?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchStartCapture?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTransitionCancel?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionCancelCapture?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionEnd?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionEndCapture?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionRun?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionRunCapture?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionStart?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionStartCapture?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onVolumeChange?: import(\"react\").ReactEventHandler<HTMLInputElement>; onVolumeChangeCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onWaiting?: import(\"react\").ReactEventHandler<HTMLInputElement>; onWaitingCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onWheel?: import(\"react\").WheelEventHandler<HTMLInputElement>; onWheelCapture?: import(\"react\").WheelEventHandler<HTMLInputElement>; part?: string; pattern?: string; placeholder?: string; popover?: \"\" | \"auto\" | \"manual\" | \"hint\"; popoverTarget?: string; popoverTargetAction?: \"toggle\" | \"show\" | \"hide\"; prefix?: string; property?: string; radioGroup?: string; readOnly?: boolean; ref?: Ref<HTMLInputElement>; rel?: string; required?: boolean; resource?: string; results?: number; rev?: string; role?: import(\"react\").AriaRole; security?: string; size?: number; slot?: string; spellCheck?: (boolean | \"true\" | \"false\"); src?: string; step?: string | number; style?: import(\"react\").CSSProperties; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; tabIndex?: number; title?: string; translate?: \"yes\" | \"no\"; typeof?: string; unselectable?: \"off\" | \"on\"; value?: string | number | readonly string[]; vocab?: string; width?: string | number;",
     "SegmentedControl": "ariaDescribedBy?: string; ariaLabelledBy?: string; className?: string; label?: string; layout?: \"fit\" | \"equal\"; onChange: (value: string) => void; options: readonly SegmentedControlOption<string>[]; value: string;",
     "Select": "about?: string; accessKey?: string; \"aria-activedescendant\"?: string; \"aria-atomic\"?: (boolean | \"true\" | \"false\"); \"aria-autocomplete\"?: \"none\" | \"list\" | \"inline\" | \"both\"; \"aria-braillelabel\"?: string; \"aria-brailleroledescription\"?: string; \"aria-busy\"?: (boolean | \"true\" | \"false\"); \"aria-checked\"?: boolean | \"true\" | \"false\" | \"mixed\"; \"aria-colcount\"?: number; \"aria-colindex\"?: number; \"aria-colindextext\"?: string; \"aria-colspan\"?: number; \"aria-controls\"?: string; \"aria-current\"?: boolean | \"true\" | \"false\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\"; \"aria-describedby\"?: string; \"aria-description\"?: string; \"aria-details\"?: string; \"aria-disabled\"?: (boolean | \"true\" | \"false\"); \"aria-dropeffect\"?: \"none\" | \"link\" | \"copy\" | \"execute\" | \"move\" | \"popup\"; \"aria-errormessage\"?: string; \"aria-expanded\"?: (boolean | \"true\" | \"false\"); \"aria-flowto\"?: string; \"aria-grabbed\"?: (boolean | \"true\" | \"false\"); \"aria-haspopup\"?: boolean | \"true\" | \"false\" | \"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\"; \"aria-hidden\"?: (boolean | \"true\" | \"false\"); \"aria-invalid\"?: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"; \"aria-keyshortcuts\"?: string; \"aria-label\"?: string; \"aria-labelledby\"?: string; \"aria-level\"?: number; \"aria-live\"?: \"off\" | \"assertive\" | \"polite\"; \"aria-modal\"?: (boolean | \"true\" | \"false\"); \"aria-multiline\"?: (boolean | \"true\" | \"false\"); \"aria-multiselectable\"?: (boolean | \"true\" | \"false\"); \"aria-orientation\"?: \"horizontal\" | \"vertical\"; \"aria-owns\"?: string; \"aria-placeholder\"?: string; \"aria-posinset\"?: number; \"aria-pressed\"?: boolean | \"true\" | \"false\" | \"mixed\"; \"aria-readonly\"?: (boolean | \"true\" | \"false\"); \"aria-relevant\"?: \"text\" | \"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text additions\" | \"text removals\"; \"aria-required\"?: (boolean | \"true\" | \"false\"); \"aria-roledescription\"?: string; \"aria-rowcount\"?: number; \"aria-rowindex\"?: number; \"aria-rowindextext\"?: string; \"aria-rowspan\"?: number; \"aria-selected\"?: (boolean | \"true\" | \"false\"); \"aria-setsize\"?: number; \"aria-sort\"?: \"none\" | \"ascending\" | \"descending\" | \"other\"; \"aria-valuemax\"?: number; \"aria-valuemin\"?: number; \"aria-valuenow\"?: number; \"aria-valuetext\"?: string; autoCapitalize?: \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}); autoComplete?: string; autoCorrect?: string; autoFocus?: boolean; autoSave?: string; className?: string; color?: string; content?: string; contentEditable?: (boolean | \"true\" | \"false\") | \"inherit\" | \"plaintext-only\"; contextMenu?: string; dangerouslySetInnerHTML?: { __html: string | TrustedHTML; }; datatype?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; dir?: string; disabled?: boolean; draggable?: (boolean | \"true\" | \"false\"); enterKeyHint?: \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\"; error?: string; exportparts?: string; fieldClassName?: string; form?: string; hidden?: boolean; hideLabel?: boolean; hint?: string; id?: string; inert?: boolean; inlist?: any; inputMode?: \"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\"; is?: string; itemID?: string; itemProp?: string; itemRef?: string; itemScope?: boolean; itemType?: string; label: string; lang?: string; multiple?: boolean; name?: string; nonce?: string; onAbort?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onAbortCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onAnimationEnd?: import(\"react\").AnimationEventHandler<HTMLSelectElement>; onAnimationEndCapture?: import(\"react\").AnimationEventHandler<HTMLSelectElement>; onAnimationIteration?: import(\"react\").AnimationEventHandler<HTMLSelectElement>; onAnimationIterationCapture?: import(\"react\").AnimationEventHandler<HTMLSelectElement>; onAnimationStart?: import(\"react\").AnimationEventHandler<HTMLSelectElement>; onAnimationStartCapture?: import(\"react\").AnimationEventHandler<HTMLSelectElement>; onAuxClick?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onAuxClickCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onBeforeInput?: import(\"react\").InputEventHandler<HTMLSelectElement>; onBeforeInputCapture?: import(\"react\").InputEventHandler<HTMLSelectElement>; onBeforeToggle?: import(\"react\").ToggleEventHandler<HTMLSelectElement>; onBlur?: import(\"react\").FocusEventHandler<HTMLSelectElement>; onBlurCapture?: import(\"react\").FocusEventHandler<HTMLSelectElement>; onCanPlay?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onCanPlayCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onCanPlayThrough?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onCanPlayThroughCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onChange?: import(\"react\").ChangeEventHandler<HTMLSelectElement, HTMLSelectElement>; onChangeCapture?: import(\"react\").ChangeEventHandler<HTMLSelectElement, Element>; onClick?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onClickCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onCompositionEnd?: import(\"react\").CompositionEventHandler<HTMLSelectElement>; onCompositionEndCapture?: import(\"react\").CompositionEventHandler<HTMLSelectElement>; onCompositionStart?: import(\"react\").CompositionEventHandler<HTMLSelectElement>; onCompositionStartCapture?: import(\"react\").CompositionEventHandler<HTMLSelectElement>; onCompositionUpdate?: import(\"react\").CompositionEventHandler<HTMLSelectElement>; onCompositionUpdateCapture?: import(\"react\").CompositionEventHandler<HTMLSelectElement>; onContextMenu?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onContextMenuCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onCopy?: import(\"react\").ClipboardEventHandler<HTMLSelectElement>; onCopyCapture?: import(\"react\").ClipboardEventHandler<HTMLSelectElement>; onCut?: import(\"react\").ClipboardEventHandler<HTMLSelectElement>; onCutCapture?: import(\"react\").ClipboardEventHandler<HTMLSelectElement>; onDoubleClick?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onDoubleClickCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onDrag?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragEnd?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragEndCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragEnter?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragEnterCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragExit?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragExitCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragLeave?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragLeaveCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragOver?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragOverCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragStart?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragStartCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDrop?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDropCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDurationChange?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onDurationChangeCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onEmptied?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onEmptiedCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onEncrypted?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onEncryptedCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onEnded?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onEndedCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onError?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onErrorCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onFocus?: import(\"react\").FocusEventHandler<HTMLSelectElement>; onFocusCapture?: import(\"react\").FocusEventHandler<HTMLSelectElement>; onGotPointerCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onGotPointerCaptureCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onInput?: import(\"react\").InputEventHandler<HTMLSelectElement>; onInputCapture?: import(\"react\").InputEventHandler<HTMLSelectElement>; onInvalid?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onInvalidCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onKeyDown?: import(\"react\").KeyboardEventHandler<HTMLSelectElement>; onKeyDownCapture?: import(\"react\").KeyboardEventHandler<HTMLSelectElement>; onKeyPress?: import(\"react\").KeyboardEventHandler<HTMLSelectElement>; onKeyPressCapture?: import(\"react\").KeyboardEventHandler<HTMLSelectElement>; onKeyUp?: import(\"react\").KeyboardEventHandler<HTMLSelectElement>; onKeyUpCapture?: import(\"react\").KeyboardEventHandler<HTMLSelectElement>; onLoad?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadedData?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadedDataCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadedMetadata?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadedMetadataCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadStart?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadStartCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLostPointerCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onLostPointerCaptureCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onMouseDown?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseDownCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseEnter?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseLeave?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseMove?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseMoveCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseOut?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseOutCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseOver?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseOverCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseUp?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseUpCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onPaste?: import(\"react\").ClipboardEventHandler<HTMLSelectElement>; onPasteCapture?: import(\"react\").ClipboardEventHandler<HTMLSelectElement>; onPause?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onPauseCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onPlay?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onPlayCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onPlaying?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onPlayingCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onPointerCancel?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerCancelCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerDown?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerDownCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerEnter?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerLeave?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerMove?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerMoveCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerOut?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerOutCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerOver?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerOverCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerUp?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerUpCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onProgress?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onProgressCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onRateChange?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onRateChangeCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onReset?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onResetCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onScroll?: import(\"react\").UIEventHandler<HTMLSelectElement>; onScrollCapture?: import(\"react\").UIEventHandler<HTMLSelectElement>; onScrollEnd?: import(\"react\").UIEventHandler<HTMLSelectElement>; onScrollEndCapture?: import(\"react\").UIEventHandler<HTMLSelectElement>; onSeeked?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSeekedCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSeeking?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSeekingCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSelect?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSelectCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onStalled?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onStalledCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSubmit?: import(\"react\").SubmitEventHandler<HTMLSelectElement>; onSubmitCapture?: import(\"react\").SubmitEventHandler<HTMLSelectElement>; onSuspend?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSuspendCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onTimeUpdate?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onTimeUpdateCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onToggle?: import(\"react\").ToggleEventHandler<HTMLSelectElement>; onTouchCancel?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchCancelCapture?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchEnd?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchEndCapture?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchMove?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchMoveCapture?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchStart?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchStartCapture?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTransitionCancel?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionCancelCapture?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionEnd?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionEndCapture?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionRun?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionRunCapture?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionStart?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionStartCapture?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onVolumeChange?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onVolumeChangeCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onWaiting?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onWaitingCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onWheel?: import(\"react\").WheelEventHandler<HTMLSelectElement>; onWheelCapture?: import(\"react\").WheelEventHandler<HTMLSelectElement>; options: SelectOption[]; part?: string; placeholder?: string; popover?: \"\" | \"auto\" | \"manual\" | \"hint\"; popoverTarget?: string; popoverTargetAction?: \"toggle\" | \"show\" | \"hide\"; prefix?: string; property?: string; radioGroup?: string; ref?: Ref<HTMLSelectElement>; rel?: string; required?: boolean; resource?: string; results?: number; rev?: string; role?: import(\"react\").AriaRole; security?: string; size?: number; slot?: string; spellCheck?: (boolean | \"true\" | \"false\"); style?: import(\"react\").CSSProperties; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; tabIndex?: number; title?: string; translate?: \"yes\" | \"no\"; typeof?: string; unselectable?: \"off\" | \"on\"; value?: string | number | readonly string[]; vocab?: string;",
-    "Sheet": "ariaLabel?: string; bodyClassName?: string; children: ReactNode; closeButtonClassName?: string; closeLabel?: string; contentClassName?: string; contentStyle?: CSSProperties; description?: string; descriptionContent?: ReactNode; desktopBackdropClassName?: string; footer?: ReactNode; headerActions?: ReactNode; headerClassName?: string; headerLeading?: ReactNode; id?: string; initialFocusRef?: RefObject<HTMLElement | null>; labelledBy?: string; mobilePlacement?: \"bottom\" | \"top\" | \"fullscreen\"; mobileSize?: SheetMobileSize; onClose: () => void; open: boolean; placement?: \"default\" | \"left\"; portal?: boolean; returnFocusRef?: RefObject<HTMLElement | null>; testId?: string; title?: string; titleAccessory?: ReactNode; titleClassName?: string;",
+    "Sheet": "ariaLabel?: string; bodyClassName?: string; children: ReactNode; closeButtonClassName?: string; closeLabel?: string; contentClassName?: string; contentStyle?: CSSProperties; description?: string; descriptionContent?: ReactNode; desktopBackdropClassName?: string; footer?: ReactNode; headerActions?: ReactNode; headerClassName?: string; headerLeading?: ReactNode; id?: string; initialFocusRef?: RefObject<HTMLElement | null>; labelledBy?: string; mobilePlacement?: \"bottom\" | \"top\" | \"fullscreen\"; mobileSize?: SheetMobileSize; onClose: () => void; open: boolean; placement?: \"default\" | \"left\"; portal?: boolean; resolveReturnFocusTarget?: (() => HTMLElement | null); returnFocusRef?: RefObject<HTMLElement | null>; testId?: string; title?: string; titleAccessory?: ReactNode; titleClassName?: string;",
     "Skeleton": "about?: string; accessKey?: string; animationDelay?: string; \"aria-activedescendant\"?: string; \"aria-atomic\"?: (boolean | \"true\" | \"false\"); \"aria-autocomplete\"?: \"none\" | \"list\" | \"inline\" | \"both\"; \"aria-braillelabel\"?: string; \"aria-brailleroledescription\"?: string; \"aria-busy\"?: (boolean | \"true\" | \"false\"); \"aria-checked\"?: boolean | \"true\" | \"false\" | \"mixed\"; \"aria-colcount\"?: number; \"aria-colindex\"?: number; \"aria-colindextext\"?: string; \"aria-colspan\"?: number; \"aria-controls\"?: string; \"aria-current\"?: boolean | \"true\" | \"false\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\"; \"aria-describedby\"?: string; \"aria-description\"?: string; \"aria-details\"?: string; \"aria-disabled\"?: (boolean | \"true\" | \"false\"); \"aria-dropeffect\"?: \"none\" | \"link\" | \"copy\" | \"execute\" | \"move\" | \"popup\"; \"aria-errormessage\"?: string; \"aria-expanded\"?: (boolean | \"true\" | \"false\"); \"aria-flowto\"?: string; \"aria-grabbed\"?: (boolean | \"true\" | \"false\"); \"aria-haspopup\"?: boolean | \"true\" | \"false\" | \"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\"; \"aria-hidden\"?: (boolean | \"true\" | \"false\"); \"aria-invalid\"?: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"; \"aria-keyshortcuts\"?: string; \"aria-label\"?: string; \"aria-labelledby\"?: string; \"aria-level\"?: number; \"aria-live\"?: \"off\" | \"assertive\" | \"polite\"; \"aria-modal\"?: (boolean | \"true\" | \"false\"); \"aria-multiline\"?: (boolean | \"true\" | \"false\"); \"aria-multiselectable\"?: (boolean | \"true\" | \"false\"); \"aria-orientation\"?: \"horizontal\" | \"vertical\"; \"aria-owns\"?: string; \"aria-placeholder\"?: string; \"aria-posinset\"?: number; \"aria-pressed\"?: boolean | \"true\" | \"false\" | \"mixed\"; \"aria-readonly\"?: (boolean | \"true\" | \"false\"); \"aria-relevant\"?: \"text\" | \"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text additions\" | \"text removals\"; \"aria-required\"?: (boolean | \"true\" | \"false\"); \"aria-roledescription\"?: string; \"aria-rowcount\"?: number; \"aria-rowindex\"?: number; \"aria-rowindextext\"?: string; \"aria-rowspan\"?: number; \"aria-selected\"?: (boolean | \"true\" | \"false\"); \"aria-setsize\"?: number; \"aria-sort\"?: \"none\" | \"ascending\" | \"descending\" | \"other\"; \"aria-valuemax\"?: number; \"aria-valuemin\"?: number; \"aria-valuenow\"?: number; \"aria-valuetext\"?: string; autoCapitalize?: \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}); autoCorrect?: string; autoFocus?: boolean; autoSave?: string; children?: ReactNode; className?: string; color?: string; content?: string; contentEditable?: (boolean | \"true\" | \"false\") | \"inherit\" | \"plaintext-only\"; contextMenu?: string; dangerouslySetInnerHTML?: { __html: string | TrustedHTML; }; datatype?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; dir?: string; draggable?: (boolean | \"true\" | \"false\"); enterKeyHint?: \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\"; exportparts?: string; hidden?: boolean; id?: string; inert?: boolean; inlist?: any; inputMode?: \"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\"; is?: string; itemID?: string; itemProp?: string; itemRef?: string; itemScope?: boolean; itemType?: string; lang?: string; nonce?: string; onAbort?: import(\"react\").ReactEventHandler<HTMLDivElement>; onAbortCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onAnimationEnd?: import(\"react\").AnimationEventHandler<HTMLDivElement>; onAnimationEndCapture?: import(\"react\").AnimationEventHandler<HTMLDivElement>; onAnimationIteration?: import(\"react\").AnimationEventHandler<HTMLDivElement>; onAnimationIterationCapture?: import(\"react\").AnimationEventHandler<HTMLDivElement>; onAnimationStart?: import(\"react\").AnimationEventHandler<HTMLDivElement>; onAnimationStartCapture?: import(\"react\").AnimationEventHandler<HTMLDivElement>; onAuxClick?: import(\"react\").MouseEventHandler<HTMLDivElement>; onAuxClickCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onBeforeInput?: import(\"react\").InputEventHandler<HTMLDivElement>; onBeforeInputCapture?: import(\"react\").InputEventHandler<HTMLDivElement>; onBeforeToggle?: import(\"react\").ToggleEventHandler<HTMLDivElement>; onBlur?: import(\"react\").FocusEventHandler<HTMLDivElement>; onBlurCapture?: import(\"react\").FocusEventHandler<HTMLDivElement>; onCanPlay?: import(\"react\").ReactEventHandler<HTMLDivElement>; onCanPlayCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onCanPlayThrough?: import(\"react\").ReactEventHandler<HTMLDivElement>; onCanPlayThroughCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onChange?: import(\"react\").ChangeEventHandler<HTMLDivElement, Element>; onChangeCapture?: import(\"react\").ChangeEventHandler<HTMLDivElement, Element>; onClick?: import(\"react\").MouseEventHandler<HTMLDivElement>; onClickCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onCompositionEnd?: import(\"react\").CompositionEventHandler<HTMLDivElement>; onCompositionEndCapture?: import(\"react\").CompositionEventHandler<HTMLDivElement>; onCompositionStart?: import(\"react\").CompositionEventHandler<HTMLDivElement>; onCompositionStartCapture?: import(\"react\").CompositionEventHandler<HTMLDivElement>; onCompositionUpdate?: import(\"react\").CompositionEventHandler<HTMLDivElement>; onCompositionUpdateCapture?: import(\"react\").CompositionEventHandler<HTMLDivElement>; onContextMenu?: import(\"react\").MouseEventHandler<HTMLDivElement>; onContextMenuCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onCopy?: import(\"react\").ClipboardEventHandler<HTMLDivElement>; onCopyCapture?: import(\"react\").ClipboardEventHandler<HTMLDivElement>; onCut?: import(\"react\").ClipboardEventHandler<HTMLDivElement>; onCutCapture?: import(\"react\").ClipboardEventHandler<HTMLDivElement>; onDoubleClick?: import(\"react\").MouseEventHandler<HTMLDivElement>; onDoubleClickCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onDrag?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragEnd?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragEndCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragEnter?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragEnterCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragExit?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragExitCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragLeave?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragLeaveCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragOver?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragOverCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragStart?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragStartCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDrop?: import(\"react\").DragEventHandler<HTMLDivElement>; onDropCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDurationChange?: import(\"react\").ReactEventHandler<HTMLDivElement>; onDurationChangeCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onEmptied?: import(\"react\").ReactEventHandler<HTMLDivElement>; onEmptiedCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onEncrypted?: import(\"react\").ReactEventHandler<HTMLDivElement>; onEncryptedCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onEnded?: import(\"react\").ReactEventHandler<HTMLDivElement>; onEndedCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onError?: import(\"react\").ReactEventHandler<HTMLDivElement>; onErrorCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onFocus?: import(\"react\").FocusEventHandler<HTMLDivElement>; onFocusCapture?: import(\"react\").FocusEventHandler<HTMLDivElement>; onGotPointerCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onGotPointerCaptureCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onInput?: import(\"react\").InputEventHandler<HTMLDivElement>; onInputCapture?: import(\"react\").InputEventHandler<HTMLDivElement>; onInvalid?: import(\"react\").ReactEventHandler<HTMLDivElement>; onInvalidCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onKeyDown?: import(\"react\").KeyboardEventHandler<HTMLDivElement>; onKeyDownCapture?: import(\"react\").KeyboardEventHandler<HTMLDivElement>; onKeyPress?: import(\"react\").KeyboardEventHandler<HTMLDivElement>; onKeyPressCapture?: import(\"react\").KeyboardEventHandler<HTMLDivElement>; onKeyUp?: import(\"react\").KeyboardEventHandler<HTMLDivElement>; onKeyUpCapture?: import(\"react\").KeyboardEventHandler<HTMLDivElement>; onLoad?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadedData?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadedDataCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadedMetadata?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadedMetadataCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadStart?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadStartCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLostPointerCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onLostPointerCaptureCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onMouseDown?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseDownCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseEnter?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseLeave?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseMove?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseMoveCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseOut?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseOutCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseOver?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseOverCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseUp?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseUpCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onPaste?: import(\"react\").ClipboardEventHandler<HTMLDivElement>; onPasteCapture?: import(\"react\").ClipboardEventHandler<HTMLDivElement>; onPause?: import(\"react\").ReactEventHandler<HTMLDivElement>; onPauseCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onPlay?: import(\"react\").ReactEventHandler<HTMLDivElement>; onPlayCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onPlaying?: import(\"react\").ReactEventHandler<HTMLDivElement>; onPlayingCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onPointerCancel?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerCancelCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerDown?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerDownCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerEnter?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerLeave?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerMove?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerMoveCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerOut?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerOutCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerOver?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerOverCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerUp?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerUpCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onProgress?: import(\"react\").ReactEventHandler<HTMLDivElement>; onProgressCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onRateChange?: import(\"react\").ReactEventHandler<HTMLDivElement>; onRateChangeCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onReset?: import(\"react\").ReactEventHandler<HTMLDivElement>; onResetCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onScroll?: import(\"react\").UIEventHandler<HTMLDivElement>; onScrollCapture?: import(\"react\").UIEventHandler<HTMLDivElement>; onScrollEnd?: import(\"react\").UIEventHandler<HTMLDivElement>; onScrollEndCapture?: import(\"react\").UIEventHandler<HTMLDivElement>; onSeeked?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSeekedCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSeeking?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSeekingCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSelect?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSelectCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onStalled?: import(\"react\").ReactEventHandler<HTMLDivElement>; onStalledCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSubmit?: import(\"react\").SubmitEventHandler<HTMLDivElement>; onSubmitCapture?: import(\"react\").SubmitEventHandler<HTMLDivElement>; onSuspend?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSuspendCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onTimeUpdate?: import(\"react\").ReactEventHandler<HTMLDivElement>; onTimeUpdateCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onToggle?: import(\"react\").ToggleEventHandler<HTMLDivElement>; onTouchCancel?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchCancelCapture?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchEnd?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchEndCapture?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchMove?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchMoveCapture?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchStart?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchStartCapture?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTransitionCancel?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionCancelCapture?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionEnd?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionEndCapture?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionRun?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionRunCapture?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionStart?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionStartCapture?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onVolumeChange?: import(\"react\").ReactEventHandler<HTMLDivElement>; onVolumeChangeCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onWaiting?: import(\"react\").ReactEventHandler<HTMLDivElement>; onWaitingCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onWheel?: import(\"react\").WheelEventHandler<HTMLDivElement>; onWheelCapture?: import(\"react\").WheelEventHandler<HTMLDivElement>; part?: string; popover?: \"\" | \"auto\" | \"manual\" | \"hint\"; popoverTarget?: string; popoverTargetAction?: \"toggle\" | \"show\" | \"hide\"; prefix?: string; property?: string; radioGroup?: string; rel?: string; resource?: string; results?: number; rev?: string; role?: import(\"react\").AriaRole; security?: string; slot?: string; spellCheck?: (boolean | \"true\" | \"false\"); style?: import(\"react\").CSSProperties; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; tabIndex?: number; title?: string; translate?: \"yes\" | \"no\"; typeof?: string; unselectable?: \"off\" | \"on\"; vocab?: string;",
     "SourceDesignationBadge": "className?: string; metadata?: SourceMetadataInput;",
     "SourceProvenance": "metadata?: SourceMetadataInput;",
diff --git a/docs/branch-review-ledger.md b/docs/branch-review-ledger.md
index c071bc679a..40658febc5 100644
--- a/docs/branch-review-ledger.md
+++ b/docs/branch-review-ledger.md
@@ -641,5 +641,9 @@ Records before 2026-07-28 were written by hand and had drifted: 146 lines carrie
 | 2026-08-05 | codex/v2-design-system-completion | 8863cea53bf4df59e8795dcaab1fa420b5109516 | PR #1616 v2 design system CI+reviews | fixed typecheck + review defects; baselines remain not-committed by design | tsc; vitest ui-v2/accessible-table/ui-primitives/design-system-adoption |
 | 2026-08-05 | codex/v2-design-system-completion | 8b49bfa2b66ed78577b08e1a50414db55898f2df | PR #1616 v2 design system CI+reviews | fixed typecheck + review defects; baselines remain not-committed by design | tsc; vitest ui-v2/accessible-table/ui-primitives/design-system-adoption |
 | 2026-08-05 | codex/v2-design-system-completion | 1ea30c19c48b3791519659abf85b20c9e8c7faab | PR #1616 review feedback disposition | COMPLETED: fixed mode-home empty composer reserve + chip category v2 tokens; dispositioned remaining Devin analysis findings to outstanding-issues; unresolved threads 0 | vitest search-route-ownership 12/12; ckb-v2-token-contract+related green; CI in progress on tip |
+| 2026-08-05 | codex/editable-search-pins | 18c3069c7ad19b7e92e3ec9e0b65b5d845afe9c1 | editable search pins menu production integration and mockups | no findings; ready for draft review | verify:pr-local; focused pin tests; typecheck; responsive browser QA; phone-chrome contracts and journey |
+| 2026-08-05 | codex/editable-search-pins | 193afe637481c0ed2fa82dbe9bb1f1d1c8bcc4d8 | editable search pins menu review follow-up | fixed remaining review defects; unresolved threads cleared; auto-merge armed | vitest:search-pins 18/18; tsc clean on touched surfaces; review threads 0 unresolved |
+| 2026-08-05 | codex/editable-search-pins | a0e2801fb291a672274c9a723108637d3cdb43f9 | editable search pins menu review follow-up | fixed remaining review defects; lint setState-in-effect; unresolved threads cleared; auto-merge armed | vitest:search-pins 18/18; eslint touched surfaces; review threads 0 unresolved |
 | 2026-08-05 | cursor/phone-mode-sheet-yes-05c0 | b579d68491980388ff3e4ce8aba85530e87a9d84 | Run PR sweep | threads already resolved; synced main via update-branch; CI was green pre-sync | CI: PR required SUCCESS pre-sync |
 | 2026-08-05 | cursor/phone-mode-sheet-yes-05c0 | 9152e239076ff823ad3bf812d282ffc87c3295b7 | Run PR sweep | threads already resolved; merged origin/main; CI was green pre-sync | CI: PR required SUCCESS pre-sync; merge-tree clean |
+| 2026-08-05 | codex/editable-search-pins | 67f2c71e8376fbc44615f765a73cb6a37c4ddb40 | editable search pins menu review follow-up | merged main; review threads cleared; auto-merge armed | vitest search-pins+mode-action+command-surface: Test Files 4 passed (4); Tests 33 passed (33); eslint max-warnings 0 on touched surfaces |
diff --git a/docs/site-map.md b/docs/site-map.md
index 0b17c4ab6a..65089687af 100644
--- a/docs/site-map.md
+++ b/docs/site-map.md
@@ -1017,9 +1017,11 @@ This file is generated by `npm run docs:update` (or `npm run sitemap:update` dir
 - `/mockups/mode-dropdown` - Route discovered from app directory Source: `src/app/mockups/mode-dropdown/page.tsx`.
 - `/mockups/phone-inpage-navigation` - Route discovered from app directory Source: `src/app/mockups/phone-inpage-navigation/page.tsx`.
 - `/mockups/phone-mode-sheet-yes` - Route discovered from app directory Source: `src/app/mockups/phone-mode-sheet-yes/page.tsx`.
+- `/mockups/pinned-plus-menu` - Route discovered from app directory Source: `src/app/mockups/pinned-plus-menu/page.tsx`.
 - `/mockups/recent-searches-bottom` - Route discovered from app directory Source: `src/app/mockups/recent-searches-bottom/page.tsx`.
 - `/mockups/search-band-directions` - Route discovered from app directory Source: `src/app/mockups/search-band-directions/page.tsx`.
 - `/mockups/search-heading` - Route discovered from app directory Source: `src/app/mockups/search-heading/page.tsx`.
+- `/mockups/search-lens-menu` - Route discovered from app directory Source: `src/app/mockups/search-lens-menu/page.tsx`.
 - `/mockups/search-refine-adaptive` - Route discovered from app directory Source: `src/app/mockups/search-refine-adaptive/page.tsx`.
 - `/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`.
diff --git a/docs/superpowers/plans/2026-08-05-editable-pin-menu-mockups.md b/docs/superpowers/plans/2026-08-05-editable-pin-menu-mockups.md
new file mode 100644
index 0000000000..03bf585999
--- /dev/null
+++ b/docs/superpowers/plans/2026-08-05-editable-pin-menu-mockups.md
@@ -0,0 +1,26 @@
+# Search + Editable Pins Menu — Implementation Record
+
+## Goal
+
+Perfect `/mockups/search-lens-menu` around editable app-destination pins while preserving the original visual direction.
+
+## Completed
+
+- [x] Preserve the light attached fold-out and paired desktop/phone frames.
+- [x] Replace editable search lenses with editable app-destination pins.
+- [x] Add `Your pins` and a separate `Search in` section.
+- [x] Keep Documents, global, and alternate-area search choices explicit.
+- [x] Retain overlapping phone icon constellations with accessible labels.
+- [x] Add a functional local `New pin` flow with editable name and destinations.
+- [x] Add a functional Ward essentials edit flow.
+- [x] Adapt the command deck to distinguish pins from search commands.
+- [x] Adapt the inline builder into an inline pin bar.
+- [x] Add focused DOM interaction coverage.
+- [x] Verify 18 width/direction combinations, dialog containment, keyboard closing and focus restoration, reduced motion, forced colors, and console output.
+
+## Remaining production work
+
+- [ ] Decide persistence, synchronization, permissions, and pin limits.
+- [ ] Map mockup destinations to canonical production routes.
+- [ ] Complete physical iPhone Safari and installed-PWA acceptance.
+- [ ] Conduct clinical governance review before production search integration.
diff --git a/docs/superpowers/specs/2026-08-05-editable-pin-menu-mockups-design.md b/docs/superpowers/specs/2026-08-05-editable-pin-menu-mockups-design.md
new file mode 100644
index 0000000000..134953157c
--- /dev/null
+++ b/docs/superpowers/specs/2026-08-05-editable-pin-menu-mockups-design.md
@@ -0,0 +1,63 @@
+# Search + Editable Pins Menu — Final Mockup Direction
+
+## Preferred artifact
+
+Route: `/mockups/search-lens-menu`
+
+The preferred visual direction is the original light clinical search-menu study, refined around the corrected pin model. It preserves its attached fold-out, deliberate page scrim, compact overlapping icons, and paired desktop/phone treatments.
+
+## Product model
+
+A **pin** is a user-named collection of useful destinations from anywhere in the app. It is not a search scope, filter, or saved query.
+
+Example pins:
+
+- Ward essentials: Documents, Medications, Forms.
+- My quick tools: Clinical tools, Services, Differentials.
+
+Users can create a pin, edit its name, add or remove destinations, and recognise its contents through the first three overlapping destination icons.
+
+Search remains explicit and separate:
+
+- Search Documents — current mode.
+- Search all clinical areas — global search.
+- Choose another search area — explicit alternate scope.
+
+Opening or selecting a pin never silently changes the composer’s search scope.
+
+## Direction 1 — Attached pin fold-out
+
+Recommended.
+
+- Opens from the composer `+` button.
+- Shows `Your pins` first.
+- Shows `Search in` as a separate section below.
+- Includes useful actions without confusing them with either pins or search scope.
+- Desktop/tablet use an attached panel with a subdued scrim.
+- Phone uses a contained bottom sheet above the visible composer.
+
+## Direction 2 — Pins and search command deck
+
+- Presents pins and search commands in one power-user workspace.
+- The navigation rail clearly labels both object types.
+- Selecting a pin previews its app destinations.
+- Selecting a search command runs the current query in that area.
+
+## Direction 3 — Inline pin bar
+
+- Pin destinations become removable chips directly above the composer.
+- The Documents search scope remains visible and stable beneath the pin.
+- Editing uses a compact destination picker on desktop and phone.
+
+## Accessibility and responsive rules
+
+- Minimum 48 px primary touch targets.
+- Icon constellations expose full destination labels to assistive technology.
+- Escape closes panels and restores focus to the composer trigger.
+- Panels own internal scrolling and remain within device frames.
+- Reduced-motion and forced-colors modes remain usable.
+- Validate 320, 390, 639, 768, 1440, and 1920 px.
+
+## Boundaries
+
+This remains a local design-scratch artifact. It does not persist pins, call APIs or providers, alter production navigation/search, change retrieval ranking, or deploy anything.
diff --git a/src/app/globals.css b/src/app/globals.css
index bce509ddff..df02de4bce 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1327,7 +1327,10 @@ summary::-webkit-details-marker {
   outline-offset: 2px;
 }
 
-.mode-action-body {
+/* Cap scrolling only inside the anchored popover surface, which defines
+   --mode-action-body-max-height. Sheet/dialog hosts leave the variable unset;
+   applying max-height there would create a nested non-capping scroll region. */
+.mode-action-surface .mode-action-body {
   max-height: var(--mode-action-body-max-height);
   overflow-y: auto;
   overscroll-behavior: contain;
diff --git a/src/app/mockups/mockups-layout-client.tsx b/src/app/mockups/mockups-layout-client.tsx
index c6e3c5bb6c..94df07b142 100644
--- a/src/app/mockups/mockups-layout-client.tsx
+++ b/src/app/mockups/mockups-layout-client.tsx
@@ -36,6 +36,10 @@ export function MockupsLayoutClient({ children }: { children: ReactNode }) {
   const isWarningConsolidationMockup = pathname === "/mockups/warning-consolidation";
   const isWarningLineMockup = pathname === "/mockups/warning-line";
   const isAnswerHomeProposalMockup = pathname === "/mockups/answer-home-proposal";
+  // These studies draw complete app shells and their own search composers, so
+  // shared chrome would make the interaction studies ambiguous.
+  const isSearchLensMenuMockup = pathname === "/mockups/search-lens-menu";
+  const isPinnedPlusMenuMockup = pathname === "/mockups/pinned-plus-menu";
   // Draws its own phone frames with an in-frame Choose mode sheet; shared chrome
   // would read as a second real header over the study.
   const isPhoneModeSheetYesMockup = pathname === "/mockups/phone-mode-sheet-yes";
@@ -80,6 +84,8 @@ export function MockupsLayoutClient({ children }: { children: ReactNode }) {
         !isWarningConsolidationMockup &&
         !isWarningLineMockup &&
         !isAnswerHomeProposalMockup &&
+        !isSearchLensMenuMockup &&
+        !isPinnedPlusMenuMockup &&
         !isPhoneModeSheetYesMockup
       }
       chromeVisible={
@@ -92,6 +98,8 @@ export function MockupsLayoutClient({ children }: { children: ReactNode }) {
         !isWarningConsolidationMockup &&
         !isWarningLineMockup &&
         !isAnswerHomeProposalMockup &&
+        !isSearchLensMenuMockup &&
+        !isPinnedPlusMenuMockup &&
         !isPhoneModeSheetYesMockup
       }
     >
diff --git a/src/app/mockups/pinned-plus-menu/page.tsx b/src/app/mockups/pinned-plus-menu/page.tsx
new file mode 100644
index 0000000000..e4ff4b6576
--- /dev/null
+++ b/src/app/mockups/pinned-plus-menu/page.tsx
@@ -0,0 +1,5 @@
+import { PinnedPlusMenuMockupsPage } from "@/components/pinned-plus-menu-mockups";
+
+export default function Page() {
+  return <PinnedPlusMenuMockupsPage />;
+}
diff --git a/src/app/mockups/search-lens-menu/page.tsx b/src/app/mockups/search-lens-menu/page.tsx
new file mode 100644
index 0000000000..0b4a071cda
--- /dev/null
+++ b/src/app/mockups/search-lens-menu/page.tsx
@@ -0,0 +1,5 @@
+import { SearchLensMenuMockupsPage } from "@/components/search-lens-menu-mockups";
+
+export default function SearchLensMenuMockupRoute() {
+  return <SearchLensMenuMockupsPage />;
+}
diff --git a/src/components/ClinicalDashboard.tsx b/src/components/ClinicalDashboard.tsx
index 70d95b41aa..4c981917a8 100644
--- a/src/components/ClinicalDashboard.tsx
+++ b/src/components/ClinicalDashboard.tsx
@@ -3234,7 +3234,7 @@ export function ClinicalDashboard({
     const returnTarget = documentsDrawerReturnFocusRef.current;
     window.requestAnimationFrame(() => {
       const fallbackTarget = Array.from(
-        document.querySelectorAll<HTMLElement>('button[aria-haspopup="menu"][aria-label$=" options"]'),
+        document.querySelectorAll<HTMLElement>('button[aria-haspopup][aria-label$=" options"]'),
       ).find((element) => element.isConnected && element.getClientRects().length > 0);
       const focusTarget = returnTarget?.isConnected ? returnTarget : fallbackTarget;
       focusTarget?.focus({ preventScroll: true });
diff --git a/src/components/clinical-dashboard/master-search-header.tsx b/src/components/clinical-dashboard/master-search-header.tsx
index c7fa818bc9..4d82d827ff 100644
--- a/src/components/clinical-dashboard/master-search-header.tsx
+++ b/src/components/clinical-dashboard/master-search-header.tsx
@@ -22,6 +22,7 @@ import {
   Filter,
   Globe2,
   Loader2,
+  Layers3,
   Menu,
   MessageSquarePlus,
   Plus,
@@ -36,8 +37,10 @@ import { DocumentTagCloud } from "@/components/DocumentTagCloud";
 import { PrivacyInputNotice } from "@/components/privacy-input-notice";
 import { restoreFocusUnlessMoved, useDismissableLayer } from "@/components/use-dismissable-layer";
 import { useHideOnScroll } from "@/components/clinical-dashboard/use-hide-on-scroll";
+import { useEventCallback } from "@/components/clinical-dashboard/use-event-callback";
 import { PhoneFooterLayerPortal } from "@/components/clinical-dashboard/phone-footer-layer-portal";
 import { AnswerFollowUpSuggestions } from "@/components/clinical-dashboard/answer-follow-up-suggestions";
+import { SearchPinsMenu } from "@/components/clinical-dashboard/search-pins-menu";
 import {
   ModeActionPopup,
   modeActionItemsFor,
@@ -76,6 +79,8 @@ import {
   setModeHomeComposerReservePending,
 } from "@/lib/mode-home-composer";
 import { resolveScrollBehavior } from "@/lib/scroll-behavior";
+import type { CommandSurfacePlacement } from "@/lib/search-command-surface";
+import { useCommandDropdownDisplayableByPlacement } from "@/components/clinical-dashboard/use-command-dropdown-displayable";
 import type { ClinicalDocument, ClinicalQueryMode } from "@/lib/types";
 import { type SearchScopeFilters } from "@/lib/search-scope";
 import { tagSearchText } from "@/lib/document-tags";
@@ -353,6 +358,7 @@ export function MasterSearchHeader({
   const [commandDropdownOpen, setCommandDropdownOpen] = useState(false);
   const [commandListboxId, setCommandListboxId] = useState<string>();
   const [commandActiveItemId, setCommandActiveItemId] = useState<string | null>(null);
+  const commandDropdownDisplayableByPlacement = useCommandDropdownDisplayableByPlacement();
   const [modeMenuOpen, setModeMenuOpen] = useState(false);
   // Which menuitemradio should receive initial focus when the mode menu opens
   // (keyboard ArrowOpen or the active mode on tap). Shared by the desktop
@@ -485,6 +491,7 @@ export function MasterSearchHeader({
   const prefetchedModeHrefsRef = useRef(new Set<string>());
   const scopePopoverRef = useRef<HTMLDivElement | null>(null);
   const actionMenuTriggerRef = useRef<HTMLButtonElement | null>(null);
+  const actionMenuSheetReturnFocusRef = useRef<HTMLElement | null>(null);
   const scopeFilterInputRef = useRef<HTMLInputElement | null>(null);
   const touchStartY = useRef<number | null>(null);
   const selectedDocumentIdSet = useMemo(() => new Set(selectedDocumentIds), [selectedDocumentIds]);
@@ -594,8 +601,6 @@ export function MasterSearchHeader({
                           ? "factsheets"
                           : "answer";
   const actionMenuItems = modeActionItemsFor(actionMenuSetId);
-  const actionMenuTitle = selectedAppMode.label;
-  const actionMenuSubtitle = searchMode === "answer" ? "Source-backed mode" : selectedAppMode.description;
   const actionMenuButtonLabel = `Open ${selectedAppMode.label.toLowerCase()} options`;
   const useMobileBackControl = mobileLeadingAction === "back";
 
@@ -1033,6 +1038,27 @@ export function MasterSearchHeader({
       restoreFocusUnlessMoved(actionMenuTriggerRef.current);
     });
   }, []);
+  const handleFocusSearchInput = useEventCallback(() => {
+    queryInputRef?.current?.focus();
+  });
+  const retargetActionMenuSheetFocusToSearchInput = useEventCallback(() => {
+    const target = queryInputRef?.current ?? null;
+    actionMenuSheetReturnFocusRef.current = target;
+    if (!currentUsesScopeSheet()) {
+      window.requestAnimationFrame(() => {
+        restoreFocusUnlessMoved(target);
+      });
+    }
+  });
+  const handleActionMenuCurrentSearch = useEventCallback(() => {
+    retargetActionMenuSheetFocusToSearchInput();
+    setActionMenuOpen(false);
+  });
+  const handleActionMenuGlobalSearch = useEventCallback(() => {
+    retargetActionMenuSheetFocusToSearchInput();
+    setActionMenuOpen(false);
+    setCommandDropdownOpen(true);
+  });
 
   const phoneLayoutGateRef = useRef<boolean | null>(null);
   useEffect(() => {
@@ -1580,7 +1606,8 @@ export function MasterSearchHeader({
     // Tablet/desktop composers keep the site-wide notice everywhere.
     const showsComposerPrivacyNotice = usesPhoneSearchLayout ? isDesktopHomeComposer : true;
 
-    const commandSurfacePlacement = usesBottomComposerPlacement ? "bottom-dock" : "inline";
+    const commandSurfacePlacement: CommandSurfacePlacement = usesBottomComposerPlacement ? "bottom-dock" : "inline";
+    const commandDropdownDisplayable = commandDropdownDisplayableByPlacement[commandSurfacePlacement];
     // Search sits outside the collapsing top-bar row. Sticky hosts pin an outer
     // top-bar stack; result composers portal into page flow at sm+, so this
     // relative fallback only covers the brief pre-portal default placement (a
@@ -1623,7 +1650,7 @@ export function MasterSearchHeader({
         data-command-open={
           // Phones never show the command dropdown, so the dock scrim must not
           // grow for it — gate the open attribute to widths that can display it.
-          usesBottomComposerPlacement && !usesPhoneSearchLayout && commandDropdownOpen ? "true" : undefined
+          usesBottomComposerPlacement && commandDropdownDisplayable && commandDropdownOpen ? "true" : undefined
         }
         data-scroll-hidden={shouldHideBottomOnScroll && bottomComposerHidden ? "true" : undefined}
         {...(shouldHideBottomOnScroll ? composerFocusProps : undefined)}
@@ -1719,7 +1746,7 @@ export function MasterSearchHeader({
           onRunModeAction={runModeAction}
           onListboxIdReady={setCommandListboxId}
           onActiveItemIdChange={setCommandActiveItemId}
-          onFocusSearchInput={() => queryInputRef?.current?.focus()}
+          onFocusSearchInput={handleFocusSearchInput}
         >
           <div
             data-menu-placement={actionMenuOpen ? actionMenuPlacement : undefined}
@@ -1732,29 +1759,49 @@ export function MasterSearchHeader({
           >
             <ModeActionPopup
               open={actionMenuOpen}
-              title={actionMenuTitle}
-              titleIcon={SelectedAppModeIcon}
-              subtitle={actionMenuSubtitle}
+              title="Pins and search"
+              titleIcon={Layers3}
+              subtitle="Open a pin or choose where this search runs."
               buttonLabel={actionMenuButtonLabel}
               items={actionMenuItems}
-              modeOptions={actionMenuModeOptions}
-              selectedModeId={selectedAppMode.id}
               onOpenChange={setActionMenuOpen}
               onBeforeOpen={() => {
+                actionMenuSheetReturnFocusRef.current = null;
                 setUsesScopeSheet(currentUsesScopeSheet());
+                setCommandDropdownOpen(false);
                 setModeMenuOpen(false);
                 setScopeOpen(false);
                 setScopeSheetOpen(false);
               }}
               onAction={runModeAction}
-              onModeSelect={selectAppModeById}
               onPlacementChange={setActionMenuPlacement}
               triggerClassName="answer-footer-search-action"
               triggerRef={actionMenuTriggerRef}
               integrated={usesFooterChipLayout}
               integratedChipRow={showFooterSearchChips}
               useSheet={usesScopeSheet}
+              sheetReturnFocusRef={actionMenuSheetReturnFocusRef}
               dismissIgnoreRefs={[modeMenuRef]}
+              customBody={
+                <SearchPinsMenu
+                  key={actionMenuOpen ? "pins-menu-open" : "pins-menu-closed"}
+                  currentModeId={selectedAppMode.id}
+                  modeOptions={actionMenuModeOptions}
+                  actions={actionMenuItems}
+                  globalSearchAvailable={commandDropdownDisplayable}
+                  onClose={() => setActionMenuOpen(false)}
+                  onCurrentSearch={handleActionMenuCurrentSearch}
+                  onGlobalSearch={handleActionMenuGlobalSearch}
+                  onModeSelect={(modeId) => {
+                    setActionMenuOpen(false);
+                    selectAppModeById(modeId);
+                  }}
+                  onAction={(actionId) => {
+                    setActionMenuOpen(false);
+                    runModeAction(actionId);
+                  }}
+                />
+              }
             />
 
             {/* The clear button is a flex sibling (not absolutely positioned): the
diff --git a/src/components/clinical-dashboard/mode-action-popup.tsx b/src/components/clinical-dashboard/mode-action-popup.tsx
index 73a532c3bb..7577f4f10c 100644
--- a/src/components/clinical-dashboard/mode-action-popup.tsx
+++ b/src/components/clinical-dashboard/mode-action-popup.tsx
@@ -9,6 +9,7 @@ import {
   useState,
   type CSSProperties,
   type KeyboardEvent as ReactKeyboardEvent,
+  type ReactNode,
   type Ref,
   type RefObject,
 } from "react";
@@ -64,6 +65,9 @@ export type ModeActionSetId =
   | "factsheets";
 export type ModeActionPlacement = "up" | "down";
 
+const actionSurfaceId = "daily-actions-sheet";
+const customBodyFocusScopeId = "daily-actions-sheet-body";
+
 type IntegratedSurfaceLayout = {
   placement: ModeActionPlacement;
   left: number;
@@ -382,7 +386,9 @@ export function ModeActionPopup({
   integratedChipRow = true,
   useSheet = false,
   triggerRef,
+  sheetReturnFocusRef,
   dismissIgnoreRefs,
+  customBody,
 }: {
   open: boolean;
   title: string;
@@ -405,8 +411,13 @@ export function ModeActionPopup({
   /** Render the actions in a bottom sheet / centred dialog (phones + tablets ≤1023px)
    *  instead of the anchored desktop popover. */
   useSheet?: boolean;
+  /** Optional dynamic focus target for Sheet closes that intentionally leave the menu. */
+  sheetReturnFocusRef?: RefObject<HTMLElement | null>;
   /** Header-owned controls (e.g. app mode trigger) that must stay clickable above the portaled menu. */
   dismissIgnoreRefs?: readonly RefObject<HTMLElement | null>[];
+  /** Optional richer body for the shared + surface. The popup continues to own
+   *  positioning, dismissal, focus restoration, and responsive Sheet behavior. */
+  customBody?: ReactNode;
 }) {
   const buttonRef = useRef<HTMLButtonElement | null>(null);
   const rootRef = useRef<HTMLDivElement | null>(null);
@@ -422,12 +433,19 @@ export function ModeActionPopup({
   const [modeSelectorOpen, setModeSelectorOpen] = useState(false);
   const canSwitchMode = Boolean(modeOptions?.length && onModeSelect);
   const selectedModeOption = modeOptions?.find((mode) => mode.id === selectedModeId);
+  // Truthiness only — callers pass inline JSX for customBody, so the element
+  // identity must not invalidate placement measurement every parent render.
+  const hasCustomBody = Boolean(customBody);
 
   const closeAndRestoreFocus = useCallback(() => {
     setModeSelectorOpen(false);
     onOpenChange(false);
     window.requestAnimationFrame(() => buttonRef.current?.focus());
   }, [onOpenChange, setModeSelectorOpen]);
+  const resolveSheetReturnFocusTarget = useCallback(
+    () => sheetReturnFocusRef?.current ?? buttonRef.current,
+    [sheetReturnFocusRef],
+  );
 
   // The sheet owns its own focus trap, Escape, and backdrop dismissal; only the
   // anchored popover needs the outside-click dismissable layer.
@@ -442,6 +460,15 @@ export function ModeActionPopup({
   });
 
   function focusActionItem(index: number) {
+    if (customBody) {
+      const body = document.getElementById(customBodyFocusScopeId);
+      const focusable = body?.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), a[href], input:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      );
+      if (!focusable?.length) return;
+      focusable[index < 0 ? focusable.length - 1 : Math.min(index, focusable.length - 1)]?.focus();
+      return;
+    }
     const nextIndex = (index + items.length) % items.length;
     itemRefs.current[nextIndex]?.focus();
   }
@@ -459,7 +486,11 @@ export function ModeActionPopup({
     const edgePadding = 12;
     const availableAbove = Math.max(0, rect.top - viewportTop - edgePadding);
     const availableBelow = Math.max(0, viewportBottom - rect.bottom - edgePadding);
-    const { minSurfaceHeight, headerHeight } = estimateActionListHeights(items.length, integrated);
+    // Custom bodies (pins + search) are substantially taller than one row per
+    // mode action; size placement against a pin-panel floor so "fits above"
+    // is not chosen from an unrelated action-count estimate.
+    const estimatedItemCount = hasCustomBody ? Math.max(items.length, 10) : items.length;
+    const { minSurfaceHeight, headerHeight } = estimateActionListHeights(estimatedItemCount, integrated);
     const detachedUpOffset = 16;
     const integratedDownOffset = integratedChipRow ? 58 : 14;
     const detachedDownOffset = integrated ? integratedDownOffset : 14;
@@ -513,7 +544,7 @@ export function ModeActionPopup({
     } else {
       setIntegratedSurfaceLayout(null);
     }
-  }, [integrated, integratedChipRow, items.length]);
+  }, [hasCustomBody, integrated, integratedChipRow, items.length]);
 
   function openWithFocus(index: number) {
     onBeforeOpen?.();
@@ -526,7 +557,7 @@ export function ModeActionPopup({
   function handleTriggerKeyDown(event: ReactKeyboardEvent<HTMLButtonElement>) {
     if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
     event.preventDefault();
-    openWithFocus(event.key === "ArrowUp" ? items.length - 1 : 0);
+    openWithFocus(event.key === "ArrowUp" ? -1 : 0);
   }
 
   function handleItemKeyDown(event: ReactKeyboardEvent<HTMLButtonElement>, index: number) {
@@ -687,7 +718,7 @@ export function ModeActionPopup({
   function renderActionRows() {
     return (
       <div
-        id="daily-actions-sheet"
+        id={actionSurfaceId}
         data-testid="daily-actions-menu"
         role="menu"
         aria-label={title}
@@ -812,6 +843,12 @@ export function ModeActionPopup({
     return renderActionRows();
   }
 
+  // Invoke the default renderer unconditionally so its ref-owning helpers remain
+  // ordinary render work even when a richer body replaces the resulting node.
+  const defaultPopoverBody = renderPopoverBody();
+  const customBodyWithFocusScope = customBody ? <div id={customBodyFocusScopeId}>{customBody}</div> : null;
+  const popoverBody = customBodyWithFocusScope ?? defaultPopoverBody;
+
   // Desktop popover header — same anatomy as the Sheet header the ≤1023px surface
   // uses (accent icon tile + stacked title/subtitle + close), so the menu reads as
   // one design across breakpoints. The title doubles as the mode switcher; the
@@ -874,6 +911,10 @@ export function ModeActionPopup({
         ref={surfaceRef}
         data-placement={placement}
         style={surfaceStyle}
+        id={customBody ? actionSurfaceId : undefined}
+        data-testid={customBody ? "daily-actions-menu" : undefined}
+        role={customBody ? "dialog" : undefined}
+        aria-label={customBody ? title : undefined}
         className={cn(
           "mode-action-surface z-[60] text-[color:var(--text)]",
           integrated && integratedSurfaceLayout ? "fixed" : "absolute",
@@ -900,14 +941,14 @@ export function ModeActionPopup({
           )}
         >
           {renderPopoverHeader()}
-          {renderPopoverBody()}
+          {popoverBody}
         </div>
       </div>
     ) : null;
 
   return (
     <>
-      {useSheet && open ? (
+      {useSheet ? (
         <Sheet
           open={open}
           onClose={closeAndRestoreFocus}
@@ -915,6 +956,9 @@ export function ModeActionPopup({
           description={headerSubtitle}
           closeLabel={`Close ${title.toLowerCase()} options`}
           returnFocusRef={buttonRef}
+          resolveReturnFocusTarget={resolveSheetReturnFocusTarget}
+          id={customBody ? actionSurfaceId : undefined}
+          testId={customBody ? "daily-actions-menu" : undefined}
           headerLeading={
             <span className="grid h-10 w-10 place-items-center rounded-xl border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)] shadow-[var(--shadow-inset)]">
               <TitleIcon className="h-5 w-5" aria-hidden="true" />
@@ -924,7 +968,7 @@ export function ModeActionPopup({
           mobileSize="content"
           portal
         >
-          {renderActionRows()}
+          {customBodyWithFocusScope ?? defaultPopoverBody}
         </Sheet>
       ) : integrated && open && typeof document !== "undefined" ? (
         createPortal(actionSurface, document.body)
@@ -949,9 +993,9 @@ export function ModeActionPopup({
             open && "bg-[color:var(--surface-subtle)] text-[color:var(--text)] rotate-45",
           )}
           aria-label={buttonLabel}
-          aria-controls={open ? "daily-actions-sheet" : undefined}
+          aria-controls={open ? actionSurfaceId : undefined}
           aria-expanded={open}
-          aria-haspopup="menu"
+          aria-haspopup={customBody ? "dialog" : "menu"}
           title={buttonLabel}
           onKeyDown={handleTriggerKeyDown}
           onClick={() => {
diff --git a/src/components/clinical-dashboard/search-pins-menu.tsx b/src/components/clinical-dashboard/search-pins-menu.tsx
new file mode 100644
index 0000000000..f1e286219a
--- /dev/null
+++ b/src/components/clinical-dashboard/search-pins-menu.tsx
@@ -0,0 +1,652 @@
+"use client";
+
+import { useEffect, useId, useState, type ReactNode } from "react";
+import Link from "next/link";
+import {
+  Check,
+  ChevronDown,
+  ChevronRight,
+  Globe2,
+  Pencil,
+  Plus,
+  Search,
+  Trash2,
+  X,
+  type LucideIcon,
+} from "lucide-react";
+
+import type {
+  ModeActionId,
+  ModeActionItem,
+  ModeActionModeOption,
+} from "@/components/clinical-dashboard/mode-action-popup";
+import { cn } from "@/components/ui-primitives";
+import { appModeDefinition, appModeHomeHref, type AppModeId } from "@/lib/app-modes";
+import { appModeIcons } from "@/lib/app-mode-icons";
+import {
+  maximumSearchPins,
+  normalizeSearchPins,
+  readSearchPins,
+  searchPinDestinationIds,
+  searchPinsChangeEvent,
+  searchPinsStorageKey,
+  writeSearchPins,
+  type SearchPin,
+  type SearchPinDestinationId,
+} from "@/lib/search-pins";
+
+const focusRing =
+  "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]";
+
+const destinationLabels: Record<SearchPinDestinationId, string> = {
+  documents: "Documents",
+  prescribing: "Medications",
+  forms: "Forms",
+  services: "Services",
+  differentials: "Differentials",
+  tools: "Clinical tools",
+};
+
+const destinationTone: Record<SearchPinDestinationId, string> = {
+  documents:
+    "border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]",
+  prescribing:
+    "border-[color:var(--tone-slate-border)] bg-[color:var(--tone-slate-soft)] text-[color:var(--tone-slate)]",
+  forms: "border-[color:var(--tone-purple-border)] bg-[color:var(--tone-purple-soft)] text-[color:var(--tone-purple)]",
+  services:
+    "border-[color:var(--tone-indigo-border)] bg-[color:var(--tone-indigo-soft)] text-[color:var(--tone-indigo)]",
+  differentials:
+    "border-[color:var(--tone-rose-border)] bg-[color:var(--tone-rose-soft)] text-[color:var(--tone-rose)]",
+  tools: "border-[color:var(--border)] bg-[color:var(--surface-subtle)] text-[color:var(--text-muted)]",
+};
+
+function PinIcons({ pin }: { pin: SearchPin }) {
+  const shown = pin.destinationIds.slice(0, 3);
+  const labels = pin.destinationIds.map((id) => destinationLabels[id]).join(", ");
+  return (
+    <span className="inline-flex shrink-0 items-center" role="img" aria-label={`${pin.name} contains ${labels}`}>
+      {shown.map((id, index) => {
+        const Icon = appModeIcons[id];
+        return (
+          <span
+            key={id}
+            aria-hidden="true"
+            className={cn(
+              "grid h-7 w-7 place-items-center rounded-full border-2 border-[color:var(--surface)] shadow-sm",
+              index > 0 && "-ml-1.5",
+              destinationTone[id],
+            )}
+            style={{ zIndex: shown.length - index }}
+          >
+            <Icon className="h-3.5 w-3.5" />
+          </span>
+        );
+      })}
+      {pin.destinationIds.length > shown.length ? (
+        <span
+          aria-hidden="true"
+          className="-ml-1 inline-flex h-7 min-w-7 items-center justify-center rounded-full border-2 border-[color:var(--surface)] bg-[color:var(--surface-subtle)] px-1 text-3xs font-extrabold text-[color:var(--text-muted)] shadow-sm"
+        >
+          +{pin.destinationIds.length - shown.length}
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+function SectionHeading({ children, action }: { children: string; action?: ReactNode }) {
+  return (
+    <div className="mb-1 flex min-h-10 items-center justify-between gap-2 px-2">
+      <h3 className="text-2xs font-extrabold uppercase tracking-[0.11em] text-[color:var(--text-muted)]">{children}</h3>
+      {action}
+    </div>
+  );
+}
+
+type EditorState = { pinId: string | null; name: string; destinationIds: SearchPinDestinationId[] };
+
+let pinIdFallbackCounter = 0;
+
+function createPinId() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) return crypto.randomUUID();
+  pinIdFallbackCounter += 1;
+  return `pin-${Date.now().toString(36)}-${pinIdFallbackCounter.toString(36)}`;
+}
+
+export function SearchPinsMenu({
+  currentModeId,
+  modeOptions,
+  actions,
+  globalSearchAvailable = true,
+  onClose,
+  onCurrentSearch,
+  onGlobalSearch,
+  onModeSelect,
+  onAction,
+}: {
+  currentModeId: AppModeId;
+  modeOptions: readonly ModeActionModeOption[];
+  actions: readonly ModeActionItem[];
+  globalSearchAvailable?: boolean;
+  onClose: () => void;
+  onCurrentSearch: () => void;
+  onGlobalSearch: () => void;
+  onModeSelect: (modeId: string) => void;
+  onAction: (actionId: ModeActionId) => void;
+}) {
+  const [pins, setPins] = useState<SearchPin[]>(() => readSearchPins());
+  const [expandedPinId, setExpandedPinId] = useState<string | null>(null);
+  const [showModePicker, setShowModePicker] = useState(false);
+  const [editor, setEditor] = useState<EditorState | null>(null);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [editorNotice, setEditorNotice] = useState<string | null>(null);
+  const editorDescriptionId = useId();
+  const editorNoticeId = useId();
+  const currentMode = appModeDefinition(currentModeId);
+  const CurrentModeIcon = appModeIcons[currentModeId];
+
+  useEffect(() => {
+    const syncStoredPins = (event: StorageEvent) => {
+      if (event.key === null || event.key === searchPinsStorageKey) setPins(readSearchPins());
+    };
+    const syncPins = (event: Event) => {
+      // CustomEvent without an init object exposes detail === null, not undefined.
+      // Treat both as "re-read storage" so a bare change signal cannot resurrect defaults.
+      const detail = event instanceof CustomEvent ? event.detail : undefined;
+      setPins(detail == null ? readSearchPins() : normalizeSearchPins(detail));
+    };
+    window.addEventListener("storage", syncStoredPins);
+    window.addEventListener(searchPinsChangeEvent, syncPins);
+    return () => {
+      window.removeEventListener("storage", syncStoredPins);
+      window.removeEventListener(searchPinsChangeEvent, syncPins);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!editor) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      setConfirmDelete(false);
+      setEditorNotice(null);
+      setEditor(null);
+    };
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => window.removeEventListener("keydown", onKeyDown, true);
+  }, [editor]);
+
+  function persistPins(next: SearchPin[]) {
+    const normalized = writeSearchPins(next);
+    setPins(normalized);
+    window.dispatchEvent(new CustomEvent(searchPinsChangeEvent, { detail: normalized }));
+  }
+
+  function beginNewPin() {
+    if (pins.length >= maximumSearchPins) return;
+    setExpandedPinId(null);
+    setShowModePicker(false);
+    setConfirmDelete(false);
+    setEditorNotice(null);
+    setEditor({ pinId: null, name: "", destinationIds: ["documents"] });
+  }
+
+  function beginEditPin(pin: SearchPin) {
+    setExpandedPinId(null);
+    setShowModePicker(false);
+    setConfirmDelete(false);
+    setEditorNotice(null);
+    setEditor({ pinId: pin.id, name: pin.name, destinationIds: [...pin.destinationIds] });
+  }
+
+  function toggleEditorDestination(destinationId: SearchPinDestinationId) {
+    if (!editor) return;
+    const selected = editor.destinationIds.includes(destinationId);
+    if (selected && editor.destinationIds.length === 1) return;
+    setEditor({
+      ...editor,
+      destinationIds: selected
+        ? editor.destinationIds.filter((id) => id !== destinationId)
+        : [...editor.destinationIds, destinationId],
+    });
+  }
+
+  function saveEditor() {
+    if (!editor) return;
+    const name = editor.name.trim();
+    if (!name) return;
+    if (editor.pinId) {
+      if (!pins.some((pin) => pin.id === editor.pinId)) {
+        setEditorNotice("This pin was removed elsewhere. Close the editor and create it again if needed.");
+        return;
+      }
+      persistPins(
+        pins.map((pin) => (pin.id === editor.pinId ? { ...pin, name, destinationIds: editor.destinationIds } : pin)),
+      );
+      setExpandedPinId(editor.pinId);
+    } else {
+      if (pins.length >= maximumSearchPins) {
+        setEditorNotice(`Maximum ${maximumSearchPins} pins reached. Delete a pin before creating another.`);
+        return;
+      }
+      const pin = { id: createPinId(), name, destinationIds: editor.destinationIds };
+      persistPins([...pins, pin]);
+      setExpandedPinId(pin.id);
+    }
+    setConfirmDelete(false);
+    setEditorNotice(null);
+    setEditor(null);
+  }
+
+  function deleteEditorPin() {
+    if (!editor?.pinId) return;
+    if (!confirmDelete) {
+      setConfirmDelete(true);
+      return;
+    }
+    persistPins(pins.filter((pin) => pin.id !== editor.pinId));
+    setConfirmDelete(false);
+    setEditorNotice(null);
+    setEditor(null);
+  }
+
+  if (editor) {
+    return (
+      <div className="mode-action-body polished-scroll p-3" aria-describedby={editorDescriptionId}>
+        <div className="mb-3 flex items-start justify-between gap-3 px-1">
+          <div>
+            <h3 className="text-sm font-extrabold text-[color:var(--text-heading)]">
+              {editor.pinId ? "Edit pin" : "Create a new pin"}
+            </h3>
+            <p id={editorDescriptionId} className="mt-0.5 text-xs leading-5 text-[color:var(--text-muted)]">
+              Name this shortcut and choose the app destinations it should contain.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => {
+              setConfirmDelete(false);
+              setEditorNotice(null);
+              setEditor(null);
+            }}
+            className={cn("min-h-12 min-w-12 rounded-xl", focusRing)}
+            aria-label="Close pin editor"
+          >
+            <X aria-hidden="true" className="mx-auto h-4 w-4" />
+          </button>
+        </div>
+
+        <label className="block text-xs font-bold text-[color:var(--text-muted)]">
+          Pin name
+          <input
+            autoFocus
+            value={editor.name}
+            maxLength={48}
+            onChange={(event) => setEditor({ ...editor, name: event.target.value })}
+            className={cn(
+              "mt-1.5 h-12 w-full rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] px-3 text-base font-semibold text-[color:var(--text-heading)]",
+              focusRing,
+            )}
+          />
+        </label>
+
+        <fieldset className="mt-4">
+          <legend className="mb-2 text-xs font-bold text-[color:var(--text-muted)]">App destinations</legend>
+          <div className="grid gap-1.5">
+            {searchPinDestinationIds.map((destinationId) => {
+              const Icon = appModeIcons[destinationId];
+              const selected = editor.destinationIds.includes(destinationId);
+              return (
+                <button
+                  key={destinationId}
+                  type="button"
+                  aria-pressed={selected}
+                  onClick={() => toggleEditorDestination(destinationId)}
+                  className={cn(
+                    "flex min-h-12 items-center gap-3 rounded-xl border px-3 text-left transition motion-reduce:transition-none",
+                    selected
+                      ? "border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)]/55"
+                      : "border-transparent hover:bg-[color:var(--surface-subtle)]",
+                    focusRing,
+                  )}
+                >
+                  <span
+                    className={cn("grid h-8 w-8 place-items-center rounded-lg border", destinationTone[destinationId])}
+                  >
+                    <Icon aria-hidden="true" className="h-4 w-4" />
+                  </span>
+                  <span className="flex-1 text-sm font-bold text-[color:var(--text-heading)]">
+                    {destinationLabels[destinationId]}
+                  </span>
+                  <span
+                    className={cn(
+                      "grid h-6 w-6 place-items-center rounded-full border",
+                      selected
+                        ? "border-[color:var(--clinical-accent)] bg-[color:var(--clinical-accent)] text-[color:var(--clinical-accent-contrast)]"
+                        : "border-[color:var(--border)] text-transparent",
+                    )}
+                  >
+                    <Check aria-hidden="true" className="h-3.5 w-3.5" />
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </fieldset>
+
+        {editorNotice ? (
+          <p id={editorNoticeId} role="status" className="mt-3 text-xs font-semibold text-[color:var(--danger)]">
+            {editorNotice}
+          </p>
+        ) : null}
+
+        <div className="mt-4 flex flex-wrap gap-2 border-t border-[color:var(--border)] pt-3">
+          {editor.pinId ? (
+            <button
+              type="button"
+              onClick={deleteEditorPin}
+              className={cn(
+                "inline-flex min-h-12 items-center gap-2 rounded-xl border border-[color:var(--danger-border)] bg-[color:var(--danger-soft)] px-3 text-sm font-bold text-[color:var(--danger)] hover:bg-[color:var(--danger-soft)]",
+                focusRing,
+              )}
+            >
+              <Trash2 aria-hidden="true" className="h-4 w-4" />
+              {confirmDelete ? "Confirm delete" : "Delete"}
+            </button>
+          ) : null}
+          <span className="flex-1" />
+          <button
+            type="button"
+            onClick={() => {
+              setConfirmDelete(false);
+              setEditorNotice(null);
+              setEditor(null);
+            }}
+            className={cn(
+              "min-h-12 rounded-xl px-4 text-sm font-bold hover:bg-[color:var(--surface-subtle)]",
+              focusRing,
+            )}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={saveEditor}
+            disabled={!editor.name.trim()}
+            aria-describedby={editorNotice ? editorNoticeId : undefined}
+            className={cn(
+              "min-h-12 rounded-xl bg-[color:var(--clinical-accent)] px-4 text-sm font-extrabold text-[color:var(--clinical-accent-contrast)] disabled:cursor-not-allowed disabled:opacity-45",
+              focusRing,
+            )}
+          >
+            {editor.pinId ? "Save pin" : "Create pin"}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (showModePicker) {
+    return (
+      <div className="mode-action-body polished-scroll p-2.5">
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <button
+            type="button"
+            onClick={() => setShowModePicker(false)}
+            className={cn(
+              "min-h-12 rounded-xl px-3 text-sm font-bold hover:bg-[color:var(--surface-subtle)]",
+              focusRing,
+            )}
+          >
+            Back
+          </button>
+          <div>
+            <h3 className="text-sm font-extrabold text-[color:var(--text-heading)]">Choose a search area</h3>
+            <p className="text-xs text-[color:var(--text-muted)]">Your query stays in the composer.</p>
+          </div>
+        </div>
+        <div className="grid gap-1.5">
+          {modeOptions.map((mode) => {
+            const Icon = mode.icon;
+            const active = mode.id === currentModeId;
+            return (
+              <button
+                key={mode.id}
+                type="button"
+                disabled={mode.disabled}
+                onClick={() => onModeSelect(mode.id)}
+                className={cn(
+                  "flex min-h-12 items-center gap-3 rounded-xl px-3 text-left hover:bg-[color:var(--surface-subtle)] disabled:opacity-45",
+                  active && "bg-[color:var(--clinical-accent-soft)]/55",
+                  focusRing,
+                )}
+              >
+                <span className="grid h-9 w-9 place-items-center rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--clinical-accent)]">
+                  <Icon aria-hidden="true" className="h-4 w-4" />
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate text-sm font-bold text-[color:var(--text-heading)]">
+                    {mode.label}
+                  </span>
+                  {mode.description ? (
+                    <span className="block truncate text-xs text-[color:var(--text-muted)]">{mode.description}</span>
+                  ) : null}
+                </span>
+                {active ? <Check aria-hidden="true" className="h-4 w-4 text-[color:var(--clinical-accent)]" /> : null}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mode-action-body polished-scroll p-2.5" data-testid="pins-and-search-menu">
+      <SectionHeading
+        action={
+          <button
+            type="button"
+            onClick={beginNewPin}
+            disabled={pins.length >= maximumSearchPins}
+            title={pins.length >= maximumSearchPins ? `Maximum ${maximumSearchPins} pins reached` : undefined}
+            className={cn(
+              "inline-flex min-h-12 items-center gap-1 rounded-lg px-2 text-xs font-extrabold text-[color:var(--clinical-accent)] hover:bg-[color:var(--clinical-accent-soft)] disabled:cursor-not-allowed disabled:opacity-45",
+              focusRing,
+            )}
+          >
+            <Plus aria-hidden="true" className="h-3.5 w-3.5" />
+            New pin
+          </button>
+        }
+      >
+        Your pins
+      </SectionHeading>
+
+      <div className="grid gap-1">
+        {pins.length === 0 ? (
+          <p className="rounded-xl border border-dashed border-[color:var(--border)] px-3 py-4 text-center text-xs leading-5 text-[color:var(--text-muted)]">
+            No pins yet. Create one for the app destinations you use together.
+          </p>
+        ) : null}
+        {pins.map((pin) => {
+          const expanded = expandedPinId === pin.id;
+          return (
+            <div
+              key={pin.id}
+              className={cn(
+                "rounded-xl",
+                expanded ? "bg-[color:var(--clinical-accent-soft)]/45" : "hover:bg-[color:var(--surface-subtle)]",
+              )}
+            >
+              <div className="flex min-h-14 items-center">
+                <button
+                  type="button"
+                  data-sheet-autofocus={pin === pins[0] ? "true" : undefined}
+                  aria-label={`${expanded ? "Close" : "Open"} ${pin.name} pin, ${pin.destinationIds.length} destinations`}
+                  aria-expanded={expanded}
+                  onClick={() => setExpandedPinId(expanded ? null : pin.id)}
+                  className={cn(
+                    "flex min-h-14 min-w-0 flex-1 items-center gap-3 rounded-xl px-2.5 text-left",
+                    focusRing,
+                  )}
+                >
+                  <PinIcons pin={pin} />
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate text-sm font-extrabold text-[color:var(--text-heading)]">
+                      {pin.name}
+                    </span>
+                    <span className="block truncate text-xs text-[color:var(--text-muted)]">
+                      {pin.destinationIds.length} destinations
+                    </span>
+                  </span>
+                  <ChevronDown
+                    aria-hidden="true"
+                    className={cn(
+                      "h-4 w-4 shrink-0 transition motion-reduce:transition-none",
+                      expanded && "rotate-180",
+                    )}
+                  />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => beginEditPin(pin)}
+                  aria-label={`Edit ${pin.name}`}
+                  className={cn(
+                    "mr-1 grid min-h-12 min-w-12 place-items-center rounded-xl text-[color:var(--text-muted)] hover:bg-[color:var(--surface)] hover:text-[color:var(--clinical-accent)]",
+                    focusRing,
+                  )}
+                >
+                  <Pencil aria-hidden="true" className="h-4 w-4" />
+                </button>
+              </div>
+              {expanded ? (
+                <div className="grid gap-1 px-2 pb-2 sm:grid-cols-2">
+                  {pin.destinationIds.map((destinationId) => {
+                    const Icon = appModeIcons[destinationId];
+                    return (
+                      <Link
+                        key={destinationId}
+                        href={appModeHomeHref(destinationId)}
+                        onClick={onClose}
+                        className={cn(
+                          "flex min-h-12 items-center gap-2 rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] px-3 text-sm font-bold text-[color:var(--text-heading)] hover:border-[color:var(--clinical-accent-border)]",
+                          focusRing,
+                        )}
+                      >
+                        <Icon aria-hidden="true" className="h-4 w-4 text-[color:var(--clinical-accent)]" />
+                        <span className="truncate">{destinationLabels[destinationId]}</span>
+                        <ChevronRight
+                          aria-hidden="true"
+                          className="ml-auto h-3.5 w-3.5 text-[color:var(--text-muted)]"
+                        />
+                      </Link>
+                    );
+                  })}
+                </div>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="my-2 border-t border-[color:var(--border)] pt-2">
+        <SectionHeading>Search in</SectionHeading>
+        <button
+          type="button"
+          onClick={onCurrentSearch}
+          className={cn(
+            "flex min-h-14 w-full items-center gap-3 rounded-xl px-2.5 text-left hover:bg-[color:var(--surface-subtle)]",
+            focusRing,
+          )}
+        >
+          <span className="grid h-9 w-9 place-items-center rounded-xl border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]">
+            <CurrentModeIcon aria-hidden="true" className="h-4 w-4" />
+          </span>
+          <span className="min-w-0 flex-1">
+            <span className="block truncate text-sm font-extrabold text-[color:var(--text-heading)]">
+              Search {currentMode.label}
+            </span>
+            <span className="block text-xs text-[color:var(--text-muted)]">Current search area</span>
+          </span>
+          <Check aria-hidden="true" className="h-4 w-4 text-[color:var(--clinical-accent)]" />
+        </button>
+        {globalSearchAvailable ? (
+          <button
+            type="button"
+            onClick={onGlobalSearch}
+            className={cn(
+              "flex min-h-14 w-full items-center gap-3 rounded-xl px-2.5 text-left hover:bg-[color:var(--surface-subtle)]",
+              focusRing,
+            )}
+          >
+            <span className="grid h-9 w-9 place-items-center rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--clinical-accent)]">
+              <Globe2 aria-hidden="true" className="h-4 w-4" />
+            </span>
+            <span className="min-w-0 flex-1">
+              <span className="block text-sm font-extrabold text-[color:var(--text-heading)]">
+                Search all clinical areas
+              </span>
+              <span className="block text-xs text-[color:var(--text-muted)]">
+                Open universal results for this query
+              </span>
+            </span>
+            <Search aria-hidden="true" className="h-4 w-4 text-[color:var(--text-muted)]" />
+          </button>
+        ) : null}
+        <button
+          type="button"
+          onClick={() => setShowModePicker(true)}
+          className={cn(
+            "flex min-h-14 w-full items-center gap-3 rounded-xl px-2.5 text-left hover:bg-[color:var(--surface-subtle)]",
+            focusRing,
+          )}
+        >
+          <span className="grid h-9 w-9 place-items-center rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--clinical-accent)]">
+            <Plus aria-hidden="true" className="h-4 w-4" />
+          </span>
+          <span className="min-w-0 flex-1">
+            <span className="block text-sm font-extrabold text-[color:var(--text-heading)]">
+              Choose another search area
+            </span>
+            <span className="block text-xs text-[color:var(--text-muted)]">
+              Keep the query and change mode explicitly
+            </span>
+          </span>
+          <ChevronRight aria-hidden="true" className="h-4 w-4 text-[color:var(--text-muted)]" />
+        </button>
+      </div>
+
+      <div className="border-t border-[color:var(--border)] pt-2">
+        <SectionHeading>Useful actions</SectionHeading>
+        <div className="grid grid-cols-2 gap-1.5" role="menu" aria-label="Useful actions">
+          {actions.map((action) => {
+            const Icon: LucideIcon = action.icon;
+            return (
+              <button
+                key={action.id}
+                type="button"
+                role="menuitem"
+                aria-label={action.label}
+                onClick={() => onAction(action.id)}
+                className={cn(
+                  "flex min-h-12 items-center gap-2 rounded-xl px-2.5 text-left hover:bg-[color:var(--surface-subtle)]",
+                  focusRing,
+                )}
+              >
+                <Icon aria-hidden="true" className="h-4 w-4 shrink-0 text-[color:var(--clinical-accent)]" />
+                <span
+                  aria-hidden="true"
+                  className="min-w-0 truncate text-xs font-extrabold text-[color:var(--text-heading)]"
+                >
+                  {action.shortLabel ?? action.label}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/clinical-dashboard/universal-search-command-surface.tsx b/src/components/clinical-dashboard/universal-search-command-surface.tsx
index 2b7cfb7241..d3f8e2ff5d 100644
--- a/src/components/clinical-dashboard/universal-search-command-surface.tsx
+++ b/src/components/clinical-dashboard/universal-search-command-surface.tsx
@@ -30,6 +30,8 @@ import {
   searchCommandSurfaceConfig,
   type CommandSurfacePlacement,
 } from "@/lib/search-command-surface";
+import { useCommandDropdownDisplayable } from "@/components/clinical-dashboard/use-command-dropdown-displayable";
+import { useEventCallback } from "@/components/clinical-dashboard/use-event-callback";
 import type { UniversalSearchDomain } from "@/lib/universal-search";
 import { universalSearchModeForDomain } from "@/lib/universal-search-mode-context";
 
@@ -405,31 +407,17 @@ export function UniversalSearchCommandSurface({
   // The dropdown is a fine-pointer desktop enhancement. Width-only checks let
   // wide, zoomed, or desktop-mode phones open it over the page.
   const dropdownMinimumWidthQuery = commandDropdownMinimumWidthMediaQuery(placement);
-  const [dropdownDisplayable, setDropdownDisplayable] = useState(false);
-  useEffect(() => {
-    if (typeof window.matchMedia !== "function") return;
-    const minimumWidthMedia = window.matchMedia(dropdownMinimumWidthQuery);
-    const pointerMedia = window.matchMedia(commandDropdownPointerMediaQuery);
-    const sync = () => {
-      const displayable = commandDropdownCanDisplay({
-        minimumWidthMatches: minimumWidthMedia.matches,
-        pointerMatches: pointerMedia.matches,
-        maxTouchPoints: navigator.maxTouchPoints,
-      });
-      setDropdownDisplayable(displayable);
-      if (!displayable) {
-        onDropdownOpenChange(false);
-        setActiveIndex(-1);
-      }
-    };
-    sync();
-    minimumWidthMedia.addEventListener("change", sync);
-    pointerMedia.addEventListener("change", sync);
-    return () => {
-      minimumWidthMedia.removeEventListener("change", sync);
-      pointerMedia.removeEventListener("change", sync);
-    };
-  }, [dropdownMinimumWidthQuery, onDropdownOpenChange]);
+  const [eagerDropdownDisplayable, setEagerDropdownDisplayable] = useState<boolean | null>(null);
+  const closeDropdownWhenUndisplayable = useEventCallback(() => {
+    setEagerDropdownDisplayable(null);
+    onDropdownOpenChange(false);
+    setActiveIndex(-1);
+  });
+  const mediaDropdownDisplayable = useCommandDropdownDisplayable(placement, closeDropdownWhenUndisplayable);
+  // Focus can arrive before the shared hook's post-hydration effect has
+  // synchronized the conservative false initial state. Keep only an event-driven
+  // eager override instead of mirroring hook state from an effect.
+  const dropdownDisplayable = eagerDropdownDisplayable ?? mediaDropdownDisplayable;
   // A true "everything" view: the active mode's own domain is included (no excludeDomain) so
   // the palette surfaces every entity type, ordered by the server's intent-aware domainOrder.
   const universal = useUniversalSearch({
@@ -1022,11 +1010,12 @@ export function UniversalSearchCommandSurface({
             pointerMatches: window.matchMedia(commandDropdownPointerMediaQuery).matches,
             maxTouchPoints: navigator.maxTouchPoints,
           });
-          setDropdownDisplayable(displayable);
+          setEagerDropdownDisplayable(displayable ? true : null);
           if (displayable) onDropdownOpenChange(true);
         }}
         onBlurCapture={(event) => {
           if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+            setEagerDropdownDisplayable(null);
             onDropdownOpenChange(false);
             setActiveIndex(-1);
           }
diff --git a/src/components/clinical-dashboard/use-command-dropdown-displayable.ts b/src/components/clinical-dashboard/use-command-dropdown-displayable.ts
new file mode 100644
index 0000000000..3bc4c41f73
--- /dev/null
+++ b/src/components/clinical-dashboard/use-command-dropdown-displayable.ts
@@ -0,0 +1,90 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import {
+  commandDropdownCanDisplay,
+  commandDropdownMinimumWidthMediaQuery,
+  commandDropdownPointerMediaQuery,
+  type CommandSurfacePlacement,
+} from "@/lib/search-command-surface";
+
+const commandSurfacePlacements: readonly CommandSurfacePlacement[] = ["bottom-dock", "inline"];
+
+const undisplayableByPlacement: Record<CommandSurfacePlacement, boolean> = {
+  "bottom-dock": false,
+  inline: false,
+};
+
+/**
+ * Shared displayability for the universal command dropdown. Both the header
+ * (scrim / pins-menu gate) and the command surface must agree on when the
+ * panel can render — width + fine pointer / zero-touch.
+ */
+export function useCommandDropdownDisplayableByPlacement() {
+  const [displayableByPlacement, setDisplayableByPlacement] =
+    useState<Record<CommandSurfacePlacement, boolean>>(undisplayableByPlacement);
+
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function") return;
+
+    const minimumWidthMediaByPlacement = Object.fromEntries(
+      commandSurfacePlacements.map((placement) => [
+        placement,
+        window.matchMedia(commandDropdownMinimumWidthMediaQuery(placement)),
+      ]),
+    ) as Record<CommandSurfacePlacement, MediaQueryList>;
+    const pointerMedia = window.matchMedia(commandDropdownPointerMediaQuery);
+    const sync = () => {
+      setDisplayableByPlacement({
+        "bottom-dock": commandDropdownCanDisplay({
+          minimumWidthMatches: minimumWidthMediaByPlacement["bottom-dock"].matches,
+          pointerMatches: pointerMedia.matches,
+          maxTouchPoints: navigator.maxTouchPoints,
+        }),
+        inline: commandDropdownCanDisplay({
+          minimumWidthMatches: minimumWidthMediaByPlacement.inline.matches,
+          pointerMatches: pointerMedia.matches,
+          maxTouchPoints: navigator.maxTouchPoints,
+        }),
+      });
+    };
+    sync();
+    for (const media of Object.values(minimumWidthMediaByPlacement)) media.addEventListener("change", sync);
+    pointerMedia.addEventListener("change", sync);
+    return () => {
+      for (const media of Object.values(minimumWidthMediaByPlacement)) media.removeEventListener("change", sync);
+      pointerMedia.removeEventListener("change", sync);
+    };
+  }, []);
+
+  return displayableByPlacement;
+}
+
+export function useCommandDropdownDisplayable(placement: CommandSurfacePlacement, onUndisplayable?: () => void) {
+  const [displayable, setDisplayable] = useState(false);
+
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function") return;
+    const minimumWidthMedia = window.matchMedia(commandDropdownMinimumWidthMediaQuery(placement));
+    const pointerMedia = window.matchMedia(commandDropdownPointerMediaQuery);
+    const sync = () => {
+      const next = commandDropdownCanDisplay({
+        minimumWidthMatches: minimumWidthMedia.matches,
+        pointerMatches: pointerMedia.matches,
+        maxTouchPoints: navigator.maxTouchPoints,
+      });
+      setDisplayable(next);
+      if (!next) onUndisplayable?.();
+    };
+    sync();
+    minimumWidthMedia.addEventListener("change", sync);
+    pointerMedia.addEventListener("change", sync);
+    return () => {
+      minimumWidthMedia.removeEventListener("change", sync);
+      pointerMedia.removeEventListener("change", sync);
+    };
+  }, [placement, onUndisplayable]);
+
+  return displayable;
+}
diff --git a/src/components/pinned-plus-menu-mockups.tsx b/src/components/pinned-plus-menu-mockups.tsx
new file mode 100644
index 0000000000..f4a6e3c12b
--- /dev/null
+++ b/src/components/pinned-plus-menu-mockups.tsx
@@ -0,0 +1,792 @@
+"use client";
+
+import {
+  BookOpen,
+  Calculator,
+  Check,
+  ChevronDown,
+  Clock3,
+  FileText,
+  Heart,
+  Menu,
+  Pencil,
+  Pill,
+  Plus,
+  Search,
+  Sparkles,
+  UserRound,
+  X,
+  type LucideIcon,
+} from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+import { cn } from "@/components/ui-primitives";
+
+type Direction = "unified" | "rail" | "palette";
+type Device = "desktop" | "tablet" | "phone";
+type PreviewState = "closed" | "open" | "edit";
+type DestinationId = "documents" | "medications" | "forms" | "monitoring" | "calculators" | "favourites" | "recent";
+type Pin = { id: string; name: string; destinations: DestinationId[] };
+
+const destinations: Record<DestinationId, { label: string; detail: string; icon: LucideIcon; tone: string }> = {
+  documents: {
+    label: "Documents",
+    detail: "Guidelines and local policies",
+    icon: FileText,
+    tone: "bg-sky-50 text-sky-700",
+  },
+  medications: {
+    label: "Medications",
+    detail: "Doses and interactions",
+    icon: Pill,
+    tone: "bg-emerald-50 text-emerald-700",
+  },
+  forms: {
+    label: "Pathology forms",
+    detail: "Frequently used request forms",
+    icon: BookOpen,
+    tone: "bg-amber-50 text-amber-700",
+  },
+  monitoring: {
+    label: "Monitoring",
+    detail: "Physical health checks",
+    icon: Sparkles,
+    tone: "bg-violet-50 text-violet-700",
+  },
+  calculators: {
+    label: "Calculators",
+    detail: "Clinical scoring tools",
+    icon: Calculator,
+    tone: "bg-indigo-50 text-indigo-700",
+  },
+  favourites: { label: "Favourites", detail: "Saved pages and sources", icon: Heart, tone: "bg-rose-50 text-rose-700" },
+  recent: { label: "Recent items", detail: "Return to recent work", icon: Clock3, tone: "bg-slate-100 text-slate-700" },
+};
+
+const startingPins: Pin[] = [
+  { id: "ward", name: "Ward essentials", destinations: ["documents", "medications", "forms", "monitoring"] },
+  { id: "tools", name: "My quick tools", destinations: ["calculators", "favourites", "recent"] },
+];
+
+const directionMeta: Array<{ id: Direction; label: string; note: string; verdict: string }> = [
+  {
+    id: "unified",
+    label: "Unified plus menu",
+    note: "Pins and search choices in one calm, attached surface.",
+    verdict: "Recommended",
+  },
+  {
+    id: "rail",
+    label: "Pinned icon rail",
+    note: "Keeps your small pin icons one tap from the composer.",
+    verdict: "Fastest",
+  },
+  {
+    id: "palette",
+    label: "Search command palette",
+    note: "A keyboard-friendly launcher for pins and search areas.",
+    verdict: "Power users",
+  },
+];
+
+function Constellation({ pin, size = "md" }: { pin: Pin; size?: "sm" | "md" }) {
+  const shown = pin.destinations.slice(0, 3);
+  const extra = pin.destinations.length - shown.length;
+  return (
+    <span
+      role="img"
+      aria-label={`${pin.name} contains ${pin.destinations.map((id) => destinations[id].label).join(", ")}`}
+      className="inline-flex shrink-0 items-center"
+    >
+      {shown.map((id, index) => {
+        const item = destinations[id];
+        const Icon = item.icon;
+        return (
+          <span
+            key={id}
+            className={cn(
+              "grid rounded-full border-2 border-white shadow-sm",
+              size === "sm" ? "h-6 w-6" : "h-8 w-8",
+              index > 0 && "-ml-2",
+              item.tone,
+            )}
+          >
+            <Icon className={cn("m-auto", size === "sm" ? "h-3 w-3" : "h-3.5 w-3.5")} aria-hidden="true" />
+          </span>
+        );
+      })}
+      {extra > 0 && (
+        <span
+          className={cn(
+            "-ml-2 grid rounded-full border-2 border-white bg-slate-900 font-bold text-white shadow-sm",
+            size === "sm" ? "h-6 w-6 text-3xs" : "h-8 w-8 text-3xs",
+          )}
+        >
+          +{extra}
+        </span>
+      )}
+    </span>
+  );
+}
+
+function SearchChoices({ compact = false }: { compact?: boolean }) {
+  const choices = [
+    { label: "Search Documents", detail: "Current area", icon: FileText, active: true },
+    { label: "Search all clinical areas", detail: "Global search", icon: Search, active: false },
+    { label: "Choose another area", detail: "Medications, services, tools…", icon: Plus, active: false },
+  ];
+  return (
+    <div className={cn("grid gap-2", !compact && "sm:grid-cols-3")}>
+      {choices.map((choice) => {
+        const Icon = choice.icon;
+        return (
+          <button
+            key={choice.label}
+            className={cn(
+              "flex min-h-14 items-center gap-3 rounded-2xl border p-3 text-left",
+              choice.active ? "border-blue-300 bg-blue-50" : "border-slate-200 bg-white hover:border-blue-200",
+            )}
+          >
+            <span
+              className={cn(
+                "grid h-9 w-9 shrink-0 place-items-center rounded-full",
+                choice.active ? "bg-blue-700 text-white" : "bg-slate-100 text-slate-600",
+              )}
+            >
+              <Icon className="h-4 w-4" aria-hidden="true" />
+            </span>
+            <span className="min-w-0">
+              <span className="block text-sm font-bold text-slate-950">{choice.label}</span>
+              <span className="block truncate text-xs text-slate-500">{choice.detail}</span>
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function PinCard({
+  pin,
+  selected,
+  onSelect,
+  onEdit,
+  expanded = false,
+}: {
+  pin: Pin;
+  selected?: boolean;
+  onSelect: () => void;
+  onEdit: () => void;
+  expanded?: boolean;
+}) {
+  return (
+    <article className={cn("rounded-2xl border bg-white", selected ? "border-blue-300 shadow-sm" : "border-slate-200")}>
+      <div className="flex items-center gap-3 p-3">
+        <button onClick={onSelect} className="flex min-h-12 min-w-0 flex-1 items-center gap-3 text-left">
+          <Constellation pin={pin} size="sm" />
+          <span className="min-w-0 flex-1">
+            <span className="block truncate text-sm font-bold text-slate-950">{pin.name}</span>
+            <span className="block text-xs text-slate-500">{pin.destinations.length} app destinations</span>
+          </span>
+          <ChevronDown
+            className={cn("h-4 w-4 text-slate-400 transition", expanded && "rotate-180")}
+            aria-hidden="true"
+          />
+        </button>
+        <button
+          onClick={onEdit}
+          aria-label={`Edit ${pin.name}`}
+          className="grid min-h-12 min-w-12 place-items-center rounded-xl text-slate-500 hover:bg-slate-100 hover:text-blue-700"
+        >
+          <Pencil className="h-4 w-4" />
+        </button>
+      </div>
+      {expanded && (
+        <div className="grid grid-cols-2 gap-1 border-t border-slate-100 p-2">
+          {pin.destinations.map((id) => {
+            const item = destinations[id];
+            const Icon = item.icon;
+            return (
+              <button
+                key={id}
+                className="flex min-h-12 items-center gap-2 rounded-xl px-2 text-left text-xs font-semibold text-slate-700 hover:bg-slate-50"
+              >
+                <Icon className="h-4 w-4 text-blue-700" />
+                {item.label}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </article>
+  );
+}
+
+function UnifiedMenu({
+  pins,
+  selected,
+  setSelected,
+  edit,
+  phone,
+}: {
+  pins: Pin[];
+  selected: string;
+  setSelected: (id: string) => void;
+  edit: (pin: Pin) => void;
+  phone: boolean;
+}) {
+  return (
+    <section
+      role="dialog"
+      aria-label="Search and pinned shortcuts"
+      className={cn(
+        "absolute z-20 overflow-y-auto border border-slate-200 bg-[#fbfcfe] shadow-[0_24px_70px_rgba(15,23,42,.2)]",
+        phone
+          ? "bottom-[5.5rem] left-2 right-2 max-h-[72%] rounded-[1.75rem] p-3"
+          : "bottom-[5.8rem] left-6 w-[31rem] max-h-[72%] rounded-3xl p-4",
+      )}
+    >
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <p className="text-xs font-bold uppercase tracking-[.16em] text-blue-700">Quick access</p>
+          <h3 className="mt-1 text-xl font-bold text-slate-950">Your pins</h3>
+          <p className="mt-1 text-xs leading-5 text-slate-500">Shortcuts you chose from anywhere in the app.</p>
+        </div>
+        <button className="min-h-12 whitespace-nowrap rounded-xl px-3 text-sm font-bold text-blue-700">
+          <Plus className="mr-1 inline h-4 w-4" />
+          {phone ? "New" : "New pin"}
+        </button>
+      </div>
+      <div className="mt-3 space-y-2">
+        {pins.map((pin) => (
+          <PinCard
+            key={pin.id}
+            pin={pin}
+            selected={pin.id === selected}
+            expanded={pin.id === selected}
+            onSelect={() => setSelected(pin.id)}
+            onEdit={() => edit(pin)}
+          />
+        ))}
+      </div>
+      <div className="my-4 h-px bg-slate-200" />
+      <h3 className="text-base font-bold text-slate-950">Search in</h3>
+      <p className="mt-1 text-xs text-slate-500">Choose where this query should run.</p>
+      <div className="mt-3">
+        <SearchChoices compact />
+      </div>
+    </section>
+  );
+}
+
+function RailMenu({
+  pins,
+  selected,
+  setSelected,
+  edit,
+  phone,
+}: {
+  pins: Pin[];
+  selected: string;
+  setSelected: (id: string) => void;
+  edit: (pin: Pin) => void;
+  phone: boolean;
+}) {
+  const pin = pins.find((item) => item.id === selected) ?? pins[0];
+  return (
+    <section
+      role="dialog"
+      aria-label="Pinned icon rail menu"
+      className={cn(
+        "absolute z-20 rounded-3xl border border-slate-200 bg-white shadow-[0_24px_70px_rgba(15,23,42,.2)]",
+        phone ? "bottom-[5.5rem] left-2 right-2 p-3" : "bottom-[5.8rem] left-1/2 w-[42rem] -translate-x-1/2 p-4",
+      )}
+    >
+      <div className="flex items-center gap-2 overflow-x-auto pb-2">
+        {pins.map((item) => (
+          <button
+            key={item.id}
+            onClick={() => setSelected(item.id)}
+            aria-pressed={item.id === selected}
+            className={cn(
+              "flex min-h-14 shrink-0 items-center gap-2 rounded-2xl border px-3",
+              item.id === selected ? "border-blue-400 bg-blue-50" : "border-slate-200",
+            )}
+          >
+            <Constellation pin={item} size="sm" />
+            <span className="text-sm font-bold text-slate-950">{item.name}</span>
+          </button>
+        ))}
+        <button
+          className="grid min-h-14 min-w-14 shrink-0 place-items-center rounded-2xl border border-dashed border-blue-300 text-blue-700"
+          aria-label="Create a pin"
+        >
+          <Plus className="h-5 w-5" />
+        </button>
+      </div>
+      <div className={cn("mt-2 grid gap-3 rounded-2xl bg-slate-50 p-3", !phone && "grid-cols-[1fr_1.25fr]")}>
+        <div>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs font-bold uppercase tracking-wider text-blue-700">Selected pin</p>
+              <h3 className="mt-1 text-lg font-bold text-slate-950">{pin.name}</h3>
+            </div>
+            <button
+              onClick={() => edit(pin)}
+              aria-label={`Edit ${pin.name}`}
+              className="grid min-h-12 min-w-12 place-items-center rounded-full bg-white text-blue-700"
+            >
+              <Pencil className="h-4 w-4" />
+            </button>
+          </div>
+          <div className="mt-2 flex flex-wrap gap-2">
+            {pin.destinations.map((id) => {
+              const item = destinations[id];
+              const Icon = item.icon;
+              return (
+                <button
+                  key={id}
+                  className="flex min-h-12 items-center gap-2 rounded-xl bg-white px-3 text-xs font-bold text-slate-700"
+                >
+                  <Icon className="h-4 w-4 text-blue-700" />
+                  {item.label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+        <div className={cn(phone && "border-t border-slate-200 pt-3")}>
+          <h3 className="text-base font-bold text-slate-950">Search in</h3>
+          <div className="mt-2">
+            <SearchChoices compact />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function PaletteMenu({
+  pins,
+  selected,
+  setSelected,
+  edit,
+  phone,
+}: {
+  pins: Pin[];
+  selected: string;
+  setSelected: (id: string) => void;
+  edit: (pin: Pin) => void;
+  phone: boolean;
+}) {
+  return (
+    <section
+      role="dialog"
+      aria-label="Search command palette"
+      className={cn(
+        "absolute z-20 overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-[0_28px_90px_rgba(15,23,42,.24)]",
+        phone
+          ? "bottom-[5.5rem] left-2 right-2 max-h-[74%]"
+          : "left-1/2 top-1/2 w-[44rem] -translate-x-1/2 -translate-y-1/2",
+      )}
+    >
+      <div className="flex min-h-16 items-center gap-3 border-b border-slate-200 px-4">
+        <Search className="h-5 w-5 text-slate-400" />
+        <span className="text-sm text-slate-500">Open a pin or choose where to search…</span>
+        <kbd className="ml-auto rounded-md border border-slate-200 bg-slate-50 px-2 py-1 text-3xs text-slate-500">
+          ⌘ K
+        </kbd>
+      </div>
+      <div className="max-h-[32rem] overflow-y-auto p-3">
+        <h3 className="px-2 text-xs font-bold uppercase tracking-[.14em] text-slate-500">Your pins</h3>
+        <div className={cn("mt-2 grid gap-2", !phone && "grid-cols-2")}>
+          {pins.map((pin) => (
+            <div
+              key={pin.id}
+              className={cn(
+                "flex items-center rounded-2xl border p-2",
+                pin.id === selected ? "border-blue-300 bg-blue-50" : "border-slate-200",
+              )}
+            >
+              <button
+                onClick={() => setSelected(pin.id)}
+                className="flex min-h-12 min-w-0 flex-1 items-center gap-3 text-left"
+              >
+                <Constellation pin={pin} size="sm" />
+                <span className="min-w-0">
+                  <span className="block truncate text-sm font-bold text-slate-950">{pin.name}</span>
+                  <span className="block text-xs text-slate-500">Open {pin.destinations.length} destinations</span>
+                </span>
+              </button>
+              <button
+                onClick={() => edit(pin)}
+                aria-label={`Edit ${pin.name}`}
+                className="grid min-h-12 min-w-12 place-items-center text-blue-700"
+              >
+                <Pencil className="h-4 w-4" />
+              </button>
+            </div>
+          ))}
+        </div>
+        <h3 className="mt-4 px-2 text-xs font-bold uppercase tracking-[.14em] text-slate-500">Search in</h3>
+        <div className="mt-2">
+          <SearchChoices compact={phone} />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function PinEditor({
+  pin,
+  save,
+  cancel,
+  phone,
+}: {
+  pin: Pin;
+  save: (pin: Pin) => void;
+  cancel: () => void;
+  phone: boolean;
+}) {
+  const [draft, setDraft] = useState(pin);
+  useEffect(() => {
+    const handler = (event: KeyboardEvent) => {
+      if (event.key === "Escape") cancel();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [cancel]);
+  function toggle(id: DestinationId) {
+    setDraft((current) => ({
+      ...current,
+      destinations: current.destinations.includes(id)
+        ? current.destinations.length === 1
+          ? current.destinations
+          : current.destinations.filter((entry) => entry !== id)
+        : [...current.destinations, id],
+    }));
+  }
+  return (
+    <section
+      role="dialog"
+      aria-modal="true"
+      aria-label={`Edit ${pin.name} pin`}
+      className={cn(
+        "absolute z-30 flex flex-col overflow-hidden border border-slate-200 bg-white shadow-[0_30px_100px_rgba(15,23,42,.28)]",
+        phone ? "inset-2 rounded-[1.75rem]" : "bottom-6 right-6 top-6 w-[28rem] rounded-3xl",
+      )}
+    >
+      <header className="flex items-start justify-between border-b border-slate-200 p-4">
+        <div>
+          <p className="text-xs font-bold uppercase tracking-[.16em] text-blue-700">Edit pin</p>
+          <h3 className="mt-1 text-xl font-bold text-slate-950">{pin.name}</h3>
+        </div>
+        <button
+          onClick={cancel}
+          aria-label="Close pin editor"
+          className="grid min-h-12 min-w-12 place-items-center rounded-full hover:bg-slate-100"
+        >
+          <X className="h-5 w-5" />
+        </button>
+      </header>
+      <div className="min-h-0 flex-1 overflow-y-auto p-4">
+        <label className="text-sm font-bold text-slate-700">
+          Pin name
+          <input
+            value={draft.name}
+            onChange={(event) => setDraft({ ...draft, name: event.target.value })}
+            className="mt-2 min-h-12 w-full rounded-xl border border-slate-300 px-3 text-base text-slate-950"
+          />
+        </label>
+        <div className="mt-5 flex items-center justify-between">
+          <h4 className="text-sm font-bold text-slate-950">App destinations</h4>
+          <span className="text-xs font-semibold text-slate-500">
+            {draft.destinations.length} destinations selected
+          </span>
+        </div>
+        <div className="mt-2 space-y-2">
+          {(Object.keys(destinations) as DestinationId[]).map((id) => {
+            const item = destinations[id];
+            const Icon = item.icon;
+            const active = draft.destinations.includes(id);
+            return (
+              <button
+                key={id}
+                onClick={() => toggle(id)}
+                aria-label={`${active ? "Remove" : "Add"} ${item.label}`}
+                className={cn(
+                  "flex min-h-14 w-full items-center gap-3 rounded-2xl border p-3 text-left",
+                  active ? "border-blue-300 bg-blue-50" : "border-slate-200",
+                )}
+              >
+                <span className={cn("grid h-9 w-9 place-items-center rounded-full", item.tone)}>
+                  <Icon className="h-4 w-4" />
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block text-sm font-bold text-slate-950">{item.label}</span>
+                  <span className="block truncate text-xs text-slate-500">{item.detail}</span>
+                </span>
+                <span
+                  className={cn(
+                    "grid h-5 w-5 place-items-center rounded-full border",
+                    active ? "border-blue-700 bg-blue-700 text-white" : "border-slate-300",
+                  )}
+                >
+                  {active && <Check className="h-3 w-3" />}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+      <footer className="grid grid-cols-2 gap-2 border-t border-slate-200 p-4">
+        <button onClick={cancel} className="min-h-12 rounded-xl border border-slate-300 font-bold text-slate-700">
+          Cancel
+        </button>
+        <button
+          onClick={() => save(draft)}
+          disabled={!draft.name.trim()}
+          className="min-h-12 rounded-xl bg-blue-700 font-bold text-white disabled:opacity-40"
+        >
+          Save changes
+        </button>
+      </footer>
+    </section>
+  );
+}
+
+function AppPreview({
+  direction,
+  device,
+  state,
+  pins,
+  setPins,
+  setState,
+}: {
+  direction: Direction;
+  device: Device;
+  state: PreviewState;
+  pins: Pin[];
+  setPins: (pins: Pin[]) => void;
+  setState: (state: PreviewState) => void;
+}) {
+  const phone = device === "phone";
+  const [selected, setSelected] = useState(pins[0].id);
+  const trigger = useRef<HTMLButtonElement>(null);
+  const previousState = useRef(state);
+  const selectedPin = pins.find((pin) => pin.id === selected) ?? pins[0];
+  useEffect(() => {
+    if (previousState.current !== "closed" && state === "closed") trigger.current?.focus();
+    previousState.current = state;
+  }, [state]);
+  const edit = (pin: Pin) => {
+    setSelected(pin.id);
+    setState("edit");
+  };
+  const shared = { pins, selected, setSelected, edit, phone };
+  return (
+    <section
+      aria-label={`${device[0].toUpperCase()}${device.slice(1)} mockup preview`}
+      className={cn(
+        "relative mx-auto overflow-hidden border border-slate-200 bg-[#f3f6fa] shadow-[0_22px_70px_rgba(15,23,42,.14)]",
+        device === "desktop" && "h-[45rem] w-full max-w-[74rem] rounded-[2rem]",
+        device === "tablet" && "h-[48rem] w-full max-w-[48rem] rounded-[2rem]",
+        phone && "h-[47rem] w-full max-w-[24.375rem] rounded-[2.5rem]",
+      )}
+    >
+      <header className="flex h-16 items-center justify-between border-b border-slate-200 bg-white px-4">
+        <button aria-label="Open navigation" className="grid min-h-12 min-w-12 place-items-center">
+          <Menu className="h-5 w-5" />
+        </button>
+        <button className="flex min-h-12 items-center gap-2 rounded-full border border-slate-200 bg-white px-3 text-sm font-bold shadow-sm">
+          <span className="grid h-8 w-8 place-items-center rounded-full bg-blue-700 text-white">
+            <FileText className="h-4 w-4" />
+          </span>
+          Documents
+          <ChevronDown className="h-4 w-4" />
+        </button>
+        <button aria-label="Account" className="grid min-h-12 min-w-12 place-items-center rounded-full">
+          <UserRound className="h-5 w-5" />
+        </button>
+      </header>
+      <main className={cn("px-6 text-center", phone ? "pt-16" : "pt-24")}>
+        <span className="mx-auto grid h-12 w-12 place-items-center rounded-2xl border border-blue-100 bg-white text-blue-700 shadow-sm">
+          <FileText className="h-5 w-5" />
+        </span>
+        <h2 className={cn("mt-5 font-black tracking-[-.035em] text-slate-950", phone ? "text-2xl" : "text-4xl")}>
+          Find the right clinical source
+        </h2>
+        <p className="mx-auto mt-3 max-w-xl text-sm font-medium leading-6 text-slate-500">
+          Search Documents first, then widen the same query when another clinical area will help.
+        </p>
+        {state === "closed" && (
+          <div className="mx-auto mt-8 flex w-fit items-center gap-3 rounded-full border border-slate-200 bg-white px-4 py-2 shadow-sm">
+            <Constellation pin={pins[0]} size="sm" />
+            <span className="text-left">
+              <span className="block text-3xs font-bold uppercase tracking-wider text-slate-400">Pinned by you</span>
+              <span className="text-sm font-bold text-slate-800">{pins.length} pins ready</span>
+            </span>
+          </div>
+        )}
+      </main>
+      <div
+        className={cn(
+          "absolute bottom-0 left-0 right-0 border-t border-slate-200 bg-white",
+          phone ? "p-3 pb-4" : "p-4",
+        )}
+      >
+        <div className={cn("mx-auto flex items-center gap-2", !phone && "max-w-4xl")}>
+          <button
+            ref={trigger}
+            onClick={() => setState(state === "closed" ? "open" : "closed")}
+            aria-label={state === "closed" ? "Open search and pins menu" : "Close search and pins menu"}
+            aria-expanded={state !== "closed"}
+            className={cn(
+              "relative grid min-h-12 min-w-12 place-items-center rounded-2xl transition",
+              state === "closed" ? "bg-blue-50 text-blue-700" : "bg-blue-700 text-white",
+            )}
+          >
+            <Plus className={cn("h-5 w-5 transition", state !== "closed" && "rotate-45")} />
+            <span className="absolute -right-1 -top-1 h-3 w-3 rounded-full border-2 border-white bg-emerald-500" />
+          </button>
+          <div className="flex min-h-12 min-w-0 flex-1 items-center gap-2 rounded-2xl border border-slate-300 px-3 text-left text-sm text-slate-500">
+            <Search className="h-4 w-4 shrink-0" />
+            <span className="truncate">Search Documents</span>
+          </div>
+          <button className="min-h-12 rounded-2xl bg-blue-700 px-4 text-sm font-bold text-white">Search</button>
+        </div>
+      </div>
+      {state !== "closed" && (
+        <div
+          aria-hidden="true"
+          className="absolute bottom-[5rem] left-0 right-0 top-16 z-10 bg-slate-950/[0.06] backdrop-blur-[1px]"
+        />
+      )}
+      {state !== "closed" && direction === "unified" && <UnifiedMenu {...shared} />}
+      {state !== "closed" && direction === "rail" && <RailMenu {...shared} />}
+      {state !== "closed" && direction === "palette" && <PaletteMenu {...shared} />}
+      {state === "edit" && (
+        <PinEditor
+          pin={selectedPin}
+          phone={phone}
+          cancel={() => setState("open")}
+          save={(pin) => {
+            setPins(pins.map((item) => (item.id === pin.id ? pin : item)));
+            setState("open");
+          }}
+        />
+      )}
+    </section>
+  );
+}
+
+export function PinnedPlusMenuMockupsPage() {
+  const [direction, setDirection] = useState<Direction>("unified");
+  const [device, setDevice] = useState<Device>("desktop");
+  const [state, setState] = useState<PreviewState>("closed");
+  const [pins, setPins] = useState(startingPins);
+  return (
+    <main className="min-h-screen bg-[#edf2f7] px-4 py-6 text-slate-950 sm:px-6 lg:px-10">
+      <div className="mx-auto max-w-[82rem]">
+        <header className="flex flex-col justify-between gap-4 lg:flex-row lg:items-end">
+          <div>
+            <p className="text-xs font-bold uppercase tracking-[.18em] text-blue-700">Search + menu · revised study</p>
+            <h1 className="mt-2 text-3xl font-black tracking-[-.04em] sm:text-4xl">
+              Editable pins, without changing search by accident
+            </h1>
+            <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-600">
+              Pins open useful app destinations. Search choices control where the query runs. Both live in one coherent
+              + menu.
+            </p>
+          </div>
+          <div className="rounded-2xl border border-blue-200 bg-blue-50 px-4 py-3 text-sm">
+            <span className="font-bold text-blue-800">Recommendation:</span> Unified plus menu
+          </div>
+        </header>
+        <nav aria-label="Mockup directions" className="mt-6 grid gap-2 md:grid-cols-3">
+          {directionMeta.map((item, index) => (
+            <button
+              key={item.id}
+              onClick={() => setDirection(item.id)}
+              aria-pressed={direction === item.id}
+              className={cn(
+                "min-h-20 rounded-2xl border p-4 text-left",
+                direction === item.id
+                  ? "border-blue-500 bg-blue-700 text-white shadow-md"
+                  : "border-slate-200 bg-white hover:border-blue-300",
+              )}
+            >
+              <span className="text-3xs font-bold uppercase tracking-[.14em] opacity-70">
+                0{index + 1} · {item.verdict}
+              </span>
+              <span className="mt-1 block text-base font-bold">{item.label}</span>
+              <span className="mt-1 block text-xs leading-5 opacity-75">{item.note}</span>
+            </button>
+          ))}
+        </nav>
+        <div className="mt-4 flex flex-col justify-between gap-3 rounded-2xl border border-slate-200 bg-white p-3 sm:flex-row sm:items-center">
+          <div role="group" aria-label="Preview device" className="flex gap-1 rounded-xl bg-slate-100 p-1">
+            {(["desktop", "tablet", "phone"] as Device[]).map((item) => (
+              <button
+                key={item}
+                onClick={() => setDevice(item)}
+                aria-label={`${item[0].toUpperCase()}${item.slice(1)} preview`}
+                aria-pressed={device === item}
+                className={cn(
+                  "min-h-11 flex-1 rounded-lg px-4 text-sm font-bold capitalize sm:flex-none",
+                  device === item ? "bg-white text-blue-700 shadow-sm" : "text-slate-500",
+                )}
+              >
+                {item}
+              </button>
+            ))}
+          </div>
+          <div role="group" aria-label="Preview state" className="flex gap-1 rounded-xl bg-slate-100 p-1">
+            {(
+              [
+                { id: "closed", label: "Closed" },
+                { id: "open", label: "Menu open" },
+                { id: "edit", label: "Edit pin" },
+              ] as Array<{ id: PreviewState; label: string }>
+            ).map((item) => (
+              <button
+                key={item.id}
+                onClick={() => setState(item.id)}
+                aria-pressed={state === item.id}
+                className={cn(
+                  "min-h-11 flex-1 rounded-lg px-4 text-sm font-bold sm:flex-none",
+                  state === item.id ? "bg-white text-blue-700 shadow-sm" : "text-slate-500",
+                )}
+              >
+                {item.label}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div className="mt-5 rounded-[2.25rem] border border-slate-200 bg-white/60 p-2 sm:p-5">
+          <AppPreview key={`${direction}-${device}`} {...{ direction, device, state, pins, setPins, setState }} />
+        </div>
+        <footer className="mt-5 grid gap-3 md:grid-cols-3">
+          <div className="rounded-2xl border border-slate-200 bg-white p-4">
+            <p className="text-xs font-bold uppercase tracking-wider text-blue-700">Pins mean</p>
+            <p className="mt-2 text-sm leading-6 text-slate-600">
+              A named collection of destinations chosen from anywhere in the app—not a search filter.
+            </p>
+          </div>
+          <div className="rounded-2xl border border-slate-200 bg-white p-4">
+            <p className="text-xs font-bold uppercase tracking-wider text-blue-700">Small icons mean</p>
+            <p className="mt-2 text-sm leading-6 text-slate-600">
+              The first three destinations inside a pin. +N communicates the remainder without visual clutter.
+            </p>
+          </div>
+          <div className="rounded-2xl border border-slate-200 bg-white p-4">
+            <p className="text-xs font-bold uppercase tracking-wider text-blue-700">Users edit</p>
+            <p className="mt-2 text-sm leading-6 text-slate-600">
+              Pin name and included destinations. Search area remains an explicit choice every time.
+            </p>
+          </div>
+        </footer>
+      </div>
+    </main>
+  );
+}
diff --git a/src/components/search-lens-menu-mockups.tsx b/src/components/search-lens-menu-mockups.tsx
new file mode 100644
index 0000000000..4e51fc8584
--- /dev/null
+++ b/src/components/search-lens-menu-mockups.tsx
@@ -0,0 +1,1375 @@
+"use client";
+
+import {
+  ArrowRight,
+  BookOpen,
+  Check,
+  ChevronDown,
+  CirclePlus,
+  Clock3,
+  Command,
+  FileText,
+  Globe2,
+  Heart,
+  Layers3,
+  MessageSquarePlus,
+  Pill,
+  Plus,
+  Search,
+  Settings2,
+  ShieldCheck,
+  SlidersHorizontal,
+  Sparkles,
+  UploadCloud,
+  Wrench,
+  X,
+  type LucideIcon,
+} from "lucide-react";
+import { useEffect, useRef, useState, type FormEvent, type ReactNode, type RefObject } from "react";
+
+import { cn } from "@/components/ui-primitives";
+
+type DirectionId = "lens-fold" | "command-deck" | "inline-builder";
+type DomainId = "documents" | "medications" | "services" | "forms" | "differentials" | "tools";
+
+const focusRing =
+  "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]";
+
+const directionMeta: Record<
+  DirectionId,
+  { label: string; shortLabel: string; strapline: string; verdict: string; bestFor: string; icon: LucideIcon }
+> = {
+  "lens-fold": {
+    label: "Attached pin fold-out",
+    shortLabel: "Pin fold-out",
+    strapline: "A calm layer for user pins and deliberate search-area choices.",
+    verdict: "Recommended",
+    bestFor: "Clarity and gradual adoption",
+    icon: Layers3,
+  },
+  "command-deck": {
+    label: "Pins and search command deck",
+    shortLabel: "Pins + search deck",
+    strapline: "One powerful workspace for opening pins, choosing search areas, and acting on results.",
+    verdict: "Powerful",
+    bestFor: "Frequent expert use",
+    icon: Command,
+  },
+  "inline-builder": {
+    label: "Inline pin bar",
+    shortLabel: "Inline pin bar",
+    strapline: "A personal pin stays visible above the composer while search scope remains stable.",
+    verdict: "Expressive",
+    bestFor: "Fast custom combinations",
+    icon: SlidersHorizontal,
+  },
+};
+
+const domainMeta: Record<DomainId, { label: string; shortLabel: string; icon: LucideIcon; tone: string }> = {
+  documents: {
+    label: "Documents",
+    shortLabel: "Documents",
+    icon: FileText,
+    tone: "bg-[#eaf3fb] text-[#145b94] border-[#bfd8ec]",
+  },
+  medications: {
+    label: "Medications",
+    shortLabel: "Medications",
+    icon: Pill,
+    tone: "bg-[#eef7f3] text-[#21694f] border-[#c7e3d6]",
+  },
+  services: {
+    label: "Services",
+    shortLabel: "Services",
+    icon: ShieldCheck,
+    tone: "bg-[#f4f0fb] text-[#65479a] border-[#dbcfef]",
+  },
+  forms: {
+    label: "Forms",
+    shortLabel: "Forms",
+    icon: BookOpen,
+    tone: "bg-[#fff5e8] text-[#865819] border-[#ead6b7]",
+  },
+  differentials: {
+    label: "Differentials",
+    shortLabel: "Differentials",
+    icon: Sparkles,
+    tone: "bg-[#fdf0f3] text-[#98445c] border-[#ecc9d3]",
+  },
+  tools: {
+    label: "Clinical tools",
+    shortLabel: "Tools",
+    icon: Wrench,
+    tone: "bg-[#f0f2f5] text-[#4a5663] border-[#d5dbe2]",
+  },
+};
+
+const domainOrder = Object.keys(domainMeta) as DomainId[];
+
+const lenses = [
+  {
+    id: "documents",
+    kind: "search",
+    label: "Search Documents",
+    detail: "Current mode",
+    domains: ["documents"] as DomainId[],
+    icon: FileText,
+  },
+  {
+    id: "everywhere",
+    kind: "search",
+    label: "Search all clinical areas",
+    detail: "All 6 search areas",
+    domains: domainOrder,
+    icon: Globe2,
+  },
+  {
+    id: "choose-area",
+    kind: "search",
+    label: "Choose another search area",
+    detail: "Medications, services, tools…",
+    domains: ["medications", "services", "tools"] as DomainId[],
+    icon: Plus,
+  },
+  {
+    id: "ward-round",
+    kind: "pin",
+    label: "Ward essentials",
+    detail: "Your editable pin",
+    domains: ["documents", "medications", "forms"] as DomainId[],
+    icon: Heart,
+  },
+  {
+    id: "quick-tools",
+    kind: "pin",
+    label: "My quick tools",
+    detail: "Calculators, services, differentials",
+    domains: ["tools", "services", "differentials"] as DomainId[],
+    icon: Wrench,
+  },
+];
+
+const actions = [
+  { label: "Upload PDF", detail: "Add an indexed source", icon: UploadCloud },
+  { label: "Scope sources", detail: "Limit answer evidence", icon: SlidersHorizontal },
+  { label: "Recent documents", detail: "Continue reading", icon: Clock3 },
+  { label: "Browse library", detail: "Open all sources", icon: BookOpen },
+];
+
+function DomainIconRail({
+  domains,
+  compact = false,
+  ariaLabel,
+}: {
+  domains: DomainId[];
+  compact?: boolean;
+  ariaLabel?: string;
+}) {
+  const shown = domains.slice(0, compact ? 3 : 4);
+  const domainLabels = domains.map((domain) => domainMeta[domain].label).join(", ");
+  return (
+    <span
+      className="inline-flex items-center"
+      role="img"
+      aria-label={ariaLabel ?? `Search areas: ${domainLabels}`}
+      title={domainLabels}
+    >
+      {shown.map((domain, index) => {
+        const Icon = domainMeta[domain].icon;
+        return (
+          <span
+            key={domain}
+            className={cn(
+              "grid shrink-0 place-items-center rounded-full border-2 border-[color:var(--surface)] shadow-sm",
+              compact ? "-ml-1 h-6 w-6 first:ml-0" : "-ml-1.5 h-8 w-8 first:ml-0",
+              domainMeta[domain].tone,
+            )}
+            style={{ zIndex: shown.length - index }}
+            aria-hidden="true"
+          >
+            <Icon className={compact ? "h-3 w-3" : "h-3.5 w-3.5"} />
+          </span>
+        );
+      })}
+      {domains.length > shown.length ? (
+        <span
+          className={cn(
+            "ml-1 inline-flex shrink-0 items-center justify-center rounded-full border border-[#c8d6e2] bg-[#eef4f9] font-extrabold text-[#315b7d] shadow-sm",
+            compact ? "h-6 px-1.5 text-3xs" : "h-8 px-2 text-3xs",
+          )}
+          aria-hidden="true"
+        >
+          +{domains.length - shown.length} more
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+function DomainCountBadge({ domains, noun = "areas" }: { domains: DomainId[]; noun?: string }) {
+  const domainLabels = domains.map((domain) => domainMeta[domain].label).join(", ");
+  return (
+    <span
+      className="shrink-0 rounded-full border border-[#c8d6e2] bg-[#eef4f9] px-2 py-1 text-3xs font-extrabold text-[#315b7d]"
+      title={domainLabels}
+    >
+      {domains.length} {domains.length === 1 ? noun.replace(/s$/, "") : noun}
+    </span>
+  );
+}
+
+function AppFrame({ phone, children }: { phone: boolean; children: ReactNode }) {
+  return (
+    <section
+      className={cn(
+        "relative isolate overflow-hidden border border-[color:var(--border)] bg-[#f1f4f8] shadow-[0_22px_70px_rgba(31,48,66,0.13)]",
+        phone ? "mx-auto h-[760px] w-full max-w-[390px] rounded-[2rem]" : "h-[760px] min-w-0 rounded-[1.5rem]",
+      )}
+      aria-label={phone ? "Phone preview" : "Desktop preview"}
+    >
+      <div
+        className={cn(
+          "flex h-[72px] items-center border-b border-[#e3e8ef] bg-[rgba(252,253,254,0.96)] px-4",
+          phone ? "justify-between" : "justify-center",
+        )}
+      >
+        {phone ? (
+          <button
+            type="button"
+            className={cn("grid min-h-12 min-w-12 place-items-center rounded-xl", focusRing)}
+            aria-label="Open navigation"
+          >
+            <span className="space-y-1" aria-hidden="true">
+              <span className="block h-px w-4 bg-[#33404d]" />
+              <span className="block h-px w-4 bg-[#33404d]" />
+              <span className="block h-px w-4 bg-[#33404d]" />
+            </span>
+          </button>
+        ) : (
+          <span className="absolute left-5 grid h-9 w-9 place-items-center rounded-xl bg-[#1d6fb8] text-white shadow-sm">
+            <Sparkles className="h-4 w-4" aria-hidden="true" />
+          </span>
+        )}
+        <button
+          type="button"
+          className={cn(
+            "inline-flex min-h-12 items-center gap-2 rounded-2xl border border-[#d7e0e9] bg-white px-3 text-left shadow-sm",
+            focusRing,
+          )}
+          aria-label="Mode Documents"
+        >
+          <span className="grid h-8 w-8 place-items-center rounded-full bg-[#1d6fb8] text-white">
+            <FileText className="h-4 w-4" aria-hidden="true" />
+          </span>
+          <span>
+            {!phone ? (
+              <span className="block text-3xs font-extrabold uppercase tracking-[0.1em] text-[#667586]">Mode</span>
+            ) : null}
+            <span className="block text-sm font-extrabold text-[#080b0f]">Documents</span>
+          </span>
+          <ChevronDown className="h-4 w-4 text-[#6b7785]" aria-hidden="true" />
+        </button>
+        {phone ? (
+          <button
+            type="button"
+            className={cn("grid min-h-12 min-w-12 place-items-center rounded-xl", focusRing)}
+            aria-label="Start a new chat"
+          >
+            <MessageSquarePlus className="h-5 w-5 text-[#33404d]" aria-hidden="true" />
+          </button>
+        ) : (
+          <button
+            type="button"
+            className={cn(
+              "absolute right-5 inline-flex min-h-12 items-center gap-2 rounded-xl border border-[#d7e0e9] bg-white px-4 text-sm font-bold text-[#33404d]",
+              focusRing,
+            )}
+          >
+            <MessageSquarePlus className="h-4 w-4" aria-hidden="true" />
+            New chat
+          </button>
+        )}
+      </div>
+      <div className="relative h-[calc(100%_-_72px)]">{children}</div>
+    </section>
+  );
+}
+
+function Composer({
+  phone,
+  open,
+  label,
+  domains,
+  onToggle,
+  onInputIntent,
+  toggleButtonRef,
+}: {
+  phone: boolean;
+  open: boolean;
+  label: string;
+  domains: DomainId[];
+  onToggle: () => void;
+  onInputIntent?: () => void;
+  toggleButtonRef?: RefObject<HTMLButtonElement | null>;
+}) {
+  const [query, setQuery] = useState("");
+
+  function submit(event: FormEvent) {
+    event.preventDefault();
+  }
+
+  return (
+    <div className="w-full">
+      {!phone || !open ? (
+        <div className="mb-2 flex min-h-7 items-center justify-between gap-2 px-1">
+          <button
+            type="button"
+            onClick={onToggle}
+            className={cn(
+              "inline-flex min-h-8 max-w-full items-center gap-2 rounded-full border border-[#cbd8e5] bg-[rgba(252,253,254,0.92)] px-2.5 text-xs font-extrabold text-[#1c4f78] shadow-sm backdrop-blur",
+              focusRing,
+            )}
+            aria-expanded={open}
+          >
+            <DomainIconRail domains={domains} compact />
+            <span className="truncate">{label}</span>
+            <ChevronDown
+              className={cn("h-3.5 w-3.5 transition motion-reduce:transition-none", open && "rotate-180")}
+              aria-hidden="true"
+            />
+          </button>
+          {!phone ? <span className="text-3xs font-bold text-[#778595]">Enter searches this lens</span> : null}
+        </div>
+      ) : null}
+      <form
+        role="search"
+        aria-label={`${label} search preview`}
+        onSubmit={submit}
+        className="flex min-h-14 items-center rounded-[1.3rem] border border-[#b9c9d8] bg-[rgba(252,253,254,0.98)] p-1.5 shadow-[0_12px_30px_rgba(31,55,79,0.13)] ring-1 ring-white"
+      >
+        <button
+          ref={toggleButtonRef}
+          type="button"
+          onClick={onToggle}
+          aria-label={open ? "Close search options" : "Open search options"}
+          aria-expanded={open}
+          className={cn(
+            "grid min-h-12 min-w-12 place-items-center rounded-2xl text-[#31516c] transition hover:bg-[#eff5fc] motion-reduce:transition-none",
+            open && "bg-[#1d6fb8] text-white hover:bg-[#1d6fb8]",
+            focusRing,
+          )}
+        >
+          {open ? <X className="h-5 w-5" aria-hidden="true" /> : <Plus className="h-5 w-5" aria-hidden="true" />}
+        </button>
+        <label className="min-w-0 flex-1 px-2">
+          <span className="sr-only">Search {label}</span>
+          <input
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            onPointerDown={onInputIntent}
+            placeholder={phone ? "Search clinical guidance…" : "Search documents, medication guidance, services…"}
+            className="h-12 w-full min-w-0 bg-transparent text-sm font-semibold text-[#111820] outline-none placeholder:text-[#7b8794]"
+          />
+        </label>
+        <button
+          type="submit"
+          aria-label={`Search ${label}`}
+          className={cn(
+            "grid min-h-12 min-w-12 place-items-center rounded-2xl bg-[#1d6fb8] text-white shadow-[0_8px_18px_rgba(29,111,184,0.22)]",
+            focusRing,
+          )}
+        >
+          <ArrowRight className="h-5 w-5" aria-hidden="true" />
+        </button>
+      </form>
+    </div>
+  );
+}
+
+function LensFoldPanel({
+  phone,
+  selectedLens,
+  onSelectLens,
+  wardRoundDomains,
+  onWardRoundDomainsChange,
+  onClose,
+  focusOnMount,
+}: {
+  phone: boolean;
+  selectedLens: string;
+  onSelectLens: (lensId: string) => void;
+  wardRoundDomains: DomainId[];
+  onWardRoundDomainsChange: (domains: DomainId[]) => void;
+  onClose: () => void;
+  focusOnMount: boolean;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [selectedPinId, setSelectedPinId] = useState("ward-round");
+  const [wardPinName, setWardPinName] = useState("Ward essentials");
+  const [newPinName, setNewPinName] = useState("My new pin");
+  const [newPinDomains, setNewPinDomains] = useState<DomainId[]>(["documents"]);
+  const [createdPin, setCreatedPin] = useState<{
+    id: string;
+    kind: string;
+    label: string;
+    detail: string;
+    domains: DomainId[];
+    icon: LucideIcon;
+  } | null>(null);
+
+  const editorDomains = creating ? newPinDomains : wardRoundDomains;
+  const pinOptions = [
+    ...lenses
+      .filter((item) => item.kind === "pin")
+      .map((item) => (item.id === "ward-round" ? { ...item, label: wardPinName, domains: wardRoundDomains } : item)),
+    ...(createdPin ? [createdPin] : []),
+  ];
+
+  function toggleDomain(domain: DomainId) {
+    const current = creating ? newPinDomains : wardRoundDomains;
+    const next = current.includes(domain)
+      ? current.length === 1
+        ? current
+        : current.filter((item) => item !== domain)
+      : [...current, domain];
+    if (creating) setNewPinDomains(next);
+    else onWardRoundDomainsChange(next);
+  }
+
+  function closeEditor() {
+    setEditing(false);
+    setCreating(false);
+  }
+
+  function saveEditor() {
+    if (creating) {
+      const pin = {
+        id: "created-pin",
+        kind: "pin",
+        label: newPinName.trim() || "My new pin",
+        detail: "Your new pin",
+        domains: newPinDomains,
+        icon: Heart,
+      };
+      setCreatedPin(pin);
+      setSelectedPinId(pin.id);
+    }
+    closeEditor();
+  }
+
+  const body = (
+    <div
+      role="dialog"
+      aria-label={editing ? (creating ? "Create a new pin" : "Edit Ward essentials pin") : "Pins and search"}
+      aria-modal={phone || undefined}
+      className={cn(
+        "overflow-hidden border border-[#c7d4e0] bg-[rgba(252,253,254,0.98)] shadow-[0_24px_65px_rgba(23,45,66,0.2)] backdrop-blur-xl",
+        phone ? "rounded-t-[1.6rem]" : "rounded-[1.35rem]",
+      )}
+    >
+      <div className="flex items-start justify-between border-b border-[#e3e8ef] px-4 py-3.5">
+        <div>
+          <div className="flex items-center gap-2">
+            <span className="grid h-8 w-8 place-items-center rounded-xl bg-[#eaf3fb] text-[#1d6fb8]">
+              <Layers3 className="h-4 w-4" aria-hidden="true" />
+            </span>
+            <div>
+              <h3 className="text-sm font-black text-[#080b0f]">
+                {editing ? (creating ? "Create a new pin" : `Edit ${wardPinName}`) : "Pins and search"}
+              </h3>
+              <p className="text-2xs font-semibold text-[#6b7785]">
+                {editing
+                  ? "Choose useful destinations from across the app."
+                  : "Open a pin or choose where this search runs."}
+              </p>
+            </div>
+          </div>
+        </div>
+        <button
+          autoFocus={focusOnMount}
+          type="button"
+          onClick={editing ? closeEditor : onClose}
+          className={cn(
+            "grid min-h-12 min-w-12 place-items-center rounded-xl text-[#536171] hover:bg-[#f0f3f6]",
+            focusRing,
+          )}
+          aria-label={editing ? "Close pin editor" : "Close pins and search"}
+        >
+          <X className="h-4 w-4" aria-hidden="true" />
+        </button>
+      </div>
+
+      {editing ? (
+        <div className="p-3">
+          <label className="mb-3 block px-1 text-3xs font-black uppercase tracking-[0.1em] text-[#6f7c89]">
+            Pin name
+            <input
+              value={creating ? newPinName : wardPinName}
+              onChange={(event) => (creating ? setNewPinName(event.target.value) : setWardPinName(event.target.value))}
+              className="mt-1 h-12 w-full rounded-xl border border-[#cbd4dd] bg-white px-3 text-base font-bold normal-case tracking-normal text-[#17212b] outline-none focus:border-[#1d6fb8]"
+            />
+          </label>
+          <div className="mb-2 flex items-center justify-between px-1">
+            <span className="text-3xs font-black uppercase tracking-[0.1em] text-[#6f7c89]">App destinations</span>
+            <span className="text-2xs font-bold text-[#677584]" aria-live="polite">
+              {editorDomains.length} destinations selected
+            </span>
+          </div>
+          <div className="space-y-1.5">
+            {domainOrder.map((domain) => {
+              const meta = domainMeta[domain];
+              const Icon = meta.icon;
+              const active = editorDomains.includes(domain);
+              return (
+                <button
+                  key={domain}
+                  type="button"
+                  onClick={() => toggleDomain(domain)}
+                  aria-pressed={active}
+                  aria-label={`${active ? "Remove" : "Add"} ${meta.label}`}
+                  className={cn(
+                    "flex min-h-12 w-full items-center gap-3 rounded-xl border px-3 text-left transition motion-reduce:transition-none",
+                    active ? "border-[#9fc4e3] bg-[#eff5fc]" : "border-transparent hover:bg-[#f4f6f8]",
+                    focusRing,
+                  )}
+                >
+                  <span className={cn("grid h-8 w-8 place-items-center rounded-lg border", meta.tone)}>
+                    <Icon className="h-4 w-4" aria-hidden="true" />
+                  </span>
+                  <span className="flex-1 text-sm font-bold text-[#17212b]">{meta.label}</span>
+                  <span
+                    className={cn(
+                      "grid h-6 w-6 place-items-center rounded-full border",
+                      active ? "border-[#1d6fb8] bg-[#1d6fb8] text-white" : "border-[#cbd4dd] text-transparent",
+                    )}
+                  >
+                    <Check className="h-3.5 w-3.5" aria-hidden="true" />
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+          <div className="mt-3 flex gap-2 border-t border-[#e3e8ef] pt-3">
+            <button
+              type="button"
+              onClick={closeEditor}
+              className={cn(
+                "min-h-12 flex-1 rounded-xl border border-[#cbd4dd] bg-white px-4 text-sm font-bold text-[#425160]",
+                focusRing,
+              )}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={saveEditor}
+              className={cn(
+                "min-h-12 flex-1 rounded-xl bg-[#1d6fb8] px-4 text-sm font-extrabold text-white",
+                focusRing,
+              )}
+            >
+              {creating ? "Create pin" : "Save pin"}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <>
+          <div className="p-2.5">
+            <div className="mb-1 flex items-center justify-between px-2">
+              <h3 className="text-3xs font-black uppercase tracking-[0.1em] text-[#6f7c89]">Your pins</h3>
+              <button
+                type="button"
+                onClick={() => {
+                  setCreating(true);
+                  setEditing(true);
+                }}
+                className={cn("min-h-10 rounded-lg px-2 text-3xs font-black text-[#1d6fb8]", focusRing)}
+              >
+                <Plus className="mr-1 inline h-3.5 w-3.5" aria-hidden="true" />
+                New pin
+              </button>
+            </div>
+            {pinOptions.map((lens) => {
+              const Icon = lens.icon;
+              const active = lens.id === selectedPinId;
+              const pinDomains = lens.domains;
+              return (
+                <div
+                  key={lens.id}
+                  className={cn(
+                    "group flex min-h-[58px] w-full items-center rounded-xl transition motion-reduce:transition-none",
+                    active ? "bg-[#eff5fc]" : "hover:bg-[#f4f6f8]",
+                  )}
+                >
+                  <button
+                    type="button"
+                    onClick={() => setSelectedPinId(lens.id)}
+                    className={cn(
+                      "flex min-h-[58px] min-w-0 flex-1 items-center gap-3 rounded-xl px-2.5 text-left",
+                      focusRing,
+                    )}
+                  >
+                    <span
+                      className={cn(
+                        "grid h-9 w-9 place-items-center rounded-xl border",
+                        active
+                          ? "border-[#a9cbe7] bg-white text-[#1d6fb8]"
+                          : "border-[#e0e5eb] bg-[#f7f9fb] text-[#647282]",
+                      )}
+                    >
+                      <Icon className="h-4 w-4" aria-hidden="true" />
+                    </span>
+                    <span className="min-w-0 flex-1">
+                      <span className="block text-sm font-extrabold text-[#17212b]">{lens.label}</span>
+                      <span className="block truncate text-2xs font-semibold text-[#6f7c89]">
+                        {lens.id === "ward-round"
+                          ? phone
+                            ? `${wardRoundDomains.length} destinations · editable`
+                            : wardRoundDomains.map((domain) => domainMeta[domain].shortLabel).join(" + ")
+                          : lens.detail}
+                      </span>
+                    </span>
+                    <DomainIconRail
+                      domains={pinDomains}
+                      compact
+                      ariaLabel={`${lens.label} contains app destinations: ${pinDomains
+                        .map((domain) => domainMeta[domain].label)
+                        .join(", ")}`}
+                    />
+                  </button>
+                  {lens.id === "ward-round" ? (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setCreating(false);
+                        setEditing(true);
+                      }}
+                      aria-label="Edit Ward essentials"
+                      className={cn(
+                        "mr-2 min-h-12 rounded-lg px-2 text-3xs font-black text-[#1d6fb8] hover:bg-white",
+                        focusRing,
+                      )}
+                    >
+                      Edit
+                    </button>
+                  ) : null}
+                </div>
+              );
+            })}
+            <div className="my-2 border-t border-[#e3e8ef] pt-2">
+              <h3 className="px-2 pb-1 text-3xs font-black uppercase tracking-[0.1em] text-[#6f7c89]">Search in</h3>
+              {lenses
+                .filter((item) => item.kind === "search")
+                .map((lens) => {
+                  const Icon = lens.icon;
+                  const active = lens.id === selectedLens;
+                  return (
+                    <button
+                      key={lens.id}
+                      type="button"
+                      onClick={() => onSelectLens(lens.id)}
+                      className={cn(
+                        "flex min-h-[54px] w-full items-center gap-3 rounded-xl px-2.5 text-left transition motion-reduce:transition-none",
+                        active ? "bg-[#eff5fc]" : "hover:bg-[#f4f6f8]",
+                        focusRing,
+                      )}
+                    >
+                      <span
+                        className={cn(
+                          "grid h-9 w-9 place-items-center rounded-xl border",
+                          active
+                            ? "border-[#a9cbe7] bg-white text-[#1d6fb8]"
+                            : "border-[#e0e5eb] bg-[#f7f9fb] text-[#647282]",
+                        )}
+                      >
+                        <Icon className="h-4 w-4" aria-hidden="true" />
+                      </span>
+                      <span className="min-w-0 flex-1">
+                        <span className="block text-sm font-extrabold text-[#17212b]">{lens.label}</span>
+                        <span className="block truncate text-2xs font-semibold text-[#6f7c89]">{lens.detail}</span>
+                      </span>
+                      {active ? <Check className="h-4 w-4 shrink-0 text-[#1d6fb8]" aria-hidden="true" /> : null}
+                    </button>
+                  );
+                })}
+            </div>
+          </div>
+          <div className="border-t border-[#e3e8ef] bg-[#f8fafc] p-3">
+            <p className="mb-2 px-1 text-3xs font-black uppercase tracking-[0.1em] text-[#6f7c89]">Useful actions</p>
+            <div className="grid grid-cols-2 gap-1.5">
+              {actions.map((action) => (
+                <button
+                  key={action.label}
+                  type="button"
+                  className={cn(
+                    "flex min-h-12 items-center gap-2 rounded-xl px-2.5 text-left hover:bg-white",
+                    focusRing,
+                  )}
+                >
+                  <action.icon className="h-4 w-4 shrink-0 text-[#1d6fb8]" aria-hidden="true" />
+                  <span className="min-w-0">
+                    <span className="block text-xs font-extrabold text-[#26323e]">{action.label}</span>
+                    {!phone ? (
+                      <span className="block truncate text-3xs font-semibold text-[#788493]">{action.detail}</span>
+                    ) : null}
+                  </span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+
+  if (phone) {
+    return (
+      <div
+        data-testid="phone-lens-sheet-layer"
+        className="absolute inset-x-0 top-0 bottom-[114px] z-30 flex items-end bg-[rgba(7,17,27,0.36)] pt-8 backdrop-blur-[1px]"
+      >
+        <div className="max-h-full w-full overflow-y-auto overscroll-contain">{body}</div>
+      </div>
+    );
+  }
+
+  return <div className="absolute bottom-[82px] left-0 z-30 w-[440px]">{body}</div>;
+}
+
+function CommandDeckPanel({
+  phone,
+  onClose,
+  focusOnMount,
+}: {
+  phone: boolean;
+  onClose: () => void;
+  focusOnMount: boolean;
+}) {
+  const [query, setQuery] = useState("");
+  const [activeSection, setActiveSection] = useState("Ward essentials");
+  const sections = ["Ward essentials", "My quick tools", "Search Documents", "Search all clinical areas"];
+
+  return (
+    <div
+      role="dialog"
+      aria-label="Pins and search command deck"
+      aria-modal={phone || undefined}
+      className={cn(
+        "overflow-hidden border border-[#bfcddb] bg-[#fbfcfe] shadow-[0_26px_80px_rgba(20,39,58,0.26)]",
+        phone ? "absolute inset-0 z-30 rounded-none" : "absolute inset-x-0 bottom-[82px] z-30 rounded-[1.4rem]",
+      )}
+    >
+      <div className={cn("flex items-center border-b border-[#dde5ec] bg-white", phone ? "gap-2 p-2" : "gap-3 p-3")}>
+        {!phone ? (
+          <span className="grid h-10 w-10 place-items-center rounded-xl bg-[#17212b] text-white">
+            <Command className="h-5 w-5" aria-hidden="true" />
+          </span>
+        ) : null}
+        <label className="flex min-h-12 min-w-0 flex-1 items-center gap-2 rounded-xl border border-[#c9d5df] bg-[#f8fafc] px-3 focus-within:border-[#1d6fb8] focus-within:ring-2 focus-within:ring-[#dcecf8]">
+          <Search className="h-4 w-4 shrink-0 text-[#657382]" aria-hidden="true" />
+          <span className="sr-only">Search command deck</span>
+          <input
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder="Open a pin or search…"
+            className="h-10 min-w-0 flex-1 bg-transparent text-sm font-bold text-[#17212b] outline-none"
+          />
+          {!phone ? (
+            <kbd className="rounded-md border border-[#d8e0e7] bg-white px-1.5 py-0.5 text-3xs font-bold text-[#7a8692]">
+              ⌘ K
+            </kbd>
+          ) : null}
+        </label>
+        <button
+          autoFocus={focusOnMount}
+          type="button"
+          onClick={onClose}
+          className={cn("grid min-h-12 min-w-12 place-items-center rounded-xl hover:bg-[#f0f3f6]", focusRing)}
+          aria-label="Close command deck"
+        >
+          <X className="h-4 w-4" aria-hidden="true" />
+        </button>
+      </div>
+
+      <div className={cn("grid", phone ? "grid-cols-1" : "grid-cols-[180px_minmax(0,1fr)]")}>
+        <div className={cn("border-[#dde5ec] bg-[#f3f6f9] p-2", phone ? "border-b" : "border-r")}>
+          <p className="px-2 pb-1 pt-1 text-3xs font-black uppercase tracking-[0.1em] text-[#74818e]">
+            Pins and search
+          </p>
+          <div className={cn(phone && "flex gap-1 overflow-x-auto pb-1")}>
+            {sections.map((section, index) => {
+              const icons = [Heart, Wrench, FileText, Globe2];
+              const Icon = icons[index];
+              const active = activeSection === section;
+              return (
+                <button
+                  key={section}
+                  type="button"
+                  onClick={() => setActiveSection(section)}
+                  className={cn(
+                    "flex min-h-12 items-center gap-2 rounded-xl px-2.5 text-left text-xs font-extrabold transition motion-reduce:transition-none",
+                    phone ? "shrink-0" : "w-full",
+                    active ? "bg-white text-[#145b94] shadow-sm" : "text-[#526170] hover:bg-white/70",
+                    focusRing,
+                  )}
+                >
+                  <Icon className="h-4 w-4" aria-hidden="true" />
+                  {section}
+                </button>
+              );
+            })}
+          </div>
+          {!phone ? (
+            <div className="mt-3 border-t border-[#dce3ea] pt-2">
+              <button
+                type="button"
+                className={cn(
+                  "flex min-h-12 w-full items-center gap-2 rounded-xl px-2.5 text-xs font-bold text-[#586675] hover:bg-white",
+                  focusRing,
+                )}
+              >
+                <Settings2 className="h-4 w-4" aria-hidden="true" />
+                Manage pins
+              </button>
+            </div>
+          ) : null}
+        </div>
+
+        <div className="min-w-0 bg-white p-3">
+          <div className="mb-2 flex items-center justify-between gap-2">
+            <div>
+              <p className="text-3xs font-black uppercase tracking-[0.1em] text-[#6c7a88]">
+                Selected command · {activeSection}
+              </p>
+              <p className="text-xs font-semibold text-[#53616e]">
+                Pins open destinations; search commands run the current query.
+              </p>
+            </div>
+            {phone ? (
+              <DomainCountBadge
+                domains={
+                  activeSection === "Search all clinical areas" ? domainOrder : ["documents", "medications", "forms"]
+                }
+                noun={activeSection.startsWith("Search") ? "areas" : "destinations"}
+              />
+            ) : (
+              <DomainIconRail
+                domains={
+                  activeSection === "Search all clinical areas" ? domainOrder : ["documents", "medications", "forms"]
+                }
+              />
+            )}
+          </div>
+          <div className="space-y-1.5">
+            {[
+              {
+                title: "Documents",
+                meta: "Open guidelines and local policies",
+                icon: FileText,
+                tag: "Destination",
+              },
+              { title: "Medications", meta: "Open doses and interactions", icon: Pill, tag: "Destination" },
+              {
+                title: "Pathology forms",
+                meta: "Open frequently used request forms",
+                icon: BookOpen,
+                tag: "Destination",
+              },
+            ].map((result, index) => (
+              <button
+                key={result.title}
+                type="button"
+                className={cn(
+                  "flex min-h-[58px] w-full items-center gap-3 rounded-xl border px-3 text-left transition motion-reduce:transition-none",
+                  index === 0 ? "border-[#b8d4e9] bg-[#eff5fc]" : "border-transparent hover:bg-[#f5f7f9]",
+                  focusRing,
+                )}
+              >
+                <span className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-white text-[#1d6fb8] shadow-sm">
+                  <result.icon className="h-4 w-4" aria-hidden="true" />
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate text-sm font-extrabold text-[#17212b]">{result.title}</span>
+                  <span className="block truncate text-2xs font-semibold text-[#697684]">{result.meta}</span>
+                </span>
+                {!phone ? (
+                  <span className="rounded-full border border-[#cfdae4] bg-white px-2 py-1 text-3xs font-black text-[#596877]">
+                    {result.tag}
+                  </span>
+                ) : null}
+              </button>
+            ))}
+          </div>
+          <div
+            className={cn(
+              "mt-3 border-t border-[#e3e8ef] pt-3",
+              phone ? "grid grid-cols-2 gap-1" : "grid grid-cols-3 gap-2",
+            )}
+          >
+            {["Search all results", "Upload a source", "Scope answer evidence"].map((label, index) => {
+              const icons = [Search, UploadCloud, SlidersHorizontal];
+              const Icon = icons[index];
+              return (
+                <button
+                  key={label}
+                  type="button"
+                  className={cn(
+                    "flex min-h-12 items-center gap-2 rounded-xl border border-[#dce3ea] px-3 text-xs font-bold text-[#40505f] hover:bg-[#f7f9fb]",
+                    phone && index === 2 && "col-span-2",
+                    focusRing,
+                  )}
+                >
+                  <Icon className="h-4 w-4 text-[#1d6fb8]" aria-hidden="true" />
+                  {label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+      <div className="flex min-h-10 items-center justify-between border-t border-[#dde5ec] bg-[#f3f6f9] px-4 text-3xs font-bold text-[#71808e]">
+        <span>{phone ? "3 grouped matches" : "↑↓ navigate · Enter open"}</span>
+        <span className="min-w-0 truncate pl-2">{query ? `Searching “${query}”` : "Type to search"}</span>
+      </div>
+    </div>
+  );
+}
+
+function InlineBuilderPanel({
+  phone,
+  selectedDomains,
+  onToggleDomain,
+  onClose,
+  focusOnMount,
+}: {
+  phone: boolean;
+  selectedDomains: DomainId[];
+  onToggleDomain: (domain: DomainId) => void;
+  onClose: () => void;
+  focusOnMount: boolean;
+}) {
+  const panel = (
+    <div
+      role="dialog"
+      aria-label="Edit pin destinations"
+      aria-modal={phone || undefined}
+      className={cn(
+        "border border-[#c7d4e0] bg-[rgba(252,253,254,0.98)] p-3 shadow-[0_22px_55px_rgba(21,42,61,0.2)] backdrop-blur-xl",
+        phone ? "w-full rounded-[1.4rem]" : "absolute bottom-[132px] left-0 z-30 w-[500px] rounded-[1.3rem]",
+      )}
+    >
+      <div className="mb-2 flex items-center justify-between">
+        <div>
+          <h3 className="text-sm font-black text-[#17212b]">Edit Quick pin</h3>
+          <p className="text-2xs font-semibold text-[#6b7886]">Choose useful destinations from across the app.</p>
+        </div>
+        <button
+          autoFocus={focusOnMount}
+          type="button"
+          onClick={onClose}
+          className={cn("grid min-h-12 min-w-12 place-items-center rounded-xl hover:bg-[#f1f4f7]", focusRing)}
+          aria-label="Close pin destination picker"
+        >
+          <X className="h-4 w-4" aria-hidden="true" />
+        </button>
+      </div>
+      <div className={cn("grid gap-2", phone ? "grid-cols-2" : "grid-cols-3")}>
+        {domainOrder.map((domain) => {
+          const meta = domainMeta[domain];
+          const Icon = meta.icon;
+          const active = selectedDomains.includes(domain);
+          return (
+            <button
+              key={domain}
+              type="button"
+              onClick={() => onToggleDomain(domain)}
+              aria-pressed={active}
+              className={cn(
+                "relative flex min-h-[72px] flex-col items-start justify-between rounded-xl border p-2.5 text-left transition motion-reduce:transition-none",
+                active ? "border-[#9fc4e3] bg-[#eff5fc]" : "border-[#dde4eb] bg-white hover:border-[#bdcad6]",
+                focusRing,
+              )}
+            >
+              <span className={cn("grid h-8 w-8 place-items-center rounded-lg border", meta.tone)}>
+                <Icon className="h-4 w-4" aria-hidden="true" />
+              </span>
+              <span className="text-2xs font-extrabold text-[#293540]">{meta.shortLabel}</span>
+              {active ? <Check className="absolute right-2 top-2 h-4 w-4 text-[#1d6fb8]" aria-hidden="true" /> : null}
+            </button>
+          );
+        })}
+      </div>
+      <div className="mt-3 flex items-center justify-between border-t border-[#e3e8ef] pt-3">
+        <span className="text-2xs font-bold text-[#677584]" aria-live="polite">
+          {selectedDomains.length} destinations selected
+        </span>
+        <button
+          type="button"
+          onClick={onClose}
+          className={cn("min-h-12 rounded-xl bg-[#17212b] px-4 text-xs font-extrabold text-white", focusRing)}
+        >
+          Done
+        </button>
+      </div>
+    </div>
+  );
+
+  if (phone) {
+    return (
+      <div
+        data-testid="phone-inline-builder-layer"
+        className="absolute inset-x-0 top-0 bottom-[108px] z-30 flex items-end bg-[rgba(7,17,27,0.26)] px-3 pb-2 backdrop-blur-[1px]"
+      >
+        {panel}
+      </div>
+    );
+  }
+
+  return panel;
+}
+
+function Prototype({ direction, phone }: { direction: DirectionId; phone: boolean }) {
+  const [open, setOpen] = useState(true);
+  const [focusPanelOnOpen, setFocusPanelOnOpen] = useState(false);
+  const [selectedLensId, setSelectedLensId] = useState("documents");
+  const [wardRoundDomains, setWardRoundDomains] = useState<DomainId[]>(["documents", "medications", "forms"]);
+  const [selectedDomains, setSelectedDomains] = useState<DomainId[]>(["documents", "medications", "forms"]);
+  const toggleButtonRef = useRef<HTMLButtonElement>(null);
+  const selectedLens = lenses.find((lens) => lens.id === selectedLensId) ?? lenses[0];
+  const activeDomains = selectedLens.domains;
+  const activeLabel = selectedLens.label;
+
+  function closePanel(restoreFocus = true) {
+    setOpen(false);
+    setFocusPanelOnOpen(false);
+    if (restoreFocus) window.setTimeout(() => toggleButtonRef.current?.focus(), 0);
+  }
+
+  function togglePanel() {
+    setOpen((current) => {
+      const next = !current;
+      setFocusPanelOnOpen(next);
+      return next;
+    });
+  }
+
+  useEffect(() => {
+    if (!open) return;
+
+    function closeOnEscape(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setOpen(false);
+        setFocusPanelOnOpen(false);
+        window.setTimeout(() => toggleButtonRef.current?.focus(), 0);
+      }
+    }
+
+    window.addEventListener("keydown", closeOnEscape);
+    return () => window.removeEventListener("keydown", closeOnEscape);
+  }, [open]);
+
+  function toggleDomain(domain: DomainId) {
+    setSelectedDomains((current) => {
+      if (current.includes(domain)) {
+        return current.length === 1 ? current : current.filter((item) => item !== domain);
+      }
+      return [...current, domain];
+    });
+  }
+
+  return (
+    <AppFrame phone={phone}>
+      <div className={cn("absolute inset-0 flex flex-col", phone ? "px-4 pb-5 pt-10" : "px-8 pb-8 pt-12")}>
+        {phone && open && direction === "lens-fold" ? (
+          <LensFoldPanel
+            phone
+            selectedLens={selectedLensId}
+            wardRoundDomains={wardRoundDomains}
+            onWardRoundDomainsChange={setWardRoundDomains}
+            onSelectLens={(lensId) => {
+              setSelectedLensId(lensId);
+              closePanel();
+            }}
+            onClose={() => closePanel()}
+            focusOnMount={focusPanelOnOpen}
+          />
+        ) : null}
+        {phone && open && direction === "command-deck" ? (
+          <CommandDeckPanel phone onClose={() => closePanel()} focusOnMount={focusPanelOnOpen} />
+        ) : null}
+        {phone && open && direction === "inline-builder" ? (
+          <InlineBuilderPanel
+            phone
+            selectedDomains={selectedDomains}
+            onToggleDomain={toggleDomain}
+            onClose={() => closePanel()}
+            focusOnMount={focusPanelOnOpen}
+          />
+        ) : null}
+        {open && !phone ? (
+          <div
+            className="pointer-events-none absolute inset-0 z-10 bg-[rgba(241,244,248,0.88)] backdrop-blur-[2px]"
+            aria-hidden="true"
+          />
+        ) : null}
+
+        <div className={cn("mx-auto text-center", phone ? "mt-12" : "mt-8")}>
+          <span className="mx-auto grid h-12 w-12 place-items-center rounded-2xl border border-[#d6e1ea] bg-white text-[#1d6fb8] shadow-sm">
+            <FileText className="h-5 w-5" aria-hidden="true" />
+          </span>
+          <h2 className={cn("mt-4 font-black tracking-[-0.025em] text-[#080b0f]", phone ? "text-2xl" : "text-3xl")}>
+            Find the right clinical source
+          </h2>
+          <p
+            className={cn(
+              "mx-auto mt-1 font-semibold leading-6 text-[#637180]",
+              phone ? "max-w-[290px] text-sm" : "max-w-lg text-base-minus",
+            )}
+          >
+            Start in Documents, then widen the same search when another clinical area will help.
+          </p>
+        </div>
+
+        <div className={cn("relative z-20 mx-auto mt-auto w-full", phone ? "max-w-[360px]" : "max-w-[760px]")}>
+          {direction === "inline-builder" && !open ? (
+            <div className="mb-2 flex items-center gap-1.5 overflow-x-auto pb-1">
+              {selectedDomains.map((domain) => {
+                const meta = domainMeta[domain];
+                const Icon = meta.icon;
+                return (
+                  <button
+                    key={domain}
+                    type="button"
+                    onClick={() => toggleDomain(domain)}
+                    className={cn(
+                      "inline-flex min-h-10 shrink-0 items-center gap-1.5 rounded-full border px-2.5 text-xs font-extrabold shadow-sm",
+                      meta.tone,
+                      focusRing,
+                    )}
+                    aria-label={`Remove ${meta.label}`}
+                  >
+                    <Icon className="h-3.5 w-3.5" aria-hidden="true" />
+                    {meta.shortLabel}
+                    <X className="h-3 w-3" aria-hidden="true" />
+                  </button>
+                );
+              })}
+              <button
+                type="button"
+                onClick={() => setOpen(true)}
+                className={cn(
+                  "inline-flex min-h-10 shrink-0 items-center gap-1.5 rounded-full border border-dashed border-[#9eb5c8] bg-white px-3 text-xs font-extrabold text-[#315b7d]",
+                  focusRing,
+                )}
+              >
+                <CirclePlus className="h-3.5 w-3.5" aria-hidden="true" />
+                Add destination
+              </button>
+            </div>
+          ) : null}
+
+          {open && direction === "lens-fold" && !phone ? (
+            <LensFoldPanel
+              phone={phone}
+              selectedLens={selectedLensId}
+              wardRoundDomains={wardRoundDomains}
+              onWardRoundDomainsChange={setWardRoundDomains}
+              onSelectLens={(lensId) => {
+                setSelectedLensId(lensId);
+                if (phone) setOpen(false);
+              }}
+              onClose={() => closePanel()}
+              focusOnMount={focusPanelOnOpen}
+            />
+          ) : null}
+          {open && direction === "command-deck" && !phone ? (
+            <CommandDeckPanel phone={phone} onClose={() => closePanel()} focusOnMount={focusPanelOnOpen} />
+          ) : null}
+          {open && direction === "inline-builder" && !phone ? (
+            <InlineBuilderPanel
+              phone={phone}
+              selectedDomains={selectedDomains}
+              onToggleDomain={toggleDomain}
+              onClose={() => closePanel()}
+              focusOnMount={focusPanelOnOpen}
+            />
+          ) : null}
+
+          <Composer
+            phone={phone}
+            open={open}
+            label={activeLabel}
+            domains={activeDomains}
+            onToggle={togglePanel}
+            onInputIntent={() => {
+              if (direction !== "inline-builder") closePanel(false);
+            }}
+            toggleButtonRef={toggleButtonRef}
+          />
+          <p className="mt-2 text-center text-3xs font-semibold text-[#788594]">
+            Do not enter patient-identifiable information.
+          </p>
+        </div>
+      </div>
+    </AppFrame>
+  );
+}
+
+function DesignNote({ icon: Icon, title, children }: { icon: LucideIcon; title: string; children: ReactNode }) {
+  return (
+    <div className="rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface)] p-4">
+      <div className="flex items-center gap-2 text-sm font-extrabold text-[color:var(--text-heading)]">
+        <span className="grid h-8 w-8 place-items-center rounded-xl bg-[color:var(--clinical-accent-soft)] text-[color:var(--clinical-accent)]">
+          <Icon className="h-4 w-4" aria-hidden="true" />
+        </span>
+        {title}
+      </div>
+      <p className="mt-2 text-sm font-medium leading-6 text-[color:var(--text-muted)]">{children}</p>
+    </div>
+  );
+}
+
+export function SearchLensMenuMockupsPage() {
+  const [direction, setDirection] = useState<DirectionId>("lens-fold");
+  const meta = directionMeta[direction];
+  const DirectionIcon = meta.icon;
+
+  return (
+    <main className="min-h-screen bg-[color:var(--background)] px-4 py-8 text-[color:var(--text)] sm:px-6 lg:px-8">
+      <div className="mx-auto max-w-[1560px]">
+        <header className="grid gap-6 border-b border-[color:var(--border)] pb-7 lg:grid-cols-[minmax(0,1fr)_minmax(460px,0.9fr)] lg:items-end">
+          <div>
+            <span className="inline-flex min-h-8 items-center gap-2 rounded-full border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] px-3 text-xs font-extrabold text-[color:var(--clinical-accent)]">
+              <Search className="h-3.5 w-3.5" aria-hidden="true" />
+              Pins + search menu study
+            </span>
+            <h1 className="mt-4 max-w-4xl text-3xl font-black tracking-[-0.035em] text-[color:var(--text-heading)] sm:text-4xl lg:text-5xl">
+              Three ways to make “+” useful without turning pins into search filters.
+            </h1>
+            <p className="mt-3 max-w-3xl text-base font-medium leading-7 text-[color:var(--text-muted)]">
+              Each direction keeps Documents search explicit while adding editable pins that open useful destinations
+              from across the app. Compare the interaction model—not a cosmetic reskin.
+            </p>
+          </div>
+
+          <div className="grid gap-2" role="group" aria-label="Choose a mockup direction">
+            {(Object.keys(directionMeta) as DirectionId[]).map((id) => {
+              const option = directionMeta[id];
+              const Icon = option.icon;
+              const active = id === direction;
+              return (
+                <button
+                  key={id}
+                  type="button"
+                  onClick={() => setDirection(id)}
+                  aria-pressed={active}
+                  className={cn(
+                    "grid min-h-[64px] grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-2xl border px-3 text-left transition motion-reduce:transition-none",
+                    active
+                      ? "border-[color:var(--clinical-accent)] bg-[color:var(--clinical-accent-soft)] shadow-[0_8px_24px_rgba(29,111,184,0.08)]"
+                      : "border-[color:var(--border)] bg-[color:var(--surface)] hover:border-[color:var(--border-strong)]",
+                    focusRing,
+                  )}
+                >
+                  <span
+                    className={cn(
+                      "grid h-10 w-10 place-items-center rounded-xl",
+                      active
+                        ? "bg-[color:var(--clinical-accent)] text-white"
+                        : "bg-[color:var(--surface-subtle)] text-[color:var(--text-muted)]",
+                    )}
+                  >
+                    <Icon className="h-4 w-4" aria-hidden="true" />
+                  </span>
+                  <span className="min-w-0">
+                    <span className="block text-sm font-extrabold text-[color:var(--text-heading)]">
+                      {option.label}
+                    </span>
+                    <span className="block truncate text-xs font-medium text-[color:var(--text-muted)]">
+                      {option.bestFor}
+                    </span>
+                  </span>
+                  <span
+                    className={cn(
+                      "rounded-full px-2 py-1 text-3xs font-black uppercase tracking-[0.08em]",
+                      active
+                        ? "bg-white text-[color:var(--clinical-accent)]"
+                        : "bg-[color:var(--surface-subtle)] text-[color:var(--text-soft)]",
+                    )}
+                  >
+                    {option.verdict}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </header>
+
+        <section className="py-7" aria-labelledby="selected-direction-title">
+          <div className="mb-5 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+            <div>
+              <p className="text-xs font-black uppercase tracking-[0.12em] text-[color:var(--clinical-accent)]">
+                Selected direction
+              </p>
+              <h2
+                id="selected-direction-title"
+                className="mt-1 flex items-center gap-2 text-2xl font-black tracking-[-0.02em] text-[color:var(--text-heading)]"
+              >
+                <DirectionIcon className="h-5 w-5 text-[color:var(--clinical-accent)]" aria-hidden="true" />
+                {meta.shortLabel}
+              </h2>
+              <p className="mt-1 text-sm font-medium text-[color:var(--text-muted)]">{meta.strapline}</p>
+            </div>
+            <p className="max-w-lg text-sm font-semibold leading-6 text-[color:var(--text-muted)]">
+              Try closing the panel, editing Ward essentials, choosing global search, or changing the Quick pin. Every
+              visible device frame is interactive.
+            </p>
+          </div>
+
+          <div className="grid items-start gap-5 xl:grid-cols-[minmax(0,1fr)_390px]">
+            <div className="hidden md:block">
+              <p className="mb-2 text-xs font-extrabold uppercase tracking-[0.1em] text-[color:var(--text-soft)]">
+                Desktop / tablet · fluid 768–1440px treatment
+              </p>
+              <Prototype key={`${direction}-desktop`} direction={direction} phone={false} />
+            </div>
+            <div>
+              <p className="mb-2 text-xs font-extrabold uppercase tracking-[0.1em] text-[color:var(--text-soft)]">
+                Phone · up to 390px treatment
+              </p>
+              <Prototype key={`${direction}-phone`} direction={direction} phone />
+            </div>
+          </div>
+        </section>
+
+        <section
+          className="grid gap-3 border-t border-[color:var(--border)] py-7 md:grid-cols-3"
+          aria-label="Direction assessment"
+        >
+          <DesignNote icon={Sparkles} title="Signature">
+            {direction === "lens-fold"
+              ? "The overlapping pin icons reveal what each pin contains without turning the composer into a settings bar."
+              : direction === "command-deck"
+                ? "A structured two-pane workspace makes pins and search commands feel related without making them interchangeable."
+                : "Pin destinations become graspable objects: visible and removable immediately above the composer."}
+          </DesignNote>
+          <DesignNote icon={Check} title="Strongest quality">
+            {direction === "lens-fold"
+              ? "Pins come first, the current mode stays obvious, and widening the search remains a deliberate choice."
+              : direction === "command-deck"
+                ? "The user can open pinned destinations or launch a scoped search without repeatedly opening different surfaces."
+                : "The relationship between pin contents and the stable Documents search scope remains explicit."}
+          </DesignNote>
+          <DesignNote icon={ShieldCheck} title="Main trade-off">
+            {direction === "lens-fold"
+              ? "One drill-in is needed to edit a pin, but that keeps the everyday surface calm."
+              : direction === "command-deck"
+                ? "It is the densest option and risks feeling oversized for users who only need one focused search."
+                : "Several pin destinations can consume valuable phone width and need careful horizontal overflow behaviour."}
+          </DesignNote>
+        </section>
+      </div>
+    </main>
+  );
+}
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 28fc253161..a9f26b36e6 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -38,7 +38,14 @@ type SheetBaseProps = {
   footer?: ReactNode;
   closeLabel?: string;
   initialFocusRef?: RefObject<HTMLElement | null>;
+  /** Read at close time (not capture-on-open). Mutating `.current` while open retargets restore. */
   returnFocusRef?: RefObject<HTMLElement | null>;
+  /**
+   * Optional late resolver consulted before `returnFocusRef` / prior active element.
+   * Must be referentially stable (e.g. `useCallback`); an inline arrow re-runs the
+   * open-effect and fights the sheet for focus on every parent render.
+   */
+  resolveReturnFocusTarget?: () => HTMLElement | null;
   headerLeading?: ReactNode;
   titleAccessory?: ReactNode;
   descriptionContent?: ReactNode;
@@ -67,8 +74,10 @@ export type SheetProps = SheetBaseProps & SheetAccessibleName;
  * Portals into `OverlayRoot` (`layer="modal"`) by default so stacking and
  * inerting stay consistent across product overlays; pass `portal={false}` to
  * keep the sheet in-tree when an ancestor-scoped style must still apply.
- * Focus is trapped while open and returned to the opener on close; Escape and
- * backdrop click both dismiss.
+ * Focus is trapped while open and returned on close; Escape and backdrop click
+ * both dismiss. Return focus is resolved late from `resolveReturnFocusTarget`
+ * (stable callback), then `returnFocusRef.current`, then the previously focused
+ * element — so callers can retarget restore while the sheet is still open.
  */
 export function Sheet({
   open,
@@ -82,6 +91,7 @@ export function Sheet({
   ariaLabel,
   initialFocusRef,
   returnFocusRef,
+  resolveReturnFocusTarget,
   headerLeading,
   titleAccessory,
   descriptionContent,
@@ -129,6 +139,7 @@ export function Sheet({
     },
     [sheetId],
   );
+  const resolveReturnFocusRefTarget = useCallback(() => returnFocusRef?.current ?? null, [returnFocusRef]);
 
   useEffect(() => {
     onCloseRef.current = onClose;
@@ -189,7 +200,6 @@ export function Sheet({
   useEffect(() => {
     if (!open) return;
 
-    const explicitReturnElement = returnFocusRef?.current ?? null;
     const previousActiveElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     const restoreTimers = restoreTimersRef.current;
     // A close-then-reopen inside one frame leaves this instance's own restore
@@ -271,7 +281,10 @@ export function Sheet({
       openFocusRef.current?.cancel();
       openFocusRef.current = null;
       popSheet(sheetId);
-      const restoreTarget = explicitReturnElement ?? previousActiveElement;
+      const resolveConnectedRestoreTarget = () =>
+        [resolveReturnFocusTarget?.() ?? null, resolveReturnFocusRefTarget(), previousActiveElement].find(
+          (target): target is HTMLElement => Boolean(target?.isConnected),
+        ) ?? null;
       if (restoreTimers.frame != null) {
         window.cancelAnimationFrame(restoreTimers.frame);
         restoreTimers.frame = null;
@@ -287,6 +300,7 @@ export function Sheet({
       // the whole suite even when every test assertion passed.
       restoreTimers.frame = window.requestAnimationFrame(() => {
         restoreTimers.frame = null;
+        const restoreTarget = resolveConnectedRestoreTarget();
         if (typeof document === "undefined" || !restoreTarget?.isConnected) return;
         // A sheet opened while this one was closing (switching between two
         // sheets in one tick) now owns focus. Instances cannot cancel each
@@ -298,22 +312,23 @@ export function Sheet({
         restoreTimers.timeout = window.setTimeout(() => {
           restoreTimers.timeout = null;
           if (typeof document === "undefined") return;
+          const retryTarget = resolveConnectedRestoreTarget();
           // Only retry when focus fell through to the document body. If another
           // surface (e.g. a Guide dialog opened from a phone menu sheet) already
           // took focus, do not steal it back.
           if (
-            !restoreTarget.isConnected ||
-            !canRestoreFocusTo(restoreTarget) ||
-            document.activeElement === restoreTarget ||
+            !retryTarget ||
+            !canRestoreFocusTo(retryTarget) ||
+            document.activeElement === retryTarget ||
             (document.activeElement !== document.body && document.activeElement != null)
           ) {
             return;
           }
-          restoreTarget.focus({ preventScroll: true });
+          retryTarget.focus({ preventScroll: true });
         }, 50);
       });
     };
-  }, [open, initialFocusRef, returnFocusRef, sheetId]);
+  }, [open, initialFocusRef, resolveReturnFocusRefTarget, resolveReturnFocusTarget, sheetId]);
 
   if (!open) return null;
 
diff --git a/src/lib/search-pins.ts b/src/lib/search-pins.ts
new file mode 100644
index 0000000000..477fd475d6
--- /dev/null
+++ b/src/lib/search-pins.ts
@@ -0,0 +1,135 @@
+export const searchPinDestinationIds = [
+  "documents",
+  "prescribing",
+  "forms",
+  "services",
+  "differentials",
+  "tools",
+] as const;
+
+export type SearchPinDestinationId = (typeof searchPinDestinationIds)[number];
+
+export type SearchPin = {
+  id: string;
+  name: string;
+  destinationIds: SearchPinDestinationId[];
+};
+
+export const defaultSearchPins: SearchPin[] = [
+  {
+    id: "ward-essentials",
+    name: "Ward essentials",
+    destinationIds: ["documents", "prescribing", "forms"],
+  },
+  {
+    id: "quick-tools",
+    name: "My quick tools",
+    destinationIds: ["tools", "services", "differentials"],
+  },
+];
+
+export const searchPinsStorageKey = "clinical-kb-search-pins-v1";
+export const searchPinsChangeEvent = "clinical-kb-search-pins-change";
+
+const destinationIdSet = new Set<string>(searchPinDestinationIds);
+export const maximumSearchPins = 8;
+const maximumDestinations = 6;
+const maximumNameLength = 48;
+let inMemorySearchPins: SearchPin[] | null = null;
+let inMemorySearchPinsFallbackActive = false;
+
+function normalizePin(value: unknown): SearchPin | null {
+  if (!value || typeof value !== "object") return null;
+  const candidate = value as Partial<SearchPin>;
+  const id = typeof candidate.id === "string" ? candidate.id.trim().slice(0, 80) : "";
+  const name = typeof candidate.name === "string" ? candidate.name.trim().slice(0, maximumNameLength) : "";
+  const destinationIds = Array.isArray(candidate.destinationIds)
+    ? ([...new Set(candidate.destinationIds)]
+        .filter(
+          (destination): destination is SearchPinDestinationId =>
+            typeof destination === "string" && destinationIdSet.has(destination),
+        )
+        .slice(0, maximumDestinations) as SearchPinDestinationId[])
+    : [];
+
+  if (!id || !name || destinationIds.length === 0) return null;
+  return { id, name, destinationIds };
+}
+
+function cloneSearchPins(pins: readonly SearchPin[]): SearchPin[] {
+  return pins.map((pin) => ({
+    id: pin.id,
+    name: pin.name,
+    destinationIds: [...pin.destinationIds],
+  }));
+}
+
+function cloneDefaultSearchPins(): SearchPin[] {
+  return cloneSearchPins(defaultSearchPins);
+}
+
+function cloneStoredOrDefaultSearchPins(): SearchPin[] {
+  return inMemorySearchPinsFallbackActive && inMemorySearchPins
+    ? cloneSearchPins(inMemorySearchPins)
+    : cloneDefaultSearchPins();
+}
+
+export function normalizeSearchPins(value: unknown): SearchPin[] {
+  if (!Array.isArray(value)) return cloneDefaultSearchPins();
+  const seenIds = new Set<string>();
+  return value
+    .map(normalizePin)
+    .filter((pin): pin is SearchPin => {
+      if (!pin || seenIds.has(pin.id)) return false;
+      seenIds.add(pin.id);
+      return true;
+    })
+    .slice(0, maximumSearchPins);
+}
+
+export function readSearchPins(storage?: Pick<Storage, "getItem">): SearchPin[] {
+  let raw: string | null;
+  try {
+    const target = storage ?? (typeof window === "undefined" ? null : window.localStorage);
+    if (!target) return cloneStoredOrDefaultSearchPins();
+    raw = target.getItem(searchPinsStorageKey);
+  } catch {
+    return cloneStoredOrDefaultSearchPins();
+  }
+
+  if (!raw) return cloneStoredOrDefaultSearchPins();
+  try {
+    const normalized = normalizeSearchPins(JSON.parse(raw));
+    inMemorySearchPinsFallbackActive = false;
+    return normalized;
+  } catch {
+    inMemorySearchPinsFallbackActive = false;
+    return cloneDefaultSearchPins();
+  }
+}
+
+export function writeSearchPins(pins: SearchPin[], storage?: Pick<Storage, "setItem">): SearchPin[] {
+  const normalized = normalizeSearchPins(pins);
+  try {
+    const target = storage ?? (typeof window === "undefined" ? null : window.localStorage);
+    if (!target) {
+      inMemorySearchPins = cloneSearchPins(normalized);
+      inMemorySearchPinsFallbackActive = true;
+      return normalized;
+    }
+    target.setItem(searchPinsStorageKey, JSON.stringify(normalized));
+    inMemorySearchPinsFallbackActive = false;
+  } catch {
+    // Pins are a progressive enhancement. Keep this session's normalized value
+    // when browser storage is unavailable or full.
+    inMemorySearchPins = cloneSearchPins(normalized);
+    inMemorySearchPinsFallbackActive = true;
+  }
+  return cloneSearchPins(normalized);
+}
+
+/** Test-only: drop tab session memory so cases do not leak pin lists. */
+export function resetSearchPinsSessionForTests() {
+  inMemorySearchPins = null;
+  inMemorySearchPinsFallbackActive = false;
+}
diff --git a/tests/mode-action-popup.dom.test.tsx b/tests/mode-action-popup.dom.test.tsx
index d9dcad1193..9f751e8a2f 100644
--- a/tests/mode-action-popup.dom.test.tsx
+++ b/tests/mode-action-popup.dom.test.tsx
@@ -1,4 +1,7 @@
-import { useState } from "react";
+import { readFileSync } from "node:fs";
+import path from "node:path";
+
+import { useRef, useState } from "react";
 
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -36,6 +39,66 @@ function Harness({ onAction = vi.fn(), onModeSelect = vi.fn() }) {
   );
 }
 
+function CustomBodyHarness() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <ModeActionPopup
+      open={open}
+      title="Pins and search"
+      titleIcon={Search}
+      buttonLabel="Open pins and search"
+      items={modeActionItemsFor("documents")}
+      onOpenChange={setOpen}
+      onAction={vi.fn()}
+      customBody={
+        <div>
+          <button type="button">First custom action</button>
+          <button type="button">Middle custom action</button>
+          <button type="button">Last custom action</button>
+        </div>
+      }
+    />
+  );
+}
+
+function CustomBodySheetReturnFocusHarness() {
+  const [open, setOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const returnFocusRef = useRef<HTMLElement | null>(null);
+
+  return (
+    <>
+      <input ref={inputRef} aria-label="Search composer" />
+      <ModeActionPopup
+        open={open}
+        title="Pins and search"
+        titleIcon={Search}
+        buttonLabel="Open pins and search"
+        items={modeActionItemsFor("documents")}
+        onOpenChange={setOpen}
+        onAction={vi.fn()}
+        useSheet
+        sheetReturnFocusRef={returnFocusRef}
+        onBeforeOpen={() => {
+          returnFocusRef.current = null;
+        }}
+        customBody={
+          <button
+            type="button"
+            onClick={() => {
+              returnFocusRef.current = inputRef.current;
+              setOpen(false);
+            }}
+          >
+            Search current area
+          </button>
+        }
+      />
+    </>
+  );
+}
+
 describe("ModeActionPopup state transitions", () => {
   it("starts closed, opens its action menu, and closes after an action", async () => {
     const user = userEvent.setup();
@@ -73,6 +136,44 @@ describe("ModeActionPopup state transitions", () => {
     await waitFor(() => expect(trigger).toHaveFocus());
   });
 
+  it("gives custom bodies dialog semantics and focuses the last custom control from ArrowUp", async () => {
+    const user = userEvent.setup();
+    render(<CustomBodyHarness />);
+
+    const trigger = screen.getByRole("button", { name: "Open pins and search" });
+    expect(trigger).toHaveAttribute("aria-haspopup", "dialog");
+
+    trigger.focus();
+    await user.keyboard("{ArrowUp}");
+
+    const dialog = screen.getByRole("dialog", { name: "Pins and search" });
+    expect(screen.getByTestId("daily-actions-menu")).toBe(dialog);
+    await waitFor(() => expect(screen.getByRole("button", { name: "Last custom action" })).toHaveFocus());
+  });
+
+  it("keeps custom body placement measurement stable across parent renders", () => {
+    // jsdom does not support `new URL(..., import.meta.url)` file resolution.
+    const source = readFileSync(
+      path.join(process.cwd(), "src/components/clinical-dashboard/mode-action-popup.tsx"),
+      "utf8",
+    );
+
+    expect(source).toContain("const hasCustomBody = Boolean(customBody);");
+    expect(source).toContain("[hasCustomBody, integrated, integratedChipRow, items.length]");
+    expect(source).not.toContain("[customBody, integrated, integratedChipRow, items.length]");
+  });
+
+  it("lets custom sheet actions retarget return focus to the composer", async () => {
+    const user = userEvent.setup();
+    render(<CustomBodySheetReturnFocusHarness />);
+
+    await user.click(screen.getByRole("button", { name: "Open pins and search" }));
+    await waitFor(() => expect(document.body.style.overflow).toBe("hidden"));
+    await user.click(screen.getByRole("button", { name: "Search current area" }));
+
+    await waitFor(() => expect(screen.getByRole("textbox", { name: "Search composer" })).toHaveFocus());
+  });
+
   it("selects enabled modes and exposes disabled modes without selecting them", async () => {
     const user = userEvent.setup();
     const onModeSelect = vi.fn();
diff --git a/tests/pinned-plus-menu-mockups.dom.test.tsx b/tests/pinned-plus-menu-mockups.dom.test.tsx
new file mode 100644
index 0000000000..308f2eb411
--- /dev/null
+++ b/tests/pinned-plus-menu-mockups.dom.test.tsx
@@ -0,0 +1,42 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import { PinnedPlusMenuMockupsPage } from "@/components/pinned-plus-menu-mockups";
+
+describe("editable pin menu mockups", () => {
+  it("shows three distinct directions, device treatments, and realistic states", async () => {
+    const user = userEvent.setup();
+    render(<PinnedPlusMenuMockupsPage />);
+
+    expect(screen.getByRole("button", { name: /Unified plus menu/ })).toHaveAttribute("aria-pressed", "true");
+    expect(screen.getByRole("button", { name: "Closed" })).toHaveAttribute("aria-pressed", "true");
+    expect(screen.queryByRole("dialog", { name: "Search and pinned shortcuts" })).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Menu open" }));
+    expect(screen.getByRole("dialog", { name: "Search and pinned shortcuts" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: "Your pins" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: "Search in" })).toBeInTheDocument();
+    expect(screen.getByText("Ward essentials")).toBeInTheDocument();
+    expect(
+      screen.getByRole("img", {
+        name: /Ward essentials contains Documents, Medications, Pathology forms, Monitoring/,
+      }),
+    ).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Edit Ward essentials" }));
+    expect(screen.getByRole("dialog", { name: "Edit Ward essentials pin" })).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Remove Monitoring" }));
+    expect(screen.getByText("3 destinations selected")).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await user.click(screen.getByRole("button", { name: "Phone preview" }));
+    expect(screen.getByRole("region", { name: "Phone mockup preview" })).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: /Pinned icon rail/ }));
+    expect(screen.getByRole("dialog", { name: "Pinned icon rail menu" })).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: /Search command palette/ }));
+    expect(screen.getByRole("dialog", { name: "Search command palette" })).toBeInTheDocument();
+  });
+});
diff --git a/tests/search-command-surface.test.ts b/tests/search-command-surface.test.ts
index 7680d6774e..b2d351ba3f 100644
--- a/tests/search-command-surface.test.ts
+++ b/tests/search-command-surface.test.ts
@@ -78,4 +78,14 @@ describe("search command surface", () => {
     expect(source).not.toContain("sm:max-h-[min(55dvh,26rem)]");
     expect(source).toContain('opensUpward ? "sm:max-h-[min(38dvh,20rem)]" : "sm:max-h-[min(42dvh,24rem)]"');
   });
+
+  it("does not let a stale narrow-window focus decision shadow later displayability", () => {
+    const source = readFileSync(
+      new URL("../src/components/clinical-dashboard/universal-search-command-surface.tsx", import.meta.url),
+      "utf8",
+    );
+
+    expect(source).not.toContain("setEagerDropdownDisplayable(displayable);");
+    expect(source).toContain("setEagerDropdownDisplayable(displayable ? true : null);");
+  });
 });
diff --git a/tests/search-lens-menu-mockups.dom.test.tsx b/tests/search-lens-menu-mockups.dom.test.tsx
new file mode 100644
index 0000000000..fc5f3088e2
--- /dev/null
+++ b/tests/search-lens-menu-mockups.dom.test.tsx
@@ -0,0 +1,52 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import { SearchLensMenuMockupsPage } from "@/components/search-lens-menu-mockups";
+
+describe("search plus menu mockups", () => {
+  it("keeps editable pins separate from explicit search choices across all directions", async () => {
+    const user = userEvent.setup();
+    render(<SearchLensMenuMockupsPage />);
+
+    const foldOut = screen.getByRole("button", { name: /Attached pin fold-out/ });
+    const commandDeck = screen.getByRole("button", { name: /Pins and search command deck/ });
+    const inlineBuilder = screen.getByRole("button", { name: /Inline pin bar/ });
+
+    expect(foldOut).toHaveAttribute("aria-pressed", "true");
+    expect(screen.getAllByRole("dialog", { name: "Pins and search" })).toHaveLength(2);
+    expect(screen.getAllByRole("heading", { name: "Your pins" })).toHaveLength(2);
+    expect(screen.getAllByRole("heading", { name: "Search in" })).toHaveLength(2);
+    expect(screen.getAllByText("Search Documents").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Search all clinical areas").length).toBeGreaterThan(0);
+    expect(
+      screen.getAllByRole("img", {
+        name: /Ward essentials contains app destinations: Documents, Medications, Forms/,
+      }).length,
+    ).toBeGreaterThan(0);
+
+    await user.click(screen.getAllByRole("button", { name: "Edit Ward essentials" })[0]);
+    expect(screen.getByRole("dialog", { name: "Edit Ward essentials pin" })).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Remove Forms" }));
+    expect(screen.getByText("2 destinations selected")).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Save pin" }));
+
+    await user.click(screen.getAllByRole("button", { name: "New pin" })[0]);
+    const pinName = screen.getByRole("textbox", { name: "Pin name" });
+    await user.clear(pinName);
+    await user.type(pinName, "Night shift");
+    await user.click(screen.getByRole("button", { name: "Create pin" }));
+    expect(screen.getByText("Night shift")).toBeInTheDocument();
+
+    await user.click(commandDeck);
+    expect(commandDeck).toHaveAttribute("aria-pressed", "true");
+    expect(screen.getAllByRole("dialog", { name: "Pins and search command deck" })).toHaveLength(2);
+    await user.keyboard("{Escape}");
+    expect(screen.queryByRole("dialog", { name: "Pins and search command deck" })).not.toBeInTheDocument();
+
+    await user.click(inlineBuilder);
+    expect(inlineBuilder).toHaveAttribute("aria-pressed", "true");
+    expect(screen.getAllByRole("dialog", { name: "Edit pin destinations" })).toHaveLength(2);
+    expect(screen.getByTestId("phone-inline-builder-layer")).toHaveClass("bottom-[108px]");
+  });
+});
diff --git a/tests/search-pins-menu.dom.test.tsx b/tests/search-pins-menu.dom.test.tsx
new file mode 100644
index 0000000000..6c6dd7528e
--- /dev/null
+++ b/tests/search-pins-menu.dom.test.tsx
@@ -0,0 +1,208 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { ComponentProps } from "react";
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { FileText, Search } from "lucide-react";
+
+import { SearchPinsMenu } from "@/components/clinical-dashboard/search-pins-menu";
+import type { ModeActionItem, ModeActionModeOption } from "@/components/clinical-dashboard/mode-action-popup";
+import {
+  maximumSearchPins,
+  resetSearchPinsSessionForTests,
+  searchPinsChangeEvent,
+  searchPinsStorageKey,
+} from "@/lib/search-pins";
+
+const modeOptions: ModeActionModeOption[] = [
+  { id: "documents", label: "Documents", description: "Source documents", icon: FileText },
+  { id: "answer", label: "Answer", description: "Source-backed answer", icon: Search },
+];
+
+const actions: ModeActionItem[] = [
+  { id: "documents-search", label: "Search sources", icon: Search },
+  { id: "documents-recent", label: "Recent documents", icon: FileText },
+];
+
+const longActionList: ModeActionItem[] = [
+  { id: "documents-search", label: "Search sources", icon: Search },
+  { id: "documents-upload", label: "Upload PDF", icon: FileText },
+  { id: "documents-scope", label: "Scope sources", icon: FileText },
+  { id: "documents-tables", label: "Tables", icon: FileText },
+  { id: "documents-viewer", label: "Open source PDF", icon: FileText },
+];
+
+function renderMenu(overrides: Partial<ComponentProps<typeof SearchPinsMenu>> = {}) {
+  const props: ComponentProps<typeof SearchPinsMenu> = {
+    currentModeId: "documents",
+    modeOptions,
+    actions,
+    onClose: vi.fn(),
+    onCurrentSearch: vi.fn(),
+    onGlobalSearch: vi.fn(),
+    onModeSelect: vi.fn(),
+    onAction: vi.fn(),
+    ...overrides,
+  };
+  render(<SearchPinsMenu {...props} />);
+  return props;
+}
+
+describe("SearchPinsMenu", () => {
+  beforeEach(() => {
+    resetSearchPinsSessionForTests();
+    window.localStorage.removeItem(searchPinsStorageKey);
+  });
+
+  it("keeps pins, search choices, and actions as separate sections", () => {
+    renderMenu();
+    expect(screen.getByRole("heading", { name: "Your pins" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: "Search in" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: "Useful actions" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Open Ward essentials pin, 3 destinations" })).toHaveAttribute(
+      "data-sheet-autofocus",
+      "true",
+    );
+  });
+
+  it("expands a pin into explicit destination links without changing search mode", async () => {
+    const user = userEvent.setup();
+    const onModeSelect = vi.fn();
+    renderMenu({ onModeSelect });
+
+    await user.click(screen.getByRole("button", { name: "Open Ward essentials pin, 3 destinations" }));
+    expect(screen.getByRole("link", { name: "Documents" })).toHaveAttribute("href", "/?mode=documents");
+    expect(screen.getByRole("link", { name: "Medications" })).toHaveAttribute("href", "/?mode=prescribing");
+    expect(onModeSelect).not.toHaveBeenCalled();
+  });
+
+  it("creates and persists an editable pin", async () => {
+    const user = userEvent.setup();
+    renderMenu();
+
+    await user.click(screen.getByRole("button", { name: "New pin" }));
+    const name = screen.getByRole("textbox", { name: "Pin name" });
+    await user.type(name, "My clinic");
+    await user.click(screen.getByRole("button", { name: "Medications" }));
+    await user.click(screen.getByRole("button", { name: "Create pin" }));
+
+    expect(screen.getByText("My clinic")).toBeInTheDocument();
+    expect(JSON.parse(window.localStorage.getItem(searchPinsStorageKey) ?? "[]")).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ name: "My clinic", destinationIds: ["documents", "prescribing"] }),
+      ]),
+    );
+  });
+
+  it("keeps same-window pin changes when browser storage is unavailable", () => {
+    renderMenu();
+
+    act(() => {
+      window.dispatchEvent(
+        new CustomEvent(searchPinsChangeEvent, {
+          detail: [{ id: "clinic", name: "My clinic", destinationIds: ["documents", "forms"] }],
+        }),
+      );
+    });
+
+    expect(screen.getByText("My clinic")).toBeInTheDocument();
+  });
+
+  it("re-reads storage when a pin-change event carries no payload", () => {
+    window.localStorage.setItem(
+      searchPinsStorageKey,
+      JSON.stringify([{ id: "clinic", name: "Stored clinic", destinationIds: ["documents"] }]),
+    );
+    renderMenu();
+
+    act(() => {
+      window.dispatchEvent(new CustomEvent(searchPinsChangeEvent));
+    });
+
+    expect(screen.getByText("Stored clinic")).toBeInTheDocument();
+    expect(screen.queryByText("Ward essentials")).not.toBeInTheDocument();
+  });
+
+  it("marks the first pin for sheet autofocus", () => {
+    renderMenu();
+    expect(screen.getByRole("button", { name: "Open Ward essentials pin, 3 destinations" })).toHaveAttribute(
+      "data-sheet-autofocus",
+      "true",
+    );
+  });
+
+  it("closes the pin editor on Escape without dismissing the surrounding menu", async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    renderMenu({ onClose });
+
+    await user.click(screen.getByRole("button", { name: "New pin" }));
+    expect(screen.getByRole("heading", { name: "Create a new pin" })).toBeInTheDocument();
+
+    await user.keyboard("{Escape}");
+    expect(screen.getByRole("heading", { name: "Your pins" })).toBeInTheDocument();
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("requires a second click before deleting a pin", async () => {
+    const user = userEvent.setup();
+    renderMenu();
+
+    await user.click(screen.getByRole("button", { name: "Edit Ward essentials" }));
+    await user.click(screen.getByRole("button", { name: "Delete" }));
+    expect(screen.getByRole("button", { name: "Confirm delete" })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: "Edit pin" })).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Confirm delete" }));
+    expect(screen.queryByText("Ward essentials")).not.toBeInTheDocument();
+  });
+
+  it("disables pin creation at the persisted limit instead of silently truncating", () => {
+    window.localStorage.setItem(
+      searchPinsStorageKey,
+      JSON.stringify(
+        Array.from({ length: maximumSearchPins }, (_, index) => ({
+          id: `pin-${index}`,
+          name: `Pin ${index + 1}`,
+          destinationIds: ["documents"],
+        })),
+      ),
+    );
+
+    renderMenu();
+
+    expect(screen.getByRole("button", { name: "New pin" })).toBeDisabled();
+  });
+
+  it("opens universal search and changes area only through explicit search controls", async () => {
+    const user = userEvent.setup();
+    const onGlobalSearch = vi.fn();
+    const onModeSelect = vi.fn();
+    renderMenu({ onGlobalSearch, onModeSelect });
+
+    await user.click(screen.getByRole("button", { name: /Search all clinical areas/ }));
+    expect(onGlobalSearch).toHaveBeenCalledOnce();
+    expect(onModeSelect).not.toHaveBeenCalled();
+
+    await user.click(screen.getByRole("button", { name: /Choose another search area/ }));
+    await user.click(screen.getByRole("button", { name: /Answer/ }));
+    expect(onModeSelect).toHaveBeenCalledWith("answer");
+  });
+
+  it("omits the universal search action when the command dropdown is unavailable", () => {
+    renderMenu({ globalSearchAvailable: false });
+
+    expect(screen.queryByRole("button", { name: /Search all clinical areas/ })).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Choose another search area/ })).toBeInTheDocument();
+  });
+
+  it("renders every supplied mode action", async () => {
+    const user = userEvent.setup();
+    const onAction = vi.fn();
+    renderMenu({ actions: longActionList, onAction });
+
+    expect(screen.getByRole("menuitem", { name: "Search sources" })).toBeInTheDocument();
+    expect(screen.getByRole("menuitem", { name: "Tables" })).toBeInTheDocument();
+    await user.click(screen.getByRole("menuitem", { name: "Open source PDF" }));
+    expect(onAction).toHaveBeenCalledWith("documents-viewer");
+  });
+});
diff --git a/tests/search-pins.test.ts b/tests/search-pins.test.ts
new file mode 100644
index 0000000000..90f3ff0533
--- /dev/null
+++ b/tests/search-pins.test.ts
@@ -0,0 +1,95 @@
+import { beforeEach, describe, expect, it } from "vitest";
+
+import {
+  defaultSearchPins,
+  normalizeSearchPins,
+  readSearchPins,
+  resetSearchPinsSessionForTests,
+  searchPinsStorageKey,
+  writeSearchPins,
+} from "@/lib/search-pins";
+
+describe("search pin storage", () => {
+  beforeEach(() => {
+    resetSearchPinsSessionForTests();
+  });
+  it("normalizes user-owned pin names and destination ids", () => {
+    expect(
+      normalizeSearchPins([
+        {
+          id: "rounds",
+          name: "  Ward round  ",
+          destinationIds: ["documents", "unknown", "documents", "forms"],
+        },
+      ]),
+    ).toEqual([{ id: "rounds", name: "Ward round", destinationIds: ["documents", "forms"] }]);
+  });
+
+  it("keeps the first valid pin when duplicate ids are stored", () => {
+    expect(
+      normalizeSearchPins([
+        { id: "rounds", name: "Ward round", destinationIds: ["documents"] },
+        { id: "rounds", name: "Duplicate round", destinationIds: ["forms"] },
+        { id: "forms", name: "Forms", destinationIds: ["forms"] },
+      ]),
+    ).toEqual([
+      { id: "rounds", name: "Ward round", destinationIds: ["documents"] },
+      { id: "forms", name: "Forms", destinationIds: ["forms"] },
+    ]);
+  });
+
+  it("falls back safely for malformed browser data", () => {
+    const storage = { getItem: () => "not-json" };
+    expect(readSearchPins(storage)).toEqual(defaultSearchPins);
+  });
+
+  it("returns a copy of the default pins so callers cannot mutate the shared seed", () => {
+    const first = readSearchPins({ getItem: () => null });
+    first[0].name = "Mutated";
+    first[0].destinationIds.push("tools");
+    expect(readSearchPins({ getItem: () => null })).toEqual(defaultSearchPins);
+    expect(defaultSearchPins[0].name).toBe("Ward essentials");
+  });
+
+  it("keeps the last written pins in session memory when storage writes fail", () => {
+    const failingStorage = {
+      getItem: () => null,
+      setItem: () => {
+        throw new Error("quota exceeded");
+      },
+    };
+    writeSearchPins([{ id: "clinic", name: "Clinic", destinationIds: ["documents"] }], failingStorage);
+    expect(readSearchPins({ getItem: () => null })).toEqual([
+      { id: "clinic", name: "Clinic", destinationIds: ["documents"] },
+    ]);
+  });
+
+  it("writes only the normalized preference payload", () => {
+    const values = new Map<string, string>();
+    const storage = { setItem: (key: string, value: string) => values.set(key, value) };
+    writeSearchPins([{ id: "tools", name: " Tools ", destinationIds: ["tools", "tools"] }], storage);
+    expect(JSON.parse(values.get(searchPinsStorageKey) ?? "null")).toEqual([
+      { id: "tools", name: "Tools", destinationIds: ["tools"] },
+    ]);
+  });
+
+  it("preserves an intentionally empty pin collection", () => {
+    expect(normalizeSearchPins([])).toEqual([]);
+  });
+
+  it("keeps the last normalized pins in memory when storage writes and reads fail", () => {
+    const unavailableStorage = {
+      getItem: () => {
+        throw new Error("storage disabled");
+      },
+      setItem: () => {
+        throw new Error("quota exceeded");
+      },
+    };
+
+    expect(writeSearchPins([], unavailableStorage)).toEqual([]);
+    expect(readSearchPins(unavailableStorage)).toEqual([]);
+
+    writeSearchPins(defaultSearchPins);
+  });
+});
diff --git a/tests/search-results-band-adoption.test.ts b/tests/search-results-band-adoption.test.ts
index e69a2f3c3c..40dae22938 100644
--- a/tests/search-results-band-adoption.test.ts
+++ b/tests/search-results-band-adoption.test.ts
@@ -31,8 +31,11 @@ function rendersBand(source: string) {
   return source.includes(BAND_ELEMENT);
 }
 
-/** Mockups are design scratch and exempt from production wiring gates. */
-function isMockupPath(relativePath: string) {
+/** Mockups are design scratch and exempt from production wiring gates.
+ * Absolute paths must first be scoped to the repository: a worktree parent can
+ * legitimately contain "mockup" without making every production module one. */
+function isMockupPath(candidatePath: string) {
+  const relativePath = path.isAbsolute(candidatePath) ? path.relative(REPO_ROOT, candidatePath) : candidatePath;
   return /mockup/i.test(relativePath);
 }
 
@@ -573,6 +576,11 @@ describe("search results band adoption", () => {
     .map((abs) => ({ abs, rel: path.relative(REPO_ROOT, abs) }))
     .filter(({ rel }) => !isMockupPath(rel));
 
+  it("scopes mockup detection to the repository-relative path", () => {
+    expect(isMockupPath(path.join(REPO_ROOT, "src", "components", "production-result.tsx"))).toBe(false);
+    expect(isMockupPath(path.join(REPO_ROOT, "src", "app", "mockups", "study", "page.tsx"))).toBe(true);
+  });
+
   it("mounts the shared band on every mode that presents a result list", () => {
     const mounted = new Set<string>();
     for (const { abs } of productionComponents) {
diff --git a/tests/sheet.dom.test.tsx b/tests/sheet.dom.test.tsx
index e3b0d156cf..216e306fc6 100644
--- a/tests/sheet.dom.test.tsx
+++ b/tests/sheet.dom.test.tsx
@@ -1,4 +1,7 @@
-import { render, waitFor } from "@testing-library/react";
+import { useRef, useState } from "react";
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import { Sheet } from "@/components/ui/sheet";
@@ -49,6 +52,91 @@ function pressEscape() {
   window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }));
 }
 
+function DetachedResolverFallbackHarness() {
+  const [open, setOpen] = useState(false);
+  const [showResolverTarget, setShowResolverTarget] = useState(false);
+  const openerRef = useRef<HTMLButtonElement | null>(null);
+  const staleResolverTargetRef = useRef<HTMLButtonElement | null>(null);
+
+  return (
+    <>
+      <button
+        type="button"
+        ref={openerRef}
+        onClick={() => {
+          setShowResolverTarget(true);
+          setOpen(true);
+        }}
+      >
+        Open sheet
+      </button>
+      {showResolverTarget ? (
+        <button
+          type="button"
+          ref={(element) => {
+            if (element) staleResolverTargetRef.current = element;
+          }}
+        >
+          Stale resolver target
+        </button>
+      ) : null}
+      <Sheet
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Return focus"
+        returnFocusRef={openerRef}
+        resolveReturnFocusTarget={() => staleResolverTargetRef.current}
+      >
+        <button
+          type="button"
+          onClick={() => {
+            setShowResolverTarget(false);
+            setOpen(false);
+          }}
+        >
+          Close sheet
+        </button>
+      </Sheet>
+    </>
+  );
+}
+
+function DynamicReturnFocusHarness() {
+  const [open, setOpen] = useState(false);
+  const openerRef = useRef<HTMLButtonElement | null>(null);
+  const updatedTargetRef = useRef<HTMLButtonElement | null>(null);
+  const returnFocusRef = useRef<HTMLElement | null>(null);
+
+  return (
+    <>
+      <button
+        type="button"
+        ref={openerRef}
+        onClick={() => {
+          returnFocusRef.current = openerRef.current;
+          setOpen(true);
+        }}
+      >
+        Open sheet
+      </button>
+      <button type="button" ref={updatedTargetRef}>
+        Updated return target
+      </button>
+      <Sheet open={open} onClose={() => setOpen(false)} title="Dynamic return" returnFocusRef={returnFocusRef}>
+        <button
+          type="button"
+          onClick={() => {
+            returnFocusRef.current = updatedTargetRef.current;
+            setOpen(false);
+          }}
+        >
+          Close to updated target
+        </button>
+      </Sheet>
+    </>
+  );
+}
+
 describe("Sheet stacked-overlay coordination", () => {
   it("routes Escape to only the top-most open Sheet", () => {
     const onCloseA = vi.fn();
@@ -179,4 +267,28 @@ describe("Sheet stacked-overlay coordination", () => {
       expect(document.activeElement).toBe(findField);
     });
   });
+
+  it("falls back to returnFocusRef when a resolver target has detached", async () => {
+    const user = userEvent.setup();
+    render(<DetachedResolverFallbackHarness />);
+
+    const opener = screen.getByRole("button", { name: "Open sheet" });
+    await user.click(opener);
+    await waitFor(() => expect(document.body.style.overflow).toBe("hidden"));
+
+    await user.click(screen.getByRole("button", { name: "Close sheet" }));
+
+    await waitFor(() => expect(opener).toHaveFocus());
+  });
+
+  it("reads returnFocusRef at close time so callers can retarget focus", async () => {
+    const user = userEvent.setup();
+    render(<DynamicReturnFocusHarness />);
+
+    await user.click(screen.getByRole("button", { name: "Open sheet" }));
+    await waitFor(() => expect(document.body.style.overflow).toBe("hidden"));
+    await user.click(screen.getByRole("button", { name: "Close to updated target" }));
+
+    await waitFor(() => expect(screen.getByRole("button", { name: "Updated return target" })).toHaveFocus());
+  });
 });