@eightyfourthousand/lib-editing 2026.4.0 → 2026.4.1

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/SearchReplacePanel.tsx

@@ -1,259 +0,0 @@
-'use client';
-
-import {
-  createGraphQLClient,
-  replace,
-  type ReplacedPassage,
-} from '@eightyfourthousand/client-graphql';
-import {
-  Button,
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-  Input,
-} from '@eightyfourthousand/design-system';
-import type { SearchActionContext } from '@eightyfourthousand/lib-search';
-import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';
-import { useEffect, useMemo, useState } from 'react';
-
-const REPLACE_CHUNK_SIZE = 200;
-
-export interface SearchReplacePanelProps {
-  canReplace: boolean;
-  onPassagesReplaced?: (passages: ReplacedPassage[]) => Promise<void> | void;
-  replaceDisabledReason?: string;
-  searchContext: SearchActionContext;
-}
-
-export const SearchReplacePanel = ({
-  canReplace,
-  onPassagesReplaced,
-  replaceDisabledReason,
-  searchContext,
-}: SearchReplacePanelProps) => {
-  const client = useMemo(() => createGraphQLClient(), []);
-  const [replaceOpen, setReplaceOpen] = useState(false);
-  const [replaceQuery, setReplaceQuery] = useState('');
-  const [replacing, setReplacing] = useState(false);
-
-  const canRunReplace =
-    canReplace &&
-    !replaceDisabledReason &&
-    !!searchContext.searchQuery &&
-    !!replaceQuery &&
-    searchContext.passageOccurrences.length > 0 &&
-    !replacing;
-  const canStepBackward =
-    replaceOpen && searchContext.activeOccurrenceIndex > 0;
-  const canStepForward =
-    replaceOpen &&
-    searchContext.activeOccurrenceIndex <
-      searchContext.passageOccurrences.length - 1;
-
-  useEffect(() => {
-    searchContext.setShouldScrollActiveOccurrence(replaceOpen);
-
-    return () => {
-      searchContext.setShouldScrollActiveOccurrence(false);
-    };
-  }, [replaceOpen, searchContext]);
-
-  useEffect(() => {
-    if (!replaceOpen || searchContext.passageOccurrences.length === 0) {
-      return;
-    }
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'ArrowUp') {
-        event.preventDefault();
-        searchContext.moveActiveOccurrence('previous');
-      }
-
-      if (event.key === 'ArrowDown') {
-        event.preventDefault();
-        searchContext.moveActiveOccurrence('next');
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [replaceOpen, searchContext]);
-
-  if (!canReplace || !searchContext.searchQuery) {
-    return null;
-  }
-
-  const runReplace = async ({ replaceAll }: { replaceAll: boolean }) => {
-    if (!canRunReplace) {
-      return;
-    }
-
-    setReplacing(true);
-
-    try {
-      if (replaceAll) {
-        const targetUuids = searchContext.passages.map((passage) => passage.uuid);
-        if (targetUuids.length === 0) {
-          return;
-        }
-
-        const allReplacedPassages: ReplacedPassage[] = [];
-        for (let i = 0; i < targetUuids.length; i += REPLACE_CHUNK_SIZE) {
-          const chunk = targetUuids.slice(i, i + REPLACE_CHUNK_SIZE);
-          const response = await replace({
-            client,
-            searchText: searchContext.searchQuery,
-            replaceText: replaceQuery,
-            targetUuids: chunk,
-          });
-
-          if (!response.success) {
-            console.error(`Replace failed: ${response.error ?? 'unknown error'}`);
-            return;
-          }
-
-          allReplacedPassages.push(...response.passages);
-        }
-
-        await onPassagesReplaced?.(allReplacedPassages);
-        await searchContext.refreshSearch({ nextSelection: { kind: 'index', index: 0 } });
-        return;
-      }
-
-      // Single replace: target only the active passage and use its exact position as the cursor.
-      const activeOccurrence = searchContext.activeOccurrence;
-      if (!activeOccurrence) {
-        return;
-      }
-
-      const response = await replace({
-        client,
-        searchText: searchContext.searchQuery,
-        replaceText: replaceQuery,
-        targetUuids: [activeOccurrence.passageUuid],
-        cursorPassageUuid: activeOccurrence.passageUuid,
-        cursorStart: activeOccurrence.start,
-      });
-
-      if (!response.success) {
-        console.error(`Replace failed: ${response.error ?? 'unknown error'}`);
-        return;
-      }
-
-      await onPassagesReplaced?.(response.passages);
-
-      const nextSelection =
-        response.nextPassageUuid != null && response.nextOccurrenceStart != null
-          ? {
-              kind: 'cursor' as const,
-              passageUuid: response.nextPassageUuid,
-              start: response.nextOccurrenceStart,
-            }
-          : {
-              kind: 'index' as const,
-              index: Math.min(
-                searchContext.activeOccurrenceIndex + 1,
-                Math.max(searchContext.passageOccurrences.length - 1, 0),
-              ),
-            };
-
-      await searchContext.refreshSearch({ nextSelection });
-    } catch (error) {
-      console.error('Replace failed:', error);
-    } finally {
-      setReplacing(false);
-    }
-  };
-
-  return (
-    <Collapsible
-      open={replaceOpen}
-      onOpenChange={setReplaceOpen}
-      className="bg-background border rounded-lg px-4 py-3 text-foreground"
-    >
-      <CollapsibleTrigger asChild>
-        <button
-          type="button"
-          className="group/collapsible flex w-full items-center justify-start gap-2 text-left text-sm font-medium cursor-pointer"
-        >
-          <ChevronRightIcon className="size-4 transition-transform group-data-[state=open]/collapsible:rotate-90" />
-          <span>Replace</span>
-        </button>
-      </CollapsibleTrigger>
-      <CollapsibleContent className="pt-3">
-        <div className="flex flex-col">
-          <Input
-            id="replace-query"
-            placeholder="Replace with..."
-            value={replaceQuery}
-            onChange={(e) => {
-              const nextValue = e.target.value;
-              if (nextValue === replaceQuery) {
-                return;
-              }
-              setReplaceQuery(nextValue);
-              if (nextValue) {
-                searchContext.scrollActiveOccurrenceIntoView();
-              }
-            }}
-          />
-          <div className="flex flex-wrap items-center gap-2 text-sm text-secondary-foreground">
-            <span>
-              {searchContext.passageOccurrences.length > 0 &&
-              searchContext.activePassageUuid
-                ? `Occurrence ${searchContext.activeOccurrenceIndex + 1} of ${searchContext.passageOccurrences.length} in ${searchContext.activePassageLabel || searchContext.activePassageUuid}`
-                : 'No exact passage occurrences available for replacement.'}
-            </span>
-            {replaceDisabledReason && <span>{replaceDisabledReason}</span>}
-          </div>
-          <div className="text-sm text-muted-foreground pb-4">
-            Replace is case sensitive and is only applied to passages.
-          </div>
-          <div className="flex flex-wrap items-center gap-2">
-            <Button
-              size="sm"
-              disabled={!canRunReplace}
-              onClick={() => void runReplace({ replaceAll: false })}
-            >
-              {replacing ? 'Replacing…' : 'Replace'}
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              disabled={!canRunReplace}
-              onClick={() => void runReplace({ replaceAll: true })}
-            >
-              Replace all
-            </Button>
-            <div className="ml-auto flex items-center gap-2">
-              <Button
-                size="icon"
-                variant="ghost"
-                className="size-8"
-                disabled={!canStepBackward}
-                onClick={() => {
-                  searchContext.moveActiveOccurrence('previous');
-                }}
-              >
-                <ChevronRightIcon className="size-4 rotate-[-90deg]" />
-                <span className="sr-only">Previous occurrence</span>
-              </Button>
-              <Button
-                size="icon"
-                variant="ghost"
-                className="size-8"
-                disabled={!canStepForward}
-                onClick={() => {
-                  searchContext.moveActiveOccurrence('next');
-                }}
-              >
-                <ChevronDownIcon className="size-4" />
-                <span className="sr-only">Next occurrence</span>
-              </Button>
-            </div>
-          </div>
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-};

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

@@ -1,92 +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"
-        >
-          {folio.content ? (
-            <div className="leading-7 min-h-8 font-tibetan text-lg 2xl:whitespace-pre-wrap whitespace-normal">
-              {folio.content}
-            </div>
-          ) : (
-            <div className="h-12 text-center text-muted-foreground">
-              [blank]
-            </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>
-  );
-};

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

@@ -1,99 +0,0 @@
-'use client';
-
-import { Button } from '@eightyfourthousand/design-system';
-import { parseToh } from '@eightyfourthousand/lib-utils';
-import { FormEvent, useState } from 'react';
-
-export const SuggestRevisionForm = ({
-  toh,
-  type,
-  label,
-  onClose,
-}: {
-  toh: string;
-  type: string;
-  label: string;
-  onClose: () => void;
-}) => {
-  const [body, setBody] = useState('');
-  const [status, setStatus] = useState<
-    'idle' | 'loading' | 'success' | 'error'
-  >('idle');
-  const [errorMessage, setErrorMessage] = useState('');
-
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-
-    if (!body.trim()) {
-      setStatus('error');
-      setErrorMessage('Please enter a message.');
-      return;
-    }
-
-    setStatus('loading');
-    setErrorMessage('');
-
-    try {
-      const res = await fetch('/api/feedback', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ toh, type, label, body: body.trim() }),
-      });
-
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}));
-        throw new Error(data.error || 'Failed to send feedback');
-      }
-
-      setStatus('success');
-      setTimeout(() => onClose(), 1500);
-    } catch (err) {
-      setStatus('error');
-      setErrorMessage(
-        err instanceof Error ? err.message : 'Failed to send feedback',
-      );
-    }
-  };
-
-  return (
-    <div className="p-1">
-      <p className="text-sm font-semibold">Suggest a Revision</p>
-      <p className="text-primary text-xs capitalize py-2">
-        {parseToh(toh)} &middot; {type} {label}
-      </p>
-      <form onSubmit={handleSubmit}>
-        <textarea
-          className="border-input bg-background placeholder:text-muted-foreground w-full rounded-md border px-3 py-2 text-sm shadow-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring min-h-24 resize-y"
-          placeholder="Describe the revision you'd like to suggest..."
-          value={body}
-          onChange={(e) => {
-            setBody(e.target.value);
-            if (status === 'error') setStatus('idle');
-          }}
-        />
-        {status === 'error' && (
-          <p className="text-destructive text-sm mt-1">{errorMessage}</p>
-        )}
-        {status === 'success' && (
-          <p className="text-green-600 text-sm mt-1">
-            Feedback sent. Thank you!
-          </p>
-        )}
-        <div className="flex justify-end gap-2 mt-2">
-          <Button variant="outline" size="sm" type="button" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button
-            variant="default"
-            size="sm"
-            type="submit"
-            className="px-3"
-            disabled={status === 'loading' || status === 'success'}
-          >
-            {status === 'loading' ? 'Sending...' : 'Submit'}
-          </Button>
-        </div>
-      </form>
-    </div>
-  );
-};