@eightyfourthousand/lib-editing 2026.3.0

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

@@ -0,0 +1,114 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  BO_TITLE_PREFIX,
+  Imprint,
+  Titles as TitlesData,
+  TitleType,
+} from '@eightyfourthousand/data-access';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from '@eightyfourthousand/design-system';
+import { TitlesCard } from './TitlesCard';
+import { TitleForm } from './TitleForm';
+
+export type TitlesVariant = 'english' | 'tibetan' | 'comparison' | 'other';
+
+export const Titles = ({
+  titles,
+  variant = 'english',
+  imprint,
+  canEdit = false,
+}: {
+  titles: TitlesData;
+  imprint?: Imprint;
+  variant?: TitlesVariant;
+  canEdit?: boolean;
+}) => {
+  const [isEditOpen, setIsEditOpen] = useState(false);
+
+  const titlesByType = titles.reduce(
+    (acc, title) => {
+      if (!acc[title.type]) {
+        acc[title.type] = [];
+      }
+      acc[title.type].push(title);
+      return acc;
+    },
+    {} as Record<TitleType, TitlesData>,
+  );
+
+  const mainTitles = titlesByType['mainTitle'] || [];
+
+  let header = '';
+  let main = '';
+  const authors = imprint?.tibetanAuthors || [];
+
+  const footer =
+    imprint?.mainTitles?.['Sa-Ltn'] ||
+    mainTitles.find((t) => t.language === 'Sa-Ltn')?.title ||
+    '...';
+
+  switch (variant) {
+    case 'tibetan': {
+      const boMain =
+        imprint?.mainTitles?.bo ||
+        mainTitles.find((t) => t.language === 'bo')?.title;
+      header = `${BO_TITLE_PREFIX}${boMain || '...'}`;
+      break;
+    }
+    case 'comparison': {
+      const boMain =
+        imprint?.mainTitles?.bo ||
+        mainTitles.find((t) => t.language === 'bo')?.title;
+      const enMain =
+        imprint?.mainTitles?.en ||
+        mainTitles.find((t) => t.language === 'en')?.title ||
+        '...';
+      header = `${BO_TITLE_PREFIX}${boMain || '...'}`;
+      main = enMain;
+      break;
+    }
+    case 'english':
+    default:
+      main =
+        imprint?.mainTitles?.en ||
+        mainTitles.find((t) => t.language === 'en')?.title ||
+        mainTitles[0]?.title ||
+        '';
+      break;
+  }
+
+  return (
+    <>
+      <TitlesCard
+        header={header}
+        main={main}
+        footer={footer}
+        toh={imprint?.toh}
+        section={imprint?.section}
+        authors={authors}
+        attribution={imprint?.isAuthorContested ? 'attributed to' : 'by'}
+        authorsJoiner={imprint?.isAuthorContested ? ' or' : ','}
+        canEdit={canEdit}
+        onEdit={() => setIsEditOpen(true)}
+      />
+      <Dialog open={isEditOpen} onOpenChange={setIsEditOpen}>
+        <DialogContent className="max-w-4xl" showCloseButton={false}>
+          <DialogTitle className="hidden">Edit Titles</DialogTitle>
+          <DialogDescription className="hidden">Edit Titles</DialogDescription>
+          <TitleForm
+            titles={titles}
+            onChange={(title) => {
+              console.log('TODO: save title', title);
+            }}
+          />
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};

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

@@ -0,0 +1,113 @@
+'use client';
+
+import { PencilIcon } from 'lucide-react';
+import { Button, Vajrasattva } from '@eightyfourthousand/design-system';
+import { cn } from '@eightyfourthousand/lib-utils';
+
+export const TitlesCard = ({
+  header = '',
+  main = '',
+  footer = '',
+  toh = '',
+  section = '',
+  authors = [],
+  attribution = 'by',
+  authorsJoiner = ',',
+  canEdit = false,
+  onEdit,
+}: {
+  header?: string;
+  main?: string;
+  footer?: string;
+  toh?: string;
+  section?: string;
+  authors?: string[];
+  attribution?: string;
+  authorsJoiner?: string;
+  canEdit?: boolean;
+  onEdit?(): void;
+}) => {
+  const radial =
+    'bg-radial-[at_50%_50%] from-ochre-25 from-35% to-navy-25';
+
+  return (
+    <div className="mx-auto flex w-full max-w-7xl gap-1.5 rounded-lg border bg-background p-1.5">
+      {(toh || section) && (
+        <div
+          className={cn(
+            'hidden w-32 flex-col justify-center gap-4 rounded-s-lg border p-2 text-center md:flex',
+            radial,
+          )}
+        >
+          <span className="text-sm leading-4 font-light text-ochre-700">
+            {section}
+          </span>
+          <span className="text-xs uppercase text-muted-foreground">{toh}</span>
+        </div>
+      )}
+      <div className="grow min-w-0 flex flex-col justify-center gap-3 rounded-lg border px-2 py-4 text-center md:rounded-s-none md:rounded-e-lg lg:rounded-none">
+        {header && (
+          <div
+            className={cn(
+              'font-tibetan text-navy-500 px-2',
+              main ? 'text-2xl' : 'text-3xl',
+              'leading-relaxed break-all xs:break-normal',
+            )}
+          >
+            {header}
+          </div>
+        )}
+        {main && (
+          <div className="title-main break-all px-2 font-serif text-3xl text-navy-500 xs:break-normal">
+            {main}
+          </div>
+        )}
+        <div className="flex justify-between gap-2 px-2">
+          {canEdit && <div className="w-1/8" />}
+          {footer && (
+            <span className="title-sub long-term flex-grow font-serif text-2xl font-light italic text-muted-foreground">
+              {footer}
+            </span>
+          )}
+          {canEdit && (
+            <div className="w-1/8 flex justify-end gap-1">
+              <Button
+                className="size-7 rounded-lg text-muted-foreground"
+                size="icon"
+                variant="outline"
+                aria-label="Edit titles"
+                onClick={onEdit}
+              >
+                <PencilIcon />
+              </Button>
+            </div>
+          )}
+        </div>
+        {authors.length > 0 && (
+          <div className="title-sub font-serif">
+            <div className="py-2 text-xs uppercase text-muted-foreground">
+              {attribution}
+            </div>
+            <div className="-mt-2 mx-auto flex flex-wrap justify-center gap-x-2 text-xl text-secondary">
+              {authors.map((author, idx) => (
+                <div key={`author-wrapper-${idx}`} className="flex">
+                  <span key={`${author}-${idx}`} className="italic">
+                    {author}
+                  </span>
+                  {idx < authors.length - 1 && (
+                    <span key={`comma-${idx}`} className="whitespace-pre">
+                      {authorsJoiner}
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+      <div className={cn('hidden w-32 rounded-e-lg border lg:flex', radial)}>
+        <Vajrasattva className="size-full object-contain opacity-40 mix-blend-multiply" />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,8 @@
+export * from './FramedCard';
+export * from './LongTitle';
+export * from './LongTitles';
+export * from './Title';
+export * from './TitleDetails';
+export * from './TitleForm';
+export * from './Titles';
+export * from './TitlesCard';

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

@@ -0,0 +1,79 @@
+import { BodyItemType, Imprint, PanelFilter, Titles } from '@eightyfourthousand/data-access';
+import { TranslationEditorContent } from '../editor';
+
+export type EditorBuilderType = BodyItemType | 'titles';
+
+export type EditorToolsType = 'summarizer' | 'bibliography' | 'glossary';
+
+export type EditorMenuItemType = EditorBuilderType | EditorToolsType;
+
+export const PANEL_NAMES = ['left', 'right', 'main'] as const;
+export type PanelName = (typeof PANEL_NAMES)[number];
+export type TabName =
+  | 'toc'
+  | 'front'
+  | 'translation'
+  | 'source'
+  | 'compare'
+  | 'endnotes'
+  | 'bibliography'
+  | 'glossary'
+  | 'abbreviations';
+
+export interface TitlesRenderer {
+  titles: Titles;
+  imprint?: Imprint;
+  name: string;
+}
+
+export interface TranslationRenderer {
+  content: TranslationEditorContent;
+  name: TabName;
+  className?: string;
+  filter?: PanelFilter;
+  panel: PanelName;
+}
+
+export const TAB_FOR_SECTION: Record<string, TabName> = {
+  abbreviations: 'abbreviations',
+  acknowledgment: 'front',
+  appendix: 'translation',
+  bibliography: 'bibliography',
+  colophon: 'translation',
+  endnotes: 'endnotes',
+  glossary: 'glossary',
+  homage: 'translation',
+  imprint: 'front',
+  introduction: 'front',
+  prelude: 'translation',
+  prologue: 'translation',
+  summary: 'front',
+  translation: 'translation',
+};
+
+export const PANEL_FOR_SECTION: Record<string, PanelName> = {
+  abbreviations: 'right',
+  acknowledgment: 'main',
+  appendix: 'main',
+  bibliography: 'right',
+  colophon: 'main',
+  endnotes: 'right',
+  glossary: 'right',
+  homage: 'main',
+  imprint: 'main',
+  introduction: 'main',
+  prelude: 'main',
+  prologue: 'main',
+  summary: 'main',
+  translation: 'main',
+};
+
+export type PanelState = {
+  open: boolean;
+  tab?: TabName;
+  hash?: string;
+};
+
+export type PanelsState = {
+  [key in PanelName]: PanelState;
+};

package/src/lib/components/ssr.ts

@@ -0,0 +1,2 @@
+export * from './shared/ssr';
+export * from './reader/ssr';

package/src/lib/exporters/abbreviation.spec.ts

@@ -0,0 +1,31 @@
+import type { Node } from '@tiptap/pm/model';
+import { abbreviation } from './abbreviation';
+
+describe('abbreviation exporter', () => {
+  it('should export abbreviation annotation correctly', () => {
+    const node = {
+      attrs: {
+        uuid: '49c41c6d-0e04-412e-81ad-22f3af377470',
+        abbreviation: 'e350ec6c-a40c-46bf-8182-acba5a50e4fe',
+      },
+      textContent: 'C',
+    } as unknown as Node;
+
+    const result = abbreviation({
+      node,
+      parent: node,
+      root: node,
+      start: 0,
+      passageUuid: 'e350ec6c-a40c-46bf-8182-acba5a50e4fe',
+    });
+
+    expect(result).toEqual({
+      uuid: '49c41c6d-0e04-412e-81ad-22f3af377470',
+      passageUuid: 'e350ec6c-a40c-46bf-8182-acba5a50e4fe',
+      type: 'abbreviation',
+      start: 0,
+      end: 1,
+      abbreviation: 'e350ec6c-a40c-46bf-8182-acba5a50e4fe',
+    });
+  });
+});

package/src/lib/exporters/abbreviation.ts

@@ -0,0 +1,22 @@
+import { AbbreviationAnnotation } from '@eightyfourthousand/data-access';
+import { Exporter } from './export';
+
+export const abbreviation: Exporter<AbbreviationAnnotation> = ({
+  node,
+  parent,
+  start,
+  passageUuid,
+}): AbbreviationAnnotation => {
+  const textContent = node.textContent || parent.textContent || '';
+  const abbreviation = node.attrs.abbreviation;
+  const uuid = node.attrs.uuid;
+
+  return {
+    uuid,
+    passageUuid,
+    type: 'abbreviation',
+    start,
+    end: start + textContent.length,
+    abbreviation,
+  };
+};

package/src/lib/exporters/annotation.ts

@@ -0,0 +1,193 @@
+import { Annotation, AnnotationType } from '@eightyfourthousand/data-access';
+import { Exporter, ExporterContext } from './export';
+import { abbreviation } from './abbreviation';
+import { audio } from './audio';
+import { blockquote } from './blockquote';
+import { code } from './code';
+import { endNoteLink } from './end-note-link';
+import { glossaryInstance } from './glossary-instance';
+import { hasAbbreviation } from './has-abbreviation';
+import { heading } from './heading';
+import { image } from './image';
+import { indent } from './indent';
+import { internalLink } from './internal-link';
+import { italic } from './italic';
+import { leadingSpace } from './leading-space';
+import { line } from './line';
+import { lineGroup } from './line-group';
+import { link } from './link';
+import { listItem } from './list-item';
+import { list } from './list';
+import { mantra } from './mantra';
+import { mention } from './mention';
+import { paragraph } from './paragraph';
+import { quote } from './quote';
+import { span } from './span';
+import { trailer } from './trailer';
+import { table } from './table';
+import { tableBodyData } from './table-body-data';
+import { tableBodyHeader } from './table-body-header';
+import { tableBodyRow } from './table-body-row';
+import { SpanMarkType } from '../types';
+import { findNodePosition, nodeNotFound } from './util';
+
+const EXPORTERS: Partial<
+  Record<
+    | AnnotationType
+    | SpanMarkType
+    | 'text'
+    | 'bulletList'
+    | 'tableCell'
+    | 'tableHeader'
+    | 'tableRow',
+    Exporter<Annotation | Annotation[]>
+  >
+> = {
+  abbreviation,
+  audio,
+  bold: span,
+  blockquote,
+  bulletList: list,
+  code,
+  endNoteLink,
+  glossaryInstance,
+  hasAbbreviation,
+  heading,
+  image,
+  indent,
+  inlineTitle: italic,
+  internalLink,
+  italic,
+  leadingSpace,
+  line,
+  lineGroup,
+  link,
+  listItem,
+  mantra,
+  mention,
+  paragraph,
+  quote,
+  reference: link,
+  smallCaps: span,
+  subscript: span,
+  superscript: span,
+  table,
+  tableCell: tableBodyData,
+  tableHeader: tableBodyHeader,
+  tableRow: tableBodyRow,
+  trailer,
+  underline: span,
+
+  // ignored types
+  deprecated: undefined,
+  quoted: undefined,
+  unknown: undefined,
+  text: undefined,
+};
+
+const PARAMETER_ANNOTATION_MAP: { [key: string]: AnnotationType } = {
+  hasIndent: 'indent',
+  hasLeadingSpace: 'leadingSpace',
+};
+
+export const parameterAnnotationFromNode = (
+  ctx: ExporterContext,
+): Annotation[] => {
+  const annotations: Annotation[] = [];
+  const { node, start } = ctx;
+
+  const keys = Object.keys(PARAMETER_ANNOTATION_MAP);
+  keys.forEach((key) => {
+    const annotType = PARAMETER_ANNOTATION_MAP[key];
+    const exporter = EXPORTERS[annotType];
+    const hasAttr = !!node.attrs[key];
+    if (!hasAttr) {
+      return;
+    }
+
+    if (!exporter) {
+      console.warn(`No exporter for parameter annotation: ${key}`);
+    }
+
+    const annotation = exporter?.({ ...ctx, start });
+    if (!annotation) {
+      return;
+    }
+
+    if (Array.isArray(annotation)) {
+      annotations.push(...annotation);
+    } else {
+      annotations.push(annotation);
+    }
+  });
+
+  return annotations;
+};
+
+export const markAnnotationFromNode = (ctx: ExporterContext): Annotation[] => {
+  const { node } = ctx;
+  const annotations: Annotation[] = [];
+  node.marks.forEach((mark) => {
+    const start = findNodePosition(ctx.root, mark.attrs.uuid, mark.type.name);
+    if (start === undefined) {
+      return nodeNotFound(mark);
+    }
+    const type = mark.type.name as AnnotationType;
+    const annotation = EXPORTERS[type]?.({ ...ctx, mark, start });
+    if (!annotation) {
+      return;
+    }
+
+    if (Array.isArray(annotation)) {
+      annotations.push(...annotation);
+    } else {
+      annotations.push(annotation);
+    }
+  });
+  return annotations;
+};
+
+export const annotationExportsFromNode = (
+  ctx: ExporterContext,
+): Annotation[] => {
+  const { node, root } = ctx;
+  const annotations = [
+    ...parameterAnnotationFromNode(ctx),
+    ...markAnnotationFromNode(ctx),
+  ];
+
+  const blockAnnotation = EXPORTERS[node.type.name as AnnotationType]?.(ctx);
+
+  // NOTE: passages often have a root paragraph node that does not map to an
+  // annotation. Ignore nodes without a uuid.
+  if (!node.attrs.uuid) {
+    if (blockAnnotation) {
+      console.warn(
+        `Node "${node.type.name}" is missing a uuid — its annotation was skipped. ` +
+          'This is likely a timing issue where ensureUuids() was not called before export.',
+      );
+    }
+  } else if (blockAnnotation) {
+    if (Array.isArray(blockAnnotation)) {
+      annotations.push(...blockAnnotation);
+    } else {
+      annotations.push(blockAnnotation);
+    }
+  }
+
+  node.content.forEach((child) => {
+    const start = findNodePosition(root, child.attrs.uuid, child.type.name);
+    if (start === undefined) {
+      return nodeNotFound(child);
+    }
+    annotations.push(
+      ...annotationExportsFromNode({
+        ...ctx,
+        node: child,
+        parent: node,
+        start,
+      }),
+    );
+  });
+  return annotations;
+};

package/src/lib/exporters/audio.spec.ts

@@ -0,0 +1,77 @@
+import type { Node } from '@tiptap/pm/model';
+import { audio } from './audio';
+
+describe('audio exporter', () => {
+  it('should export audio annotation correctly', () => {
+    const node = {
+      attrs: {
+        uuid: 'audio-uuid-1234',
+        src: '/audio/recitation.mp3',
+        mediaType: 'audio/mpeg',
+      },
+    } as unknown as Node;
+
+    const result = audio({
+      node,
+      parent: node,
+      root: node,
+      start: 50,
+      passageUuid: 'passage-uuid-1234',
+    });
+
+    expect(result).toEqual({
+      uuid: 'audio-uuid-1234',
+      passageUuid: 'passage-uuid-1234',
+      type: 'audio',
+      start: 50,
+      end: 50,
+      src: '/audio/recitation.mp3',
+      mediaType: 'audio/mpeg',
+    });
+  });
+
+  it('should default to audio/mpeg when mediaType is missing', () => {
+    const node = {
+      attrs: {
+        uuid: 'audio-uuid-5678',
+        src: '/audio/recitation.mp3',
+      },
+    } as unknown as Node;
+
+    const result = audio({
+      node,
+      parent: node,
+      root: node,
+      start: 0,
+      passageUuid: 'passage-uuid-1234',
+    });
+
+    expect(result).toEqual({
+      uuid: 'audio-uuid-5678',
+      passageUuid: 'passage-uuid-1234',
+      type: 'audio',
+      start: 0,
+      end: 0,
+      src: '/audio/recitation.mp3',
+      mediaType: 'audio/mpeg',
+    });
+  });
+
+  it('should return undefined when src is missing', () => {
+    const node = {
+      attrs: {
+        uuid: 'audio-uuid-nosrc',
+      },
+    } as unknown as Node;
+
+    const result = audio({
+      node,
+      parent: node,
+      root: node,
+      start: 0,
+      passageUuid: 'passage-uuid-1234',
+    });
+
+    expect(result).toBeUndefined();
+  });
+});

package/src/lib/exporters/audio.ts

@@ -0,0 +1,27 @@
+import { AudioAnnotation } from '@eightyfourthousand/data-access';
+import { Exporter } from './export';
+
+export const audio: Exporter<AudioAnnotation> = ({
+  node,
+  start,
+  passageUuid,
+}): AudioAnnotation | undefined => {
+  const uuid = node.attrs.uuid;
+  const src = node.attrs.src;
+  const mediaType = node.attrs.mediaType || 'audio/mpeg';
+
+  if (!src) {
+    console.warn(`Audio node ${uuid} is missing src attribute`);
+    return undefined;
+  }
+
+  return {
+    uuid,
+    passageUuid,
+    type: 'audio',
+    start,
+    end: start,
+    src,
+    mediaType,
+  };
+};