@semiont/react-ui 0.5.6 → 0.5.7

package/src/components/ProtectedErrorBoundary.css

@@ -0,0 +1,119 @@
+/* ============================================
+   ProtectedErrorBoundary Component Styles
+   ============================================ */
+
+.semiont-protected-error-boundary-container {
+  min-height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--semiont-spacing-md);
+}
+
+.semiont-protected-error-boundary-card {
+  max-width: 28rem;
+  width: 100%;
+  background-color: var(--semiont-color-white);
+  border-radius: var(--semiont-radius-lg);
+  box-shadow: var(--semiont-shadow-lg);
+  padding: var(--semiont-spacing-lg);
+}
+
+[data-theme="dark"] .semiont-protected-error-boundary-card {
+  background-color: var(--semiont-color-gray-800);
+}
+
+.semiont-protected-error-boundary-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: var(--semiont-spacing-md);
+}
+
+.semiont-protected-error-boundary-icon-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--semiont-radius-full);
+  background-color: var(--semiont-color-red-100);
+}
+
+[data-theme="dark"] .semiont-protected-error-boundary-icon-wrapper {
+  background-color: rgba(127, 29, 29, 0.3);
+}
+
+.semiont-protected-error-boundary-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: var(--semiont-color-red-600);
+}
+
+[data-theme="dark"] .semiont-protected-error-boundary-icon {
+  color: var(--semiont-color-red-400);
+}
+
+.semiont-protected-error-boundary-title {
+  font-size: var(--semiont-text-xl);
+  font-weight: var(--semiont-font-semibold);
+  color: var(--semiont-color-gray-900);
+}
+
+[data-theme="dark"] .semiont-protected-error-boundary-title {
+  color: var(--semiont-color-white);
+}
+
+.semiont-protected-error-boundary-message {
+  color: var(--semiont-color-gray-600);
+  margin-bottom: var(--semiont-spacing-lg);
+}
+
+[data-theme="dark"] .semiont-protected-error-boundary-message {
+  color: var(--semiont-color-gray-300);
+}
+
+.semiont-protected-error-boundary-details {
+  margin-bottom: var(--semiont-spacing-md);
+}
+
+.semiont-protected-error-boundary-summary {
+  font-size: var(--semiont-text-sm);
+  color: var(--semiont-color-gray-500);
+  cursor: pointer;
+}
+
+.semiont-protected-error-boundary-summary:hover {
+  color: var(--semiont-color-gray-700);
+}
+
+[data-theme="dark"] .semiont-protected-error-boundary-summary {
+  color: var(--semiont-color-gray-500);
+}
+
+[data-theme="dark"] .semiont-protected-error-boundary-summary:hover {
+  color: var(--semiont-color-gray-300);
+}
+
+.semiont-protected-error-boundary-stack {
+  margin-top: var(--semiont-spacing-sm);
+  font-size: var(--semiont-text-xs);
+  background-color: var(--semiont-color-gray-100);
+  padding: var(--semiont-spacing-sm);
+  border-radius: var(--semiont-radius-sm);
+  overflow: auto;
+}
+
+[data-theme="dark"] .semiont-protected-error-boundary-stack {
+  background-color: var(--semiont-color-gray-900);
+}
+
+.semiont-protected-error-boundary-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.semiont-protected-error-boundary-actions .semiont-button {
+  flex: 1 1 0;
+}

