@eightyfourthousand/lib-editing 2026.3.0

package/src/lib/components/reader/ReaderBodyPage.tsx

@@ -0,0 +1,46 @@
+import {
+  BODY_MATTER_FILTER,
+  createBuildGraphQLClient,
+  FRONT_MATTER_FILTER,
+  getTranslationBlocks,
+  getTranslationTitles,
+} from '@eightyfourthousand/client-graphql/ssr';
+import { ReaderBodyPanel } from './ReaderBodyPanel';
+import { isUuid } from '@eightyfourthousand/lib-utils';
+import { notFound } from 'next/navigation';
+
+const INITIAL_PASSAGES = 250;
+
+export const ReaderBodyPage = async ({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) => {
+  const { slug } = await params;
+
+  if (!isUuid(slug)) {
+    return notFound();
+  }
+
+  const client = createBuildGraphQLClient();
+
+  const { blocks: frontMatter } = await getTranslationBlocks({
+    client,
+    uuid: slug,
+    type: FRONT_MATTER_FILTER,
+    maxPassages: INITIAL_PASSAGES,
+  });
+
+  const { blocks: body } = await getTranslationBlocks({
+    client,
+    uuid: slug,
+    type: BODY_MATTER_FILTER,
+    maxPassages: INITIAL_PASSAGES,
+  });
+
+  const titles = await getTranslationTitles({ client, uuid: slug });
+
+  return (
+    <ReaderBodyPanel titles={titles} frontMatter={frontMatter} body={body} />
+  );
+};

package/src/lib/components/reader/ReaderBodyPanel.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useCallback } from 'react';
+import {
+  BODY_MATTER_FILTER,
+  FRONT_MATTER_FILTER,
+  Titles as TitlesData,
+} from '@eightyfourthousand/data-access';
+import { BodyPanel } from '../shared/BodyPanel';
+import { Titles, TitlesVariant } from '../shared/titles';
+import { TitlesRenderer, TranslationRenderer } from '../shared/types';
+import { TranslationEditorContent } from '../editor';
+import { TranslationReader } from './TranslationReader';
+
+const TITLE_VARIANTS_FOR_TABS: { [key: string]: TitlesVariant } = {
+  translation: 'english',
+  source: 'tibetan',
+  front: 'english',
+  compare: 'comparison',
+};
+
+export const ReaderBodyPanel = ({
+  titles,
+  frontMatter,
+  body,
+}: {
+  titles: TitlesData;
+  frontMatter: TranslationEditorContent;
+  body: TranslationEditorContent;
+  cursor?: string;
+}) => {
+  const renderTitles = useCallback(
+    ({ titles, imprint, name }: TitlesRenderer) => (
+      <Titles
+        titles={titles}
+        imprint={imprint}
+        variant={
+          (TITLE_VARIANTS_FOR_TABS[name] || 'english') as TitlesVariant
+        }
+      />
+    ),
+    [],
+  );
+
+  const renderTranslation = useCallback(
+    ({ content, name, className }: TranslationRenderer) => (
+      <TranslationReader
+        content={content}
+        name={name}
+        className={className}
+        filter={name === 'front' ? FRONT_MATTER_FILTER : BODY_MATTER_FILTER}
+        panel="main"
+      />
+    ),
+    [],
+  );
+
+  return (
+    <BodyPanel
+      titles={titles}
+      frontMatter={frontMatter}
+      body={body}
+      renderTitles={renderTitles}
+      renderTranslation={renderTranslation}
+      limitWhenNoTranslation={true}
+    />
+  );
+};

package/src/lib/components/reader/ReaderLayout.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { ReactNode, use } from 'react';
+import { NavigationProvider, ThreeColumnRenderer } from '../shared';
+import {
+  LeftPanel,
+  MainPanel,
+  MainPanelHeader,
+  RightPanel,
+} from '@eightyfourthousand/design-system';
+import { EditorHeader } from '../editor/EditorHeader';
+
+export const ReaderLayout = ({
+  withHeader = false,
+  left,
+  main,
+  right,
+  params,
+}: {
+  withHeader?: boolean;
+  left: ReactNode;
+  main: ReactNode;
+  right: ReactNode;
+  params: Promise<{ slug: string }>;
+}) => {
+  const { slug } = use(params);
+  return (
+    <NavigationProvider uuid={slug}>
+      <ThreeColumnRenderer withHeader={withHeader}>
+        <LeftPanel>{left}</LeftPanel>
+        <MainPanelHeader>
+          <EditorHeader />
+        </MainPanelHeader>
+        <MainPanel>{main}</MainPanel>
+        <RightPanel>{right}</RightPanel>
+      </ThreeColumnRenderer>
+    </NavigationProvider>
+  );
+};

