@semiont/react-ui 0.2.45 → 0.3.0

package/src/features/admin-security/__tests__/AdminSecurityPage.test.tsx

@@ -294,7 +294,7 @@ describe('AdminSecurityPage', () => {
 
       expect(ToolbarPanels).toHaveBeenCalledWith(
         expect.objectContaining({ theme: 'dark' }),
-        expect.anything()
+        undefined,
       );
     });
 
@@ -305,7 +305,7 @@ describe('AdminSecurityPage', () => {
 
       expect(Toolbar).toHaveBeenCalledWith(
         expect.objectContaining({ activePanel: 'settings' }),
-        expect.anything()
+        undefined,
       );
     });
 
@@ -316,7 +316,7 @@ describe('AdminSecurityPage', () => {
 
       expect(Toolbar).toHaveBeenCalledWith(
         expect.objectContaining({ context: 'simple' }),
-        expect.anything()
+        undefined,
       );
     });
   });

package/src/features/moderate-entity-tags/__tests__/EntityTagsPage.test.tsx

@@ -278,7 +278,7 @@ describe('EntityTagsPage', () => {
 
       expect(ToolbarPanels).toHaveBeenCalledWith(
         expect.objectContaining({ theme: 'dark' }),
-        expect.anything()
+        undefined,
       );
     });
 
@@ -289,7 +289,7 @@ describe('EntityTagsPage', () => {
 
       expect(Toolbar).toHaveBeenCalledWith(
         expect.objectContaining({ activePanel: 'settings' }),
-        expect.anything()
+        undefined,
       );
     });
   });

package/src/features/moderate-recent/__tests__/RecentDocumentsPage.test.tsx

@@ -190,7 +190,7 @@ describe('RecentDocumentsPage', () => {
 
       expect(ToolbarPanels).toHaveBeenCalledWith(
         expect.objectContaining({ theme: 'dark' }),
-        expect.anything()
+        undefined,
       );
     });
 
@@ -201,7 +201,7 @@ describe('RecentDocumentsPage', () => {
 
       expect(Toolbar).toHaveBeenCalledWith(
         expect.objectContaining({ activePanel: 'settings' }),
-        expect.anything()
+        undefined,
       );
     });
 
@@ -212,7 +212,7 @@ describe('RecentDocumentsPage', () => {
 
       expect(ToolbarPanels).toHaveBeenCalledWith(
         expect.objectContaining({ showLineNumbers: true }),
-        expect.anything()
+        undefined,
       );
     });
 
@@ -224,7 +224,7 @@ describe('RecentDocumentsPage', () => {
 
       expect(Toolbar).toHaveBeenCalledWith(
         expect.objectContaining({ context: 'simple' }),
-        expect.anything()
+        undefined,
       );
     });
   });

package/src/features/moderate-tag-schemas/__tests__/TagSchemasPage.test.tsx

@@ -261,7 +261,7 @@ describe('TagSchemasPage', () => {
 
       expect(ToolbarPanels).toHaveBeenCalledWith(
         expect.objectContaining({ theme: 'dark' }),
-        expect.anything()
+        undefined,
       );
     });
 
@@ -272,7 +272,7 @@ describe('TagSchemasPage', () => {
 
       expect(Toolbar).toHaveBeenCalledWith(
         expect.objectContaining({ activePanel: 'settings' }),
-        expect.anything()
+        undefined,
       );
     });
 
@@ -283,7 +283,7 @@ describe('TagSchemasPage', () => {
 
       expect(ToolbarPanels).toHaveBeenCalledWith(
         expect.objectContaining({ showLineNumbers: true }),
-        expect.anything()
+        undefined,
       );
     });
 

package/src/features/moderation-linked-data/__tests__/LinkedDataPage.test.tsx

