@eightyfourthousand/lib-editing 2026.4.0 → 2026.4.2

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

@@ -1,132 +0,0 @@
-import { ReactNode, SVGProps } from 'react';
-import { cn } from '@eightyfourthousand/lib-utils';
-
-export const OrnamentBG = ({ className }: SVGProps<SVGElement>) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="38"
-      height="20"
-      viewBox="0 0 38 20"
-      fill="none"
-      className={className}
-    >
-      <path d="M0 0C0 11.04 8.512 20 19 20C29.488 20 38 11.04 38 0H0Z" />
-    </svg>
-  );
-};
-
-export const Ornament = ({ className }: SVGProps<SVGElement>) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="36"
-      height="19"
-      viewBox="0 0 36 19"
-      className={className}
-    >
-      <path d="M21.8 11.28C22.332 11.12 22.864 10.88 23.32 10.56V8H24.84V6.4H23.32V4.8H30.084C28.488 9.2 24.84 12.48 20.28 13.36V1.6H33.884C33.124 10.16 26.284 16.8 18 16.8C9.71602 16.8 2.87602 10.16 2.11602 1.6H15.72V13.36C11.236 12.48 7.51202 9.2 5.91602 4.8H12.68V6.4H11.16V8H12.68V10.64C13.136 10.88 13.668 11.12 14.2 11.36V3.2H3.86402C5.23202 9.76 10.628 14.8 17.24 15.12V0H0.52002C0.52002 10.16 8.34802 18.4 18 18.4C27.652 18.4 35.48 10.16 35.48 0H18.76V15.12C25.372 14.72 30.768 9.76 32.136 3.2H21.8V11.28Z" />
-    </svg>
-  );
-};
-
-export const FramedCard = ({
-  children,
-  className,
-}: {
-  children: ReactNode;
-  className?: string;
-}) => {
-  const borderColor = `border-navy/50`;
-  const bgColor = `bg-navy/10`;
-  const ornamentTint = `fill-navy/20`;
-  const ornamentBgTint = `fill-white/75`;
-
-  const cornerSize = 2;
-  const size = `size-${cornerSize}`;
-  const height = `height-${cornerSize}`;
-  const width = `width-${cornerSize}`;
-  const border = `border border-5 ${borderColor} border-double`;
-
-  return (
-    <div
-      className={cn(
-        'grid grid-cols-[auto_minmax(0,1fr)_auto] gap-0',
-        className,
-      )}
-    >
-      <div className={cn(size, 'relative')}>
-        <div
-          className={cn(
-            border,
-            'absolute top-1.25 start-1.25 z-2 border-t-transparent border-s-transparent',
-          )}
-        />
-      </div>
-      <div
-        className={cn(
-          height,
-          border,
-          bgColor,
-          'relative rounded-t-md border-b-transparent',
-        )}
-      >
-        <div className="absolute -top-1.25 h-0 w-full overflow-visible">
-          <OrnamentBG className={cn('mx-auto', ornamentBgTint)} />
-        </div>
-        <div className="absolute -top-1.25 h-0 w-full overflow-visible">
-          <Ornament className={cn('mx-auto', ornamentTint)} />
-        </div>
-      </div>
-      <div className={cn(size, 'relative')}>
-        <div
-          className={cn(
-            border,
-            'absolute top-1.25 end-0.75 z-2 border-t-transparent border-e-transparent',
-          )}
-        />
-      </div>
-      <div
-        className={cn(
-          width,
-          border,
-          bgColor,
-          'rounded-s-md border-e-transparent border-double',
-        )}
-      />
-      <div className={cn('fit-content', bgColor)}>{children}</div>
-      <div
-        className={cn(
-          width,
-          border,
-          bgColor,
-          'rounded-e-md border-s-transparent',
-        )}
-      />
-      <div className={cn(size, 'relative')}>
-        <div
-          className={cn(
-            border,
-            'absolute bottom-0.75 start-1.25 z-2 border-b-transparent border-s-transparent',
-          )}
-        />
-      </div>
-      <div
-        className={cn(
-          height,
-          border,
-          bgColor,
-          'rounded-b-md border-t-transparent',
-        )}
-      />
-      <div className={cn(size, 'relative')}>
-        <div
-          className={cn(
-            border,
-            'absolute right-0.75 bottom-0.75 z-2 border-b-transparent border-e-transparent',
-          )}
-        />
-      </div>
-    </div>
-  );
-};

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