package/src/lib/components/reader/ReaderLeftPanel.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { LeftPanel } from '../shared/LeftPanel';
+import { Toc, Work } from '@eightyfourthousand/data-access';
+
+export const ReaderLeftPanel = ({ toc, work }: { toc?: Toc; work: Work }) => {
+  return <LeftPanel toc={toc} work={work} limitWhenNoTranslation={true} />;
+};

package/src/lib/components/reader/ReaderLeftPanelPage.tsx

@@ -0,0 +1,31 @@
+import {
+  createBuildGraphQLClient,
+  getTranslationMetadataByUuid,
+  getTranslationToc,
+} from '@eightyfourthousand/client-graphql/ssr';
+import { ReaderLeftPanel } from './ReaderLeftPanel';
+import { isUuid } from '@eightyfourthousand/lib-utils';
+import { notFound } from 'next/navigation';
+
+export const ReaderLeftPanelPage = async ({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) => {
+  const { slug } = await params;
+
+  if (!isUuid(slug)) {
+    return notFound();
+  }
+
+  const client = createBuildGraphQLClient();
+  const work = await getTranslationMetadataByUuid({ client, uuid: slug });
+
+  if (!work) {
+    return notFound();
+  }
+
+  const toc = await getTranslationToc({ client, uuid: slug });
+
+  return <ReaderLeftPanel toc={toc} work={work} />;
+};

package/src/lib/components/reader/TranslationReader.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { TranslationEditor } from '../editor';
+import { PaginationProvider } from '../editor/PaginationProvider';
+import { TranslationRenderer, useNavigation } from '../shared';
+
+export const TranslationReader = ({
+  content,
+  className,
+  filter,
+  panel,
+  name,
+}: TranslationRenderer) => {
+  const { uuid } = useNavigation();
+
+  return (
+    <PaginationProvider
+      uuid={uuid}
+      panel={panel}
+      tab={name}
+      filter={filter}
+      content={content}
+      isEditable={false}
+    >
+      <TranslationEditor className={className} />
+    </PaginationProvider>
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from './ReaderLayout';
+export * from './TranslationReader';

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

@@ -0,0 +1,3 @@
+export { ReaderBodyPage } from './ReaderBodyPage';
+export { ReaderLeftPanelPage } from './ReaderLeftPanelPage';
+export { ReaderBackMatterPage } from './ReaderBackMatterPage';

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

@@ -0,0 +1,12 @@
+'use client';
+
+import { notFound } from 'next/navigation';
+
+export const AiSummarizerPage = () => {
+  const src = process.env.NEXT_PUBLIC_AI_SUMMARIZER_URL;
+  if (!src) {
+    return notFound();
+  }
+
+  return <iframe src={src} className="size-full" title="AI Summarizer" />;
+};

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

@@ -0,0 +1,143 @@
+'use client';
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@eightyfourthousand/design-system';
+import { TranslationEditorContent } from '../editor';
+import { TranslationRenderer } from './types';
+import { BibliographyEntries } from '@eightyfourthousand/data-access';
+import type { GlossaryTermsPage } from '@eightyfourthousand/client-graphql';
+import { ReactElement, useRef } from 'react';
+import { useNavigation } from './NavigationProvider';
+import { GlossaryTermList, GlossaryPaginationProvider } from './glossary';
+import { BibliographyList } from './bibliography';
+import { cn, useIsMobile } from '@eightyfourthousand/lib-utils';
+import { useScrollPositionRestore } from './hooks/useScrollPositionRestore';
+
+export const BackMatterPanel = ({
+  workUuid,
+  endnotes,
+  glossary,
+  bibliography,
+  abbreviations,
+  renderTranslation,
+}: {
+  workUuid: string;
+  endnotes: TranslationEditorContent;
+  glossary: GlossaryTermsPage;
+  bibliography: BibliographyEntries;
+  abbreviations: TranslationEditorContent;
+  renderTranslation: (
+    params: TranslationRenderer,
+  ) => ReactElement<TranslationRenderer>;
+}) => {
+  const { panels, updatePanel } = useNavigation();
+  const isMobile = useIsMobile();
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  useScrollPositionRestore(
+    'right',
+    scrollContainerRef,
+    panels.right.tab,
+    !!panels.right.hash,
+  );
+
+  const hasGlossary =
+    glossary.terms.length > 0 || glossary.hasMoreAfter;
+
+  return (
+    <Tabs
+      value={panels.right.tab || 'endnotes'}
+      onValueChange={(tabName) => {
+        const tab = tabName as
+          | 'endnotes'
+          | 'glossary'
+          | 'bibliography'
+          | 'abbreviations';
+        updatePanel({ name: 'right', state: { open: true, tab } });
+      }}
+      defaultValue="endnotes"
+      className="w-full gap-0 @container/sidebar"
+    >
+      <div className="sticky top-0 pt-1 pb-2 z-10 w-full rounded-t bg-background overflow-x-auto text-center">
+        <TabsList
+          className={cn(
+            'w-fit px-6 inline-flex mx-auto rounded-none',
+            isMobile && 'ps-12',
+          )}
+        >
+          {endnotes.length > 0 && (
+            <TabsTrigger value="endnotes">Notes</TabsTrigger>
+          )}
+          {hasGlossary && (
+            <TabsTrigger value="glossary">Glossary</TabsTrigger>
+          )}
+          {bibliography.length > 0 && (
+            <TabsTrigger value="bibliography">Biblio</TabsTrigger>
+          )}
+          {abbreviations.length > 0 && (
+            <TabsTrigger value="abbreviations">Abbr</TabsTrigger>
+          )}
+        </TabsList>
+      </div>
+      <div className="px-2">
+        <div
+          ref={scrollContainerRef}
+          className="overflow-auto md:h-[calc(100vh-8.5rem)] h-[calc(100vh-4rem)] rounded bg-surface"
+          data-panel="right"
+        >
+          <div className="rounded ps-10 pe-4 max-w-readable mx-auto">
+            {endnotes.length > 0 && (
+              <TabsContent
+                value="endnotes"
+                forceMount
+                className="data-[state=inactive]:hidden"
+              >
+                {renderTranslation({
+                  content: endnotes,
+                  className: 'block',
+                  name: 'endnotes',
+                  panel: 'right',
+                })}
+              </TabsContent>
+            )}
+            {hasGlossary && (
+              <TabsContent
+                value="glossary"
+                forceMount
+                className="pb-8 data-[state=inactive]:hidden"
+              >
+                <GlossaryPaginationProvider
+                  workUuid={workUuid}
+                  initialPage={glossary}
+                >
+                  <GlossaryTermList />
+                </GlossaryPaginationProvider>
+              </TabsContent>
+            )}
+            {bibliography.length > 0 && (
+              <TabsContent
+                value="bibliography"
+                forceMount
+                className="pb-8 data-[state=inactive]:hidden"
+              >
+                <BibliographyList content={bibliography} />
+              </TabsContent>
+            )}
+            {abbreviations.length > 0 && (
+              <TabsContent
+                value="abbreviations"
+                forceMount
+                className="data-[state=inactive]:hidden"
+              >
+                {renderTranslation({
+                  content: abbreviations,
+                  className: 'block',
+                  name: 'abbreviations',
+                  panel: 'right',
+                })}
+              </TabsContent>
+            )}
+          </div>
+        </div>
+      </div>
+    </Tabs>
+  );
+};

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

@@ -0,0 +1,214 @@
+'use client';
+
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@eightyfourthousand/design-system';
+import {
+  TranslationEditorContent,
+  TranslationEditorContentItem,
+} from '../editor';
+import { Title } from '@eightyfourthousand/data-access';
+import { TitlesRenderer, TranslationRenderer } from './types';
+import { ReactElement, useCallback, useEffect, useMemo, useRef } from 'react';
+import { cn } from '@eightyfourthousand/lib-utils';
+import { useNavigation } from './NavigationProvider';
+import { SourceReader } from './SourceReader';
+import { Imprint } from './Imprint';
+import { TitleDetails } from './titles';
+import {
+  capturePassageAnchor,
+  findScrollParent,
+  usePassageAnchorRestore,
+  useScrollPositionRestore,
+} from './hooks/useScrollPositionRestore';
+
+export const BodyPanel = ({
+  titles,
+  frontMatter,
+  body,
+  renderTitles,
+  renderTranslation,
+  limitWhenNoTranslation = false,
+}: {
+  titles: Title[];
+  frontMatter: TranslationEditorContent;
+  body: TranslationEditorContent;
+  renderTitles: (params: TitlesRenderer) => ReactElement<TitlesRenderer>;
+  renderTranslation: (
+    params: TranslationRenderer,
+  ) => ReactElement<TranslationRenderer>;
+  limitWhenNoTranslation?: boolean;
+}) => {
+  const {
+    panels,
+    imprint,
+    showOuterContent,
+    updatePanel,
+    setHasTranslationContent,
+  } = useNavigation();
+  const tabsRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLElement | null>(null);
+  const hasTranslationContent = useMemo(() => {
+    if (!limitWhenNoTranslation) {
+      return true;
+    }
+    if (Array.isArray(body)) {
+      return body.length > 0;
+    }
+    return Boolean(body);
+  }, [body, limitWhenNoTranslation]);
+  const activeTab =
+    panels.main.tab || (hasTranslationContent ? 'translation' : 'source');
+  const safeTab =
+    !hasTranslationContent &&
+    (activeTab === 'translation' || activeTab === 'compare')
+      ? 'source'
+      : activeTab;
+
+  const hasAlignments = useMemo(() => {
+    if (!hasTranslationContent) {
+      return false;
+    }
+    const passages = body as TranslationEditorContentItem[];
+    return passages.some(
+      (item) => Object.keys(item.attrs?.alignments || {}).length > 0,
+    );
+  }, [body, hasTranslationContent]);
+
+  useEffect(() => {
+    if (!limitWhenNoTranslation) {
+      return;
+    }
+    setHasTranslationContent(hasTranslationContent);
+  }, [hasTranslationContent, limitWhenNoTranslation, setHasTranslationContent]);
+
+  const tabsRefCallback = useCallback((node: HTMLDivElement | null) => {
+    tabsRef.current = node;
+    // Only track scroll for visible instances (skip the hidden mobile duplicate)
+    scrollContainerRef.current =
+      node && node.offsetParent !== null ? findScrollParent(node) : null;
+  }, []);
+
+  const passageAnchorRef = usePassageAnchorRestore(
+    scrollContainerRef,
+    safeTab,
+  );
+
+  useScrollPositionRestore(
+    'main',
+    scrollContainerRef,
+    safeTab,
+    !!panels.main.hash,
+    passageAnchorRef,
+  );
+
+  const theTitles = useMemo(
+    () => (
+      <div className="mt-16 mb-8">
+        {renderTitles({
+          titles,
+          imprint,
+          name: safeTab,
+        })}
+      </div>
+    ),
+
+    [titles, imprint, renderTitles, safeTab],
+  );
+
+  return (
+    <Tabs
+      ref={tabsRefCallback}
+      value={safeTab}
+      onValueChange={(tabName) => {
+        const tab = tabName as 'translation' | 'source' | 'compare' | 'front';
+        // Capture a passage anchor when leaving translation or compare.
+        // These tabs contain passage elements whose UUID lets us realign
+        // scroll position after the tab switch — immune to the scrollTop
+        // clamping that happens when hidden content changes scroll height.
+        const current = safeTab;
+        const passageTabs = ['translation', 'compare'];
+        if (scrollContainerRef.current && passageTabs.includes(current)) {
+          passageAnchorRef.current = capturePassageAnchor(
+            scrollContainerRef.current,
+          );
+        }
+        updatePanel({ name: 'main', state: { open: true, tab } });
+      }}
+      defaultValue={hasTranslationContent ? 'translation' : 'source'}
+      className="px-12 w-full"
+    >
+      <div className="sticky top-0.75 -mt-28 z-10 w-full overflow-x-auto text-center">
+        <TabsList className="w-fit inline-flex">
+          <TabsTrigger value="front">Front</TabsTrigger>
+          {hasTranslationContent && (
+            <TabsTrigger value="translation">Translation</TabsTrigger>
+          )}
+          {hasTranslationContent && hasAlignments && (
+            <TabsTrigger value="compare">Compare</TabsTrigger>
+          )}
+          <TabsTrigger value="source">Source</TabsTrigger>
+        </TabsList>
+      </div>
+      {showOuterContent ? theTitles : null}
+      <TabsContent
+        value="front"
+        forceMount
+        className={cn(safeTab !== 'front' && 'hidden')}
+      >
+        <div className="w-full max-w-readable mx-auto">
+          {showOuterContent ? (
+            <div className="mb-12">
+              {imprint && <TitleDetails imprint={imprint} />}
+              <Imprint imprint={imprint} />
+            </div>
+          ) : null}
+          {renderTranslation({
+            content: frontMatter,
+            className: 'block',
+            name: 'front',
+            panel: 'main',
+          })}
+        </div>
+      </TabsContent>
+      {/* Single editor instance shared between Translation and Compare tabs.
+         Passage node views reactively show/hide the Tibetan source column
+         based on the active tab from NavigationContext. */}
+      {hasTranslationContent && (
+        <TabsContent
+          value="translation"
+          forceMount
+          className={cn(
+            safeTab !== 'translation' && safeTab !== 'compare' && 'hidden',
+          )}
+        >
+          <div
+            className={cn(
+              'w-full mx-auto',
+              safeTab === 'compare'
+                ? '2xl:max-w-7xl max-w-5xl mt-8'
+                : 'max-w-readable',
+            )}
+          >
+            {renderTranslation({
+              content: body,
+              className: 'block',
+              name: 'translation',
+              panel: 'main',
+            })}
+          </div>
+        </TabsContent>
+      )}
+      <TabsContent
+        value="source"
+        forceMount
+        className="pb-2 data-[state=inactive]:hidden"
+      >
+        <SourceReader />
+      </TabsContent>
+    </Tabs>
+  );
+};