@eightyfourthousand/lib-editing 2026.4.0 → 2026.4.2

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

@@ -1,158 +0,0 @@
-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

@@ -1,129 +0,0 @@
-'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,
-  };
-};

package/src/lib/components/shared/hooks/useScrollInTab.tsx

@@ -1,43 +0,0 @@
-'use client';
-
-import { useEffect, useRef } from 'react';
-import { PanelName, TabName } from '../types';
-import { useNavigation } from '../NavigationProvider';
-import { scrollToElement } from '@eightyfourthousand/lib-utils';
-
-export const useScrollInTab = ({
-  panel,
-  tab,
-}: {
-  panel: PanelName;
-  tab: TabName;
-}) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const { panels, updatePanel } = useNavigation();
-
-  useEffect(() => {
-    const div = ref.current;
-    if (!div) {
-      return;
-    }
-
-    const { open, hash, tab: currentTab } = panels[panel];
-
-    if (!open || !hash || currentTab !== tab) {
-      return;
-    }
-
-    (async () => {
-      const element = div.querySelector<HTMLElement>(`#${CSS.escape(hash)}`);
-      if (element) {
-        await scrollToElement({ element, behavior: 'smooth' });
-        updatePanel({
-          name: panel,
-          state: { open, tab: currentTab, hash: undefined },
-        });
-      }
-    })();
-  }, [panels, panel, tab, updatePanel]);
-
-  return { ref };
-};

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

