@eightyfourthousand/lib-editing 2026.4.0 → 2026.4.1

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

@@ -1,293 +0,0 @@
-'use client';
-
-import { Toc, TocEntry, TohokuCatalogEntry, Work } from '@eightyfourthousand/data-access';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Separator,
-} from '@eightyfourthousand/design-system';
-import { cn, parseToh } from '@eightyfourthousand/lib-utils';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useNavigation } from './NavigationProvider';
-import {
-  PanelName,
-  TAB_FOR_SECTION,
-  PANEL_FOR_SECTION,
-} from './types';
-import { BookOpenIcon, HashIcon, LibraryBigIcon } from 'lucide-react';
-
-export const TableOfContentsSection = ({
-  node,
-  className,
-  depth = 0,
-  panel,
-}: {
-  node: TocEntry;
-  className?: string;
-  depth?: number;
-  panel?: PanelName;
-}) => {
-  const { updatePanel } = useNavigation();
-
-  const baseStyle =
-    'w-full py-0.75 font-light leading-5 text-sm hover:text-foreground/40 hover:no-underline hover:cursor-pointer';
-
-  const onClick = useCallback(
-    (entry: TocEntry) => {
-      const { section } = entry;
-      updatePanel({
-        name: PANEL_FOR_SECTION[section] || panel,
-        state: {
-          open: true,
-          tab: TAB_FOR_SECTION[section] || 'translation',
-          hash: entry.uuid,
-        },
-      });
-    },
-    [updatePanel, panel],
-  );
-
-  if (!node.children?.length) {
-    return null;
-  }
-
-  return (
-    <Accordion type="multiple" className={cn(depth && 'pl-5')}>
-      {node.children.map((child, index) => {
-        // 'The Translation' is always bold
-        const maybeBold =
-          child.content === 'The Translation' ? 'font-bold' : '';
-        // Show dividers above and below the top-level introduction section
-        const isIntroduction =
-          depth === 0 && child.section === 'introduction';
-        const prevChild = node.children[index - 1];
-        const prevWasIntroduction =
-          depth === 0 && prevChild?.section === 'introduction';
-        const showDividerBefore =
-          isIntroduction && !prevWasIntroduction;
-        return child.children?.length ? (
-          <React.Fragment key={child.uuid}>
-            {showDividerBefore && <Separator className="my-4" />}
-            <AccordionItem
-              value={child.uuid}
-              className="border-b-0"
-            >
-              <AccordionTrigger className={cn(baseStyle, className)}>
-                <span
-                  className={cn('line-clamp-2', maybeBold)}
-                  onClick={() => onClick(child)}
-                >
-                  {child.content}
-                </span>
-              </AccordionTrigger>
-              <AccordionContent className="border-l border-dotted py-0">
-                <TableOfContentsSection node={child} depth={depth + 1} />
-              </AccordionContent>
-            </AccordionItem>
-          </React.Fragment>
-        ) : (
-          <React.Fragment key={child.uuid}>
-            {showDividerBefore && <Separator className="my-4" />}
-            <div className={baseStyle}>
-              <span
-                className={cn('line-clamp-2', maybeBold)}
-                onClick={() => onClick(child)}
-              >
-                {child.content}
-              </span>
-            </div>
-          </React.Fragment>
-        );
-      })}
-    </Accordion>
-  );
-};
-
-export const TableOfContents = ({
-  toc,
-  work,
-  limitWhenNoTranslation = false,
-}: {
-  toc?: Toc;
-  work: Work;
-  limitWhenNoTranslation?: boolean;
-}) => {
-  const {
-    toh,
-    imprint,
-    setToh,
-    hasTranslationContent,
-    setHasTranslationContent,
-  } = useNavigation();
-  const [localToh, setLocalToh] = useState<TohokuCatalogEntry>(
-    work.toh[0] || '',
-  );
-
-  const title = imprint?.mainTitles?.en || work.title;
-
-  useEffect(() => {
-    const currentToh = toh || work.toh[0] || '';
-    setLocalToh(currentToh);
-  }, [toh, work.toh, setToh]);
-
-  const baseStyle = 'w-full py-2 leading-6 text-sm font-light text-foreground';
-  const inferredHasTranslationContent = useMemo(() => {
-    if (!toc) {
-      return hasTranslationContent;
-    }
-    return (toc.body?.length || 0) > 0;
-  }, [toc, hasTranslationContent]);
-  const allowTranslationSections = limitWhenNoTranslation
-    ? inferredHasTranslationContent
-    : true;
-  const imprintEntry: TocEntry = {
-    uuid: 'imprint',
-    content: 'Imprint',
-    sort: 0,
-    level: 0,
-    section: 'imprint',
-    children: [],
-  };
-  const frontMatterChildren = allowTranslationSections
-    ? [imprintEntry, ...(toc?.frontMatter || [])]
-    : [imprintEntry];
-  const frontMatter: TocEntry = {
-    uuid: 'front-matter',
-    content: 'Front Matter',
-    sort: 0,
-    level: 0,
-    section: 'front',
-    children: frontMatterChildren,
-  };
-  const body: TocEntry = {
-    uuid: 'root',
-    content: 'Body',
-    sort: 0,
-    level: 0,
-    section: 'translation',
-    children: toc?.body || [],
-  };
-
-  const endnotes = toc?.backMatter?.find(
-    (entry) => entry.section === 'endnotes',
-  );
-  const abbreviations = toc?.backMatter?.find(
-    (entry) => entry.section === 'abbreviations',
-  );
-  const otherBackMatter = toc?.backMatter?.filter(
-    (entry) =>
-      entry.section !== 'endnotes' && entry.section !== 'abbreviations',
-  );
-  const backMatter: TocEntry = {
-    uuid: 'back-matter',
-    content: 'Back Matter',
-    sort: 0,
-    level: 0,
-    section: 'back',
-    children: [
-      ...(endnotes ? [endnotes] : []),
-      ...(otherBackMatter || []),
-      {
-        uuid: 'glossary',
-        content: 'Glossary',
-        sort: 0,
-        level: 0,
-        section: 'glossary',
-        children: [],
-      },
-      {
-        uuid: 'bibliography',
-        content: 'Bibliography',
-        sort: 0,
-        level: 0,
-        section: 'bibliography',
-        children: [],
-      },
-      ...(abbreviations ? [abbreviations] : []),
-    ],
-  };
-
-  useEffect(() => {
-    if (!toc || !limitWhenNoTranslation) {
-      return;
-    }
-    setHasTranslationContent(inferredHasTranslationContent);
-  }, [
-    toc,
-    inferredHasTranslationContent,
-    limitWhenNoTranslation,
-    setHasTranslationContent,
-  ]);
-
-  return (
-    <div>
-      <div className={cn(baseStyle, 'flex gap-2 mt-6')}>
-        <div className="size-5 text-primary [&_svg]:stroke-1 [&_svg]:size-5 my-auto">
-          <LibraryBigIcon />
-        </div>
-        <span className="my-auto font-light">
-          {imprint?.section || work.section}
-        </span>
-      </div>
-      <div className={cn(baseStyle, 'flex gap-2')}>
-        <div className="size-5 text-primary [&_svg]:stroke-1 [&_svg]:size-5 my-auto">
-          <BookOpenIcon />
-        </div>
-        <span className="my-auto font-bold">{title}</span>
-      </div>
-      <div className="flex gap-2">
-        <div className="size-5 text-primary [&_svg]:stroke-1 [&_svg]:size-5 my-auto">
-          <HashIcon />
-        </div>
-        {work.toh.length > 1 ? (
-          <Select
-            value={localToh}
-            onValueChange={(value) => {
-              setToh(value as TohokuCatalogEntry);
-            }}
-          >
-            <SelectTrigger
-              className={cn(
-                baseStyle,
-                'p-0 font-light bg-transparent border-none',
-              )}
-            >
-              <SelectValue placeholder="Select TOH" />
-            </SelectTrigger>
-            <SelectContent>
-              {work.toh.map((tohEntry) => {
-                const parsedToh = parseToh(tohEntry);
-                return (
-                  <SelectItem key={tohEntry} value={tohEntry}>
-                    {parsedToh}
-                  </SelectItem>
-                );
-              })}
-            </SelectContent>
-          </Select>
-        ) : (
-          <div className={cn(baseStyle, 'font-light')}>
-            {parseToh(localToh || '')}
-          </div>
-        )}
-      </div>
-      <Separator className="my-4" />
-      <TableOfContentsSection node={frontMatter} panel="left" />
-      {allowTranslationSections && (
-        <>
-          <Separator className="my-4" />
-          <TableOfContentsSection node={body} panel="main" />
-          <Separator className="my-4" />
-          <TableOfContentsSection node={backMatter} panel="right" />
-        </>
-      )}
-    </div>
-  );
-};

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

