@eightyfourthousand/lib-editing 2026.3.1 → 2026.4.1

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

@@ -1,368 +0,0 @@
-'use client';
-
-import {
-  createGraphQLClient,
-  getBibliographyEntry,
-  getGlossaryInstance,
-  getPassage,
-  getTranslationImprint,
-  getTranslationMetadataByUuid,
-} from '@eightyfourthousand/client-graphql';
-import type {
-  BibliographyEntryItem,
-  GlossaryTermInstance,
-  Imprint,
-  Passage,
-  TohokuCatalogEntry,
-  Work,
-} from '@eightyfourthousand/data-access';
-import {
-  ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { ReadonlyURLSearchParams, useSearchParams } from 'next/navigation';
-import {
-  PANEL_NAMES,
-  PanelName,
-  PanelsState,
-  PanelState,
-  TabName,
-} from './types';
-import { HoverCardProvider } from './HoverCardProvider';
-import { GatedFeature, useFeatureFlagEnabled } from '@eightyfourthousand/lib-instr';
-import { useIsMobile } from '@eightyfourthousand/lib-utils';
-import { RestrictionWarning } from './RestrictionWarning';
-import { NavigationContext, DEFAULT_PANELS } from './NavigationContext';
-
-export { NavigationContext, useNavigation } from './NavigationContext';
-export type { NavigationState } from './NavigationContext';
-
-const parsePanelParams = (
-  params: ReadonlyURLSearchParams,
-): {
-  toh?: TohokuCatalogEntry;
-  panels: PanelsState;
-} => {
-  const panels: PanelsState = { ...DEFAULT_PANELS };
-
-  for (const [key, value] of params.entries()) {
-    const match = value.match(/^(open|closed)(?::(.+))?$/);
-    if (match) {
-      const [state, tab, hash] = value.split(':');
-      const panelKey = key as PanelName;
-      if (!PANEL_NAMES.includes(panelKey)) {
-        continue;
-      }
-      panels[panelKey] = {
-        open: state === 'open',
-        tab: tab as TabName | undefined,
-        hash: hash || undefined,
-      };
-    }
-  }
-
-  const toh = (params.get('toh') as TohokuCatalogEntry) || undefined;
-
-  return { toh, panels };
-};
-
-export const NavigationProvider = ({
-  uuid,
-  children,
-}: {
-  uuid: string;
-  children: ReactNode;
-}) => {
-  const graphqlClient = createGraphQLClient();
-  const query = useSearchParams();
-  const isMobile = useIsMobile();
-  const [panels, setPanels] = useState<PanelsState>(
-    parsePanelParams(query).panels || DEFAULT_PANELS,
-  );
-  const isPanelTransitioning = useRef(false);
-  const [toh, setToh] = useState<TohokuCatalogEntry | undefined>();
-  const [showOuterContent, setShowOuterContent] = useState(true);
-  const [hasTranslationContent, setHasTranslationContent] = useState(true);
-  const [imprint, setImprint] = useState<Imprint | undefined>();
-  const bibliographyCache = useRef<{ [uuid: string]: BibliographyEntryItem }>(
-    {},
-  );
-  const endnoteCache = useRef<{ [uuid: string]: Passage }>({});
-  const glossaryCache = useRef<{ [uuid: string]: GlossaryTermInstance }>({});
-  const passageCache = useRef<{ [uuid: string]: Passage }>({});
-  const workCache = useRef<{ [uuid: string]: Work }>({});
-
-  const fetchBibliographyEntry = useCallback(
-    async (uuid: string): Promise<BibliographyEntryItem | undefined> => {
-      if (!bibliographyCache.current) {
-        bibliographyCache.current = {};
-      }
-
-      if (bibliographyCache.current[uuid]) {
-        return bibliographyCache.current[uuid];
-      }
-
-      const entry = await getBibliographyEntry({
-        client: graphqlClient,
-        uuid,
-      });
-      if (!entry) {
-        return undefined;
-      }
-
-      bibliographyCache.current[uuid] = entry;
-      return entry;
-    },
-    [graphqlClient],
-  );
-
-  const fetchEndNote = useCallback(
-    async (uuid: string): Promise<Passage | undefined> => {
-      if (!endnoteCache.current) {
-        endnoteCache.current = {};
-      }
-
-      if (endnoteCache.current[uuid]) {
-        return endnoteCache.current[uuid];
-      }
-
-      const endnote = await getPassage({ client: graphqlClient, uuid });
-      if (!endnote) {
-        return undefined;
-      }
-
-      endnoteCache.current[uuid] = endnote;
-      return endnote;
-    },
-    [graphqlClient],
-  );
-
-  const fetchGlossaryTerm = useCallback(
-    async (uuid: string) => {
-      if (!glossaryCache.current) {
-        glossaryCache.current = {};
-      }
-
-      if (glossaryCache.current[uuid]) {
-        return glossaryCache.current[uuid];
-      }
-
-      const term = await getGlossaryInstance({ client: graphqlClient, uuid });
-      if (!term) {
-        return undefined;
-      }
-
-      glossaryCache.current[uuid] = term;
-      return term;
-    },
-    [graphqlClient],
-  );
-
-  const fetchPassage = useCallback(
-    async (uuid: string): Promise<Passage | undefined> => {
-      if (!passageCache.current) {
-        passageCache.current = {};
-      }
-
-      if (passageCache.current[uuid]) {
-        return passageCache.current[uuid];
-      }
-
-      const passage = await getPassage({ client: graphqlClient, uuid });
-      if (!passage) {
-        return undefined;
-      }
-
-      passageCache.current[uuid] = passage;
-      return passage;
-    },
-    [graphqlClient],
-  );
-
-  const fetchWork = useCallback(
-    async (uuid: string): Promise<Work | undefined> => {
-      if (!workCache.current) {
-        workCache.current = {};
-      }
-
-      if (workCache.current[uuid]) {
-        return workCache.current[uuid];
-      }
-
-      const work = await getTranslationMetadataByUuid({
-        client: graphqlClient,
-        uuid,
-      });
-      if (!work) {
-        return undefined;
-      }
-
-      workCache.current[uuid] = work;
-      return work;
-    },
-    [graphqlClient],
-  );
-
-  const updatePanel = useCallback(
-    ({ name, state }: { name: PanelName; state: PanelState }) => {
-      const { open } = state;
-      isPanelTransitioning.current = true;
-      setPanels((prev) => {
-        const newPanels = {
-          ...prev,
-          [name]: state,
-        };
-
-        // On mobile, auto-close sidebars when navigating to other panels
-        if (isMobile && open) {
-          // If opening left panel with navigation, close right panel
-          if (name === 'left') {
-            newPanels.right = { ...prev.right, open: false };
-          }
-          // If opening right panel with navigation, close left panel
-          else if (name === 'right') {
-            newPanels.left = { ...prev.left, open: false };
-          }
-          // If opening main panel with navigation, close both sidebars
-          else if (name === 'main') {
-            newPanels.left = { ...prev.left, open: false };
-            newPanels.right = { ...prev.right, open: false };
-          }
-        }
-
-        return newPanels;
-      });
-    },
-    [isMobile, hasTranslationContent],
-  );
-
-  useEffect(() => {
-    if (!toh && !panels) {
-      return;
-    }
-
-    isPanelTransitioning.current = true;
-    const params = new URLSearchParams(window.location.search);
-
-    if (toh) {
-      params.set('toh', toh);
-    }
-
-    if (panels) {
-      Object.entries(panels).forEach(([panelName, panelState]) => {
-        const { open, tab, hash } = panelState;
-        const openness = open ? 'open' : 'closed';
-        params.set(
-          panelName,
-          `${openness}${tab ? `:${tab}` : ''}${hash ? `:${hash}` : ''}`,
-        );
-      });
-    }
-
-    const newUrl = `?${params.toString()}${window.location.hash}`;
-    window.history.replaceState(null, '', newUrl);
-  }, [toh, panels]);
-
-  useEffect(() => {
-    if (!uuid || !toh) {
-      return;
-    }
-
-    (async () => {
-      const imprint = await getTranslationImprint({
-        client: graphqlClient,
-        uuid,
-        toh,
-      });
-      setImprint(imprint);
-    })();
-  }, [uuid, toh, graphqlClient]);
-
-  useEffect(() => {
-    if (isPanelTransitioning.current) {
-      isPanelTransitioning.current = false;
-      return;
-    }
-
-    const { panels: newPanels, toh: newToh } = parsePanelParams(query);
-
-    if (newPanels) {
-      setPanels(newPanels);
-    }
-
-    if (newToh) {
-      setToh(newToh);
-    }
-  }, [query, parsePanelParams]);
-
-  const hasHoverCards = useFeatureFlagEnabled('translation-hover-cards');
-
-  useEffect(() => {
-    if (!hasTranslationContent) {
-      setPanels((prev) => {
-        if (!prev.right.open) {
-          return prev;
-        }
-        return {
-          ...prev,
-          right: { ...prev.right, open: false },
-        };
-      });
-    }
-  }, [hasTranslationContent]);
-
-  const contextValue = useMemo(
-    () => ({
-      uuid,
-      imprint,
-      panels,
-      toh,
-      showOuterContent,
-      hasTranslationContent,
-      setToh,
-      setShowOuterContent,
-      setHasTranslationContent,
-      updatePanel,
-      fetchBibliographyEntry,
-      fetchEndNote,
-      fetchGlossaryTerm,
-      fetchPassage,
-      fetchWork,
-    }),
-    [
-      uuid,
-      imprint,
-      panels,
-      toh,
-      showOuterContent,
-      hasTranslationContent,
-      setToh,
-      setShowOuterContent,
-      setHasTranslationContent,
-      updatePanel,
-      fetchBibliographyEntry,
-      fetchEndNote,
-      fetchGlossaryTerm,
-      fetchPassage,
-      fetchWork,
-    ],
-  );
-
-  return (
-    <NavigationContext.Provider value={contextValue}>
-      {hasHoverCards ? (
-        <HoverCardProvider>{children}</HoverCardProvider>
-      ) : (
-        children
-      )}
-      <GatedFeature flag="show-restriction-warning">
-        <RestrictionWarning imprint={imprint} />
-      </GatedFeature>
-    </NavigationContext.Provider>
-  );
-};
-

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

@@ -1,75 +0,0 @@
-import { ImageResponse } from 'next/og';
-import {
-  createServerGraphQLClient,
-  getTranslationMetadataByUuid,
-} from '@eightyfourthousand/client-graphql/ssr';
-import { MainLogoSvg } from '@eightyfourthousand/design-system/ssr';
-import { isUuid, parseToh } from '@eightyfourthousand/lib-utils';
-import { cache } from 'react';
-
-export const runtime = 'nodejs';
-export const alt = '84000 Translation';
-export const size = { width: 1200, height: 630 };
-export const contentType = 'image/png';
-
-export const OpenGraphImage = async ({
-  params,
-}: {
-  params: Promise<{ slug: string }>;
-}) => {
-  const { slug } = await params;
-
-  // Only fetch work metadata for valid UUIDs
-  let work = null;
-  if (isUuid(slug)) {
-    const client = await createServerGraphQLClient();
-    work = await cache(getTranslationMetadataByUuid)({
-      client,
-      uuid: slug,
-    });
-  }
-
-  const title = work?.title || '84000 Translation';
-  const toh = work?.toh.map(parseToh).join(', ') || '';
-
-  return new ImageResponse(
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '100%',
-        height: '100%',
-        backgroundColor: '#004570',
-        padding: '60px',
-      }}
-    >
-      <MainLogoSvg width={332} height={200} />
-      <div
-        style={{
-          color: 'white',
-          fontSize: 48,
-          fontWeight: 'bold',
-          textAlign: 'center',
-          marginTop: '40px',
-          maxWidth: '1000px',
-        }}
-      >
-        {title}
-      </div>
-      {toh && (
-        <div
-          style={{
-            color: '#F18903',
-            fontSize: 32,
-            marginTop: '20px',
-          }}
-        >
-          {toh}
-        </div>
-      )}
-    </div>,
-    { ...size },
-  );
-};

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

