@eightyfourthousand/lib-editing 2026.3.0 → 2026.4.0

package/src/lib/components/shared/ThreeColumnRenderer.tsx

@@ -1,10 +1,12 @@
 'use client';
 
 import { ThreeColumns } from '@eightyfourthousand/design-system';
-import { ReactNode } from 'react';
+import { ReactNode, useMemo } from 'react';
 import { useNavigation } from './NavigationProvider';
 import { cn } from '@eightyfourthousand/lib-utils';
 import { TranslationHeader } from './TranslationHeader';
+import { ReaderSearchButton } from './ReaderSearchButton';
+import { GatedFeature } from '@eightyfourthousand/lib-instr';
 
 export const ThreeColumnRenderer = ({
   withHeader = false,
@@ -16,6 +18,8 @@ export const ThreeColumnRenderer = ({
   const { panels, updatePanel, hasTranslationContent } = useNavigation();
   const rightPanelEnabled = hasTranslationContent;
 
+  const searchButton = useMemo(() => <ReaderSearchButton />, []);
+
   return (
     <div
       className={cn(
@@ -23,13 +27,16 @@ export const ThreeColumnRenderer = ({
         withHeader ? 'pb-20' : '',
       )}
     >
-      <div className="pb-2.5">
-        <TranslationHeader className="rounded-full shadow-lg" />
-      </div>
+      <GatedFeature flag='show-reader-header'>
+        <div className="pb-2.5">
+          <TranslationHeader className="rounded-full shadow-lg" />
+        </div>
+      </GatedFeature>
       <ThreeColumns
         leftPanelOpen={panels.left.open}
         rightPanelOpen={rightPanelEnabled ? panels.right.open : false}
         rightPanelEnabled={rightPanelEnabled}
+        mainPanelActions={searchButton}
         onLeftPanelOpenChange={(open) => {
           updatePanel({
             name: 'left',
@@ -39,11 +46,11 @@ export const ThreeColumnRenderer = ({
         onRightPanelOpenChange={
           rightPanelEnabled
             ? (open) => {
-                updatePanel({
-                  name: 'right',
-                  state: { open, tab: panels.right.tab },
-                });
-              }
+              updatePanel({
+                name: 'right',
+                state: { open, tab: panels.right.tab },
+              });
+            }
             : undefined
         }
       >

package/src/lib/components/shared/TranslationHeader.tsx

@@ -1,68 +1,12 @@
 'use client';
 
 import { MiniLogo } from '@eightyfourthousand/design-system';
-import { PassageMatch, SearchButton, SearchResult } from '@eightyfourthousand/lib-search';
 import { useNavigation } from './NavigationProvider';
-import { useCallback } from 'react';
-import { PanelName, PanelState, TabName } from './types';
-import { BodyItemType } from '@eightyfourthousand/data-access';
 import { cn } from '@eightyfourthousand/lib-utils';
 
 export const TranslationHeader = ({ className }: { className?: string }) => {
-  const { imprint, uuid, toh, updatePanel } = useNavigation();
+  const { imprint } = useNavigation();
 
-  const onResultSelected = useCallback(
-    (result: SearchResult) => {
-      let side: PanelName = 'main';
-      const panelState: PanelState = {
-        open: true,
-        hash: result.uuid,
-      };
-
-      const TAB_FOR_PASSAGE_SECTION: Partial<Record<BodyItemType, TabName>> = {
-        abbreviations: 'abbreviations',
-        endnotes: 'endnotes',
-        summary: 'front',
-        introduction: 'front',
-        acknowledgements: 'front',
-      };
-
-      const SIDE_FOR_PASSAGE_SECTION: Partial<Record<BodyItemType, PanelName>> =
-        {
-          abbreviations: 'right',
-          endnotes: 'right',
-        };
-
-      switch (result.type) {
-        case 'passage':
-          {
-            const passage = result as PassageMatch;
-            side = SIDE_FOR_PASSAGE_SECTION[passage.section] || 'main';
-            panelState.tab =
-              TAB_FOR_PASSAGE_SECTION[passage.section] || 'translation';
-          }
-          break;
-        case 'alignment':
-          side = 'main';
-          panelState.tab = 'compare';
-          break;
-        case 'bibliography':
-          side = 'right';
-          panelState.tab = 'bibliography';
-          break;
-        case 'glossary':
-          side = 'right';
-          panelState.tab = 'glossary';
-          break;
-      }
-
-      updatePanel({
-        name: side,
-        state: panelState,
-      });
-    },
-    [updatePanel],
-  );
   return (
     <div
       className={cn(
@@ -72,15 +16,10 @@ export const TranslationHeader = ({ className }: { className?: string }) => {
     >
       <div className="flex gap-2 md:gap-5 min-w-0">
         <MiniLogo className="ms-3 me-1 my-auto" width={32} height={32} />
-        <span className="font-serif font-light truncate text-darkgray text-xs sm:text-sm my-auto flex-shrink">
+        <span className="font-serif truncate text-darkgray text-xs sm:text-sm my-auto flex-shrink">
           {`${imprint?.mainTitles?.en ? `${imprint?.mainTitles?.en}` : ''}${imprint?.section ? ` from ${imprint?.section}` : ''}`}
         </span>
       </div>
-      <SearchButton
-        workUuid={uuid}
-        toh={toh}
-        onResultSelected={onResultSelected}
-      />
     </div>
   );
 };

package/src/lib/components/shared/bibliography/BibliographyList.tsx

@@ -22,7 +22,7 @@ export const BibliographyList = ({
   return (
     <div ref={ref} className={cn('flex flex-col w-full', className)}>
       <LabeledElement
-        className="@c/sidebar:mt-5 mt-6"
+        className="mt-2"
         id={'bibliography'}
         label="b."
       >
@@ -43,7 +43,7 @@ export const BibliographyList = ({
                 label={`b.${i + 1}`}
                 contentType="bibliography"
               >
-                <div className="text-secondary font-sans text-base font-bold">
+                <div className="text-primary font-sans text-base font-bold">
                   {section.heading}
                 </div>
               </LabeledElement>

package/src/lib/components/shared/glossary/GlossaryInstanceBody.tsx

@@ -8,16 +8,21 @@ import { useCallback, useRef, useState } from 'react';
 import { useGlossaryInstanceListener } from '../hooks/useGlossaryInstanceListener';
 import { useNavigation } from '../NavigationProvider';
 import { TAB_FOR_SECTION, PANEL_FOR_SECTION } from '../types';
-import { createGraphQLClient, getTermPassages } from '@eightyfourthousand/client-graphql';
+import {
+  createGraphQLClient,
+  getTermPassages,
+} from '@eightyfourthousand/client-graphql';
 
 type PassageItem = { uuid: string; type: string; label: string };
 
 export const GlossaryInstanceBody = ({
   instance,
   className,
+  isEditor = false,
 }: {
   instance: GlossaryTermInstance;
   className?: string;
+  isEditor?: boolean;
 }) => {
   const ref = useRef<HTMLDivElement>(null);
   useGlossaryInstanceListener({ ref });
@@ -66,10 +71,15 @@ export const GlossaryInstanceBody = ({
   return (
     <div className={cn('p-2 flex gap-1 flex-col', className)}>
       {instance.names.english && (
-        <div className="text-secondary font-sans text-base font-bold">
+        <div className="text-primary font-sans text-base font-bold">
           {instance.names.english}
         </div>
       )}
+      {isEditor && instance.names.alternatives && (
+        <div className="text-sm text-accent">
+          {`Also: ${instance.names.alternatives}`}
+        </div>
+      )}
       <Ul>
         {instance.names.wylie && (
           <Li className="italic">{instance.names.wylie}</Li>
@@ -103,7 +113,7 @@ export const GlossaryInstanceBody = ({
               {index > 0 && ', '}
               <Button
                 variant="link"
-                className='p-0 h-6 font-normal hover:cursor-pointer'
+                className="p-0 h-6 font-normal hover:cursor-pointer"
                 onClick={() => handlePassageClick(passage)}
               >
                 {passage.label || passage.uuid.slice(0, 6)}
@@ -115,7 +125,7 @@ export const GlossaryInstanceBody = ({
               {', '}
               <Button
                 variant="link"
-                className='p-0 h-6 font-normal hover:cursor-pointer'
+                className="p-0 h-6 font-normal hover:cursor-pointer"
                 onClick={loadMore}
               >
                 more &rsaquo;
@@ -133,7 +143,7 @@ export const GlossaryInstanceBody = ({
             href={`/glossary/${instance.authority}`}
             target="_blank"
             rel="noreferrer"
-            className="hover:underline decoration-slate hover:text-slate"
+            className="hover:underline decoration-primary hover:text-primary"
           >
             {'View full entry ›'}
           </a>

package/src/lib/components/shared/glossary/GlossaryPaginationProvider.tsx

@@ -19,6 +19,7 @@ import {
 import { isUuid, scrollToElement } from '@eightyfourthousand/lib-utils';
 import { useNavigation } from '../NavigationProvider';
 import { GlossarySkeleton } from './GlossarySkeleton';
+import { usePaginationLoadTriggers } from '../hooks/usePaginationLoadTriggers';
 
 const LOADING_SKELETONS_COUNT = 3;
 
@@ -41,10 +42,12 @@ const GlossaryPaginationContext = createContext<GlossaryPaginationState>({
 export const GlossaryPaginationProvider = ({
   workUuid,
   initialPage,
+  withAttestations = false,
   children,
 }: {
   workUuid: string;
   initialPage: GlossaryTermsPage;
+  withAttestations?: boolean;
   children: ReactNode;
 }) => {
   const [terms, setTerms] = useState(initialPage.terms);
@@ -62,21 +65,24 @@ export const GlossaryPaginationProvider = ({
   const processedNavCursorRef = useRef<string | undefined>(undefined);
   const isNavigatingRef = useRef(false);
 
-  const loadMoreAtStartRef = useRef<HTMLDivElement>(null);
-  const loadMoreAtEndRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
-  const startCursorRef = useRef(startCursor);
-  const endCursorRef = useRef(endCursor);
-  const startLoadArmedRef = useRef(true);
-  const endLoadArmedRef = useRef(true);
   const handledStartLoadRequestRef = useRef(0);
   const handledEndLoadRequestRef = useRef(0);
-  const [startLoadRequest, setStartLoadRequest] = useState(0);
-  const [endLoadRequest, setEndLoadRequest] = useState(0);
 
   // Stable reference — prevents re-renders from re-triggering load effects
   const dataClient = useMemo(() => createGraphQLClient(), []);
   const { panels, updatePanel } = useNavigation();
+  const {
+    loadMoreAtStartRef: observedLoadMoreAtStartRef,
+    loadMoreAtEndRef,
+    startLoadRequest,
+    endLoadRequest,
+  } = usePaginationLoadTriggers({
+    startCursor,
+    endCursor,
+    startIsLoading,
+    endIsLoading,
+  });
 
   // Only accept hash when right panel is on glossary tab
   const panelHash =
@@ -93,14 +99,6 @@ export const GlossaryPaginationProvider = ({
     }
   }, [panelHash]);
 
-  useEffect(() => {
-    startCursorRef.current = startCursor;
-  }, [startCursor]);
-
-  useEffect(() => {
-    endCursorRef.current = endCursor;
-  }, [endCursor]);
-
   // Hash navigation: navigate to a specific glossary term
   useEffect(() => {
     if (!navCursor || startIsLoading || endIsLoading) return;
@@ -130,6 +128,7 @@ export const GlossaryPaginationProvider = ({
             client: dataClient,
             uuid: workUuid,
             termUuid: navCursor,
+            withAttestations,
           });
 
           if (page.terms.length === 0) return;
@@ -165,45 +164,6 @@ export const GlossaryPaginationProvider = ({
     })();
   }, [navCursor, startIsLoading, endIsLoading, workUuid]);
 
-  // IntersectionObserver for load-more sentinels
-  useEffect(() => {
-    const startEl = loadMoreAtStartRef.current;
-    const endEl = loadMoreAtEndRef.current;
-
-    const observer = new IntersectionObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.target === startEl && !entry.isIntersecting) {
-          startLoadArmedRef.current = true;
-          continue;
-        }
-
-        if (entry.target === endEl && !entry.isIntersecting) {
-          endLoadArmedRef.current = true;
-          continue;
-        }
-
-        if (entry.target === startEl && startCursorRef.current) {
-          if (!startLoadArmedRef.current) {
-            continue;
-          }
-          startLoadArmedRef.current = false;
-          setStartLoadRequest((c) => c + 1);
-        } else if (entry.target === endEl && endCursorRef.current) {
-          if (!endLoadArmedRef.current) {
-            continue;
-          }
-          endLoadArmedRef.current = false;
-          setEndLoadRequest((c) => c + 1);
-        }
-      }
-    });
-
-    if (startEl) observer.observe(startEl);
-    if (endEl) observer.observe(endEl);
-
-    return () => observer.disconnect();
-  }, []);
-
   // Load more at end (forward pagination)
   useEffect(() => {
     if (
@@ -225,6 +185,7 @@ export const GlossaryPaginationProvider = ({
         uuid: workUuid,
         cursor: endCursor,
         direction: 'forward',
+        withAttestations,
       });
 
       if (page.terms.length > 0) {
@@ -298,7 +259,7 @@ export const GlossaryPaginationProvider = ({
         endIsLoading,
       }}
     >
-      <div ref={loadMoreAtStartRef} className="h-0" />
+      <div ref={observedLoadMoreAtStartRef} className="h-0" />
       <div ref={contentRef}>{children}</div>
       <div ref={loadMoreAtEndRef} className="h-0" />
       {(endCursor || (endIsLoading && terms.length === 0)) && (

package/src/lib/components/shared/glossary/GlossaryTermList.tsx

@@ -11,8 +11,10 @@ const LOADING_SKELETONS_COUNT = 3;
 
 export const GlossaryTermList = ({
   className,
+  isEditor = false,
 }: {
   className?: string;
+  isEditor?: boolean;
 }) => {
   const { terms, startCursor, endIsLoading } = useGlossaryPagination();
   const isNavigationLoading = endIsLoading && terms.length === 0;
@@ -21,11 +23,7 @@ export const GlossaryTermList = ({
 
   return (
     <div className={cn('flex flex-col w-full', className)}>
-      <LabeledElement
-        className="@c/sidebar:mt-5 mt-6"
-        id={'glossary'}
-        label="g."
-      >
+      <LabeledElement className="mt-2" id={'glossary'} label="g.">
         <SectionTitle>Glossary</SectionTitle>
       </LabeledElement>
       <div className="mt-3 flex flex-col gap-6">
@@ -48,6 +46,7 @@ export const GlossaryTermList = ({
           >
             <GlossaryInstanceBody
               instance={instance}
+              isEditor={isEditor}
               className="p-0 @c/sidebar:-mt-0.5"
             />
           </LabeledElement>

package/src/lib/components/shared/hooks/usePaginationLoadTriggers.spec.tsx

@@ -0,0 +1,158 @@
+import { act, render, screen } from '@testing-library/react';
+import { usePaginationLoadTriggers } from './usePaginationLoadTriggers';
+
+class MockIntersectionObserver {
+  static instances: MockIntersectionObserver[] = [];
+
+  callback: IntersectionObserverCallback;
+  observedElements = new Set<Element>();
+
+  constructor(callback: IntersectionObserverCallback) {
+    this.callback = callback;
+    MockIntersectionObserver.instances.push(this);
+  }
+
+  observe = (element: Element) => {
+    this.observedElements.add(element);
+  };
+
+  disconnect = () => {
+    this.observedElements.clear();
+  };
+
+  unobserve = (element: Element) => {
+    this.observedElements.delete(element);
+  };
+}
+
+const emitIntersection = ({
+  target,
+  isIntersecting,
+}: {
+  target: Element;
+  isIntersecting: boolean;
+}) => {
+  const observer = MockIntersectionObserver.instances.at(-1);
+
+  if (!observer) {
+    throw new Error('No IntersectionObserver instance was created.');
+  }
+
+  act(() => {
+    observer.callback(
+      [
+        {
+          target,
+          isIntersecting,
+        } as IntersectionObserverEntry,
+      ],
+      observer as unknown as IntersectionObserver,
+    );
+  });
+};
+
+const HookHarness = ({
+  enabled = true,
+  startCursor,
+  endCursor,
+  startIsLoading = false,
+  endIsLoading = false,
+}: {
+  enabled?: boolean;
+  startCursor?: string;
+  endCursor?: string;
+  startIsLoading?: boolean;
+  endIsLoading?: boolean;
+}) => {
+  const {
+    loadMoreAtStartRef,
+    loadMoreAtEndRef,
+    startLoadRequest,
+    endLoadRequest,
+  } = usePaginationLoadTriggers({
+    enabled,
+    startCursor,
+    endCursor,
+    startIsLoading,
+    endIsLoading,
+  });
+
+  return (
+    <div>
+      <div data-testid="start-ref" ref={loadMoreAtStartRef} />
+      <div data-testid="end-ref" ref={loadMoreAtEndRef} />
+      <div data-testid="start-count">{startLoadRequest}</div>
+      <div data-testid="end-count">{endLoadRequest}</div>
+    </div>
+  );
+};
+
+describe('usePaginationLoadTriggers', () => {
+  beforeEach(() => {
+    MockIntersectionObserver.instances = [];
+    global.IntersectionObserver =
+      MockIntersectionObserver as unknown as typeof IntersectionObserver;
+  });
+
+  it('fires at most one end request until the sentinel leaves and re-enters', () => {
+    render(<HookHarness endCursor="end-1" />);
+
+    const endSentinel = screen.getByTestId('end-ref');
+
+    emitIntersection({ target: endSentinel, isIntersecting: true });
+    expect(screen.getByTestId('end-count').textContent).toBe('1');
+
+    emitIntersection({ target: endSentinel, isIntersecting: true });
+    expect(screen.getByTestId('end-count').textContent).toBe('1');
+
+    emitIntersection({ target: endSentinel, isIntersecting: false });
+    emitIntersection({ target: endSentinel, isIntersecting: true });
+    expect(screen.getByTestId('end-count').textContent).toBe('2');
+  });
+
+  it('fires at most one start request until the sentinel leaves and re-enters', () => {
+    render(<HookHarness startCursor="start-1" />);
+
+    const startSentinel = screen.getByTestId('start-ref');
+
+    emitIntersection({ target: startSentinel, isIntersecting: true });
+    expect(screen.getByTestId('start-count').textContent).toBe('1');
+
+    emitIntersection({ target: startSentinel, isIntersecting: true });
+    expect(screen.getByTestId('start-count').textContent).toBe('1');
+
+    emitIntersection({ target: startSentinel, isIntersecting: false });
+    emitIntersection({ target: startSentinel, isIntersecting: true });
+    expect(screen.getByTestId('start-count').textContent).toBe('2');
+  });
+
+  it('does not observe until enabled', () => {
+    const { rerender } = render(<HookHarness enabled={false} endCursor="end-1" />);
+
+    expect(MockIntersectionObserver.instances).toHaveLength(0);
+
+    rerender(<HookHarness enabled endCursor="end-1" />);
+
+    expect(MockIntersectionObserver.instances).toHaveLength(1);
+  });
+
+  it('does not queue another end request from visibility churn during loading', () => {
+    const { rerender } = render(<HookHarness endCursor="end-1" />);
+
+    const endSentinel = screen.getByTestId('end-ref');
+
+    emitIntersection({ target: endSentinel, isIntersecting: true });
+    expect(screen.getByTestId('end-count').textContent).toBe('1');
+
+    rerender(<HookHarness endCursor="end-1" endIsLoading />);
+
+    emitIntersection({ target: endSentinel, isIntersecting: false });
+    emitIntersection({ target: endSentinel, isIntersecting: true });
+    expect(screen.getByTestId('end-count').textContent).toBe('1');
+
+    rerender(<HookHarness endCursor="end-1" />);
+    emitIntersection({ target: endSentinel, isIntersecting: false });
+    emitIntersection({ target: endSentinel, isIntersecting: true });
+    expect(screen.getByTestId('end-count').textContent).toBe('2');
+  });
+});

package/src/lib/components/shared/hooks/usePaginationLoadTriggers.ts

@@ -0,0 +1,129 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+export const usePaginationLoadTriggers = ({
+  enabled = true,
+  startCursor,
+  endCursor,
+  startIsLoading = false,
+  endIsLoading = false,
+}: {
+  enabled?: boolean;
+  startCursor?: string;
+  endCursor?: string;
+  startIsLoading?: boolean;
+  endIsLoading?: boolean;
+}) => {
+  const loadMoreAtStartRef = useRef<HTMLDivElement>(null);
+  const loadMoreAtEndRef = useRef<HTMLDivElement>(null);
+  const startCursorRef = useRef(startCursor);
+  const endCursorRef = useRef(endCursor);
+  const startIsLoadingRef = useRef(startIsLoading);
+  const endIsLoadingRef = useRef(endIsLoading);
+  const startLoadArmedRef = useRef(true);
+  const endLoadArmedRef = useRef(true);
+  const startIsIntersectingRef = useRef(false);
+  const endIsIntersectingRef = useRef(false);
+  const [startLoadRequest, setStartLoadRequest] = useState(0);
+  const [endLoadRequest, setEndLoadRequest] = useState(0);
+
+  useEffect(() => {
+    startCursorRef.current = startCursor;
+  }, [startCursor]);
+
+  useEffect(() => {
+    endCursorRef.current = endCursor;
+  }, [endCursor]);
+
+  useEffect(() => {
+    startIsLoadingRef.current = startIsLoading;
+
+    if (!startIsLoading && !startIsIntersectingRef.current) {
+      startLoadArmedRef.current = true;
+    }
+  }, [startIsLoading]);
+
+  useEffect(() => {
+    endIsLoadingRef.current = endIsLoading;
+
+    if (!endIsLoading && !endIsIntersectingRef.current) {
+      endLoadArmedRef.current = true;
+    }
+  }, [endIsLoading]);
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const startEl = loadMoreAtStartRef.current;
+    const endEl = loadMoreAtEndRef.current;
+
+    const observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target === startEl) {
+          startIsIntersectingRef.current = entry.isIntersecting;
+
+          if (!entry.isIntersecting) {
+            if (!startIsLoadingRef.current) {
+              startLoadArmedRef.current = true;
+            }
+            continue;
+          }
+
+          if (startIsLoadingRef.current || !startCursorRef.current) {
+            continue;
+          }
+
+          if (!startLoadArmedRef.current) {
+            continue;
+          }
+
+          startLoadArmedRef.current = false;
+          setStartLoadRequest((current) => current + 1);
+          continue;
+        }
+
+        if (entry.target === endEl) {
+          endIsIntersectingRef.current = entry.isIntersecting;
+
+          if (!entry.isIntersecting) {
+            if (!endIsLoadingRef.current) {
+              endLoadArmedRef.current = true;
+            }
+            continue;
+          }
+
+          if (endIsLoadingRef.current || !endCursorRef.current) {
+            continue;
+          }
+
+          if (!endLoadArmedRef.current) {
+            continue;
+          }
+
+          endLoadArmedRef.current = false;
+          setEndLoadRequest((current) => current + 1);
+        }
+      }
+    });
+
+    if (startEl) {
+      observer.observe(startEl);
+    }
+
+    if (endEl) {
+      observer.observe(endEl);
+    }
+
+    return () => observer.disconnect();
+  }, [enabled]);
+
+  return {
+    loadMoreAtStartRef,
+    loadMoreAtEndRef,
+    startLoadRequest,
+    endLoadRequest,
+  };
+};