@semiont/react-ui 0.2.45 → 0.3.0

package/src/features/resource-viewer/components/ResourceViewerPage.tsx

@@ -7,10 +7,9 @@
 
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import type { components, ResourceUri, ResourceEvent } from '@semiont/core';
-import { resourceAnnotationUri } from '@semiont/core';
+import type { components, ResourceId, ResourceEvent, GatheredContext } from '@semiont/core';
+import { annotationId } from '@semiont/core';
 import { getLanguage, getPrimaryRepresentation, getPrimaryMediaType } from '@semiont/api-client';
-import { uriToAnnotationId } from '@semiont/core';
 import { ANNOTATORS } from '@semiont/react-ui';
 import { ErrorBoundary } from '@semiont/react-ui';
 import { AnnotationHistory } from '@semiont/react-ui';
@@ -20,7 +19,6 @@ import { CollaborationPanel } from '@semiont/react-ui';
 import { JsonLdPanel } from '@semiont/react-ui';
 import { Toolbar } from '@semiont/react-ui';
 import { useResourceLoadingAnnouncements } from '@semiont/react-ui';
-import type { GenerationOptions } from '@semiont/react-ui';
 import { ResourceViewer } from '@semiont/react-ui';
 import { QUERY_KEYS } from '../../../lib/query-keys';
 import { useResources, useEntityTypes } from '../../../lib/api-hooks';
@@ -43,6 +41,9 @@ import { useBeckonFlow } from '../../../hooks/useBeckonFlow';
 import { usePanelBrowse } from '../../../hooks/usePanelBrowse';
 import { useYieldFlow } from '../../../hooks/useYieldFlow';
 import { useContextGatherFlow } from '../../../hooks/useContextGatherFlow';
+import { useTranslations } from '../../../contexts/TranslationContext';
+import { ReferenceWizardModal } from '../../../components/modals/ReferenceWizardModal';
+import type { GenerationConfig } from '../../../components/modals/ConfigureGenerationStep';
 
 type SemiontResource = components['schemas']['ResourceDescriptor'];
 type Annotation = components['schemas']['Annotation'];