@@ -1,61 +0,0 @@
-'use client';
-
-import { ThreeColumns } from '@eightyfourthousand/design-system';
-import { ReactNode, useMemo } from 'react';
-import { useNavigation } from './NavigationProvider';
-import { cn } from '@eightyfourthousand/lib-utils';
-import { TranslationHeader } from './TranslationHeader';
-import { ReaderSearchButton } from './ReaderSearchButton';
-import { GatedFeature } from '@eightyfourthousand/lib-instr';
-
-export const ThreeColumnRenderer = ({
-  withHeader = false,
-  children,
-}: {
-  withHeader?: boolean;
-  children: ReactNode;
-}) => {
-  const { panels, updatePanel, hasTranslationContent } = useNavigation();
-  const rightPanelEnabled = hasTranslationContent;
-
-  const searchButton = useMemo(() => <ReaderSearchButton />, []);
-
-  return (
-    <div
-      className={cn(
-        'fixed flex flex-col size-full p-2 bg-canvas',
-        withHeader ? 'pb-20' : '',
-      )}
-    >
-      <GatedFeature flag='show-reader-header'>
-        <div className="pb-2.5">
-          <TranslationHeader className="rounded-full shadow-lg" />
-        </div>
-      </GatedFeature>
-      <ThreeColumns
-        leftPanelOpen={panels.left.open}
-        rightPanelOpen={rightPanelEnabled ? panels.right.open : false}
-        rightPanelEnabled={rightPanelEnabled}
-        mainPanelActions={searchButton}
-        onLeftPanelOpenChange={(open) => {
-          updatePanel({
-            name: 'left',
-            state: { open, tab: panels.left.tab },
-          });
-        }}
-        onRightPanelOpenChange={
-          rightPanelEnabled
-            ? (open) => {
-              updatePanel({
-                name: 'right',
-                state: { open, tab: panels.right.tab },
-              });
-            }
-            : undefined
-        }
-      >
-        {children}
-      </ThreeColumns>
-    </div>
-  );
-};

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

