@eightyfourthousand/lib-editing 2026.3.0

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

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

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

package/src/lib/components/shared/index.ts

@@ -0,0 +1,11 @@
+export * from './AiSummarizerPage';
+export * from './NavigationProvider';
+export * from './LabeledElement';
+export * from './SuggestRevisionForm';
+export * from './ThreeColumnRenderer';
+export * from './TranslationSkeleton';
+export * from './TranslationTable';
+export * from './bibliography';
+export * from './glossary';
+export * from './titles';
+export * from './types';

package/src/lib/components/shared/ssr.ts

@@ -0,0 +1,2 @@
+export * from './generate-metadata';
+export * from './OpenGraphImage';

package/src/lib/components/shared/titles/FramedCard.tsx

@@ -0,0 +1,132 @@
+import { ReactNode, SVGProps } from 'react';
+import { cn } from '@eightyfourthousand/lib-utils';
+
+export const OrnamentBG = ({ className }: SVGProps<SVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="38"
+      height="20"
+      viewBox="0 0 38 20"
+      fill="none"
+      className={className}
+    >
+      <path d="M0 0C0 11.04 8.512 20 19 20C29.488 20 38 11.04 38 0H0Z" />
+    </svg>
+  );
+};
+
+export const Ornament = ({ className }: SVGProps<SVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="36"
+      height="19"
+      viewBox="0 0 36 19"
+      className={className}
+    >
+      <path d="M21.8 11.28C22.332 11.12 22.864 10.88 23.32 10.56V8H24.84V6.4H23.32V4.8H30.084C28.488 9.2 24.84 12.48 20.28 13.36V1.6H33.884C33.124 10.16 26.284 16.8 18 16.8C9.71602 16.8 2.87602 10.16 2.11602 1.6H15.72V13.36C11.236 12.48 7.51202 9.2 5.91602 4.8H12.68V6.4H11.16V8H12.68V10.64C13.136 10.88 13.668 11.12 14.2 11.36V3.2H3.86402C5.23202 9.76 10.628 14.8 17.24 15.12V0H0.52002C0.52002 10.16 8.34802 18.4 18 18.4C27.652 18.4 35.48 10.16 35.48 0H18.76V15.12C25.372 14.72 30.768 9.76 32.136 3.2H21.8V11.28Z" />
+    </svg>
+  );
+};
+
+export const FramedCard = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) => {
+  const borderColor = `border-navy-50`;
+  const bgColor = `bg-navy-25/40`;
+  const ornamentTint = `fill-navy-50`;
+  const ornamentBgTint = `fill-white/75`;
+
+  const cornerSize = 2;
+  const size = `size-${cornerSize}`;
+  const height = `height-${cornerSize}`;
+  const width = `width-${cornerSize}`;
+  const border = `border border-5 ${borderColor} border-double`;
+
+  return (
+    <div
+      className={cn(
+        'grid grid-cols-[auto_minmax(0,1fr)_auto] gap-0',
+        className,
+      )}
+    >
+      <div className={cn(size, 'relative')}>
+        <div
+          className={cn(
+            border,
+            'absolute top-1.25 start-1.25 z-2 border-t-transparent border-s-transparent',
+          )}
+        />
+      </div>
+      <div
+        className={cn(
+          height,
+          border,
+          bgColor,
+          'relative rounded-t-md border-b-transparent',
+        )}
+      >
+        <div className="absolute -top-1.25 h-0 w-full overflow-visible">
+          <OrnamentBG className={cn('mx-auto', ornamentBgTint)} />
+        </div>
+        <div className="absolute -top-1.25 h-0 w-full overflow-visible">
+          <Ornament className={cn('mx-auto', ornamentTint)} />
+        </div>
+      </div>
+      <div className={cn(size, 'relative')}>
+        <div
+          className={cn(
+            border,
+            'absolute top-1.25 end-0.75 z-2 border-t-transparent border-e-transparent',
+          )}
+        />
+      </div>
+      <div
+        className={cn(
+          width,
+          border,
+          bgColor,
+          'rounded-s-md border-e-transparent border-double',
+        )}
+      />
+      <div className={cn('fit-content', bgColor)}>{children}</div>
+      <div
+        className={cn(
+          width,
+          border,
+          bgColor,
+          'rounded-e-md border-s-transparent',
+        )}
+      />
+      <div className={cn(size, 'relative')}>
+        <div
+          className={cn(
+            border,
+            'absolute bottom-0.75 start-1.25 z-2 border-b-transparent border-s-transparent',
+          )}
+        />
+      </div>
+      <div
+        className={cn(
+          height,
+          border,
+          bgColor,
+          'rounded-b-md border-t-transparent',
+        )}
+      />
+      <div className={cn(size, 'relative')}>
+        <div
+          className={cn(
+            border,
+            'absolute right-0.75 bottom-0.75 z-2 border-b-transparent border-e-transparent',
+          )}
+        />
+      </div>
+    </div>
+  );
+};