@@ -56,7 +57,7 @@ export interface ResourceViewerPageProps {
   /**
    * Resource URI
    */
-  rUri: ResourceUri;
+  rUri: ResourceId;
 
   /**
    * Current locale
@@ -77,8 +78,6 @@ export interface ResourceViewerPageProps {
    * Component dependencies - passed from framework layer
    */
   ToolbarPanels: React.ComponentType<any>;
-  SearchResourcesModal: React.ComponentType<any>;
-  GenerationConfigModal: React.ComponentType<any>;
 
   /**
    * Callback to refetch document from parent
@@ -120,10 +119,11 @@ export function ResourceViewerPage({
   Link,
   routes,
   ToolbarPanels,
-  SearchResourcesModal,
-  GenerationConfigModal,
   refetchDocument,
 }: ResourceViewerPageProps) {
+  // Translations
+  const tw = useTranslations('ReferenceWizard');
+
   // Get unified event bus for subscribing to UI events
   const eventBus = useEventBus();
   const client = useApiClient();
@@ -160,16 +160,85 @@ export function ResourceViewerPage({
   const { hoveredAnnotationId } = useBeckonFlow();
   const { assistingMotivation, progress, pendingAnnotation } = useMarkFlow(rUri);
   const { activePanel, scrollToAnnotationId, panelInitialTab, onScrollCompleted } = usePanelBrowse();
-  const { searchModalOpen, pendingReferenceId, onCloseSearchModal } = useBindFlow(rUri);
+  useBindFlow(rUri);
   const {
     generationProgress,
-    generationModalOpen,
-    generationReferenceId,
-    generationDefaultTitle,
     onGenerateDocument,
-    onCloseGenerationModal,
-  } = useYieldFlow(locale, rUri.split('/').pop() || '', clearNewAnnotationId);
-  const { gatherContext, gatherLoading, gatherError } = useContextGatherFlow(eventBus, { client, resourceUri: rUri });
+  } = useYieldFlow(locale, rUri, clearNewAnnotationId);
+  const { gatherContext, gatherLoading, gatherError } = useContextGatherFlow(eventBus, { client, resourceId: rUri });
+
+  // Wizard state — driven by bind:initiate from ReferenceEntry
+  const [wizardOpen, setWizardOpen] = useState(false);
+  const [wizardAnnotationId, setWizardAnnotationId] = useState<string | null>(null);
+  const [wizardResourceId, setWizardResourceId] = useState<string | null>(null);
+  const [wizardDefaultTitle, setWizardDefaultTitle] = useState('');
+  const [wizardEntityTypes, setWizardEntityTypes] = useState<string[]>([]);
+
+  useEffect(() => {
+    const subscription = eventBus.get('bind:initiate').subscribe((event) => {
+      setWizardAnnotationId(event.annotationId);
+      setWizardResourceId(event.resourceId);
+      setWizardDefaultTitle(event.defaultTitle);
+      setWizardEntityTypes(event.entityTypes);
+      setWizardOpen(true);
+
+      // Trigger context gathering
+      eventBus.get('gather:requested').next({ annotationId: event.annotationId, resourceId: event.resourceId });
+    });
+    return () => subscription.unsubscribe();
+  }, [eventBus]);
+
+  const handleWizardClose = useCallback(() => {
+    setWizardOpen(false);
+  }, []);
+
+  const handleWizardGenerateSubmit = useCallback((referenceId: string, config: GenerationConfig) => {
+    onGenerateDocument(referenceId, {
+      title: config.title,
+      prompt: config.prompt,
+      language: config.language,
+      temperature: config.temperature,
+      maxTokens: config.maxTokens,
+      context: config.context,
+    });
+  }, [onGenerateDocument]);
+
+  const handleWizardLinkResource = useCallback((referenceId: string, targetResourceId: string) => {
+    eventBus.get('bind:update-body').next({
+      annotationId: annotationId(referenceId),
+      resourceId: rUri,
+      operations: [{
+        op: 'add',
+        item: {
+          type: 'SpecificResource' as const,
+          source: targetResourceId,
+          purpose: 'linking' as const,
+        },
+      }],
+    });
+    showSuccess('Reference linked successfully');
+  }, [rUri, showSuccess]); // eventBus is stable singleton
+
+  const handleWizardComposeNavigate = useCallback((
+    context: GatheredContext,
+    annId: string,
+    resId: string,
+    title: string,
+    entTypes: string[],
+  ) => {
+    // Store context in sessionStorage for the compose page
+    sessionStorage.setItem(`gather-context:${annId}`, JSON.stringify(context));
+    const params = new URLSearchParams({
+      annotationUri: annId,
+      sourceDocumentId: resId,
+      name: title,
+      entityTypes: entTypes.join(','),
+    });
+    eventBus.get('browse:router-push').next({
+      path: `/know/compose?${params.toString()}`,
+      reason: 'compose-from-wizard',
+    });
+  }, []); // eventBus is stable singleton
 
   // Debounced invalidation for real-time events
   const debouncedInvalidateAnnotations = useDebouncedCallback(
@@ -183,11 +252,10 @@ export function ResourceViewerPage({
   // Add resource to open tabs when it loads
   useEffect(() => {
     if (resource && rUri) {
-      const resourceIdSegment = rUri.split('/').pop() || '';
       const mediaType = getPrimaryMediaType(resource);
-      addResource(resourceIdSegment, resource.name, mediaType || undefined);
+      addResource(rUri, resource.name, mediaType || undefined);
       if (typeof localStorage !== 'undefined') {
-        localStorage.setItem('lastViewedDocumentId', resourceIdSegment);
+        localStorage.setItem('lastViewedDocumentId', rUri);
       }
     }
   }, [resource, rUri, addResource]);
@@ -213,8 +281,7 @@ export function ResourceViewerPage({
         return {
           ...old,
           annotations: old.annotations.map((annotation: any) => {
-            const annotationIdSegment = uriToAnnotationId(annotation.id);
-            if (annotationIdSegment === event.payload.annotationId) {
+            if (annotation.id === event.payload.annotationId) {
               let bodyArray = Array.isArray(annotation.body) ? [...annotation.body] : [];
 
               for (const op of event.payload.operations || []) {
@@ -283,7 +350,7 @@ export function ResourceViewerPage({
   // Event handlers extracted to useCallback (tenet: no inline handlers in useEventSubscriptions)
   const handleResourceArchive = useCallback(async () => {
     try {
-      await updateMutation.mutateAsync({ rUri, data: { archived: true } });
+      await updateMutation.mutateAsync({ id: rUri, data: { archived: true } });
       await refetchDocument();
     } catch (err) {
       console.error('Failed to archive document:', err);
@@ -293,7 +360,7 @@ export function ResourceViewerPage({
 
   const handleResourceUnarchive = useCallback(async () => {
     try {
-      await updateMutation.mutateAsync({ rUri, data: { archived: false } });
+      await updateMutation.mutateAsync({ id: rUri, data: { archived: false } });
       await refetchDocument();
     } catch (err) {
       console.error('Failed to unarchive document:', err);
@@ -361,8 +428,13 @@ export function ResourceViewerPage({
     }
   }, [routes.know]); // eventBus is stable singleton - never in deps
 
+  const handleModeToggled = useCallback(() => {
+    setAnnotateMode(prev => !prev);
+  }, []);
+
   // Event bus subscriptions (combined into single useEventSubscriptions call to prevent hook ordering issues)
   useEventSubscriptions({
+    'mark:mode-toggled': handleModeToggled,
     'mark:archive': handleResourceArchive,
     'mark:unarchive': handleResourceUnarchive,
     'yield:clone': handleResourceClone,
@@ -406,8 +478,8 @@ export function ResourceViewerPage({
   const primaryMediaType = primaryRep?.mediaType;
   const primaryByteSize = primaryRep?.byteSize;
 
-  // Annotate mode state - local UI state only
-  const [annotateMode, _setAnnotateMode] = useState(() => {
+  // Annotate mode state - synced via mark:mode-toggled event from AnnotateToolbar
+  const [annotateMode, setAnnotateMode] = useState(() => {
     if (typeof window !== 'undefined') {
       return localStorage.getItem('annotateMode') === 'true';
     }
@@ -539,7 +611,7 @@ export function ResourceViewerPage({
                 generatingReferenceId={generationProgress?.referenceId ?? null}
                 referencedBy={referencedBy}
                 referencedByLoading={referencedByLoading}
-                resourceId={rUri.split('/').pop() || ''}
+                resourceId={rUri}
                 scrollToAnnotationId={scrollToAnnotationId}
                 hoveredAnnotationId={hoveredAnnotationId}
                 onScrollCompleted={onScrollCompleted}
@@ -596,57 +668,62 @@ export function ResourceViewerPage({
         </div>
       </div>
 
-      {/* Search Resources Modal */}
-      <SearchResourcesModal
-        isOpen={searchModalOpen}
-        onClose={onCloseSearchModal}
-        onSelect={async (documentId: string) => {
-          if (pendingReferenceId) {
-            try {
-              const annotationIdShort = pendingReferenceId.split('/').pop();
-              if (!annotationIdShort) {
-                throw new Error('Invalid reference ID');
-              }
-
-              const resourceIdSegment = rUri.split('/').pop() || '';
-              const nestedUri = `${window.location.origin}/resources/${resourceIdSegment}/annotations/${annotationIdShort}`;
-
-              eventBus.get('bind:update-body').next({
-                annotationUri: resourceAnnotationUri(nestedUri),
-                resourceId: resourceIdSegment,
-                operations: [{
-                  op: 'add',
-                  item: {
-                    type: 'SpecificResource' as const,
-                    source: documentId,
-                    purpose: 'linking' as const,
-                  },
-                }],
-              });
-              showSuccess('Reference linked successfully');
-              // Cache invalidation now handled by mark:body-updated event
-              onCloseSearchModal();
-            } catch (error) {
-              console.error('Failed to link reference:', error);
-              showError('Failed to link reference');
-            }
-          }
-        }}
-      />
-
-      {/* Generation Config Modal */}
-      <GenerationConfigModal
-        isOpen={generationModalOpen}
-        onClose={onCloseGenerationModal}
-        onGenerate={(options: GenerationOptions) => {
-          if (generationReferenceId) {
-            onGenerateDocument(generationReferenceId, options);
-          }
-        }}
-        defaultTitle={generationDefaultTitle}
+      {/* Reference Resolution Wizard */}
+      <ReferenceWizardModal
+        isOpen={wizardOpen}
+        onClose={handleWizardClose}
+        annotationId={wizardAnnotationId}
+        resourceId={wizardResourceId}
+        defaultTitle={wizardDefaultTitle}
+        entityTypes={wizardEntityTypes}
+        locale={locale}
         context={gatherContext}
         contextLoading={gatherLoading}
         contextError={gatherError}
