@semiont/react-ui 0.2.45 → 0.3.0

package/src/components/modals/ReferenceWizardModal.tsx

@@ -0,0 +1,326 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
+import type { GatheredContext, EventBus } from '@semiont/core';
+import { GatherContextStep } from './GatherContextStep';
+import { ConfigureGenerationStep } from './ConfigureGenerationStep';
+import type { GenerationConfig } from './ConfigureGenerationStep';
+import { ConfigureSearchStep } from './ConfigureSearchStep';
+import type { SearchConfig } from './ConfigureSearchStep';
+import { SearchResultsStep } from './SearchResultsStep';
+import type { ScoredResult } from './SearchResultsStep';
+
+type WizardStep =
+  | { step: 'gather' }
+  | { step: 'configure-search' }
+  | { step: 'search-results'; results: ScoredResult[] }
+  | { step: 'configure-generation' };
+
+export interface ReferenceWizardModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /** The annotation being resolved */
+  annotationId: string | null;
+  /** The resource containing the annotation */
+  resourceId: string | null;
+  /** Default title (selected text) */
+  defaultTitle: string;
+  /** Entity types from the annotation */
+  entityTypes: string[];
+  /** Current locale for generation defaults */
+  locale: string;
+  /** Gathered context state */
+  context: GatheredContext | null;
+  contextLoading: boolean;
+  contextError: Error | null;
+  /** Event bus for emitting downstream events */
+  eventBus: EventBus;
+  /** Callbacks */
+  onGenerateSubmit: (referenceId: string, config: GenerationConfig) => void;
+  onLinkResource: (referenceId: string, targetResourceId: string) => void;
+  onComposeNavigate: (context: GatheredContext, annotationId: string, resourceId: string, title: string, entityTypes: string[]) => void;
+  /** Translation strings */
+  translations: {
+    gatherTitle: string;
+    configureGenerationTitle: string;
+    configureSearchTitle: string;
+    searchResultsTitle: string;
+    annotationLabel: string;
+    sourceResourceLabel: string;
+    motivationLabel: string;
+    sourceContextLabel: string;
+    entityTypesLabel: string;
+    graphContextLabel: string;
+    connectionsLabel: string;
+    citedByLabel: string;
+    siblingTypesLabel: string;
+    loadingContext: string;
+    failedContext: string;
+    cancel: string;
+    search: string;
+    searching: string;
+    generate: string;
+    compose: string;
+    back: string;
+    link: string;
+    score: string;
+    noResults: string;
+    resourceTitle: string;
+    resourceTitlePlaceholder: string;
+    additionalInstructions: string;
+    additionalInstructionsPlaceholder: string;
+    language: string;
+    languageHelp: string;
+    creativity: string;
+    creativityFocused: string;
+    creativityCreative: string;
+    maxLength: string;
+    maxLengthHelp: string;
+    maxResults: string;
+    semanticScoring: string;
+    semanticScoringHelp: string;
+  };
+}
+
+export function ReferenceWizardModal({
+  isOpen,
+  onClose,
+  annotationId,
+  resourceId,
+  defaultTitle,
+  entityTypes,
+  locale,
+  context,
+  contextLoading,
+  contextError,
+  eventBus,
+  onGenerateSubmit,
+  onLinkResource,
+  onComposeNavigate,
+  translations: t,
+}: ReferenceWizardModalProps) {
+  const [wizardStep, setWizardStep] = useState<WizardStep>({ step: 'gather' });
+  const [isSearching, setIsSearching] = useState(false);
+
+  // Reset to gather step when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      setWizardStep({ step: 'gather' });
+      setIsSearching(false);
+    }
+  }, [isOpen]);
+
+  // Subscribe to search results
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const subscription = eventBus.get('bind:search-results').subscribe((event) => {
+      if (annotationId && event.referenceId === annotationId) {
+        setIsSearching(false);
+        setWizardStep({ step: 'search-results', results: event.results as ScoredResult[] });
+      }
+    });
+
+    return () => subscription.unsubscribe();
+  }, [isOpen, eventBus, annotationId]);
+
+  const handleBind = useCallback(() => {
+    setWizardStep({ step: 'configure-search' });
+  }, []);
+
+  const handleGenerate = useCallback(() => {
+    setWizardStep({ step: 'configure-generation' });
+  }, []);
+
+  const handleCompose = useCallback(() => {
+    if (!context || !annotationId || !resourceId) return;
+    onComposeNavigate(context, annotationId, resourceId, defaultTitle, entityTypes);
+    onClose();
+  }, [context, annotationId, resourceId, defaultTitle, entityTypes, onComposeNavigate, onClose]);
+
+  const handleBackToGather = useCallback(() => {
+    setWizardStep({ step: 'gather' });
+  }, []);
+
+  const handleSearchSubmit = useCallback((config: SearchConfig) => {
+    if (!annotationId || !context) return;
+    setIsSearching(true);
+    eventBus.get('bind:search-requested').next({
+      referenceId: annotationId,
+      context,
+      limit: config.limit,
+      useSemanticScoring: config.useSemanticScoring,
+    });
+    // Stay on configure-search until results arrive (subscription above handles transition)
+  }, [annotationId, context, eventBus]);
+
+  const handleGenerateSubmit = useCallback((config: GenerationConfig) => {
+    if (!annotationId) return;
+    onGenerateSubmit(annotationId, config);
+    onClose();
+  }, [annotationId, onGenerateSubmit, onClose]);
+
+  const handleLink = useCallback((targetResourceId: string) => {
+    if (!annotationId) return;
+    onLinkResource(annotationId, targetResourceId);
+    onClose();
+  }, [annotationId, onLinkResource, onClose]);
+
+  // Determine title based on step
+  const stepTitle = wizardStep.step === 'gather'
+    ? t.gatherTitle
+    : wizardStep.step === 'configure-generation'
+      ? t.configureGenerationTitle
+      : wizardStep.step === 'configure-search'
+        ? t.configureSearchTitle
+        : t.searchResultsTitle;
+
+  return (
+    <Transition appear show={isOpen}>
+      <Dialog as="div" className="semiont-search-modal" onClose={onClose}>
+        {/* Backdrop */}
+        <TransitionChild
+          enter="ease-out duration-200"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-150"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="semiont-search-modal__backdrop" />
+        </TransitionChild>
+
+        {/* Modal panel */}
+        <div className="semiont-search-modal__wrapper">
+          <div className="semiont-search-modal__centering semiont-search-modal__centering--center">
+            <TransitionChild
+              enter="ease-out duration-200"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-150"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <DialogPanel className={`semiont-search-modal__panel semiont-search-modal__panel--with-border${wizardStep.step === 'search-results' ? ' semiont-search-modal__panel--wide' : ''}`}>
+                <div className="semiont-search-modal__header">
+                  <DialogTitle className="semiont-search-modal__title">
+                    {stepTitle}
+                  </DialogTitle>
+                  <button
+                    onClick={onClose}
+                    className="semiont-search-modal__close-button"
+                    aria-label="Close"
+                  >
+                    ✕
+                  </button>
+                </div>
+
+                {wizardStep.step === 'gather' && (
+                  <GatherContextStep
+                    context={context}
+                    contextLoading={contextLoading}
+                    contextError={contextError}
+                    onCancel={onClose}
+                    onBind={handleBind}
+                    onGenerate={handleGenerate}
+                    onCompose={handleCompose}
+                    translations={{
+                      title: t.gatherTitle,
+                      annotationLabel: t.annotationLabel,
+                      sourceResourceLabel: t.sourceResourceLabel,
+                      motivationLabel: t.motivationLabel,
+                      sourceContextLabel: t.sourceContextLabel,
+                      entityTypesLabel: t.entityTypesLabel,
+                      graphContextLabel: t.graphContextLabel,
+                      connectionsLabel: t.connectionsLabel,
+                      citedByLabel: t.citedByLabel,
+                      siblingTypesLabel: t.siblingTypesLabel,
+                      loadingContext: t.loadingContext,
+                      failedContext: t.failedContext,
+                      cancel: t.cancel,
+                      search: t.search,
+                      generate: t.generate,
+                      compose: t.compose,
+                    }}
+                  />
+                )}
+
+                {wizardStep.step === 'configure-generation' && context && (
+                  <ConfigureGenerationStep
+                    defaultTitle={defaultTitle}
+                    locale={locale}
+                    context={context}
+                    onBack={handleBackToGather}
+                    onCancel={onClose}
+                    onGenerate={handleGenerateSubmit}
+                    translations={{
+                      resourceTitle: t.resourceTitle,
+                      resourceTitlePlaceholder: t.resourceTitlePlaceholder,
+                      additionalInstructions: t.additionalInstructions,
+                      additionalInstructionsPlaceholder: t.additionalInstructionsPlaceholder,
+                      language: t.language,
+                      languageHelp: t.languageHelp,
+                      creativity: t.creativity,
+                      creativityFocused: t.creativityFocused,
+                      creativityCreative: t.creativityCreative,
+                      maxLength: t.maxLength,
+                      maxLengthHelp: t.maxLengthHelp,
+                      cancel: t.cancel,
+                      back: t.back,
+                      generate: t.generate,
+                    }}
+                  />
+                )}
+
+                {wizardStep.step === 'configure-search' && (
+                  <ConfigureSearchStep
+                    isSearching={isSearching}
+                    onBack={handleBackToGather}
+                    onCancel={onClose}
+                    onSearch={handleSearchSubmit}
+                    translations={{
+                      maxResults: t.maxResults,
+                      semanticScoring: t.semanticScoring,
+                      semanticScoringHelp: t.semanticScoringHelp,
+                      cancel: t.cancel,
+                      back: t.back,
+                      search: t.search,
+                      searching: t.searching,
+                    }}
+                  />
+                )}
+
+                {wizardStep.step === 'search-results' && context && (
+                  <SearchResultsStep
+                    results={wizardStep.results}
+                    context={context}
+                    onLink={handleLink}
+                    onBack={handleBackToGather}
+                    onCancel={onClose}
+                    translations={{
+                      noResults: t.noResults,
+                      link: t.link,
+                      back: t.back,
+                      cancel: t.cancel,
+                      score: t.score,
+                      annotationLabel: t.annotationLabel,
+                      sourceResourceLabel: t.sourceResourceLabel,
+                      motivationLabel: t.motivationLabel,
+                      sourceContextLabel: t.sourceContextLabel,
+                      entityTypesLabel: t.entityTypesLabel,
+                      graphContextLabel: t.graphContextLabel,
+                      connectionsLabel: t.connectionsLabel,
+                      citedByLabel: t.citedByLabel,
+                      siblingTypesLabel: t.siblingTypesLabel,
+                    }}
+                  />
+                )}
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+}

