@eightyfourthousand/lib-search 2026.3.1 → 2026.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eightyfourthousand/lib-search",
-  "version": "2026.3.1",
+  "version": "2026.4.1",
   "description": "Shared translation search UI and server helpers for 84000 applications.",
   "private": false,
   "repository": {
@@ -17,16 +17,30 @@
     "access": "public"
   },
   "dependencies": {
-    "@eightyfourthousand/data-access": "^2026.3.1",
-    "@eightyfourthousand/design-system": "^2026.3.1",
-    "@eightyfourthousand/lib-utils": "^2026.3.1"
+    "@eightyfourthousand/client-graphql": "^2026.4.1",
+    "@eightyfourthousand/data-access": "^2026.4.1",
+    "@eightyfourthousand/design-system": "^2026.4.1",
+    "@eightyfourthousand/lib-utils": "^2026.4.1",
+    "lucide-react": "^0.477.0"
   },
   "peerDependencies": {
     "next": "^16.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "sideEffects": false,
   "keywords": [],
   "author": ""
-}
+}

package/.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    [
-      "@nx/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
-  "plugins": []
-}

package/.eslintrc.json

@@ -1,18 +0,0 @@
-{
-  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
-    }
-  ]
-}

package/README.md

@@ -1,9 +0,0 @@
-# @eightyfourthousand/lib-search
-
-Shared translation search UI and server helpers for 84000 applications.
-
-Use this package for the cross-application translation search dialog, result rendering, and supporting search helpers.
-
-## Running unit tests
-
-Run `nx test lib-search` to execute the unit tests via [Jest](https://jestjs.io).

package/project.json

@@ -1,20 +0,0 @@
-{
-  "name": "lib-search",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "libs/lib-search/src",
-  "projectType": "library",
-  "tags": [],
-  "targets": {
-    "build": {
-      "executor": "@nx/js:tsc",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/lib-search",
-        "main": "libs/lib-search/src/index.ts",
-        "tsConfig": "libs/lib-search/tsconfig.lib.json",
-        "rootDir": "libs/lib-search/src",
-        "generateExportsField": true
-      }
-    }
-  }
-}

package/src/lib/data/search.ts

@@ -1,28 +0,0 @@
-'use server';
-
-import { createServerClient } from '@eightyfourthousand/data-access/ssr';
-import { searchResultsFromDTO } from '../types';
-
-export const search = async ({
-  text,
-  uuid,
-  toh,
-}: {
-  text: string;
-  uuid: string;
-  toh: string;
-}) => {
-  const client = await createServerClient();
-  const { data, error } = await client.rpc('translation_search', {
-    search_term: text,
-    work_uuid: uuid,
-    toh: toh,
-  });
-
-  if (error) {
-    console.error('Search error:', error);
-    return;
-  }
-
-  return searchResultsFromDTO(data);
-};

package/src/lib/types/search.ts