+        eventBus={eventBus}
+        onGenerateSubmit={handleWizardGenerateSubmit}
+        onLinkResource={handleWizardLinkResource}
+        onComposeNavigate={handleWizardComposeNavigate}
+        translations={{
+          gatherTitle: tw('gatherTitle'),
+          configureGenerationTitle: tw('configureGenerationTitle'),
+          configureSearchTitle: tw('configureSearchTitle'),
+          searchResultsTitle: tw('searchResultsTitle'),
+          annotationLabel: tw('annotationLabel'),
+          sourceResourceLabel: tw('sourceResourceLabel'),
+          motivationLabel: tw('motivationLabel'),
+          sourceContextLabel: tw('sourceContextLabel'),
+          entityTypesLabel: tw('entityTypesLabel'),
+          graphContextLabel: tw('graphContextLabel'),
+          connectionsLabel: tw('connectionsLabel'),
+          citedByLabel: tw('citedByLabel'),
+          siblingTypesLabel: tw('siblingTypesLabel'),
+          loadingContext: tw('loadingContext'),
+          failedContext: tw('failedContext'),
+          cancel: tw('cancel'),
+          search: tw('search'),
+          searching: tw('searching'),
+          generate: tw('generate'),
+          compose: tw('compose'),
+          back: tw('back'),
+          link: tw('link'),
+          score: tw('score'),
+          noResults: tw('noResults'),
+          resourceTitle: tw('resourceTitle'),
+          resourceTitlePlaceholder: tw('resourceTitlePlaceholder'),
+          additionalInstructions: tw('additionalInstructions'),
+          additionalInstructionsPlaceholder: tw('additionalInstructionsPlaceholder'),
+          language: tw('language'),
+          languageHelp: tw('languageHelp'),
+          creativity: tw('creativity'),
+          creativityFocused: tw('creativityFocused'),
+          creativityCreative: tw('creativityCreative'),
+          maxLength: tw('maxLength'),
+          maxLengthHelp: tw('maxLengthHelp'),
+          maxResults: tw('maxResults'),
+          semanticScoring: tw('semanticScoring'),
+          semanticScoringHelp: tw('semanticScoringHelp'),
+        }}
       />
     </div>
   );