package/src/lib/components/shared/titles/LongTitle.tsx

@@ -0,0 +1,20 @@
+import { TranslationLanguage } from '@eightyfourthousand/data-access';
+import { cn } from '@eightyfourthousand/lib-utils';
+
+export const LongTitle = ({
+  title,
+  language,
+}: {
+  title: string;
+  language: TranslationLanguage;
+}) => {
+  const languageStyles: { [key in TranslationLanguage]?: string } = {
+    'Sa-Ltn': 'italic long-term',
+    'Bo-Ltn': 'italic',
+    bo: 'font-tibetan',
+  };
+
+  const textStyle = languageStyles[language] || '';
+
+  return <div className={cn('py-1.5', textStyle)}>{title}</div>;
+};

package/src/lib/components/shared/titles/LongTitles.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { Imprint } from '@eightyfourthousand/data-access';
+import { Skeleton } from '@eightyfourthousand/design-system';
+import { TitleDetails } from './TitleDetails';
+import { TitlesCard } from './TitlesCard';
+
+export const LongTitles = ({ imprint }: { imprint?: Imprint }) => {
+  if (!imprint) {
+    return <Skeleton className="h-48 w-full" />;
+  }
+
+  const { mainTitles } = imprint;
+  const mainEnTitle = mainTitles?.en || '';
+
+  return (
+    <div className="mx-auto flex w-full flex-col gap-1 px-4 pt-8">
+      <TitlesCard
+        header={imprint.section}
+        main={mainEnTitle}
+        footer={imprint.toh}
+        canEdit={false}
+      />
+      <div className="h-8" />
+      <TitleDetails imprint={imprint} />
+    </div>
+  );
+};

package/src/lib/components/shared/titles/Title.tsx

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import { ExtendedTranslationLanguage } from '@eightyfourthousand/data-access';
+import { H2, H3, H4 } from '@eightyfourthousand/design-system';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@eightyfourthousand/lib-utils';
+
+export const TITLE_VARIANT_STYLES = {
+  en: '',
+  bo: 'my-1',
+  ja: 'my-1 italic font-light text-muted-foreground',
+  zh: 'my-1 italic font-light text-muted-foreground',
+  'Bo-Ltn': 'my-1 italic font-light text-muted-foreground',
+  'Mt-Ltn': 'my-1 italic font-light text-muted-foreground',
+  'Pi-Ltn': 'my-1 italic font-light text-muted-foreground',
+  'Sa-Ltn': 'my-1 italic font-light text-muted-foreground',
+  'Zh-Ltn': 'my-1 italic font-light text-muted-foreground',
+};
+
+const titleVariants = cva('', {
+  variants: {
+    language: TITLE_VARIANT_STYLES,
+  },
+  defaultVariants: { language: 'en' },
+});
+
+export const Title = ({
+  children,
+  language,
+  ...props
+}: {
+  children: ReactNode;
+} & VariantProps<typeof titleVariants>) => {
+  const components: {
+    [key in ExtendedTranslationLanguage]: typeof H2 | typeof H4;
+  } = {
+    en: H2,
+    bo: H3,
+    ja: H4,
+    zh: H4,
+    'Bo-Ltn': H2,
+    'Mt-Ltn': H2,
+    'Pi-Ltn': H2,
+    'Sa-Ltn': H2,
+    'Zh-Ltn': H2,
+  };
+
+  const Component = (language && components[language]) || H4;
+
+  return (
+    <Component className={cn(titleVariants({ language }))} {...props}>
+      {children}
+    </Component>
+  );
+};

