@semiont/react-ui 0.2.46 → 0.3.1

package/src/features/resource-viewer/__tests__/YieldFlowIntegration.test.tsx

@@ -27,8 +27,8 @@ import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
 import { useBindFlow } from '../../../hooks/useBindFlow';
 import { SSEClient } from '@semiont/api-client';
-import type { ResourceUri, AnnotationUri } from '@semiont/core';
-import { resourceUri, annotationUri } from '@semiont/core';
+import type { AnnotationId, ResourceId } from '@semiont/core';
+import { resourceId, annotationId } from '@semiont/core';
 import type { Emitter } from 'mitt';
 import type { EventMap } from '@semiont/core';
 
@@ -76,38 +76,17 @@ describe('Generation Flow - Feature Integration', () => {
     vi.restoreAllMocks();
   });
 
-  it('should open modal when yield:modal-open event is emitted', async () => {
-    const testResourceUri = resourceUri('http://localhost:4000/resources/test-resource');
-    const testAnnotationUri = annotationUri('http://localhost:4000/resources/test-resource/annotations/test-annotation');
-
-    const { emitModalOpen } = renderYieldFlow(
-      testResourceUri
-    );
-
-    // Emit modal open event
-    act(() => {
-      emitModalOpen(testAnnotationUri, testResourceUri, 'Test Reference');
-    });
-
-    // Verify modal state updated
-    await waitFor(() => {
-      expect(screen.getByTestId('modal-open')).toHaveTextContent('true');
-      expect(screen.getByTestId('reference-id')).toHaveTextContent(testAnnotationUri);
-      expect(screen.getByTestId('default-title')).toHaveTextContent('Test Reference');
-    });
-  });
-
   it('should call yieldResourceFromAnnotation exactly ONCE when generation starts', async () => {
-    const testResourceUri = resourceUri('http://localhost:4000/resources/test-resource');
-    const testAnnotationUri = annotationUri('http://localhost:4000/resources/test-resource/annotations/test-annotation');
+    const testResourceId = resourceId('test-resource');
+    const testAnnotationId = annotationId('test-annotation');
 
     const { emitGenerationStart, getEventBus } = renderYieldFlow(
-      testResourceUri
+      testResourceId
     );
 
     // Trigger generation with full options
     act(() => {
-      emitGenerationStart(testAnnotationUri, testResourceUri, {
+      emitGenerationStart(testAnnotationId, testResourceId, {
         title: 'Generated Document',
         prompt: 'Create a comprehensive document',
         language: 'en',
@@ -125,10 +104,10 @@ describe('Generation Flow - Feature Integration', () => {
       expect(generateResourceSpy).toHaveBeenCalledTimes(1);
     });
 
-    // Verify correct parameters
+    // Verify correct parameters — resourceId and annotationId are now bare IDs
     expect(generateResourceSpy).toHaveBeenCalledWith(
-      testResourceUri,
-      testAnnotationUri,
+      testResourceId,
+      testAnnotationId,
       {
         title: 'Generated Document',
         prompt: 'Create a comprehensive document',
@@ -145,16 +124,16 @@ describe('Generation Flow - Feature Integration', () => {
   });
 
   it('should propagate SSE progress events to useYieldProgress state', async () => {
-    const testResourceUri = resourceUri('http://localhost:4000/resources/test-resource');
-    const testAnnotationUri = annotationUri('http://localhost:4000/resources/test-resource/annotations/test-annotation');
+    const testResourceId = resourceId('test-resource');
+    const testAnnotationId = annotationId('test-annotation');
 
     const { emitGenerationStart, getEventBus } = renderYieldFlow(
-      testResourceUri
+      testResourceId
     );
 
     // Start generation
     act(() => {
-      emitGenerationStart(testAnnotationUri, testResourceUri, {
+      emitGenerationStart(testAnnotationId, testResourceId, {
         title: 'Test Doc',
         context: { sourceText: 'test' },
       });
@@ -182,16 +161,16 @@ describe('Generation Flow - Feature Integration', () => {
   });
 
   it('should handle multiple progress updates correctly', async () => {
-    const testResourceUri = resourceUri('http://localhost:4000/resources/test-resource');
-    const testAnnotationUri = annotationUri('http://localhost:4000/resources/test-resource/annotations/test-annotation');
+    const testResourceId = resourceId('test-resource');
+    const testAnnotationId = annotationId('test-annotation');
 
     const { emitGenerationStart, getEventBus } = renderYieldFlow(
-      testResourceUri
+      testResourceId
     );
 
     // Start generation
     act(() => {
-      emitGenerationStart(testAnnotationUri, testResourceUri, {
+      emitGenerationStart(testAnnotationId, testResourceId, {
         title: 'Test',
         context: { sourceText: 'test' },
       });
@@ -231,7 +210,7 @@ describe('Generation Flow - Feature Integration', () => {
     act(() => {
       getEventBus().get('yield:finished').next({
         status: 'complete',
-        referenceId: testAnnotationUri,
+        referenceId: testAnnotationId,
         message: 'Document created successfully',
         percentage: 100,
         resourceName: 'Generated Document',
@@ -245,16 +224,16 @@ describe('Generation Flow - Feature Integration', () => {
   });
 
   it('should show success toast on generation complete', async () => {
-    const testResourceUri = resourceUri('http://localhost:4000/resources/test-resource');
-    const testAnnotationUri = annotationUri('http://localhost:4000/resources/test-resource/annotations/test-annotation');
+    const testResourceId = resourceId('test-resource');
+    const testAnnotationId = annotationId('test-annotation');
 
     const { emitGenerationStart, getEventBus } = renderYieldFlow(
-      testResourceUri
+      testResourceId
     );
 
     // Start generation
     act(() => {
-      emitGenerationStart(testAnnotationUri, testResourceUri, {
+      emitGenerationStart(testAnnotationId, testResourceId, {
         title: 'Test',
         context: { sourceText: 'test' },
       });
@@ -277,7 +256,7 @@ describe('Generation Flow - Feature Integration', () => {
     act(() => {
       getEventBus().get('yield:finished').next({
         status: 'complete',
-        referenceId: testAnnotationUri,
+        referenceId: testAnnotationId,
         resourceName: 'Generated Document',
         percentage: 100,
       });
@@ -288,16 +267,16 @@ describe('Generation Flow - Feature Integration', () => {
   });
 
   it('should clear progress on generation failure', async () => {
-    const testResourceUri = resourceUri('http://localhost:4000/resources/test-resource');
-    const testAnnotationUri = annotationUri('http://localhost:4000/resources/test-resource/annotations/test-annotation');
+    const testResourceId = resourceId('test-resource');
+    const testAnnotationId = annotationId('test-annotation');
 
     const { emitGenerationStart, getEventBus } = renderYieldFlow(
-      testResourceUri
+      testResourceId
     );
 
     // Start generation
     act(() => {
-      emitGenerationStart(testAnnotationUri, testResourceUri, {
+      emitGenerationStart(testAnnotationId, testResourceId, {
         title: 'Test',
         context: { sourceText: 'test' },
       });
@@ -328,11 +307,11 @@ describe('Generation Flow - Feature Integration', () => {
   });
 
   it('should only call API once even with multiple event listeners', async () => {
-    const testResourceUri = resourceUri('http://localhost:4000/resources/test-resource');
-    const testAnnotationUri = annotationUri('http://localhost:4000/resources/test-resource/annotations/test-annotation');
+    const testResourceId = resourceId('test-resource');
+    const testAnnotationId = annotationId('test-annotation');
 
     const { emitGenerationStart, getEventBus } = renderYieldFlow(
-      testResourceUri
+      testResourceId
     );
 
     // Add an additional event listener (simulating multiple subscribers)
@@ -341,7 +320,7 @@ describe('Generation Flow - Feature Integration', () => {
 
     // Trigger generation
     act(() => {
-      emitGenerationStart(testAnnotationUri, testResourceUri, {
+      emitGenerationStart(testAnnotationId, testResourceId, {
         title: 'Test',
         context: { sourceText: 'test' },
       });
@@ -362,16 +341,16 @@ describe('Generation Flow - Feature Integration', () => {
   });
 
   it('should forward final chunk as progress before emitting complete', async () => {
-    const testResourceUri = resourceUri('http://localhost:4000/resources/test-resource');
-    const testAnnotationUri = annotationUri('http://localhost:4000/resources/test-resource/annotations/test-annotation');
+    const testResourceId = resourceId('test-resource');
+    const testAnnotationId = annotationId('test-annotation');
 
     const { emitGenerationStart, getEventBus } = renderYieldFlow(
-      testResourceUri
+      testResourceId
     );
 
     // Start generation
     act(() => {
-      emitGenerationStart(testAnnotationUri, testResourceUri, {
+      emitGenerationStart(testAnnotationId, testResourceId, {
         title: 'Test',
         context: { sourceText: 'test' },
       });
@@ -385,7 +364,7 @@ describe('Generation Flow - Feature Integration', () => {
     act(() => {
       getEventBus().get('yield:finished').next({
         status: 'complete',
-        referenceId: testAnnotationUri,
+        referenceId: testAnnotationId,
         message: 'Document created: My Document',
         resourceName: 'My Document',
         percentage: 100,
@@ -405,7 +384,7 @@ describe('Generation Flow - Feature Integration', () => {
  * Returns methods to interact with the rendered component
  */
 function renderYieldFlow(
-  testResourceUri: ResourceUri
+  testResourceId: ResourceId
 ) {
   let eventBusInstance: Emitter<EventMap>;
 
@@ -414,7 +393,7 @@ function renderYieldFlow(
     eventBusInstance = useEventBus();
 
     // Set up resolution flow (resolve:update-body, resolve:link)
-    useBindFlow(testResourceUri);
+    useBindFlow(testResourceId);
 
     return null;
   }
@@ -422,23 +401,18 @@ function renderYieldFlow(
   // Test harness component that uses the hook
   function YieldFlowTestHarness() {
     const {
+      isGenerating,
       generationProgress,
-      generationModalOpen,
-      generationReferenceId,
-      generationDefaultTitle,
     } = useYieldFlow(
       'en',
-      testResourceUri.split('/resources/')[1] || 'test-resource',
+      testResourceId,
       vi.fn()
     );
 
     return (
       <div>
-        <div data-testid="modal-open">{generationModalOpen ? 'true' : 'false'}</div>
-        <div data-testid="reference-id">{generationReferenceId || 'none'}</div>
-        <div data-testid="default-title">{generationDefaultTitle || 'none'}</div>
         <div data-testid="is-generating">
-          {generationProgress ? 'true' : 'false'}
+          {isGenerating ? 'true' : 'false'}
         </div>
         <div data-testid="progress">
           {generationProgress?.message || 'No progress'}
@@ -459,20 +433,9 @@ function renderYieldFlow(
   );
 
   return {
-    emitModalOpen: (
-      annotationUri: AnnotationUri,
-      resourceUri: ResourceUri,
-      defaultTitle: string
-    ) => {
-      eventBusInstance.get('yield:modal-open').next({
-        annotationUri,
-        resourceUri,
-        defaultTitle,
-      });
-    },
     emitGenerationStart: (
-      annotationUri: AnnotationUri,
-      resourceUri: ResourceUri,
+      aId: AnnotationId,
+      rId: ResourceId,
       options: {
         title: string;
         prompt?: string;
@@ -483,8 +446,8 @@ function renderYieldFlow(
       }
     ) => {
       eventBusInstance.get('yield:request').next({
-        annotationUri,
-        resourceUri,
+        annotationId: aId,
+        resourceId: rId,
         options,
       });
     },

package/src/features/resource-viewer/__tests__/annotation-progress-flow.test.tsx

@@ -180,7 +180,7 @@ describe('Detection Progress Flow Integration (Layer 3)', () => {
     expect(screen.queryByText(/Analyzing/)).not.toBeInTheDocument();
 
     // Click annotate button
-    const annotateButton = screen.getByRole('button', { name: /✨ Annotate/ });
+    const annotateButton = screen.getByRole('button', { name: /✨\s*Annotate/ });
     await user.click(annotateButton);
 
     // Simulate SSE progress chunk #1: Starting
@@ -244,7 +244,7 @@ describe('Detection Progress Flow Integration (Layer 3)', () => {
     renderDetectionFlow();
 
     // Click annotate button
-    const annotateButton = screen.getByRole('button', { name: /✨ Annotate/ });
+    const annotateButton = screen.getByRole('button', { name: /✨\s*Annotate/ });
     await user.click(annotateButton);
 
     // Simulate initial progress
@@ -284,7 +284,7 @@ describe('Detection Progress Flow Integration (Layer 3)', () => {
 
     renderDetectionFlow();
 
-    const annotateButton = screen.getByRole('button', { name: /✨ Annotate/ });
+    const annotateButton = screen.getByRole('button', { name: /✨\s*Annotate/ });
     await user.click(annotateButton);
 
     // Simulate progress with request parameters
@@ -310,7 +310,7 @@ describe('Detection Progress Flow Integration (Layer 3)', () => {
 
     renderDetectionFlow();
 
-    const annotateButton = screen.getByRole('button', { name: /✨ Annotate/ });
+    const annotateButton = screen.getByRole('button', { name: /✨\s*Annotate/ });
     await user.click(annotateButton);
 
     // Show progress

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);
@@ -544,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}
@@ -601,57 +668,64 @@ 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'),
+          userHintLabel: tw('userHintLabel'),
+          userHintPlaceholder: tw('userHintPlaceholder'),
+          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]': {},