@@ -1,10 +0,0 @@
-import { Skeleton } from '@eightyfourthousand/design-system';
-
-export const PassageSkeleton = () => {
-  return (
-    <div className="flex gap-5 -ms-5 @c/sidebar:-ms-8">
-      <Skeleton className="h-4 w-6" />
-      <Skeleton className="h-32 grow" />
-    </div>
-  );
-};

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

@@ -1,177 +0,0 @@
-'use client';
-
-import { Imprint } from '@eightyfourthousand/data-access';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  Button,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@eightyfourthousand/design-system';
-import { CircleAlertIcon, XIcon } from 'lucide-react';
-import { useEffect, useState } from 'react';
-
-const RESTRICTION_COOKIE_NAME = 'eft-restriction-warning-ignored';
-
-export const getCookie = (name: string): string | undefined => {
-  const cookieValue = document.cookie
-    .split('; ')
-    .find((row) => row.startsWith(`${name}=`))
-    ?.split('=')[1];
-
-  return decodeURIComponent(cookieValue || '');
-};
-
-export const setCookie = (name: string, value: string, days = 365) => {
-  const date = new Date();
-  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
-  const expires = `expires=${date.toUTCString()}`;
-  document.cookie = `${name}=${encodeURIComponent(value)}; ${expires}; path=/`;
-};
-
-export const useRestrictionWarning = ({ imprint }: { imprint?: Imprint }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [shouldIgnore, setShouldIgnore] = useState(true);
-  const [toIgnore, setToIgnore] = useState<string[]>([]);
-
-  useEffect(() => {
-    const toIgnoreStr = getCookie(RESTRICTION_COOKIE_NAME) || '[]';
-    const toIgnore = JSON.parse(toIgnoreStr) || [];
-    setToIgnore(toIgnore);
-  }, []);
-
-  useEffect(() => {
-    if (!imprint?.uuid) {
-      return;
-    }
-
-    setShouldIgnore(toIgnore.includes(imprint.uuid));
-  }, [toIgnore, imprint]);
-
-  useEffect(() => {
-    if (!shouldIgnore && imprint?.restriction) {
-      setIsOpen(true);
-    }
-  }, [shouldIgnore, imprint]);
-
-  const ignore = () => {
-    if (!imprint?.uuid) {
-      return;
-    }
-
-    const newToIgnore = [...toIgnore, imprint.uuid];
-    setToIgnore(newToIgnore);
-    setCookie(RESTRICTION_COOKIE_NAME, JSON.stringify(newToIgnore));
-  };
-
-  return {
-    isOpen,
-    setIsOpen,
-    ignore,
-  };
-};
-
-export const RestrictionWarning = ({ imprint }: { imprint?: Imprint }) => {
-  const { isOpen, setIsOpen, ignore } = useRestrictionWarning({ imprint });
-  return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogContent
-        className="max-w-readable w-full font-serif"
-        showCloseButton={false}
-      >
-        <DialogHeader>
-          <div className="flex justify-between pb-4 text-destructive">
-            <CircleAlertIcon className="my-auto" />
-            <DialogTitle className="my-auto text-2xl">
-              Tantra Text Warning
-            </DialogTitle>
-            <DialogClose className="my-auto">
-              <XIcon />
-            </DialogClose>
-          </div>
-        </DialogHeader>
-        <p>
-          Readers are reminded that according to Vajrayāna Buddhist tradition
-          there are restrictions and commitments concerning tantra.
-        </p>
-        <p>
-          Practitioners who are not sure if they should read translations in
-          this section are advised to consult the authorities of their lineage.
-        </p>
-        <p>
-          The responsibility for reading these texts or sharing them with
-          others—and hence the consequences—lies in the hands of readers.
-        </p>
-        <Accordion type="single" collapsible>
-          <AccordionItem value="more-info">
-            <AccordionTrigger className="text-base">
-              About unrestricted access
-            </AccordionTrigger>
-            <AccordionContent className="space-y-2 leading-6">
-              <p>
-                The decision to publish tantra texts without restricted access
-                has been considered carefully. First of all, it should be noted
-                that all the original Tibetan texts of the Kangyur, including
-                those in this Tantra section, are in the public domain. Some of
-                the texts in this section (but by no means all of them) are
-                nevertheless, according to some traditions, only studied with
-                authorization and after suitable preliminaries.
-              </p>
-              <p>
-                It is true, of course, that a translation makes the content
-                accessible to a far greater number of people; 84000 has
-                therefore consulted many senior Buddhist teachers on this
-                question, and most of them felt that to publish the texts openly
-                is, on balance, the best solution. The alternatives would be not
-                to translate them at all (which would defeat the purposes of the
-                whole project), or to place some sort of restriction on their
-                access. Restricted access has been tried by some Buddhist book
-                publishers, and of course needs a system of administration,
-                judgment, and policing that is either a mere formality, or is
-                very difficult to implement. It would be even harder to
-                implement in the case of electronic texts—and even easier to
-                circumvent. Indeed, nowadays practically the whole range of
-                traditionally restricted Tibetan Buddhist material is already
-                available to anyone who looks for it, and is all too often
-                misrepresented, taken out of context, or its secret and esoteric
-                nature deliberately vaunted.
-              </p>
-              <p>
-                84000’s policy is to present carefully authenticated
-                translations in their proper setting of the whole body of
-                Buddhist sacred literature, and to trust the good sense of the
-                vast majority of readers not to misuse or misunderstand them.
-                Readers are reminded that according to Vajrayāna Buddhist
-                tradition there are restrictions and commitments concerning
-                tantra. Practitioners who are not sure if they should read
-                translations in this section are advised to consult the
-                authorities of their lineage. The responsibility, and hence
-                consequences, of reading these texts and/or sharing them with
-                others who may or may not fulfill the requirements lie in the
-                hands of readers.
-              </p>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-        <DialogFooter>
-          <Button
-            className="font-sans"
-            variant="destructive"
-            onClick={() => {
-              setIsOpen(false);
-              ignore();
-            }}
-          >
-            Don't show again for this text
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -1,83 +0,0 @@
-'use client';
-
-import { useInView } from 'motion/react';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useNavigation } from './NavigationProvider';
-import { createGraphQLClient, getWorkFolios } from '@eightyfourthousand/client-graphql';
-import type { Folio } from '@eightyfourthousand/data-access';
-import { LabeledElement } from './LabeledElement';
-import { PassageSkeleton } from './PassageSkeleton';
-import { LotusPond } from '@eightyfourthousand/design-system';
-
-const PAGE_SIZE = 10;
-
-export const SourceReader = () => {
-  const [page, setPage] = useState(0);
-  const [hasMore, setHasMore] = useState(true);
-  const [folios, setFolios] = useState<Folio[]>([]);
-
-  const { toh, uuid } = useNavigation();
-  const loadMoreRef = useRef<HTMLDivElement>(null);
-  const shouldLoadMore = useInView(loadMoreRef);
-  const graphqlClient = createGraphQLClient();
-
-  const fetchMore = useCallback(async () => {
-    if (!toh || !uuid) return;
-
-    const folios = await getWorkFolios({
-      client: graphqlClient,
-      uuid,
-      toh,
-      page,
-      size: PAGE_SIZE,
-    });
-    if (folios.length) {
-      setPage((prevPage) => prevPage + 1);
-      setFolios((prevFolios) => [...prevFolios, ...folios]);
-      setHasMore(folios.length >= PAGE_SIZE);
-    }
-  }, [toh, uuid, page, graphqlClient]);
-
-  useEffect(() => {
-    if (shouldLoadMore && hasMore) {
-      fetchMore();
-    }
-  }, [shouldLoadMore, hasMore, fetchMore]);
-
-  useEffect(() => {
-    // Reset when uuid or toh changes
-    setFolios([]);
-    setPage(0);
-    setHasMore(true);
-  }, [toh, uuid]);
-
-  return (
-    <div className="pt-12 flex flex-col gap-5 mx-auto max-w-readable 2xl:max-w-380">
-      {folios.map((folio, index) => (
-        <LabeledElement
-          key={index}
-          id={folio.uuid}
-          label={`f.${folio.folio}.${folio.side}\nvol.${folio.volume}`}
-          className="mt-0.5"
-          contentType="source"
-        >
-          <div className="leading-7 font-tibetan text-lg 2xl:whitespace-pre-wrap whitespace-normal">
-            {folio.content}
-          </div>
-        </LabeledElement>
-      ))}
-      <div ref={loadMoreRef} className="h-0" />
-      {hasMore ? (
-        <>
-          {Array.from({ length: 3 }).map((_, i) => (
-            <PassageSkeleton key={i} />
-          ))}
-        </>
-      ) : (
-        <div className="w-full pt-16 pb-6">
-          <LotusPond className="mx-auto w-96" />
-        </div>
-      )}
-    </div>
-  );
-};