@@ -1,25 +0,0 @@
-'use client';
-
-import { MiniLogo } from '@eightyfourthousand/design-system';
-import { useNavigation } from './NavigationProvider';
-import { cn } from '@eightyfourthousand/lib-utils';
-
-export const TranslationHeader = ({ className }: { className?: string }) => {
-  const { imprint } = useNavigation();
-
-  return (
-    <div
-      className={cn(
-        'h-11 w-full px-0 lg:px-3 flex justify-between text-lg bg-background',
-        className,
-      )}
-    >
-      <div className="flex gap-2 md:gap-5 min-w-0">
-        <MiniLogo className="ms-3 me-1 my-auto" width={32} height={32} />
-        <span className="font-serif truncate text-darkgray text-xs sm:text-sm my-auto flex-shrink">
-          {`${imprint?.mainTitles?.en ? `${imprint?.mainTitles?.en}` : ''}${imprint?.section ? ` from ${imprint?.section}` : ''}`}
-        </span>
-      </div>
-    </div>
-  );
-};

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

@@ -1,84 +0,0 @@
-import {
-  autoUpdate,
-  flip,
-  inline,
-  offset,
-  shift,
-  useFloating,
-} from '@floating-ui/react';
-import { ReactNode, useEffect, useRef, useState } from 'react';
-import { cn } from '@eightyfourthousand/lib-utils';
-import { DEFAULT_HOVER_CARD_SIDE_OFFSET } from '@eightyfourthousand/design-system';
-
-export const TranslationHoverCard = ({
-  anchor,
-  className = '',
-  children,
-  setCard,
-}: {
-  anchor: HTMLElement;
-  className?: string;
-  children: ReactNode;
-  setCard: (card: HTMLElement | null) => void;
-}) => {
-  const [isVisible, setIsVisible] = useState(false);
-
-  const { refs, floatingStyles } = useFloating({
-    placement: 'bottom-start',
-    middleware: [
-      inline(),
-      offset(DEFAULT_HOVER_CARD_SIDE_OFFSET),
-      flip(),
-      shift(),
-    ],
-    whileElementsMounted: autoUpdate,
-  });
-
-  const innerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    refs.setReference(anchor);
-  }, [anchor, refs]);
-
-  useEffect(() => {
-    setCard(innerRef.current);
-
-    return () => {
-      setCard(null);
-    };
-  }, [innerRef, setCard]);
-
-  useEffect(() => {
-    if (!refs.floating.current) {
-      return;
-    }
-
-    requestAnimationFrame(() => {
-      setIsVisible(true);
-    });
-
-    return () => {
-      setIsVisible(false);
-    };
-  }, [refs]);
-
-  return (
-    <div
-      ref={refs.setFloating}
-      style={{ ...floatingStyles, pointerEvents: 'auto', cursor: 'default' }}
-      className="z-100"
-    >
-      <div
-        ref={innerRef}
-        className={cn(
-          'bg-popover text-popover-foreground rounded-md border p-4 shadow-md outline-hidden hover:cursor-default',
-          'transition-[opacity,scale] duration-150 origin-center ease-out',
-          isVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-99',
-          className,
-        )}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};

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