@@ -1,274 +0,0 @@
-'use client';
-
-import { RefObject, useEffect, useRef } from 'react';
-
-/**
- * Snapshot of the topmost visible passage element: its UUID and how far
- * its top edge is from the viewport top. Used to realign scroll position
- * after a layout change (e.g. tab switch with different content widths).
- */
-export interface PassageAnchor {
-  uuid: string;
-  offsetFromViewport: number;
-}
-
-/**
- * Finds the nearest scrollable ancestor of an element,
- * skipping hidden containers (zero clientHeight).
- */
-export function findScrollParent(element: HTMLElement): HTMLElement | null {
-  let current = element.parentElement;
-  while (current) {
-    const { overflowY } = getComputedStyle(current);
-    if (
-      (overflowY === 'auto' || overflowY === 'scroll') &&
-      current.clientHeight > 0
-    ) {
-      return current;
-    }
-    current = current.parentElement;
-  }
-  return null;
-}
-
-/**
- * Finds the topmost visible passage element within the scroll container.
- * Passage elements are NodeViewWrappers with `id` attributes (UUIDs).
- */
-export function capturePassageAnchor(
-  scrollContainer: HTMLElement,
-): PassageAnchor | null {
-  const passagesList = scrollContainer.querySelectorAll<HTMLElement>(
-    '[data-node-view-wrapper][id]',
-  );
-  const passages = Array.from(passagesList);
-  const containerTop = scrollContainer.getBoundingClientRect().top;
-
-  for (const el of passages) {
-    const rect = el.getBoundingClientRect();
-    // Find the first passage whose bottom is below the container top
-    // (i.e. at least partially visible)
-    if (rect.bottom > containerTop) {
-      return {
-        uuid: el.id,
-        offsetFromViewport: rect.top - containerTop,
-      };
-    }
-  }
-  return null;
-}
-
-/**
- * After a tab switch, finds the same passage element by UUID and adjusts
- * scrollTop so it appears at the same viewport offset as before.
- */
-export function restorePassageAnchor(
-  scrollContainer: HTMLElement,
-  anchor: PassageAnchor,
-): void {
-  // Use querySelectorAll because Translation and Compare can both contain
-  // passages with the same UUID. querySelector would return the first
-  // (hidden Translation), so we need to find the visible one.
-  const candidatesList = scrollContainer.querySelectorAll<HTMLElement>(
-    `[data-node-view-wrapper]#${CSS.escape(anchor.uuid)}`,
-  );
-  const candidates = Array.from(candidatesList);
-  let el: HTMLElement | null = null;
-  for (const candidate of candidates) {
-    if (candidate.getBoundingClientRect().height > 0) {
-      el = candidate;
-      break;
-    }
-  }
-  if (!el) return;
-
-  const containerTop = scrollContainer.getBoundingClientRect().top;
-  const currentOffset = el.getBoundingClientRect().top - containerTop;
-  const delta = currentOffset - anchor.offsetFromViewport;
-  scrollContainer.scrollTop += delta;
-}
-
-/** Tabs whose content contains passage elements (data-node-view-wrapper). */
-const PASSAGE_TABS = ['translation', 'compare'];
-
-export function usePassageAnchorRestore(
-  scrollContainerRef: RefObject<HTMLElement | null>,
-  activeTab: string | undefined,
-): RefObject<PassageAnchor | null> {
-  const anchorRef = useRef<PassageAnchor | null>(null);
-  const prevTabRef = useRef<string | undefined>(undefined);
-
-  useEffect(() => {
-    if (prevTabRef.current === activeTab) return;
-    prevTabRef.current = activeTab;
-
-    // Only restore when arriving at a passage tab (translation/compare).
-    // When switching to front/source, keep the anchor so it's available
-    // when the user eventually returns to a passage tab.
-    if (!PASSAGE_TABS.includes(activeTab || '')) return;
-
-    const container = scrollContainerRef.current;
-    const anchor = anchorRef.current;
-    if (!container || !anchor) return;
-
-    // Clear inside rAF, not here — useScrollPositionRestore reads the ref
-    // synchronously (in its effect, which runs after this one) to decide
-    // whether to skip its own restore.
-    requestAnimationFrame(() => {
-      anchorRef.current = null;
-      restorePassageAnchor(container, anchor);
-    });
-  }, [activeTab, scrollContainerRef]);
-
-  return anchorRef;
-}
-
-/**
- * Normalizes tab names so that tabs which should share scroll position
- * map to the same key (e.g. 'compare' → 'translation').
- */
-function normalizeTabKey(tab: string): string {
-  if (tab === 'compare') return 'translation';
-  return tab;
-}
-
-/** Max time (ms) to wait for content to populate before giving up on restore. */
-const RESTORE_TIMEOUT = 5000;
-
-/**
- * Module-level storage for scroll positions, keyed by `panelId:tabKey`.
- * Survives component remounts (which happen on tab switches due to the
- * ThreeColumns dual-render architecture).
- */
-const scrollPositions = new Map<string, number>();
-
-/**
- * Watches the scroll container for content changes (via MutationObserver) and
- * restores scrollTop once the container has enough height. Returns a cleanup
- * function that tears down the observer and timeout.
- */
-function waitForContentAndRestore(
-  container: HTMLElement,
-  targetScroll: number,
-): () => void {
-  // Try immediately — content may already be present (non-paginated tabs)
-  container.scrollTop = targetScroll;
-  if (Math.abs(container.scrollTop - targetScroll) < 2) {
-    return () => { /* no-op */ };
-  }
-
-  let settled = false;
-
-  const cleanup = () => {
-    if (settled) return;
-    settled = true;
-    observer.disconnect();
-    clearTimeout(timeout);
-  };
-
-  const tryRestore = () => {
-    if (settled) return;
-    requestAnimationFrame(() => {
-      if (settled) return;
-      container.scrollTop = targetScroll;
-      if (Math.abs(container.scrollTop - targetScroll) < 2) {
-        cleanup();
-      }
-    });
-  };
-
-  const observer = new MutationObserver(tryRestore);
-  observer.observe(container, {
-    childList: true,
-    subtree: true,
-    characterData: true,
-  });
-
-  // Give up after timeout — content may simply be shorter than the saved position
-  const timeout = setTimeout(() => {
-    container.scrollTop = targetScroll;
-    cleanup();
-  }, RESTORE_TIMEOUT);
-
-  return cleanup;
-}
-
-/**
- * Saves scroll position when switching away from a tab and restores it
- * when switching back.
- *
- * Scroll positions are stored in a module-level Map (not a ref) so they
- * survive component remounts — which happen on tab switches because the
- * ThreeColumns layout renders main panel children in both mobile and
- * desktop trees.
- *
- * For tabs with async/paginated content (TipTap editor), uses a MutationObserver
- * to wait for enough content to load before restoring the scroll position.
- *
- * @param panelId - Stable identifier for the panel ('main' or 'right')
- * @param scrollContainerRef - Ref to the scrollable container element
- * @param activeTab - The currently active tab name
- * @param hasHash - When true, skips restore to let hash-based scrolling take over
- */
-export function useScrollPositionRestore(
-  panelId: string,
-  scrollContainerRef: RefObject<HTMLElement | null>,
-  activeTab: string | undefined,
-  hasHash: boolean,
-  passageAnchorRef?: RefObject<PassageAnchor | null>,
-) {
-  const prevTabRef = useRef<string | undefined>(undefined);
-  const cleanupRef = useRef<(() => void) | null>(null);
-
-  useEffect(() => {
-    const currentKey = normalizeTabKey(activeTab || '');
-    const prevKey =
-      prevTabRef.current !== undefined
-        ? normalizeTabKey(prevTabRef.current)
-        : undefined;
-
-    const container = scrollContainerRef.current;
-
-    // Skip hidden containers (mobile layout on desktop viewport)
-    if (container && container.clientHeight === 0) {
-      prevTabRef.current = activeTab;
-      return;
-    }
-
-    // Cancel any in-progress restore from a previous tab switch
-    cleanupRef.current?.();
-    cleanupRef.current = null;
-
-    // Save outgoing tab's scroll position
-    if (prevKey !== undefined && prevKey !== currentKey && container) {
-      scrollPositions.set(`${panelId}:${prevKey}`, container.scrollTop);
-    }
-
-    // Restore incoming tab's scroll position.
-    // Skip when a passage anchor is pending AND we're arriving at a passage
-    // tab — the passage anchor restore is more accurate (immune to scrollTop
-    // clamping from hidden content) and will handle positioning instead.
-    const passageAnchorWillRestore =
-      !!passageAnchorRef?.current &&
-      PASSAGE_TABS.includes(activeTab || '');
-    if (prevKey !== currentKey && !hasHash && !passageAnchorWillRestore && container) {
-      const saved = scrollPositions.get(`${panelId}:${currentKey}`) ?? 0;
-      if (saved === 0) {
-        requestAnimationFrame(() => {
-          container.scrollTop = 0;
-        });
-      } else {
-        cleanupRef.current = waitForContentAndRestore(container, saved);
-      }
-    }
-
-    prevTabRef.current = activeTab;
-  }, [panelId, activeTab, hasHash, scrollContainerRef]);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      cleanupRef.current?.();
-    };
-  }, []);
-}