package/src/components/ProtectedErrorBoundary.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ErrorBoundary, type FallbackProps } from 'react-error-boundary';
+import './ProtectedErrorBoundary.css';
 
 interface ProtectedErrorBoundaryProps {
   children: React.ReactNode;
@@ -50,45 +51,49 @@ function ProtectedErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
   const message = error instanceof Error ? error.message : String(error);
   const stack = error instanceof Error ? error.stack : undefined;
   return (
-    <div className="min-h-[400px] flex items-center justify-center p-4">
-      <div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
-        <div className="flex items-center gap-3 mb-4">
-          <div className="flex-shrink-0 w-10 h-10 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center">
-            <svg className="w-6 h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <div className="semiont-protected-error-boundary-container">
+      <div className="semiont-protected-error-boundary-card">
+        <div className="semiont-protected-error-boundary-header">
+          <div className="semiont-protected-error-boundary-icon-wrapper">
+            <svg className="semiont-protected-error-boundary-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
             </svg>
           </div>
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+          <h2 className="semiont-protected-error-boundary-title">
             Something went wrong
           </h2>
         </div>
 
-        <p className="text-gray-600 dark:text-gray-300 mb-6">
+        <p className="semiont-protected-error-boundary-message">
           An unexpected error occurred. Try again, or refresh the page.
         </p>
 
         {process.env.NODE_ENV === 'development' && (
-          <details className="mb-4">
-            <summary className="text-sm text-gray-500 cursor-pointer hover:text-gray-700 dark:hover:text-gray-300">
+          <details className="semiont-protected-error-boundary-details">
+            <summary className="semiont-protected-error-boundary-summary">
               Error details (development only)
             </summary>
-            <pre className="mt-2 text-xs bg-gray-100 dark:bg-gray-900 p-2 rounded-sm overflow-auto">
+            <pre className="semiont-protected-error-boundary-stack">
               {message}
               {stack}
             </pre>
           </details>
         )}
 
-        <div className="flex gap-3">
+        <div className="semiont-protected-error-boundary-actions">
           <button
             onClick={resetErrorBoundary}
-            className="flex-1 px-4 py-2 text-gray-700 dark:text-gray-200 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+            className="semiont-button"
+            data-variant="secondary"
+            data-size="md"
           >
             Try Again
           </button>
           <button
             onClick={() => window.location.reload()}
-            className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+            className="semiont-button"
+            data-variant="primary"
+            data-size="md"
           >
             Refresh Page
           </button>

package/src/components/modals/__tests__/ResourceSearchModal.test.tsx

@@ -14,7 +14,7 @@ vi.mock('@headlessui/react', () => ({
   TransitionChild: ({ children }: any) => <>{children}</>,
 }));
 
-// Mock the api-client Observable surface.
+// Mock the http-transport Observable surface.
 // The session-based useSemiont path: useObservable(useSemiont().activeSession$)?.client
 // We mock useSemiont to return a stable browser whose activeSession$ emits a
 // session-shaped object that carries the mock client.

package/src/components/modals/__tests__/SearchModal.search-wiring.test.tsx

@@ -31,7 +31,7 @@ vi.mock('@headlessui/react', () => ({
   TransitionChild: ({ children }: any) => <>{children}</>,
 }));
 
-// Mock the api-client Observable surface
+// Mock the http-transport Observable surface
 const browseResourcesSubject = new BehaviorSubject<any[] | undefined>(undefined);
 const browseResourcesMock = vi.fn(() => browseResourcesSubject.asObservable());
 

package/src/components/resource/AnnotateView.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useRef, useEffect, useCallback, lazy, Suspense } from 'react';
-import { getMimeCategory, isPdfMimeType } from '@semiont/core';
+import { capabilitiesOf } from '@semiont/core';
 import { ANNOTATORS } from '../../lib/annotation-registry';
 import { segmentTextWithAnnotations } from '../../lib/text-segmentation';
 import { buildTextSelectors, fallbackTextPosition } from '../../lib/text-selection-handler';
@@ -71,7 +71,7 @@ export function AnnotateView({
   const containerRef = useRef<HTMLDivElement>(null);
   const session = useObservable(useSemiont().activeSession$);
 
-  const category = getMimeCategory(mimeType);
+  const render = capabilitiesOf(mimeType)?.render ?? 'none';
 
   const { highlights, references, assessments, comments, tags } = annotations;
 
@@ -192,8 +192,8 @@ export function AnnotateView({
     };
   }, [selectedMotivation, content]);
 
-  // Route to appropriate viewer based on MIME type category
-  switch (category) {
+  // Route to the annotation viewer for this media type's render mode.
+  switch (render) {
     case 'text':
       return (
         <div className="semiont-annotate-view" data-mime-type="text" ref={containerRef}>
@@ -225,40 +225,38 @@ export function AnnotateView({
         </div>
       );
 
-    case 'image':
-      // MIME-specific viewer selection within spatial annotation category
-      if (isPdfMimeType(mimeType)) {
-        // Phase 2: PDF annotation support
-        return (
-          <div className="semiont-annotate-view" data-mime-type="pdf" ref={containerRef}>
-            <AnnotateToolbar
-              selectedMotivation={selectedMotivation}
-              selectedClick={selectedClick}
-              showShapeGroup={true}
-              selectedShape={selectedShape}
-              mediaType={mimeType}
-              annotateMode={annotateMode}
-              annotators={ANNOTATORS}
-            />
-            <div className="semiont-annotate-view__content">
-              {content && (
-                <Suspense fallback={<div className="semiont-annotate-view__loading">Loading PDF viewer...</div>}>
-                  <PdfAnnotationCanvas
-                    pdfUrl={content}
-                    existingAnnotations={allAnnotations}
-                    drawingMode={selectedMotivation ? selectedShape : null}
-                    selectedMotivation={selectedMotivation}
-                    session={session}
-                    hoveredAnnotationId={hoveredAnnotationId || null}
-                    hoverDelayMs={hoverDelayMs}
-                  />
-                </Suspense>
-              )}
-            </div>
+    case 'pdf':
+      // PDF annotation support (spatial, FragmentSelector)
+      return (
+        <div className="semiont-annotate-view" data-mime-type="pdf" ref={containerRef}>
+          <AnnotateToolbar
+            selectedMotivation={selectedMotivation}
+            selectedClick={selectedClick}
+            showShapeGroup={true}
+            selectedShape={selectedShape}
+            mediaType={mimeType}
+            annotateMode={annotateMode}
+            annotators={ANNOTATORS}
+          />
+          <div className="semiont-annotate-view__content">
+            {content && (
+              <Suspense fallback={<div className="semiont-annotate-view__loading">Loading PDF viewer...</div>}>
+                <PdfAnnotationCanvas
+                  pdfUrl={content}
+                  existingAnnotations={allAnnotations}
+                  drawingMode={selectedMotivation ? selectedShape : null}
+                  selectedMotivation={selectedMotivation}
+                  session={session}
+                  hoveredAnnotationId={hoveredAnnotationId || null}
+                  hoverDelayMs={hoverDelayMs}
+                />
+              </Suspense>
+            )}
           </div>
-        );
-      }
+        </div>
+      );
 
+    case 'image':
       // PNG, JPEG, etc. - full annotation support
       return (
         <div className="semiont-annotate-view" data-mime-type="image" ref={containerRef}>
@@ -287,7 +285,7 @@ export function AnnotateView({
         </div>
       );
 
-    case 'unsupported':
+    case 'none':
     default:
       return (
         <div ref={containerRef} className="semiont-annotate-view semiont-annotate-view--unsupported" data-mime-type="unsupported">

package/src/components/resource/BrowseView.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef, useCallback, useMemo, memo, lazy, Suspense } from 'r
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { annotationId as toAnnotationId } from '@semiont/core';
-import { getMimeCategory, isPdfMimeType } from '@semiont/core';
+import { capabilitiesOf } from '@semiont/core';
 import { createHoverHandlers } from '@semiont/sdk';
 import { ANNOTATORS } from '../../lib/annotation-registry';
 import { scrollAnnotationIntoView } from '../../lib/scroll-utils';
@@ -83,7 +83,7 @@ export const BrowseView = memo(function BrowseView({
   const session = useObservable(useSemiont().activeSession$);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const category = getMimeCategory(mimeType);
+  const render = capabilitiesOf(mimeType)?.render ?? 'none';
 
   const { highlights, references, assessments, comments, tags } = annotations;
 
@@ -207,8 +207,9 @@ export const BrowseView = memo(function BrowseView({
     'beckon:focus': handleAnnotationFocus,
   });
 
-  // Route to appropriate viewer based on MIME type category
-  switch (category) {
+  // Route to the viewer for this media type's render mode. The switch is
+  // exhaustive over RenderMode, so every path returns.
+  switch (render) {
     case 'text':
       return (
         <div className="semiont-browse-view" data-mime-type="text">
@@ -226,34 +227,31 @@ export const BrowseView = memo(function BrowseView({
         </div>
       );
 
-    case 'image':
-      // Check if it's actually a PDF (categorized as 'image' for spatial annotations)
-      if (isPdfMimeType(mimeType)) {
-        return (
-          <div className="semiont-browse-view" data-mime-type="pdf">
-            <AnnotateToolbar
-              selectedMotivation={null}
-              selectedClick={selectedClick}
-              showSelectionGroup={false}
-              showDeleteButton={false}
-              annotateMode={annotateMode}
-              annotators={ANNOTATORS}
-            />
-            <div ref={containerRef} className="semiont-browse-view__content">
-              <Suspense fallback={<div className="semiont-browse-view__loading">Loading PDF viewer...</div>}>
-                <PdfAnnotationCanvas
-                  pdfUrl={content}
-                  existingAnnotations={allAnnotations}
-                  drawingMode={null}
-                  selectedMotivation={null}
-                />
-              </Suspense>
-            </div>
+    case 'pdf':
+      return (
+        <div className="semiont-browse-view" data-mime-type="pdf">
+          <AnnotateToolbar
+            selectedMotivation={null}
+            selectedClick={selectedClick}
+            showSelectionGroup={false}
+            showDeleteButton={false}
+            annotateMode={annotateMode}
+            annotators={ANNOTATORS}
+          />
+          <div ref={containerRef} className="semiont-browse-view__content">
+            <Suspense fallback={<div className="semiont-browse-view__loading">Loading PDF viewer...</div>}>
+              <PdfAnnotationCanvas
+                pdfUrl={content}
+                existingAnnotations={allAnnotations}
+                drawingMode={null}
+                selectedMotivation={null}
+              />
+            </Suspense>
           </div>
-        );
-      }
+        </div>
+      );
 
-      // Regular image
+    case 'image':
       return (
         <div className="semiont-browse-view" data-mime-type="image">
           <AnnotateToolbar
@@ -274,7 +272,9 @@ export const BrowseView = memo(function BrowseView({
         </div>
       );
 
-    case 'unsupported':
+    case 'none':
+      // Catalogued type with no preview (render: 'none') or an imported
+      // foreign type the registry doesn't know — same UI: metadata + download.
       return (
         <div ref={containerRef} className="semiont-browse-view semiont-browse-view--unsupported" data-mime-type="unsupported">
           <div className="semiont-browse-view__empty">

package/src/components/resource/__tests__/AnnotationHistory.test.tsx

@@ -78,7 +78,6 @@ function makeStoredEvent(id: string, type: string, seq: number, overrides: Recor
     ...overrides,
     metadata: {
       sequenceNumber: seq,
-      streamPosition: 0,
     },
   };
 }

package/src/components/resource/__tests__/BrowseView.test.tsx

@@ -15,18 +15,14 @@ vi.mock('../../../contexts/ResourceAnnotationsContext', () => ({
   })),
 }));
 
-// Mock @semiont/core utilities (these helpers and `resourceId` all live in core).
+// Mock @semiont/core utilities. The media-type registry (`capabilitiesOf`)
+// is NOT mocked — BrowseView dispatches on the real registry's render mode,
+// so the tested types (text/markdown, image/png, application/octet-stream)
+// resolve through the real source of truth.
 vi.mock('@semiont/core', async () => {
   const actual = await vi.importActual('@semiont/core');
   return {
     ...actual,
-    getMimeCategory: vi.fn((mimeType: string) => {
-      if (mimeType.startsWith('text/')) return 'text';
-      if (mimeType.startsWith('image/')) return 'image';
-      if (mimeType === 'application/pdf') return 'image';
-      return 'unsupported';
-    }),
-    isPdfMimeType: vi.fn((mimeType: string) => mimeType === 'application/pdf'),
     resourceId: vi.fn((id: string) => id),
     getExactText: vi.fn(() => 'exact text'),
     getTextPositionSelector: vi.fn(() => ({ start: 0, end: 10 })),

package/src/components/resource/__tests__/HistoryEvent.test.tsx

@@ -58,7 +58,6 @@ function makeStoredEvent(overrides: Record<string, any> = {}): any {
     ...overrides,
     metadata: {
       sequenceNumber: 1,
-      streamPosition: 0,
     },
   };
 }

package/src/components/resource/__tests__/event-formatting.test.ts

@@ -8,7 +8,7 @@ import {
   getResourceCreationDetails,
 } from '../event-formatting';
 
-// Mock api-client functions
+// Mock http-transport functions
 vi.mock('@semiont/core', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@semiont/core')>();
   return {

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

@@ -7,7 +7,7 @@ import './CollaborationPanel.css';
 interface Props {
   /**
    * Connection state from `client.actor.state$`. See
-   * `packages/api-client/src/state/domain/actor-state-unit.ts`.
+   * `packages/http-transport/src/state/domain/actor-state-unit.ts`.
    *
    * UI mapping:
    *   `open` | `reconnecting` | `initial` | `connecting`

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

@@ -8,42 +8,46 @@ import { oneDark } from '@codemirror/theme-one-dark';
 import { syntaxHighlighting } from '@codemirror/language';
 import { jsonLightTheme, jsonLightHighlightStyle } from '../../../lib/codemirror-json-theme';
 import { useLineNumbers } from '../../../hooks/useLineNumbers';
-import type { components } from '@semiont/core';
+import { useResourceGraph } from '../../../hooks/useResourceGraph';
+import type { ResourceId } from '@semiont/core';
 import './JsonLdPanel.css';
 
-type SemiontResource = components['schemas']['ResourceDescriptor'];
-
 interface Props {
-  resource: SemiontResource;
+  resourceId: ResourceId;
 }
 
-export function JsonLdPanel({ resource: semiontResource }: Props) {
+/**
+ * Dereferences the resource's LD face (`GET /resources/:id/jsonld` via
+ * `browse.resourceGraph`) and pretty-prints the full graph — descriptor +
+ * annotations + inbound entity references — read-only. This is exactly what
+ * an external linked-data client gets when dereferencing the resource's
+ * `describedby` URI, so the panel doubles as a living end-to-end test of the
+ * LD face. See `.plans/SIMPLER-JSON-LD.md` §5.
+ */
+export function JsonLdPanel({ resourceId }: Props) {
   const editorRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<EditorView | null>(null);
   const { showLineNumbers } = useLineNumbers();
+  const { graph, loading, error } = useResourceGraph(resourceId);
+
+  const documentText = graph ? JSON.stringify(graph, null, 2) : '';
 
-  // Initialize CodeMirror
+  // Initialize CodeMirror once the graph has loaded.
   useEffect(() => {
-    if (!editorRef.current) return;
+    if (!editorRef.current || !documentText) return;
 
-    // Check if dark mode is active
     const isDarkMode = document.documentElement?.classList.contains('dark') ?? false;
 
-    // Convert resource to JSON-LD format
-    const jsonLdContent = JSON.stringify(semiontResource, null, 2);
-
     const extensions = [
       json(),
       EditorView.editable.of(false),
       EditorState.readOnly.of(true),
     ];
 
-    // Add line numbers if enabled
     if (showLineNumbers) {
       extensions.push(lineNumbers());
     }
 
-    // Add theme based on dark/light mode
     if (isDarkMode) {
       extensions.push(oneDark);
     } else {
@@ -52,7 +56,7 @@ export function JsonLdPanel({ resource: semiontResource }: Props) {
     }
 
     const state = EditorState.create({
-      doc: jsonLdContent,
+      doc: documentText,
       extensions,
     });
 
@@ -67,11 +71,12 @@ export function JsonLdPanel({ resource: semiontResource }: Props) {
       view.destroy();
       viewRef.current = null;
     };
-  }, [semiontResource, showLineNumbers]);
+  }, [documentText, showLineNumbers]);
 
   const handleCopyToClipboard = async () => {
+    if (!documentText) return;
     try {
-      await navigator.clipboard.writeText(JSON.stringify(semiontResource, null, 2));
+      await navigator.clipboard.writeText(documentText);
     } catch (err) {
       console.error('Failed to copy JSON-LD:', err);
     }
@@ -88,11 +93,23 @@ export function JsonLdPanel({ resource: semiontResource }: Props) {
           onClick={handleCopyToClipboard}
           className="semiont-button semiont-button--icon"
           title="Copy to clipboard"
+          disabled={!graph}
         >
           📋 Copy
         </button>
       </div>
 
+      {loading && (
+        <p className="semiont-jsonld-panel__status" role="status">
+          Loading JSON-LD…
+        </p>
+      )}
+      {error && !loading && (
+        <p className="semiont-jsonld-panel__status semiont-jsonld-panel__status--error" role="alert">
+          Failed to load JSON-LD.
+        </p>
+      )}
+
       {/* JSON-LD content rendered with CodeMirror */}
       <div
         ref={editorRef}

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

@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 
 import type { Annotation, AnnotationId } from '@semiont/core';
 
-// Mock @semiont/api-client
+// Mock @semiont/http-transport
 vi.mock('@semiont/core', async () => {
   const actual = await vi.importActual('@semiont/core');
   return {

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

@@ -57,7 +57,7 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
   TranslationProvider: ({ children }: { children: React.ReactNode }) => children,
 }));
 
-// Mock @semiont/api-client utilities
+// Mock @semiont/http-transport utilities
 vi.mock('@semiont/core', async () => {
   const actual = await vi.importActual('@semiont/core');
   return {

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

@@ -21,7 +21,7 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
   TranslationProvider: ({ children }: { children: React.ReactNode }) => children,
 }));
 
-// Mock @semiont/api-client utilities
+// Mock @semiont/http-transport utilities
 vi.mock('@semiont/core', async () => {
   const actual = await vi.importActual('@semiont/core');
   return {

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

@@ -56,7 +56,7 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
   TranslationProvider: ({ children }: { children: React.ReactNode }) => children,
 }));
 
-// Mock @semiont/api-client utilities
+// Mock @semiont/http-transport utilities
 vi.mock('@semiont/core', async () => {
   const actual = await vi.importActual('@semiont/core');
   return {

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

@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 
 import type { Annotation, AnnotationId } from '@semiont/core';
 
-// Mock @semiont/api-client
+// Mock @semiont/http-transport
 vi.mock('@semiont/core', async () => {
   const actual = await vi.importActual('@semiont/core');
   return {