@@ -1,20 +0,0 @@
-import { TranslationLanguage } from '@eightyfourthousand/data-access';
-import { cn } from '@eightyfourthousand/lib-utils';
-
-export const LongTitle = ({
-  title,
-  language,
-}: {
-  title: string;
-  language: TranslationLanguage;
-}) => {
-  const languageStyles: { [key in TranslationLanguage]?: string } = {
-    'Sa-Ltn': 'italic long-term',
-    'Bo-Ltn': 'italic',
-    bo: 'font-tibetan',
-  };
-
-  const textStyle = languageStyles[language] || '';
-
-  return <div className={cn('py-1.5', textStyle)}>{title}</div>;
-};

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

@@ -1,28 +0,0 @@
-'use client';
-
-import { Imprint } from '@eightyfourthousand/data-access';
-import { Skeleton } from '@eightyfourthousand/design-system';
-import { TitleDetails } from './TitleDetails';
-import { TitlesCard } from './TitlesCard';
-
-export const LongTitles = ({ imprint }: { imprint?: Imprint }) => {
-  if (!imprint) {
-    return <Skeleton className="h-48 w-full" />;
-  }
-
-  const { mainTitles } = imprint;
-  const mainEnTitle = mainTitles?.en || '';
-
-  return (
-    <div className="mx-auto flex w-full flex-col gap-1 px-4 pt-8">
-      <TitlesCard
-        header={imprint.section}
-        main={mainEnTitle}
-        footer={imprint.toh}
-        canEdit={false}
-      />
-      <div className="h-8" />
-      <TitleDetails imprint={imprint} />
-    </div>
-  );
-};

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

@@ -1,54 +0,0 @@
-import { ReactNode } from 'react';
-import { ExtendedTranslationLanguage } from '@eightyfourthousand/data-access';
-import { H2, H3, H4 } from '@eightyfourthousand/design-system';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@eightyfourthousand/lib-utils';
-
-export const TITLE_VARIANT_STYLES = {
-  en: '',
-  bo: 'my-1',
-  ja: 'my-1 italic font-light text-muted-foreground',
-  zh: 'my-1 italic font-light text-muted-foreground',
-  'Bo-Ltn': 'my-1 italic font-light text-muted-foreground',
-  'Mt-Ltn': 'my-1 italic font-light text-muted-foreground',
-  'Pi-Ltn': 'my-1 italic font-light text-muted-foreground',
-  'Sa-Ltn': 'my-1 italic font-light text-muted-foreground',
-  'Zh-Ltn': 'my-1 italic font-light text-muted-foreground',
-};
-
-const titleVariants = cva('', {
-  variants: {
-    language: TITLE_VARIANT_STYLES,
-  },
-  defaultVariants: { language: 'en' },
-});
-
-export const Title = ({
-  children,
-  language,
-  ...props
-}: {
-  children: ReactNode;
-} & VariantProps<typeof titleVariants>) => {
-  const components: {
-    [key in ExtendedTranslationLanguage]: typeof H2 | typeof H4;
-  } = {
-    en: H2,
-    bo: H3,
-    ja: H4,
-    zh: H4,
-    'Bo-Ltn': H2,
-    'Mt-Ltn': H2,
-    'Pi-Ltn': H2,
-    'Sa-Ltn': H2,
-    'Zh-Ltn': H2,
-  };
-
-  const Component = (language && components[language]) || H4;
-
-  return (
-    <Component className={cn(titleVariants({ language }))} {...props}>
-      {children}
-    </Component>
-  );
-};

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