package/src/lib/components/shared/hooks/useTohToggle.tsx

@@ -1,52 +0,0 @@
-'use client';
-
-import { TohokuCatalogEntry, Work } from '@eightyfourthousand/data-access';
-import { useEffect } from 'react';
-
-export const useTohToggle = ({
-  toh,
-  work,
-}: {
-  toh?: TohokuCatalogEntry;
-  work: Work;
-}) => {
-  useEffect(() => {
-    (async () => {
-      const sheets = Array.from(document.styleSheets);
-      let sheet: CSSStyleSheet | null | undefined = [...sheets].find((s) => {
-        const node = s.ownerNode as HTMLElement | null;
-        return node?.id === 'dynamic-visibility-rules';
-      });
-
-      if (!sheet) {
-        const styleEl = document.createElement('style');
-        styleEl.id = 'dynamic-visibility-rules';
-        document.head.appendChild(styleEl);
-        sheet = styleEl.sheet;
-      }
-
-      if (!sheet) {
-        console.warn(
-          'Could not find or create stylesheet for dynamic class toggling.',
-        );
-        return;
-      }
-
-      // Clear existing rules
-      while (sheet.cssRules.length > 0) {
-        sheet.deleteRule(0);
-      }
-
-      // Add new rules
-      const tohs = work.toh;
-      tohs
-        .filter((cls) => cls !== toh)
-        .forEach((cls) => {
-          sheet.insertRule(
-            `.${cls} { display: none !important; }`,
-            sheet.cssRules.length,
-          );
-        });
-    })();
-  }, [toh, work.toh]);
-};