@@ -1,140 +0,0 @@
-export const RESULTS_ENTITIES = [
-  'passages',
-  'alignments',
-  'bibliographies',
-  'glossaries',
-] as const;
-
-export type ResultsEntity = (typeof RESULTS_ENTITIES)[number];
-
-export type BibliographySearchMatchDTO = {
-  bibliography_uuid: string;
-  content: string;
-};
-
-export type GlossarySearchMatchDTO = {
-  glossary_uuid: string;
-  content: string;
-};
-
-export type PassageSearchMatchDTO = {
-  passage_uuid: string;
-  type: ResultsEntity;
-  label: string;
-  content: string;
-};
-
-export type AlignmentSearchMatchDTO = {
-  passage_uuid: string;
-  english_label: string;
-  english: string;
-  tibetan: string;
-  tibetan_volume_number: string;
-  tibetan_folio_number: string;
-};
-
-export type SearchMatch = {
-  type: string;
-  uuid: string;
-  content: string;
-};
-
-export type PassageMatch = SearchMatch & {
-  type: 'passage';
-  section: string;
-  label: string;
-};
-
-export type AlignmentMatch = SearchMatch & {
-  type: 'alignment';
-  section: 'translation';
-  label: string;
-  source: string;
-  volume: string;
-  folio: string;
-};
-
-export type BibliographyMatch = SearchMatch & {
-  type: 'bibliography';
-};
-
-export type GlossaryMatch = SearchMatch & {
-  type: 'glossary';
-};
-
-export type SearchResultsDTO = {
-  passage_matches: PassageSearchMatchDTO[];
-  alignment_matches: AlignmentSearchMatchDTO[];
-  bibliography_matches: BibliographySearchMatchDTO[];
-  glossary_matches: GlossarySearchMatchDTO[];
-};
-
-export type SearchResult =
-  | SearchMatch
-  | PassageMatch
-  | AlignmentMatch
-  | BibliographyMatch
-  | GlossaryMatch;
-
-export type SearchResults = {
-  passages: PassageMatch[];
-  alignments: AlignmentMatch[];
-  bibliographies: SearchMatch[];
-  glossaries: SearchMatch[];
-};
-
-export const bibliographyMatchFromDTO = (
-  dto: BibliographySearchMatchDTO,
-): BibliographyMatch => {
-  return {
-    type: 'bibliography',
-    uuid: dto.bibliography_uuid,
-    content: dto.content,
-  };
-};
-
-export const glossaryMatchFromDTO = (
-  dto: GlossarySearchMatchDTO,
-): GlossaryMatch => {
-  return {
-    type: 'glossary',
-    uuid: dto.glossary_uuid,
-    content: dto.content,
-  };
-};
-
-export const passageMatchFromDTO = (
-  dto: PassageSearchMatchDTO,
-): PassageMatch => {
-  return {
-    type: 'passage',
-    uuid: dto.passage_uuid,
-    section: dto.type,
-    label: dto.label,
-    content: dto.content,
-  };
-};
-
-export const alignmentMatchFromDTO = (
-  dto: AlignmentSearchMatchDTO,
-): AlignmentMatch => {
-  return {
-    type: 'alignment',
-    section: 'translation',
-    uuid: dto.passage_uuid,
-    label: dto.english_label,
-    content: dto.english,
-    source: dto.tibetan,
-    volume: dto.tibetan_volume_number,
-    folio: dto.tibetan_folio_number,
-  };
-};
-
-export const searchResultsFromDTO = (dto: SearchResultsDTO): SearchResults => {
-  return {
-    passages: dto.passage_matches.map(passageMatchFromDTO),
-    alignments: dto.alignment_matches.map(alignmentMatchFromDTO),
-    bibliographies: dto.bibliography_matches.map(bibliographyMatchFromDTO),
-    glossaries: dto.glossary_matches.map(glossaryMatchFromDTO),
-  };
-};

package/src/lib/ui/SearchButton.tsx