@@ -1,16 +0,0 @@
-import { Skeleton } from '@eightyfourthousand/design-system';
-import { cn } from '@eightyfourthousand/lib-utils';
-
-export const TranslationSkeleton = ({ className }: { className?: string }) => {
-  return (
-    <div className={cn('flex h-full', className)}>
-      <div className="flex flex-col gap-6 pt-8">
-        <Skeleton className="h-12 mb-4" />
-        <Skeleton className="h-20 w-1/2" />
-        <Skeleton className="h-48" />
-        <Skeleton className="h-24 w-5/6" />
-        <Skeleton className="h-64" />
-      </div>
-    </div>
-  );
-};

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

@@ -1,155 +0,0 @@
-'use client';
-
-import { Cell } from '@tanstack/react-table';
-import {
-  SortableHeader,
-  TooltipCell,
-  DataTableColumn,
-  DataTable,
-  FuzzyGlobalFilter,
-} from '@eightyfourthousand/design-system';
-import { Work } from '@eightyfourthousand/data-access';
-import { useEffect, useState } from 'react';
-import { TriangleAlertIcon } from 'lucide-react';
-import { usePathname, useRouter } from 'next/navigation';
-
-const CLASSNAME_FOR_COL: { [key: string]: string } = {
-  title: 'xl:w-[920px] lg:w-[740px] md:w-[490px] w-[246px]',
-  toh: 'xl:w-[100px] md:w-[60px] w-[40px]',
-  pages: 'w-[60px]',
-  publicationVersion: 'w-[40px]',
-  publicationDate: 'w-[80px]',
-  restriction: 'w-5 h-6',
-};
-
-type TableWork = {
-  uuid: string;
-  title: string;
-  toh: string;
-  publicationDate: string;
-  publicationVersion: string;
-  pages: number;
-  restriction: boolean;
-};
-
-const TranslationHeader = SortableHeader<TableWork>;
-
-export const TranslationsTable = ({ works }: { works: Work[] }) => {
-  const [data, setData] = useState<TableWork[]>([]);
-
-  const router = useRouter();
-  const pathname = usePathname();
-  const onCellClick = (cell: Cell<TableWork, unknown>) => {
-    router.push(`${pathname}/${cell.row.original.uuid}`);
-  };
-
-  useEffect(() => {
-    const tableWorks: TableWork[] = works.map((w) => ({
-      ...w,
-      toh: w.toh.join(', '),
-      publicationDate: w.publicationDate?.toLocaleDateString() || 'Unpublished',
-    }));
-    setData(tableWorks);
-  }, [works]);
-
-  const columns: DataTableColumn<TableWork>[] = [
-    {
-      id: 'title',
-      accessorKey: 'title',
-      header: ({ column }) => (
-        <TranslationHeader column={column} name="Work Title" />
-      ),
-      cell: ({ row }) => (
-        <TooltipCell
-          className={CLASSNAME_FOR_COL.title}
-          content={row.original.title}
-        />
-      ),
-      className: CLASSNAME_FOR_COL.title,
-      onCellClick,
-    },
-    {
-      id: 'toh',
-      accessorKey: 'toh',
-      header: ({ column }) => <TranslationHeader column={column} name="Toh" />,
-      cell: ({ row }) => (
-        <TooltipCell
-          className={CLASSNAME_FOR_COL.toh}
-          content={row.original.toh}
-        />
-      ),
-      className: CLASSNAME_FOR_COL.toh,
-      onCellClick,
-    },
-    {
-      id: 'pages',
-      accessorKey: 'pages',
-      header: ({ column }) => (
-        <TranslationHeader column={column} name="Pages" />
-      ),
-      cell: ({ row }) => (
-        <div className={CLASSNAME_FOR_COL.pages}>{row.original.pages}</div>
-      ),
-      className: CLASSNAME_FOR_COL.pages,
-      onCellClick,
-    },
-    {
-      id: 'publicationDate',
-      accessorKey: 'publicationDate',
-      header: ({ column }) => (
-        <TranslationHeader column={column} name="Published" />
-      ),
-      cell: ({ row }) => (
-        <div className={CLASSNAME_FOR_COL.publicationDate}>
-          {row.original.publicationDate}
-        </div>
-      ),
-      className: CLASSNAME_FOR_COL.publicationDate,
-      onCellClick,
-    },
-    {
-      id: 'publicationVersion',
-      accessorKey: 'publicationVersion',
-      header: ({ column }) => (
-        <TranslationHeader column={column} name="Version" />
-      ),
-      cell: ({ row }) => (
-        <div className={CLASSNAME_FOR_COL.publicationVersion}>
-          {row.original.publicationVersion}
-        </div>
-      ),
-      className: CLASSNAME_FOR_COL.publicationVersion,
-      onCellClick,
-    },
-    {
-      id: 'restriction',
-      accessorKey: 'restriction',
-      header: () => '',
-      cell: ({ row }) => (
-        <div className={CLASSNAME_FOR_COL.restriction}>
-          {row.original.restriction ? (
-            <TriangleAlertIcon className="text-warning" />
-          ) : null}
-        </div>
-      ),
-      className: CLASSNAME_FOR_COL.restriction,
-      onCellClick,
-    },
-  ];
-
-  return (
-    <DataTable
-      name="translations"
-      columns={columns}
-      data={data}
-      filters={(table) => (
-        <div className="flex items-center py-4">
-          <FuzzyGlobalFilter
-            table={table}
-            placeholder="Search translations..."
-          />
-        </div>
-      )}
-    />
-  );
-};

package/src/lib/components/shared/bibliography/BibliographyBody.tsx

@@ -1,28 +0,0 @@
-'use client';
-
-import { BibliographyEntryItem } from '@eightyfourthousand/data-access';
-import { LabeledElement } from '../LabeledElement';
-import { useRef } from 'react';
-import { useGlossaryInstanceListener } from '../hooks/useGlossaryInstanceListener';
-
-export const BibliographyBody = ({
-  entry,
-  label,
-}: {
-  entry: BibliographyEntryItem;
-  label: string;
-}) => {
-  const ref = useRef<HTMLDivElement>(null);
-  useGlossaryInstanceListener({ ref });
-
-  return (
-    <LabeledElement
-      id={entry.uuid}
-      key={entry.uuid}
-      label={label}
-      contentType="bibliography"
-    >
-      <div ref={ref} dangerouslySetInnerHTML={{ __html: entry.html }} />
-    </LabeledElement>
-  );
-};