Add guided tours and unify left-to-right hall wall hang.

Visitors walk published tours in a 3D hall with stop notes; curators edit drafts via Tour editor. All galleries (artist, movement, tour) place the first work left of the entrance view and the last on the right.

Co-authored-by: Cursor <cursoragent@cursor.com>

client/src/components/PaintingDetail.tsx

@@ -14,6 +14,8 @@ interface Props {
   data: PaintingDetail;
   artistPaintings?: Painting[];
   backLabel?: string;
+  tourTitle?: string | null;
+  tourText?: string | null;
   onBack: () => void;
   onPaintingClick: (paintingId: number) => void;
   onCatalogNavigate: (paintingId: number) => void;
@@ -194,6 +196,8 @@ export default function PaintingDetailView({
   data,
   artistPaintings = [],
   backLabel = '← Back to Gallery',
+  tourTitle = null,
+  tourText = null,
   onBack,
   onPaintingClick,
   onCatalogNavigate,
@@ -207,6 +211,7 @@ export default function PaintingDetailView({
 }: Props) {
   const { t } = useTranslation('painting');
   const { painting, influencedBy, influenced, annotations = [] } = data;
+  const inTour = tourText != null;
   const [fullscreen, setFullscreen] = useState(false);
   const [imageVersion, setImageVersion] = useState(0);
   const [debugSearch, setDebugSearch] = useState<DebugImageSearchResult | null>(null);
@@ -470,7 +475,9 @@ export default function PaintingDetailView({
             {showCatalogNav && (
               <span className="painting-catalog-position">
                 {' · '}
-                {catalogIndex + 1} of {artistPaintings.length}
+                {inTour
+                  ? t('tourStopPosition', { current: catalogIndex + 1, total: artistPaintings.length })
+                  : `${catalogIndex + 1} of ${artistPaintings.length}`}
               </span>
             )}
           </p>
@@ -569,6 +576,16 @@ export default function PaintingDetailView({
               </button>
             )}
           </div>
+          {inTour && (
+            <aside className="tour-stop-panel" aria-label={t('tourNotes')}>
+              <h3>{tourTitle ? t('tourNotesFor', { title: tourTitle }) : t('tourNotes')}</h3>
+              {tourText.trim() ? (
+                <p className="tour-stop-body">{tourText}</p>
+              ) : (
+                <p className="tour-stop-empty">{t('tourNotesEmpty')}</p>
+              )}
+            </aside>
+          )}
           {painting.description && (
             <div className="painting-description">
               <p>{painting.description}</p>