@@ -1,47 +0,0 @@
-import { Imprint } from '@eightyfourthousand/data-access';
-import { LongTitle } from './LongTitle';
-
-const DOT = `·` as const;
-
-export const TitleDetails = ({ imprint }: { imprint: Imprint }) => {
-  const { mainTitles, longTitles, toh } = imprint;
-
-  const longBoTitle = longTitles?.bo || mainTitles?.bo;
-  const longBoLtnTitle = longTitles?.['Bo-Ltn'] || mainTitles?.['Bo-Ltn'];
-  const longEnTitle = longTitles?.en || mainTitles?.en;
-  const longSaLtnTitle = longTitles?.['Sa-Ltn'] || mainTitles?.['Sa-Ltn'];
-
-  const translators =
-    imprint?.tibetanTranslators
-      ?.split(',')
-      ?.map((t) => t.trim())
-      .filter((t) => !!t) || [];
-
-  return (
-    <div className="pb-4 mx-auto max-2-2xl items-center text-center text-xs font-serif text-foreground/75">
-      {longBoTitle && <LongTitle title={longBoTitle} language="bo" />}
-      {longBoLtnTitle && <LongTitle title={longBoLtnTitle} language="Bo-Ltn" />}
-      {longEnTitle && <LongTitle title={longEnTitle} language="en" />}
-      {longSaLtnTitle && <LongTitle title={longSaLtnTitle} language="Sa-Ltn" />}
-      {toh && <div className="pt-8">{`${DOT} ${toh} ${DOT}`}</div>}
-      {imprint.sourceDescription && <div>{imprint.sourceDescription}</div>}
-      {translators.length > 0 && (
-        <>
-          <div className="pb-1 pt-5 text-xs uppercase">
-            Translated into Tibetan by
-          </div>
-
-          <div className="mx-auto flex flex-wrap justify-center gap-x-2">
-            <span>{DOT}</span>
-            {translators.map((translator, idx) => (
-              <div key={`translator-wrapper-${idx}`} className="flex gap-x-2">
-                <span key={`${translator}-${idx}`}>{translator}</span>
-                <span key={`dot-${idx}`}>{DOT}</span>
-              </div>
-            ))}
-          </div>
-        </>
-      )}
-    </div>
-  );
-};

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

@@ -1,37 +0,0 @@
-import { LANGUAGES, Title, Titles } from '@eightyfourthousand/data-access';
-import { Input, Label } from '@eightyfourthousand/design-system';
-
-export const TitleForm = ({
-  titles = [],
-  onChange,
-}: {
-  titles?: Titles;
-  onChange: (title: Title) => void;
-}) => {
-  const titlesByLanguage: { [key: string]: Title } = {};
-  titles.forEach((title) => {
-    titlesByLanguage[title.language] = title;
-  });
-
-  return (
-    <div className="flex flex-col gap-4">
-      {LANGUAGES.map((language) => (
-        <div key={language} className="flex flex-col gap-2">
-          <Label className="uppercase">{language}</Label>
-          <Input
-            type="text"
-            placeholder={`Enter ${language} title`}
-            value={titlesByLanguage[language]?.title}
-            onChange={(e) =>
-              onChange({
-                ...titlesByLanguage[language],
-                title: e.target.value,
-                language,
-              })
-            }
-          />
-        </div>
-      ))}
-    </div>
-  );
-};

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

@@ -1,125 +0,0 @@
-'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' | 'front' | '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 = boMain ? `${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 = boMain ? `${BO_TITLE_PREFIX}${boMain || ''}` : '';
-      main = enMain;
-      break;
-    }
-    case 'front': {
-      const boMain =
-        imprint?.mainTitles?.bo ||
-        mainTitles.find((t) => t.language === 'bo')?.title;
-      header = boMain ? `${BO_TITLE_PREFIX}${boMain || ''}` : '';
-      main =
-        imprint?.mainTitles?.en ||
-        mainTitles.find((t) => t.language === 'en')?.title ||
-        mainTitles[0]?.title ||
-        '';
-      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

@@ -1,113 +0,0 @@
-'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/10 from-35% to-navy/10';
-
-  return (
-    <div className="mx-auto flex w-full max-w-7xl gap-1.5 rounded-lg border bg-[#fff] 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-primary">
-            {section}
-          </span>
-          <span className="text-xs uppercase text-muted-foreground">{toh}</span>
-        </div>
-      )}
-      <div className="bg-[#fff] 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-primary 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-primary 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/types.ts

@@ -1,79 +0,0 @@
-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/exporters/abbreviation.spec.ts

@@ -1,31 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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,
-  };
-};