@@ -0,0 +1,117 @@
+/**
+ * Tests for LinkedDataPage component
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { LinkedDataPage } from '../components/LinkedDataPage';
+import type { LinkedDataPageProps } from '../components/LinkedDataPage';
+
+const createProps = (overrides?: Partial<LinkedDataPageProps>): LinkedDataPageProps => ({
+  onExport: vi.fn(),
+  isExporting: false,
+  onFileSelected: vi.fn(),
+  onImport: vi.fn(),
+  onCancelImport: vi.fn(),
+  selectedFile: null,
+  preview: null,
+  isImporting: false,
+  importPhase: null,
+  theme: 'light',
+  showLineNumbers: false,
+  activePanel: null,
+  translations: {
+    title: 'Export & Import',
+    subtitle: 'Exchange knowledge as JSON-LD Linked Data',
+    export: {
+      title: 'Export',
+      description: 'Export your knowledge base as JSON-LD',
+      exportButton: 'Export as JSON-LD',
+      exporting: 'Exporting…',
+    },
+    import: {
+      title: 'Import',
+      description: 'Import from JSON-LD',
+      dropzoneLabel: 'Drop a file here',
+      dropzoneActive: 'Drop to upload',
+      detectedFormat: 'Format',
+      statsPreview: 'Preview',
+      importButton: 'Import',
+      importing: 'Importing…',
+      importConfirmTitle: 'Confirm',
+      importConfirmMessage: 'This will create new resources.',
+      confirmImport: 'Proceed',
+      cancelImport: 'Cancel',
+    },
+    progress: {
+      phaseStarted: 'Starting…',
+      phaseEntityTypes: 'Entity types…',
+      phaseResources: 'Resources…',
+      phaseAnnotations: 'Annotations…',
+      phaseComplete: 'Complete',
+      phaseError: 'Failed',
+      hashChainValid: 'Verified',
+      hashChainInvalid: 'Verification failed',
+      streams: 'Resources',
+      events: 'Annotations',
+      blobs: 'Entity types',
+    },
+  },
+  ToolbarPanels: () => <div data-testid="toolbar-panels" />,
+  Toolbar: () => <div data-testid="toolbar" />,
+  ...overrides,
+});
+
+describe('LinkedDataPage', () => {
+  it('renders page title and subtitle', () => {
+    render(<LinkedDataPage {...createProps()} />);
+    expect(screen.getByText('Export & Import')).toBeInTheDocument();
+    expect(screen.getByText('Exchange knowledge as JSON-LD Linked Data')).toBeInTheDocument();
+  });
+
+  it('renders ExportCard', () => {
+    render(<LinkedDataPage {...createProps()} />);
+    expect(screen.getByRole('heading', { name: 'Export' })).toBeInTheDocument();
+    expect(screen.getByText('Export as JSON-LD')).toBeInTheDocument();
+  });
+
+  it('renders ImportCard', () => {
+    render(<LinkedDataPage {...createProps()} />);
+    expect(screen.getByRole('heading', { name: 'Import' })).toBeInTheDocument();
+    expect(screen.getByText('Import from JSON-LD')).toBeInTheDocument();
+  });
+
+  it('renders toolbar components', () => {
+    render(<LinkedDataPage {...createProps()} />);
+    expect(screen.getByTestId('toolbar-panels')).toBeInTheDocument();
+    expect(screen.getByTestId('toolbar')).toBeInTheDocument();
+  });
+
+  it('does not render ImportProgress when importPhase is null', () => {
+    const { container } = render(<LinkedDataPage {...createProps()} />);
+    expect(container.querySelector('.semiont-exchange__progress')).not.toBeInTheDocument();
+  });
+
+  it('renders ImportProgress when importPhase is set', () => {
+    render(<LinkedDataPage {...createProps({ importPhase: 'started' })} />);
+    expect(screen.getByText('Starting…')).toBeInTheDocument();
+  });
+
+  it('renders ImportProgress with result on completion', () => {
+    render(<LinkedDataPage {...createProps({
+      importPhase: 'complete',
+      importResult: { resourcesCreated: 5, annotationsCreated: 12, entityTypesAdded: 3 },
+    })} />);
+    expect(screen.getByText('Complete')).toBeInTheDocument();
+  });
+
+  it('applies panel-open class when common panel is active', () => {
+    const { container } = render(<LinkedDataPage {...createProps({ activePanel: 'user' })} />);
+    expect(container.querySelector('.semiont-page--panel-open')).toBeInTheDocument();
+  });
+
+  it('does not apply panel-open class when no panel is active', () => {
+    const { container } = render(<LinkedDataPage {...createProps({ activePanel: null })} />);
+    expect(container.querySelector('.semiont-page--panel-open')).not.toBeInTheDocument();
+  });
+});

package/src/features/moderation-linked-data/components/LinkedDataPage.tsx

@@ -0,0 +1,121 @@
+/**
+ * LinkedDataPage — JSON-LD Export/Import moderation page
+ *
+ * Pure React component. All state and handlers passed as props.
+ * Reuses ExportCard, ImportCard, and ImportProgress from admin-exchange.
+ */
+
+import React from 'react';
+import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
+import { ExportCard, type ExportCardTranslations } from '../../admin-exchange/components/ExportCard';
+import { ImportCard, type ImportCardProps, type ImportCardTranslations } from '../../admin-exchange/components/ImportCard';
+import { ImportProgress, type ImportProgressTranslations } from '../../admin-exchange/components/ImportProgress';
+
+export interface LinkedDataPageTranslations {
+  title: string;
+  subtitle: string;
+  export: ExportCardTranslations;
+  import: ImportCardTranslations;
+  progress: ImportProgressTranslations;
+}
+
+export interface LinkedDataPageProps {
+  // Export
+  onExport: () => void;
+  isExporting: boolean;
+
+  // Import
+  onFileSelected: (file: File) => void;
+  onImport: () => void;
+  onCancelImport: () => void;
+  selectedFile: File | null;
+  preview: ImportCardProps['preview'];
+  isImporting: boolean;
+
+  // Progress
+  importPhase: string | null;
+  importMessage?: string | undefined;
+  importResult?: Record<string, unknown> | undefined;
+
+  // UI state
+  theme: 'light' | 'dark' | 'system';
+  showLineNumbers: boolean;
+  activePanel: string | null;
+
+  // Translations
+  translations: LinkedDataPageTranslations;
+
+  // Component dependencies
+  ToolbarPanels: React.ComponentType<any>;
+  Toolbar: React.ComponentType<any>;
+}
+
+export function LinkedDataPage({
+  onExport,
+  isExporting,
+  onFileSelected,
+  onImport,
+  onCancelImport,
+  selectedFile,
+  preview,
+  isImporting,
+  importPhase,
+  importMessage,
+  importResult,
+  theme,
+  showLineNumbers,
+  activePanel,
+  translations: t,
+  ToolbarPanels,
+  Toolbar,
+}: LinkedDataPageProps) {
+  return (
+    <div className={`semiont-page${activePanel && COMMON_PANELS.includes(activePanel as ToolbarPanelType) ? ' semiont-page--panel-open' : ''}`}>
+      <div className="semiont-page__content">
+        <div className="semiont-page__header">
+          <h1 className="semiont-page__title">{t.title}</h1>
+          <p className="semiont-page__subtitle">{t.subtitle}</p>
+        </div>
+
+        <div className="semiont-exchange__cards">
+          <ExportCard
+            onExport={onExport}
+            isExporting={isExporting}
+            translations={t.export}
+          />
+
+          <ImportCard
+            onFileSelected={onFileSelected}
+            onImport={onImport}
+            onCancel={onCancelImport}
+            selectedFile={selectedFile}
+            preview={preview}
+            isImporting={isImporting}
+            translations={t.import}
+          />
+        </div>
+
+        {importPhase && (
+          <ImportProgress
+            phase={importPhase}
+            message={importMessage}
+            result={importResult}
+            translations={t.progress}
+          />
+        )}
+      </div>
+
+      <div className="semiont-page__sidebar">
+        <ToolbarPanels
+          activePanel={activePanel}
+          theme={theme}
+          showLineNumbers={showLineNumbers}
+        />
+        <Toolbar
+          context="simple"
+          activePanel={activePanel}
+        />
+      </div>
+    </div>
+  );
+}