@@ -1,151 +0,0 @@
-'use client';
-
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogTitle,
-  DialogTrigger,
-  Input,
-  Tabs,
-  TabsContent,
-} from '@eightyfourthousand/design-system';
-import { Loader2Icon, SearchIcon, XIcon } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import { search } from '../data';
-import { RESULTS_ENTITIES, SearchResult, SearchResults } from '../types';
-import { SearchResultsList } from './SearchResultsList';
-import { SearchResultTabs } from './SearchResultTab';
-
-export const SearchButton = ({
-  workUuid,
-  toh,
-  onResultSelected,
-}: {
-  workUuid?: string;
-  toh?: string;
-  onResultSelected: (result: SearchResult) => void;
-}) => {
-  const [open, setOpen] = useState(false);
-  const [searching, setSearching] = useState(false);
-  const [hasResults, setHasResults] = useState(false);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [results, setResults] = useState<SearchResults>();
-
-  const onCardClick = (result: SearchResult) => {
-    setOpen(false);
-    onResultSelected(result);
-  };
-
-  useEffect(() => {
-    const performSearch = async () => {
-      if (!searchQuery || !workUuid || !toh) {
-        setResults(undefined);
-        return;
-      }
-
-      setSearching(true);
-
-      const results = await search({ text: searchQuery, uuid: workUuid, toh });
-      setHasResults(
-        !!results &&
-          (results.passages.length > 0 ||
-            results.alignments.length > 0 ||
-            results.bibliographies.length > 0 ||
-            results.glossaries.length > 0),
-      );
-      setResults(results);
-      setSearching(false);
-    };
-
-    const debounce = setTimeout(performSearch, 300);
-    return () => clearTimeout(debounce);
-  }, [searchQuery, workUuid, toh]);
-
-  useEffect(() => {
-    setResults(undefined);
-    setSearchQuery('');
-  }, [open]);
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button
-          variant="ghost"
-          className="bg-background my-auto [&_svg]:size-6 [&_svg]:stroke-1 hover:bg-background cursor-pointer text-base text-accent hover:text-accent/80"
-        >
-          <SearchIcon />
-          <span className="hidden md:flex">Search</span>
-        </Button>
-      </DialogTrigger>
-      <DialogContent
-        showCloseButton={false}
-        className="bg-transparent top-4 max-w-4xl shadow-none border-0 text-secondary translate-y-0"
-      >
-        <DialogTitle className="hidden">Search</DialogTitle>
-        <DialogDescription className="hidden">
-          Search this translation
-        </DialogDescription>
-        <div className="flex flex-col justify-start gap-2 h-[calc(100vh_-_2.5rem)]">
-          <div className="w-full flex flex-col gap-2 text-foreground flex-shrink-0">
-            <div className="flex justify-end">
-              <Button
-                className="text-secondary-foreground -me-3"
-                variant="ghost"
-                size="icon"
-                onClick={() => setOpen(false)}
-              >
-                <XIcon className="size-3 my-auto" />
-              </Button>
-            </div>
-            <Input
-              autoFocus
-              placeholder="Type to search..."
-              className="w-full text-foreground px-4 py-6"
-              onChange={(e) => setSearchQuery(e.target.value)}
-            />
-          </div>
-          {searchQuery && (
-            <>
-              <div className="text-sm text-secondary-foreground">
-                Showing results for "<strong>{searchQuery}</strong>"
-                {searching && (
-                  <Loader2Icon className="size-4 ml-2 animate-spin inline-block" />
-                )}
-              </div>
-              {results && hasResults ? (
-                <Tabs
-                  defaultValue="passages"
-                  className="flex flex-col grow min-h-0 pt-2"
-                >
-                  <SearchResultTabs results={results} />
-                  {RESULTS_ENTITIES.map(
-                    (tab) =>
-                      results[tab].length > 0 && (
-                        <TabsContent
-                          key={tab}
-                          className="grow min-h-0"
-                          value={tab}
-                        >
-                          <SearchResultsList
-                            query={searchQuery}
-                            results={results[tab]}
-                            onCardClick={onCardClick}
-                          />
-                        </TabsContent>
-                      ),
-                  )}
-                </Tabs>
-              ) : (
-                <div className="mt-4 text-secondary-foreground">
-                  No results found.
-                </div>
-              )}
-            </>
-          )}
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-};

package/src/lib/ui/SearchResultCard.tsx