package/src/lib/components/shared/titles/TitleDetails.tsx

@@ -0,0 +1,47 @@
+import { Imprint } from '@eightyfourthousand/data-access';
+import { LongTitle } from './LongTitle';
+
+const DOT = `·` as const;
+
+export const TitleDetails = ({ imprint }: { imprint: Imprint }) => {
+  const { mainTitles, longTitles, toh } = imprint;
+
+  const longBoTitle = longTitles?.bo || mainTitles?.bo;
+  const longBoLtnTitle = longTitles?.['Bo-Ltn'] || mainTitles?.['Bo-Ltn'];
+  const longEnTitle = longTitles?.en || mainTitles?.en;
+  const longSaLtnTitle = longTitles?.['Sa-Ltn'] || mainTitles?.['Sa-Ltn'];
+
+  const translators =
+    imprint?.tibetanTranslators
+      ?.split(',')
+      ?.map((t) => t.trim())
+      .filter((t) => !!t) || [];
+
+  return (
+    <div className="pb-4 mx-auto max-2-2xl items-center text-center text-xs font-serif text-foreground/75">
+      {longBoTitle && <LongTitle title={longBoTitle} language="bo" />}
+      {longBoLtnTitle && <LongTitle title={longBoLtnTitle} language="Bo-Ltn" />}
+      {longEnTitle && <LongTitle title={longEnTitle} language="en" />}
+      {longSaLtnTitle && <LongTitle title={longSaLtnTitle} language="Sa-Ltn" />}
+      {toh && <div className="pt-8">{`${DOT} ${toh} ${DOT}`}</div>}
+      {imprint.sourceDescription && <div>{imprint.sourceDescription}</div>}
+      {translators.length > 0 && (
+        <>
+          <div className="pb-1 pt-5 text-xs uppercase">
+            Translated into Tibetan by
+          </div>
+
+          <div className="mx-auto flex flex-wrap justify-center gap-x-2">
+            <span>{DOT}</span>
+            {translators.map((translator, idx) => (
+              <div key={`translator-wrapper-${idx}`} className="flex gap-x-2">
+                <span key={`${translator}-${idx}`}>{translator}</span>
+                <span key={`dot-${idx}`}>{DOT}</span>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};

package/src/lib/components/shared/titles/TitleForm.tsx

@@ -0,0 +1,37 @@
+import { LANGUAGES, Title, Titles } from '@eightyfourthousand/data-access';
+import { Input, Label } from '@eightyfourthousand/design-system';
+
+export const TitleForm = ({
+  titles = [],
+  onChange,
+}: {
+  titles?: Titles;
+  onChange: (title: Title) => void;
+}) => {
+  const titlesByLanguage: { [key: string]: Title } = {};
+  titles.forEach((title) => {
+    titlesByLanguage[title.language] = title;
+  });
+
+  return (
+    <div className="flex flex-col gap-4">
+      {LANGUAGES.map((language) => (
+        <div key={language} className="flex flex-col gap-2">
+          <Label className="uppercase">{language}</Label>
+          <Input
+            type="text"
+            placeholder={`Enter ${language} title`}
+            value={titlesByLanguage[language]?.title}
+            onChange={(e) =>
+              onChange({
+                ...titlesByLanguage[language],
+                title: e.target.value,
+                language,
+              })
+            }
+          />
+        </div>
+      ))}
+    </div>
+  );
+};