package/src/components/modals/ResourceSearchModal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect, Fragment } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
 import { useResources } from '../../lib/api-hooks';
 import { useSearchAnnouncements } from '../../hooks/useSearchAnnouncements';
@@ -103,12 +103,11 @@ export function ResourceSearchModal({
   };
 
   return (
-    <Transition appear show={isOpen} as={Fragment}>
+    <Transition appear show={isOpen}>
       <Dialog as="div" className="semiont-search-modal semiont-search-modal--resource" onClose={onClose}>
         {/* Backdrop */}
         <TransitionChild
-          as={Fragment}
-          enter="ease-out duration-200"
+                   enter="ease-out duration-200"
           enterFrom="opacity-0"
           enterTo="opacity-100"
           leave="ease-in duration-150"
@@ -122,8 +121,7 @@ export function ResourceSearchModal({
         <div className="semiont-search-modal__wrapper">
           <div className="semiont-search-modal__centering semiont-search-modal__centering--center">
             <TransitionChild
-              as={Fragment}
-              enter="ease-out duration-200"
+                           enter="ease-out duration-200"
               enterFrom="opacity-0 scale-95"
               enterTo="opacity-100 scale-100"
               leave="ease-in duration-150"

package/src/components/modals/SearchModal.css

@@ -461,3 +461,46 @@
 [data-theme="dark"] .semiont-search-modal__resource-media-type {
   color: var(--semiont-color-gray-500);
 }
+
+/* Wide panel variant for two-pane layouts */
+.semiont-search-modal__panel--wide {
+  max-width: 1100px;
+}
+
+/* Two-pane layout for search results + context */
+.semiont-search-results__two-pane {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.semiont-search-results__context-pane {
+  flex: 0 0 340px;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.semiont-search-results__results-pane {
+  flex: 1;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+/* Narrow screens: stack vertically, context above results */
+@media (max-width: 640px) {
+  .semiont-search-modal__panel--wide {
+    max-width: 100%;
+  }
+
+  .semiont-search-results__two-pane {
+    flex-direction: column;
+  }
+
+  .semiont-search-results__context-pane {
+    flex: none;
+    max-height: 200px;
+  }
+
+  .semiont-search-results__results-pane {
+    max-height: 350px;
+  }
+}

package/src/components/modals/SearchModal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect, Fragment } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';
 // import { useResources } from '../../hooks/useResources';
 import { useSearchAnnouncements } from '../../hooks/useSearchAnnouncements';
@@ -134,12 +134,11 @@ export function SearchModal({
   };
 
   return (
-    <Transition appear show={isOpen} as={Fragment}>
+    <Transition appear show={isOpen}>
       <Dialog as="div" className="semiont-search-modal" onClose={onClose}>
         {/* Backdrop */}
         <TransitionChild
-          as={Fragment}
-          enter="ease-out duration-200"
+                   enter="ease-out duration-200"
           enterFrom="opacity-0"
           enterTo="opacity-100"
           leave="ease-in duration-150"
@@ -153,8 +152,7 @@ export function SearchModal({
         <div className="semiont-search-modal__wrapper">
           <div className="semiont-search-modal__centering">
             <TransitionChild
-              as={Fragment}
-              enter="ease-out duration-200"
+                           enter="ease-out duration-200"
               enterFrom="opacity-0 scale-95"
               enterTo="opacity-100 scale-100"
               leave="ease-in duration-150"

package/src/components/modals/SearchResultsStep.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import type { components, GatheredContext } from '@semiont/core';
+import { ContextSummary } from './ContextSummary';
+import type { ContextSummaryTranslations } from './ContextSummary';
+
+type ResourceDescriptor = components['schemas']['ResourceDescriptor'];
+
+export type ScoredResult = ResourceDescriptor & {
+  score?: number;
+  matchReason?: string;
+};
+
+export interface SearchResultsStepProps {
+  results: ScoredResult[];
+  context: GatheredContext;
+  onLink: (resourceId: string) => void;
+  onBack: () => void;
+  onCancel: () => void;
+  translations: {
+    noResults: string;
+    link: string;
+    back: string;
+    cancel: string;
+    score: string;
+  } & ContextSummaryTranslations;
+}
+
+export function SearchResultsStep({
+  results,
+  context,
+  onLink,
+  onBack,
+  onCancel,
+  translations: t,
+}: SearchResultsStepProps) {
+  return (
+    <>
+      {/* Two-pane layout: context left, results right */}
+      <div className="semiont-search-results__two-pane">
+        {/* Left: Gathered Context */}
+        <div className="semiont-search-results__context-pane">
+          <ContextSummary context={context} translations={t} />
+        </div>
+
+        {/* Right: Results List */}
+        <div className="semiont-search-results__results-pane">
+          {results.length === 0 ? (
+            <div className="semiont-modal__empty-state" style={{ textAlign: 'center', padding: '2rem 0' }}>
+              {t.noResults}
+            </div>
+          ) : (
+            results.map((result) => {
+              const id = result['@id'];
+              return (
+                <div
+                  key={id}
+                  style={{
+                    padding: '0.75rem',
+                    borderBottom: '1px solid var(--semiont-border-primary)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: '0.75rem',
+                  }}
+                >
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontWeight: 500, color: 'var(--semiont-text-primary)' }}>
+                      {result.name}
+                    </div>
+                    {result.description && (
+                      <div style={{
+                        fontSize: 'var(--semiont-text-sm)',
+                        color: 'var(--semiont-text-secondary)',
+                        marginTop: '0.25rem',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}>
+                        {result.description}
+                      </div>
+                    )}
+                    <div style={{ fontSize: 'var(--semiont-text-xs)', color: 'var(--semiont-text-tertiary)', marginTop: '0.25rem', display: 'flex', gap: '0.5rem' }}>
+                      {result.score !== undefined && (
+                        <span>{t.score}: {result.score}</span>
+                      )}
+                      {result.matchReason && (
+                        <span>{result.matchReason}</span>
+                      )}
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => onLink(id)}
+                    className="semiont-button--primary"
+                    style={{ flexShrink: 0 }}
+                  >
+                    🔗 {t.link}
+                  </button>
+                </div>
+              );
+            })
+          )}
+        </div>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="semiont-modal__actions" style={{ paddingTop: '0.5rem' }}>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="semiont-button--secondary semiont-button--flex"
+        >
+          ✕ {t.cancel}
+        </button>
+        <button
+          type="button"
+          onClick={onBack}
+          className="semiont-button--secondary semiont-button--flex"
+        >
+          ◀ {t.back}
+        </button>
+      </div>
+    </>
+  );
+}

package/src/components/pdf-annotation/PdfAnnotationCanvas.tsx

@@ -2,7 +2,7 @@
 
 import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import { createHoverHandlers } from '../../hooks/useBeckonFlow';
-import type { components, ResourceUri } from '@semiont/core';
+import type { components, ResourceId } from '@semiont/core';
 import { getTargetSelector } from '@semiont/api-client';
 import type { SelectionMotivation } from '../annotation/AnnotateToolbar';
 import type { EventBus } from "@semiont/core"
@@ -48,7 +48,7 @@ function getMotivationColor(motivation: SelectionMotivation | null): { stroke: s
 }
 
 interface PdfAnnotationCanvasProps {
-  resourceUri: ResourceUri;
+  resourceUri: ResourceId;
   existingAnnotations?: Annotation[];
   drawingMode: DrawingMode;
   selectedMotivation?: SelectionMotivation | null;
@@ -76,8 +76,7 @@ export function PdfAnnotationCanvas({
   hoverDelayMs = 150
 }: PdfAnnotationCanvasProps) {
   const pdfUrl = useMemo(() => {
-    const resourceId = resourceUri.split('/').pop();
-    return `/api/resources/${resourceId}`;
+    return `/api/resources/${resourceUri}`;
   }, [resourceUri]);
 
   // Removed excessive logging