@@ -1,117 +0,0 @@
-'use client';
-
-import { highlightText, removeHtmlTags, useIsMobile } from '@eightyfourthousand/lib-utils';
-import {
-  AlignmentMatch,
-  BibliographyMatch,
-  GlossaryMatch,
-  PassageMatch,
-  SearchResult,
-} from '../types';
-import { Separator } from '@eightyfourthousand/design-system';
-
-export const PassageResult = ({
-  match,
-  query,
-}: {
-  match: PassageMatch;
-  query: string;
-}) => {
-  return <div>{highlightText(match.content, query)}</div>;
-};
-
-export const AlignmentResult = ({
-  match,
-  query,
-}: {
-  match: AlignmentMatch;
-  query: string;
-}) => {
-  return (
-    <div className="grid md:grid-cols-2 gap-4">
-      <div>{highlightText(match.content, query)}</div>
-      <div className="text-lg">{highlightText(match.source, query)}</div>
-    </div>
-  );
-};
-
-export const BibliographyResult = ({
-  match,
-  query,
-}: {
-  match: BibliographyMatch;
-  query: string;
-}) => {
-  return <div>{highlightText(removeHtmlTags(match.content), query)}</div>;
-};
-
-export const GlossaryResult = ({
-  match,
-  query,
-}: {
-  match: GlossaryMatch;
-  query: string;
-}) => {
-  return <div>{highlightText(removeHtmlTags(match.content), query)}</div>;
-};
-
-export const SearchResultCard = ({
-  match,
-  query,
-  onClick,
-}: {
-  match: SearchResult;
-  query: string;
-  onClick: () => void;
-}) => {
-  const isMobile = useIsMobile();
-
-  // cast as passage but treat properties as optional
-  const passage = match as PassageMatch;
-
-  const renderInner = (match: SearchResult) => {
-    switch (match.type) {
-      case 'passage':
-        return <PassageResult match={match as PassageMatch} query={query} />;
-      case 'alignment':
-        return (
-          <AlignmentResult match={match as AlignmentMatch} query={query} />
-        );
-      case 'bibliography':
-        return (
-          <BibliographyResult
-            match={match as BibliographyMatch}
-            query={query}
-          />
-        );
-      case 'glossary':
-        return <GlossaryResult match={match as GlossaryMatch} query={query} />;
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <div
-      onClick={onClick}
-      className="flex flex-col md:flex-row gap-4 py-6 px-4 md:px-6 font-serif text-sm text-foreground rounded-lg bg-background cursor-pointer border border-3 border-transparent hover:border-border transition-colors"
-    >
-      <div className="md:w-25 flex-shrink-0 flex md:flex-col gap-1 md:gap-2 md:text-right text-xs md:text-sm">
-        <div className="flex flex-col gap-1">
-          <span className="text-secondary capitalize">{passage.type}</span>
-          {passage.section && (
-            <span className="text-foreground/50 capitalize">
-              {passage.section.replace('Header', '')}
-            </span>
-          )}
-        </div>
-        <div className="grow" />
-        {passage.label && (
-          <span className="text-accent mt-auto">{passage.label}</span>
-        )}
-      </div>
-      <Separator orientation={isMobile ? 'horizontal' : 'vertical'} />
-      {renderInner(match)}
-    </div>
-  );
-};

package/src/lib/ui/SearchResultTab.tsx

@@ -1,28 +0,0 @@
-import { TabsList, TabsTrigger } from '@eightyfourthousand/design-system';
-import { RESULTS_ENTITIES, SearchResults } from '../types';
-
-export const SearchResultTabs = ({ results }: { results: SearchResults }) => {
-  return (
-    <TabsList className="h-24 gap-4 flex-shrink-0 rounded-lg p-0 w-full bg-transparent">
-      {RESULTS_ENTITIES.map(
-        (tab) =>
-          results[tab].length > 0 && (
-            <TabsTrigger
-              key={tab}
-              value={tab}
-              className="h-full border border-border rounded-xl flex-grow data-[state=inactive]:bg-muted data-[state=active]:border-border data-[state=active]:border-3 border-2"
-            >
-              <div className="flex flex-col gap-1 items-center">
-                <span className="capitalize text-secondary font-bold">
-                  {tab}
-                </span>
-                <span className="text-primary font-bold">
-                  {results[tab].length} matches
-                </span>
-              </div>
-            </TabsTrigger>
-          ),
-      )}
-    </TabsList>
-  );
-};

package/src/lib/ui/SearchResultsList.tsx

@@ -1,25 +0,0 @@
-import { SearchResult } from '../types';
-import { SearchResultCard } from './SearchResultCard';
-
-export const SearchResultsList = ({
-  query,
-  results,
-  onCardClick,
-}: {
-  query: string;
-  results: SearchResult[];
-  onCardClick: (result: SearchResult) => void;
-}) => {
-  return (
-    <div className="h-full flex flex-col gap-3 pb-4 overflow-y-auto min-h-0">
-      {results.map((result, index) => (
-        <SearchResultCard
-          key={index}
-          match={result}
-          query={query}
-          onClick={() => onCardClick(result)}
-        />
-      ))}
-    </div>
-  );
-};

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "allowJs": false,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    }
-  ],
-  "extends": "../../tsconfig.base.json"
-}

package/tsconfig.lib.json

@@ -1,26 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "declaration": true,
-    "types": [
-      "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts",
-      "next",
-      "@nx/next/typings/image.d.ts"
-    ]
-  },
-  "exclude": [
-    "jest.config.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.js",
-    "src/**/*.test.js",
-    "src/**/*.spec.jsx",
-    "src/**/*.test.jsx"
-  ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
-}