package/src/features/resource-compose/__tests__/ResourceComposePage.test.tsx

@@ -137,7 +137,7 @@ describe('ResourceComposePage', () => {
         mode: 'clone',
         cloneData: {
           sourceResource: {
-            '@id': 'http://localhost/resources/1',
+            '@id': '1',
             name: 'Original Resource',
           } as any,
           sourceContent: 'Original content',
@@ -154,7 +154,7 @@ describe('ResourceComposePage', () => {
         mode: 'clone',
         cloneData: {
           sourceResource: {
-            '@id': 'http://localhost/resources/1',
+            '@id': '1',
             name: 'Original Resource',
           } as any,
           sourceContent: 'Original content',
@@ -174,7 +174,7 @@ describe('ResourceComposePage', () => {
         mode: 'clone',
         cloneData: {
           sourceResource: {
-            '@id': 'http://localhost/resources/1',
+            '@id': '1',
             name: 'Original Resource',
           } as any,
           sourceContent: 'Original content',
@@ -190,7 +190,7 @@ describe('ResourceComposePage', () => {
         mode: 'clone',
         cloneData: {
           sourceResource: {
-            '@id': 'http://localhost/resources/1',
+            '@id': '1',
             name: 'Original Resource',
           } as any,
           sourceContent: 'Original content',
@@ -448,7 +448,7 @@ describe('ResourceComposePage', () => {
         expect.objectContaining({
           theme: 'dark',
         }),
-        expect.anything()
+        undefined,
       );
     });
   });

package/src/features/resource-compose/components/ResourceComposePage.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import type { components } from '@semiont/core';
+import type { components, GatheredContext } from '@semiont/core';
 import { isImageMimeType, isPdfMimeType, LOCALES } from '@semiont/api-client';
 import { COMMON_PANELS, type ToolbarPanelType } from '../../../hooks/usePanelBrowse';
 import { buttonStyles } from '../../../lib/button-styles';
@@ -34,6 +34,9 @@ export interface ResourceComposePageProps {
     entityTypes: string[];
   };
 
+  // Gathered context from wizard (optional, for reference mode)
+  gatheredContext?: GatheredContext | null;
+
   // Available options
   availableEntityTypes: string[];
 
@@ -108,6 +111,7 @@ export function ResourceComposePage({
   mode,
   cloneData,
   referenceData,
+  gatheredContext,
   availableEntityTypes,
   initialLocale,
   theme,
@@ -277,6 +281,57 @@ export function ResourceComposePage({
           )}
         </div>
 
+        {/* Gathered Context Panel (from wizard) */}
+        {gatheredContext && (
+          <div className="semiont-form__field" style={{
+            marginBottom: '1.5rem',
+            padding: '1rem',
+            backgroundColor: 'var(--semiont-bg-secondary)',
+            borderRadius: 'var(--semiont-radius-md)',
+            border: '1px solid var(--semiont-border-primary)',
+          }}>
+            <h3 className="semiont-form__label" style={{ marginBottom: '0.75rem' }}>Gathered Context</h3>
+            {gatheredContext.sourceContext && (
+              <div style={{
+                padding: '0.75rem',
+                backgroundColor: 'var(--semiont-bg-primary)',
+                borderRadius: 'var(--semiont-radius-md)',
+                border: '1px solid var(--semiont-border-primary)',
+                maxHeight: '150px',
+                overflowY: 'auto',
+                marginBottom: '0.5rem',
+              }}>
+                <div style={{ fontSize: 'var(--semiont-text-sm)', fontFamily: 'monospace', whiteSpace: 'pre-wrap', color: 'var(--semiont-text-secondary)' }}>
+                  {gatheredContext.sourceContext.before && <span>{gatheredContext.sourceContext.before}</span>}
+                  <span style={{
+                    backgroundColor: 'var(--semiont-color-primary-100)',
+                    padding: '0 0.25rem',
+                    fontWeight: 600,
+                    color: 'var(--semiont-color-primary-900)',
+                  }}>
+                    {gatheredContext.sourceContext.selected}
+                  </span>
+                  {gatheredContext.sourceContext.after && <span>{gatheredContext.sourceContext.after}</span>}
+                </div>
+              </div>
+            )}
+            {gatheredContext.graphContext && gatheredContext.graphContext.connections && gatheredContext.graphContext.connections.length > 0 && (
+              <div style={{
+                padding: '0.5rem 0',
+                fontSize: 'var(--semiont-text-sm)',
+                color: 'var(--semiont-text-secondary)',
+              }}>
+                <span style={{ fontSize: 'var(--semiont-text-xs)', fontWeight: 500, marginRight: '0.5rem' }}>Connections:</span>
+                {gatheredContext.graphContext.connections.map(conn => (
+                  <span key={conn.resourceId} className="semiont-chip" style={{ fontSize: 'var(--semiont-text-xs)', padding: '0.125rem 0.5rem', marginRight: '0.25rem' }}>
+                    {conn.resourceName}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
         {/* Create Form */}
         <div className="semiont-form">
         <form onSubmit={handleSaveResource} className="semiont-form__fields">

package/src/features/resource-discovery/__tests__/ResourceCard.test.tsx

@@ -11,7 +11,7 @@ import type { ResourceCardProps } from '../components/ResourceCard';
 
 const createMockResource = (overrides?: any) => ({
   '@context': 'https://www.w3.org/ns/anno.jsonld',
-  '@id': 'http://localhost/resources/test-123',
+  '@id': 'test-123',
   '@type': 'schema:DigitalDocument',
   name: 'Test Resource',
   description: 'A test resource',

package/src/features/resource-discovery/__tests__/ResourceDiscoveryPage.test.tsx

@@ -13,7 +13,7 @@ import { EventBusProvider, resetEventBusForTesting } from '../../../contexts/Eve
 
 const createMockResource = (id: string, name: string, entityTypes: string[] = []) => ({
   '@context': 'https://www.w3.org/ns/anno.jsonld',
-  '@id': `http://localhost/resources/${id}`,
+  '@id': id,
   '@type': 'schema:DigitalDocument',
   name,
   description: `Description for ${name}`,
@@ -352,7 +352,7 @@ describe('ResourceDiscoveryPage', () => {
         expect.objectContaining({
           theme: 'dark',
         }),
-        expect.anything()
+        undefined,
       );
     });
   });

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

@@ -1,5 +1,5 @@
 /**
- * Regression test: pendingAnnotation cleared after mark:createsucceeds
+ * Regression test: pendingAnnotation cleared after mark:submit succeeds
  *
  * Bug: handleAnnotationCreate in useMarkFlow called the API and emitted
  * mark:created, but never called setPendingAnnotation(null). The pending
@@ -25,7 +25,7 @@ import { EventBusProvider, useEventBus, resetEventBusForTesting } from '../../..
 import { ApiClientProvider } from '../../../contexts/ApiClientContext';
 import { AuthTokenProvider } from '../../../contexts/AuthTokenContext';
 import { SemiontApiClient } from '@semiont/api-client';
-import { resourceUri } from '@semiont/core';
+import { resourceId } from '@semiont/core';
 import type { Emitter } from 'mitt';
 import type { EventMap } from '@semiont/core';
 
@@ -40,10 +40,10 @@ vi.mock('../../../components/Toast', () => ({
 }));
 import type { Motivation, Selector } from '@semiont/core';
 
-const TEST_URI = resourceUri('http://localhost:4000/resources/test-resource');
+const TEST_URI = resourceId('test-resource');
 
 const MOCK_ANNOTATION = {
-  id: 'http://localhost:4000/annotations/new-1',
+  id: 'new-1',
   type: 'Annotation',
   motivation: 'linking' as Motivation,
   target: { source: TEST_URI },
@@ -110,7 +110,7 @@ describe('Annotation creation clears pendingAnnotation', () => {
     resetEventBusForTesting();
     createAnnotationSpy = vi
       .spyOn(SemiontApiClient.prototype, 'createAnnotation')
-      .mockResolvedValue({ annotation: MOCK_ANNOTATION } as any);
+      .mockResolvedValue({ annotationId: MOCK_ANNOTATION.id } as any);
   });
 
   afterEach(() => {
@@ -129,9 +129,9 @@ describe('Annotation creation clears pendingAnnotation', () => {
       expect(screen.getByTestId('pending-motivation')).toHaveTextContent('linking');
     });
 
-    // Emit mark:create(what ReferencesPanel does when user clicks "Create Reference")
+    // Emit mark:submit(what ReferencesPanel does when user clicks "Create Reference")
     await act(async () => {
-      emit('mark:create', {
+      emit('mark:submit', {
         motivation: 'linking',
         selector: TEXT_SELECTOR,
         body: [{ type: 'TextualBody', value: 'Person', purpose: 'tagging' }],
@@ -158,7 +158,7 @@ describe('Annotation creation clears pendingAnnotation', () => {
     });
 
     await act(async () => {
-      emit('mark:create', {
+      emit('mark:submit', {
         motivation: 'assessing',
         selector: SVG_SELECTOR,
         body: [{ type: 'TextualBody', value: 'Looks good', purpose: 'assessing' }],
@@ -183,7 +183,7 @@ describe('Annotation creation clears pendingAnnotation', () => {
 
     // Empty body is valid for assessments
     await act(async () => {
-      emit('mark:create', {
+      emit('mark:submit', {
         motivation: 'assessing',
         selector: SVG_SELECTOR,
         body: [],
@@ -207,7 +207,7 @@ describe('Annotation creation clears pendingAnnotation', () => {
     });
 
     await act(async () => {
-      emit('mark:create', {
+      emit('mark:submit', {
         motivation: 'commenting',
         selector: TEXT_SELECTOR,
         body: [{ type: 'TextualBody', value: 'Great point', purpose: 'commenting' }],
@@ -231,7 +231,7 @@ describe('Annotation creation clears pendingAnnotation', () => {
     });
 
     await act(async () => {
-      emit('mark:create', {
+      emit('mark:submit', {
         motivation: 'tagging',
         selector: SVG_SELECTOR,
         body: [{ type: 'TextualBody', value: 'concept:trust', purpose: 'tagging' }],
@@ -256,7 +256,7 @@ describe('Annotation creation clears pendingAnnotation', () => {
     });
 
     await act(async () => {
-      emit('mark:create', {
+      emit('mark:submit', {
         motivation: 'linking',
         selector: TEXT_SELECTOR,
         body: [],
@@ -265,7 +265,7 @@ describe('Annotation creation clears pendingAnnotation', () => {
 
     await waitFor(() => {
       expect(createdListener).toHaveBeenCalledTimes(1);
-      expect(createdListener).toHaveBeenCalledWith({ annotation: MOCK_ANNOTATION });
+      expect(createdListener).toHaveBeenCalledWith({ annotationId: 'new-1' });
     });
 
     subscription.unsubscribe();
@@ -285,7 +285,7 @@ describe('Annotation creation clears pendingAnnotation', () => {
     });
 
     await act(async () => {
-      emit('mark:create', {
+      emit('mark:submit', {
         motivation: 'linking',
         selector: TEXT_SELECTOR,
         body: [],