@semiont/react-ui 0.2.46 → 0.3.0

package/src/components/resource/panels/ReferenceEntry.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { forwardRef } from 'react';
+import type { Ref } from 'react';
 import type { RouteBuilder } from '../../../contexts/RoutingContext';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import type { components } from '@semiont/core';
+import { annotationId, resourceId } from '@semiont/core';
 import { getAnnotationExactText, isBodyResolved, getBodySource, getFragmentSelector, getSvgSelector, getTargetSelector } from '@semiont/api-client';
 import { getEntityTypes } from '@semiont/ontology';
 import { getResourceIcon } from '../../../lib/resource-utils';
@@ -26,20 +27,18 @@ interface ReferenceEntryProps {
   routes: RouteBuilder;
   annotateMode?: boolean;
   isGenerating?: boolean;
+  ref?: Ref<HTMLDivElement>;
 }
 
-export const ReferenceEntry = forwardRef<HTMLDivElement, ReferenceEntryProps>(
-  function ReferenceEntry(
-    {
-      reference,
-      isFocused,
-      isHovered = false,
-      routes,
-      annotateMode = true,
-      isGenerating = false,
-    },
-    ref
-  ) {
+export function ReferenceEntry({
+  reference,
+  isFocused,
+  isHovered = false,
+  routes,
+  annotateMode = true,
+  isGenerating = false,
+  ref,
+}: ReferenceEntryProps) {
   const t = useTranslations('ReferencesPanel');
   const eventBus = useEventBus();
   const navigate = useObservableExternalNavigation();
@@ -64,56 +63,46 @@ export const ReferenceEntry = forwardRef<HTMLDivElement, ReferenceEntryProps>(
 
   const handleOpen = () => {
     if (resolvedResourceUri) {
-      const resourceId = resolvedResourceUri.split('/resources/')[1];
-      if (resourceId) {
-        // Use observable navigation - emits 'browse:external-navigate' event
-        navigate(routes.resourceDetail(resourceId), { resourceId });
-      }
+      // resolvedResourceUri is already a bare resource ID
+      navigate(routes.resourceDetail(resolvedResourceUri), { resourceId: resolvedResourceUri });
     }
   };
 
-  const handleComposeDocument = () => {
-    eventBus.get('bind:create-manual').next({
-      annotationUri: reference.id,
-      title: selectedText,
-      entityTypes,
-    });
-  };
+  const source = typeof reference.target === 'object' && 'source' in reference.target
+    ? reference.target.source
+    : '';
 
   const handleUnlink = () => {
-    // Unlinking removes all body items from the reference annotation
-    const sourceUri = typeof reference.target === 'object' && 'source' in reference.target
-      ? reference.target.source
-      : '';
-    if (sourceUri) {
+    if (source) {
       eventBus.get('bind:update-body').next({
-        annotationUri: reference.id,
-        resourceId: sourceUri.split('/resources/')[1] || '',
-        operations: [{ op: 'remove' }], // Remove all body items
+        annotationId: annotationId(reference.id),
+        resourceId: resourceId(source),
+        operations: [{ op: 'remove' }],
       });
     }
   };
 
-  const handleGenerate = () => {
-    const resourceUri = typeof reference.target === 'object' && 'source' in reference.target
-      ? reference.target.source
-      : '';
-
-    // Emit request to open generation modal
-    eventBus.get('yield:modal-open').next({
-      annotationUri: reference.id,
-      resourceUri,
+  const handleInitiateWizard = () => {
+    eventBus.get('bind:initiate').next({
+      annotationId: annotationId(reference.id),
+      resourceId: resourceId(source),
       defaultTitle: selectedText,
+      entityTypes,
     });
   };
 
-  const handleSearch = () => {
-    eventBus.get('bind:link').next({
-      annotationUri: reference.id,
-      searchTerm: selectedText,
-    });
+  // Status icon click handler depends on state and mode
+  const handleIconClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (isResolved) {
+      handleOpen();
+    } else if (annotateMode) {
+      handleInitiateWizard();
+    }
   };
 
+  const iconIsClickable = isResolved || annotateMode;
+
   return (
     <div
       ref={ref}
@@ -127,9 +116,26 @@ export const ReferenceEntry = forwardRef<HTMLDivElement, ReferenceEntryProps>(
     >
       {/* Status indicator and text quote */}
       <div className="semiont-annotation-entry__header">
-        <span className="semiont-reference-icon" title={isResolved ? t('resolved') : t('stub')}>
-          {isResolved ? '🔗' : '❓'}
-        </span>
+        <div className="semiont-reference-icon-group">
+          <button
+            className={`semiont-reference-icon${iconIsClickable ? ' semiont-reference-icon--clickable' : ''}`}
+            title={isResolved ? t('open') : annotateMode ? t('resolve') : t('stub')}
+            onClick={iconIsClickable ? handleIconClick : undefined}
+            data-generating={!isResolved && isGenerating ? 'true' : 'false'}
+            tabIndex={iconIsClickable ? 0 : -1}
+          >
+            {isResolved ? '🔗' : '❓'}
+          </button>
+          {annotateMode && isResolved && (
+            <button
+              className="semiont-reference-unlink"
+              title={t('unlink')}
+              onClick={(e) => { e.stopPropagation(); handleUnlink(); }}
+            >
+              ⛓️‍💥
+            </button>
+          )}
+        </div>
         <div className="semiont-annotation-entry__content">
           {selectedText && (
             <div className="semiont-annotation-entry__quote" data-type="reference">
@@ -163,59 +169,6 @@ export const ReferenceEntry = forwardRef<HTMLDivElement, ReferenceEntryProps>(
           ))}
         </div>
       )}
-
-      {/* Actions based on state - only show curation actions in Annotate mode */}
-      <div className="semiont-annotation-entry__actions" onClick={(e) => e.stopPropagation()}>
-        {isResolved ? (
-          // Resolved reference actions
-          <div className="semiont-annotation-entry__action-row">
-            <button
-              onClick={handleOpen}
-              className={`semiont-reference-button semiont-reference-button--primary ${annotateMode ? 'semiont-reference-button--full' : 'semiont-reference-button--wide'}`}
-              title={t('open')}
-            >
-              🔗
-            </button>
-            {annotateMode && (
-              <button
-                onClick={handleUnlink}
-                className="semiont-reference-button semiont-reference-button--primary"
-                title={t('unlink')}
-              >
-                ⛓️‍💥
-              </button>
-            )}
-          </div>
-        ) : (
-          // Stub reference actions - only in Annotate mode
-          annotateMode && (
-            <div className="semiont-annotation-entry__action-row">
-              <button
-                onClick={handleGenerate}
-                className="semiont-reference-button semiont-reference-button--primary semiont-reference-button--full"
-                title={t('generate')}
-                data-generating={isGenerating ? 'true' : 'false'}
-              >
-                ✨
-              </button>
-              <button
-                onClick={handleSearch}
-                className="semiont-reference-button semiont-reference-button--primary semiont-reference-button--full"
-                title={t('find')}
-              >
-                🔍
-              </button>
-              <button
-                onClick={handleComposeDocument}
-                className="semiont-reference-button semiont-reference-button--primary semiont-reference-button--full"
-                title={t('create')}
-              >
-                ✏️
-              </button>
-            </div>
-          )
-        )}
-      </div>
     </div>
   );
-});
+}

package/src/components/resource/panels/ReferencesPanel.css

@@ -61,25 +61,97 @@
   color: var(--semiont-text-tertiary);
 }
 
-/* Reference Entry Buttons */
-.semiont-reference-button-group {
-  display: flex;
-  gap: var(--semiont-panel-gap-sm);
-  width: 100%;
+/* Reference Icon Group — status icon + hover-reveal unlink */
+.semiont-reference-icon-group {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 
-.semiont-reference-button {
-  display: flex;
+.semiont-reference-icon {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--semiont-panel-padding-xs) var(--semiont-panel-padding-sm);
-  font-size: var(--semiont-panel-icon-size);
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: 0.875rem;
+  line-height: 1;
+  border-radius: var(--semiont-radius-md);
+  border: 1px solid var(--semiont-color-gray-300);
+  background: var(--semiont-bg-secondary);
+  color: var(--semiont-text-secondary);
+  transition: all 0.15s ease;
+}
+
+[data-theme="dark"] .semiont-reference-icon {
+  border-color: var(--semiont-color-gray-600);
+  background: var(--semiont-color-gray-700);
+}
+
+.semiont-reference-icon--clickable {
+  cursor: pointer;
+}
+
+.semiont-reference-icon--clickable:hover {
+  background: var(--semiont-gradient-primary);
+  border-color: var(--semiont-color-primary-300);
+  transform: scale(1.1);
+}
+
+[data-theme="dark"] .semiont-reference-icon--clickable:hover {
+  background: var(--semiont-gradient-primary-dark);
+  border-color: var(--semiont-color-primary-500);
+}
+
+.semiont-reference-icon--clickable:focus-visible {
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: 2px;
+}
+
+[data-theme="dark"] .semiont-reference-icon--clickable:focus-visible {
+  outline-color: var(--semiont-color-primary-400);
+}
+
+/* Generating state pulse on stub icon */
+.semiont-reference-icon[data-generating="true"] {
+  animation: semiont-icon-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes semiont-icon-pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.2); }
+}
+
+/* Hover-reveal unlink button */
+.semiont-reference-unlink {
+  position: absolute;
+  right: -1.25rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 0.75rem;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+}
+
+.semiont-annotation-entry:hover .semiont-reference-unlink {
+  opacity: 1;
+  pointer-events: auto;
 }
 
-.semiont-reference-button--full {
-  width: 100%;
+.semiont-reference-unlink:hover {
+  transform: translateY(-50%) scale(1.2);
 }
 
-.semiont-reference-button--flex {
-  flex: 1;
+.semiont-reference-unlink:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: 2px;
+  border-radius: 2px;
 }

package/src/components/resource/panels/ReferencesPanel.tsx

@@ -497,8 +497,7 @@ export function ReferencesPanel({
           {referencedBy.length > 0 ? (
             <div className="semiont-panel__list">
               {referencedBy.map((ref) => {
-                // Extract resource ID from full URI (e.g., "http://localhost:4000/resources/abc123" -> "abc123")
-                const resourceId = ref.target.source.split('/').pop() || '';
+                const resourceId = ref.target.source;
 
                 return (
                   <div key={ref.id} className="semiont-reference-item semiont-reference-item--incoming">

package/src/components/resource/panels/TagEntry.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef } from 'react';
+import type { Ref } from 'react';
 import type { components } from '@semiont/core';
 import { getAnnotationExactText } from '@semiont/api-client';
 import { getTagCategory, getTagSchemaId } from '@semiont/ontology';
@@ -14,17 +14,15 @@ interface TagEntryProps {
   tag: Annotation;
   isFocused: boolean;
   isHovered?: boolean;
+  ref?: Ref<HTMLDivElement>;
 }
 
-export const TagEntry = forwardRef<HTMLDivElement, TagEntryProps>(
-  function TagEntry(
-    {
-      tag,
-      isFocused,
-      isHovered = false,
-    },
-    ref
-  ) {
+export function TagEntry({
+  tag,
+  isFocused,
+  isHovered = false,
+  ref,
+}: TagEntryProps) {
   const eventBus = useEventBus();
   const hoverProps = useHoverEmitter(tag.id);
 
@@ -62,4 +60,4 @@ export const TagEntry = forwardRef<HTMLDivElement, TagEntryProps>(
       </div>
     </div>
   );
-});
+}

package/src/components/resource/panels/__tests__/AssistSection.test.tsx

@@ -135,7 +135,7 @@ describe('AssistSection', () => {
 
       // Form should not be visible
       expect(screen.queryByPlaceholderText('Enter custom instructions...')).not.toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: /✨ Annotate/ })).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: /✨\s*Annotate/ })).not.toBeInTheDocument();
     });
 
     it('should show form when progress is null', () => {
@@ -149,7 +149,7 @@ describe('AssistSection', () => {
 
       // Form should be visible
       expect(screen.getByPlaceholderText('Enter custom instructions...')).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /✨ Annotate/ })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /✨\s*Annotate/ })).toBeInTheDocument();
     });
 
     it('should show form when progress is undefined', () => {
@@ -163,7 +163,7 @@ describe('AssistSection', () => {
 
       // Form should be visible
       expect(screen.getByPlaceholderText('Enter custom instructions...')).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /✨ Annotate/ })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /✨\s*Annotate/ })).toBeInTheDocument();
     });
 
     it('should keep progress visible after detection completes (isAssisting=false but progress exists)', () => {
@@ -279,7 +279,7 @@ describe('AssistSection', () => {
 
       const subscription = eventBus!.get('mark:assist-request').subscribe(detectionHandler);
 
-      const annotateButton = screen.getByRole('button', { name: /✨ Annotate/ });
+      const annotateButton = screen.getByRole('button', { name: /✨\s*Annotate/ });
       await user.click(annotateButton);
 
       expect(detectionHandler).toHaveBeenCalledWith({
@@ -305,7 +305,7 @@ describe('AssistSection', () => {
 
       const subscription = eventBus!.get('mark:assist-request').subscribe(detectionHandler);
 
-      const annotateButton = screen.getByRole('button', { name: /✨ Annotate/ });
+      const annotateButton = screen.getByRole('button', { name: /✨\s*Annotate/ });
       await user.click(annotateButton);
 
       expect(detectionHandler).toHaveBeenCalledWith({
@@ -331,7 +331,7 @@ describe('AssistSection', () => {
 
       const subscription = eventBus!.get('mark:assist-request').subscribe(detectionHandler);
 
-      const annotateButton = screen.getByRole('button', { name: /✨ Annotate/ });
+      const annotateButton = screen.getByRole('button', { name: /✨\s*Annotate/ });
       await user.click(annotateButton);
 
       expect(detectionHandler).toHaveBeenCalledWith({
@@ -360,7 +360,7 @@ describe('AssistSection', () => {
       const textarea = screen.getByPlaceholderText('Enter custom instructions...');
       await user.type(textarea, 'Find key concepts');
 
-      const annotateButton = screen.getByRole('button', { name: /✨ Annotate/ });
+      const annotateButton = screen.getByRole('button', { name: /✨\s*Annotate/ });
       await user.click(annotateButton);
 
       expect(detectionHandler).toHaveBeenCalledWith({

package/src/components/resource/panels/__tests__/HighlightPanel.annotationProgress.test.tsx

@@ -106,7 +106,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
       // Form should be visible (meaning progress was null)
       expect(screen.getByPlaceholderText('Enter custom instructions...')).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /✨ Annotate/ })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /✨\s*Annotate/ })).toBeInTheDocument();
     });
 
     it('should pass undefined progress to AssistSection', () => {
@@ -122,7 +122,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
       // Form should be visible (meaning progress was undefined)
       expect(screen.getByPlaceholderText('Enter custom instructions...')).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /✨ Annotate/ })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /✨\s*Annotate/ })).toBeInTheDocument();
     });
 
     it('should keep progress visible after detection completes (isAssisting=false)', () => {