package/src/integrations/tailwind-plugin.js

@@ -23,7 +23,7 @@ module.exports = plugin(function({ addBase, addComponents, addUtilities, theme }
     '.semiont-button': {
       '@apply relative inline-flex items-center justify-center': {},
       '@apply font-medium transition-all duration-200': {},
-      '@apply focus:outline-none focus:ring-2 focus:ring-offset-2': {},
+      '@apply focus:outline-hidden focus:ring-2 focus:ring-offset-2': {},
       '@apply disabled:opacity-50 disabled:cursor-not-allowed': {},
     },
 
@@ -56,10 +56,10 @@ module.exports = plugin(function({ addBase, addComponents, addUtilities, theme }
 
     // Button sizes
     '.semiont-button[data-size="xs"]': {
-      '@apply px-2 py-1 text-xs rounded min-h-[1.75rem]': {},
+      '@apply px-2 py-1 text-xs rounded-sm min-h-[1.75rem]': {},
     },
     '.semiont-button[data-size="sm"]': {
-      '@apply px-3 py-1.5 text-sm rounded min-h-[2rem]': {},
+      '@apply px-3 py-1.5 text-sm rounded-sm min-h-[2rem]': {},
     },
     '.semiont-button[data-size="md"]': {
       '@apply px-4 py-2 text-base rounded-md min-h-[2.5rem]': {},

package/src/styles/core/buttons.css

@@ -536,6 +536,37 @@
   border-color: var(--semiont-color-primary-400);
 }
 
+/* Generating state pulse — reuses reference-button-pulse keyframes */
+.semiont-button--primary[data-generating="true"] {
+  animation: semiont-button-pulse 1.5s ease-in-out infinite;
+}
+
+[data-theme="dark"] .semiont-button--primary[data-generating="true"] {
+  animation: semiont-button-pulse-dark 1.5s ease-in-out infinite;
+}
+
+@keyframes semiont-button-pulse {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 0 8px 2px rgba(59, 130, 246, 0.5);
+  }
+  50% {
+    transform: scale(1.05);
+    box-shadow: 0 0 16px 4px rgba(59, 130, 246, 0.8);
+  }
+}
+
+@keyframes semiont-button-pulse-dark {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 0 8px 2px rgba(96, 165, 250, 0.6);
+  }
+  50% {
+    transform: scale(1.05);
+    box-shadow: 0 0 16px 4px rgba(96, 165, 250, 0.9);
+  }
+}
+
 /* Large variant */
 .semiont-button--large {
   width: 100%;