@semiont/react-ui 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semiont/react-ui",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "React components and hooks for Semiont",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",

package/src/components/StatusDisplay.tsx

@@ -30,7 +30,7 @@ export function StatusDisplay({
     if (!semiont) { setLoading(false); return; }
 
     const fetchStatus = () => {
-      semiont.admin.status()
+      semiont.admin!.status()
         .then((result) => {
           setData(result as StatusData);
           setError(null);

package/src/components/modals/PermissionDeniedModal.tsx

@@ -6,10 +6,10 @@ import { useObservable } from '../../hooks/useObservable';
 
 /**
  * Modal that surfaces when a 403 forbidden error is reported via
- * `notifyPermissionDenied` (called from QueryCache.onError).
+ * the active session's `signals.notifyPermissionDenied(...)`.
  *
  * Reads `permissionDeniedAt$` and `permissionDeniedMessage$` from the
- * active `FrontendSessionSignals`. The signals instance clears the
+ * active `SessionSignals`. The signals instance clears the
  * flag when the user dismisses the modal. Modal state lives on
  * signals (not the session itself) so headless sessions
  * (workers/CLIs) don't carry dead observables.

package/src/components/modals/SessionExpiredModal.tsx

@@ -5,11 +5,11 @@ import { useSemiont } from '../../session/SemiontProvider';
 import { useObservable } from '../../hooks/useObservable';
 
 /**
- * Modal that surfaces when the active KB's session expires (a 401 from
- * either the session's own JWT validation or from any React Query call
- * via the QueryCache.onError handler).
+ * Modal that surfaces when the active KB's session expires (a 401
+ * surfaced by the session's own JWT validation or by the host's
+ * error-routing path).
  *
- * Reads `sessionExpiredAt$` from the active `FrontendSessionSignals`.
+ * Reads `sessionExpiredAt$` from the active `SessionSignals`.
  * When the user dismisses the modal, the signals instance clears the
  * flag. Modal state lives on signals (not the session itself) so
  * headless sessions (workers/CLIs) don't carry dead observables.

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

@@ -45,6 +45,8 @@ interface AssessmentPanelProps {
   isAssisting?: boolean;
   progress?: JobProgress | null;
   locale?: string;
+  /** BCP-47 tag of the resource being analyzed — forwarded to the assist call. */
+  sourceLanguage?: string;
   annotateMode?: boolean;
   scrollToAnnotationId?: string | null;
   onScrollCompleted?: () => void;
@@ -64,6 +66,7 @@ export function AssessmentPanel({
   isAssisting = false,
   progress,
   locale,
+  sourceLanguage,
   annotateMode = true,
   scrollToAnnotationId,
   onScrollCompleted,
@@ -243,6 +246,7 @@ export function AssessmentPanel({
             annotationType="assessment"
             isAssisting={isAssisting}
             locale={locale}
+            sourceLanguage={sourceLanguage}
             progress={progress}
           />
         )}

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

@@ -12,7 +12,10 @@ type JobProgress = components['schemas']['JobProgress'];
 interface AssistSectionProps {
   annotationType: 'highlight' | 'assessment' | 'comment';
   isAssisting: boolean;
+  /** User UI locale — written into the annotation body's `language` field for comment/assessment. */
   locale?: string;
+  /** BCP-47 tag of the resource being analyzed. Forwarded to the prompt so the LLM analyzes non-English source correctly. */
+  sourceLanguage?: string;
   progress?: JobProgress | null | undefined;
 }
 
@@ -34,6 +37,7 @@ export function AssistSection({
   annotationType,
   isAssisting,
   locale,
+  sourceLanguage,
   progress,
 }: AssistSectionProps) {
 
@@ -74,13 +78,18 @@ export function AssistSection({
       instructions: instructions.trim() || undefined,
       tone: (annotationType === 'comment' || annotationType === 'assessment') && tone ? tone : undefined,
       density: (annotationType === 'comment' || annotationType === 'assessment' || annotationType === 'highlight') && useDensity ? density : undefined,
+      // Body locale only applies where the LLM writes natural-language text:
+      // comment/assessment have a body, highlight does not.
       language: (annotationType === 'comment' || annotationType === 'assessment') ? locale : undefined,
+      // Source locale applies to all three — affects analysis quality on
+      // non-English source, regardless of whether a body is produced.
+      sourceLanguage,
     });
 
     setInstructions('');
     setTone('');
     // Don't reset density/useDensity - persist across assists
-  }, [annotationType, instructions, tone, useDensity, density, locale, session]);
+  }, [annotationType, instructions, tone, useDensity, density, locale, sourceLanguage, session]);
 
   const handleDismissProgress = useCallback(() => {
     session?.client.mark.dismissProgress();

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/view-models/domain/actor-vm.ts`.
+   * `packages/api-client/src/state/domain/actor-state-unit.ts`.
    *
    * UI mapping:
    *   `open` | `reconnecting` | `initial` | `connecting`

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

@@ -46,6 +46,8 @@ interface CommentsPanelProps {
   isAssisting?: boolean;
   progress?: JobProgress | null;
   locale?: string;
+  /** BCP-47 tag of the resource being analyzed — forwarded to the assist call. */
+  sourceLanguage?: string;
   scrollToAnnotationId?: string | null;
   onScrollCompleted?: () => void;
   hoveredAnnotationId?: string | null;
@@ -65,6 +67,7 @@ export function CommentsPanel({
   isAssisting = false,
   progress,
   locale,
+  sourceLanguage,
   scrollToAnnotationId,
   onScrollCompleted,
   hoveredAnnotationId,
@@ -253,6 +256,7 @@ export function CommentsPanel({
             annotationType="comment"
             isAssisting={isAssisting}
             locale={locale}
+            sourceLanguage={sourceLanguage}
             progress={progress}
           />
         )}

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

@@ -31,6 +31,8 @@ interface HighlightPanelProps {
   scrollToAnnotationId?: string | null;
   onScrollCompleted?: () => void;
   hoveredAnnotationId?: string | null;
+  /** BCP-47 tag of the resource being analyzed — forwarded to the assist call so the LLM analyzes non-English source correctly. */
+  sourceLanguage?: string;
 }
 
 /**
@@ -48,6 +50,7 @@ export function HighlightPanel({
   scrollToAnnotationId,
   onScrollCompleted,
   hoveredAnnotationId,
+  sourceLanguage,
 }: HighlightPanelProps) {
 
   const t = useTranslations('HighlightPanel');
@@ -151,6 +154,7 @@ export function HighlightPanel({
             annotationType="highlight"
             isAssisting={isAssisting}
             progress={progress}
+            sourceLanguage={sourceLanguage}
           />
         )}
 

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

@@ -60,6 +60,11 @@ interface Props {
   scrollToAnnotationId?: string | null;
   onScrollCompleted?: () => void;
   hoveredAnnotationId?: string | null;
+
+  /** User UI locale — stamped on the unresolved-reference body's `language` field. */
+  locale?: string;
+  /** BCP-47 tag of the resource being analyzed — fed into the prompt for source-aware analysis. */
+  sourceLanguage?: string;
 }
 
 /**
@@ -85,6 +90,8 @@ export function ReferencesPanel({
   scrollToAnnotationId,
   onScrollCompleted,
   hoveredAnnotationId,
+  locale,
+  sourceLanguage,
 }: Props) {
   const t = useTranslations('ReferencesPanel');
   const session = useObservable(useSemiont().activeSession$);
@@ -206,6 +213,10 @@ export function ReferencesPanel({
     session?.client.mark.requestAssist('linking', {
       entityTypes: selectedEntityTypes,
       includeDescriptiveReferences,
+      // Body locale stamps the unresolved-reference body's `language`;
+      // sourceLanguage tunes the prompt for non-English source content.
+      language: locale,
+      sourceLanguage,
     });
   };
 

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

@@ -48,6 +48,10 @@ interface TaggingPanelProps {
   scrollToAnnotationId?: string | null;
   onScrollCompleted?: () => void;
   hoveredAnnotationId?: string | null;
+  /** User UI locale — stamped on the tagging body's `language` field. */
+  locale?: string;
+  /** BCP-47 tag of the resource being analyzed — fed into the prompt for source-aware analysis. */
+  sourceLanguage?: string;
 }
 
 /**
@@ -67,6 +71,8 @@ export function TaggingPanel({
   scrollToAnnotationId,
   onScrollCompleted,
   hoveredAnnotationId,
+  locale,
+  sourceLanguage,
 }: TaggingPanelProps) {
   const t = useTranslations('TaggingPanel');
   const session = useObservable(useSemiont().activeSession$);
@@ -192,6 +198,10 @@ export function TaggingPanel({
       session?.client.mark.requestAssist('tagging', {
         schemaId: selectedSchemaId,
         categories: Array.from(selectedCategories),
+        // Body locale stamps the tagging body's `language`; sourceLanguage
+        // tunes the prompt for non-English source content.
+        language: locale,
+        sourceLanguage,
       });
       setSelectedCategories(new Set()); // Reset after annotation
     }

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

@@ -71,9 +71,16 @@ interface UnifiedAnnotationsPanelProps {
   // Hover coordination (for bidirectional hover highlighting)
   hoveredAnnotationId?: string | null;
 
-  // Locale for AI-generated text language
+  // Locale for AI-generated text language (annotation body locale)
   locale?: string;
 
+  /**
+   * BCP-47 tag of the resource being analyzed (source-resource locale).
+   * Independent from `locale` — a German user can analyze a French source
+   * and get German bodies back. Fed into detection prompts.
+   */
+  sourceLanguage?: string;
+
   // Routing
   Link: React.ComponentType<LinkComponentProps>;
   routes: RouteBuilder;
@@ -243,6 +250,7 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
             progress,
             annotateMode: props.annotateMode,
             locale: props.locale,
+            sourceLanguage: props.sourceLanguage,
             scrollToAnnotationId: props.scrollToAnnotationId,
             onScrollCompleted: props.onScrollCompleted,
             hoveredAnnotationId: props.hoveredAnnotationId
@@ -268,6 +276,8 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
                 scrollToAnnotationId={commonProps.scrollToAnnotationId}
                 onScrollCompleted={commonProps.onScrollCompleted}
                 hoveredAnnotationId={commonProps.hoveredAnnotationId}
+                locale={commonProps.locale}
+                sourceLanguage={commonProps.sourceLanguage}
                 allEntityTypes={props.allEntityTypes || []}
                 generatingReferenceId={props.generatingReferenceId}
                 referencedBy={props.referencedBy}

package/src/components/resource/panels/__tests__/ReferencesPanel.observable-flow.test.tsx

@@ -1,5 +1,5 @@
 /**
- * Triangulation test for the VM → useObservable → prop → chip render chain.
+ * Triangulation test for the state unit → useObservable → prop → chip render chain.
  *
  * Written after an e2e failure (test 05) where `ReferencesPanel` rendered
  * "No entity types available" even though the client provably received a
@@ -90,7 +90,7 @@ const renderWithBus = (ui: React.ReactElement) => {
   return render(<SemiontWrapper>{ui}</SemiontWrapper>);
 };
 
-describe('Layer 5-6 — VM observable → useObservable → ReferencesPanel chips', () => {
+describe('Layer 5-6 — state-unit observable → useObservable → ReferencesPanel chips', () => {
   it('an observable seeded with [9 strings] renders 9 pending-reference chips', async () => {
     const source$ = new BehaviorSubject<string[]>(NINE_TYPES);
     renderWithBus(<ObservableHarness source$={source$} />);

package/src/features/admin-devops/components/AdminDevOpsPage.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import {
   CommandLineIcon
 } from '@heroicons/react/24/outline';
-import { COMMON_PANELS, type ToolbarPanelType } from '@semiont/sdk';
+import { COMMON_PANELS, type ToolbarPanelType } from '../../../state/shell-state-unit';
 export interface DevOpsFeature {
   title: string;
   description: string;

package/src/features/admin-exchange/components/AdminExchangePage.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { COMMON_PANELS, type ToolbarPanelType } from '@semiont/sdk';
+import { COMMON_PANELS, type ToolbarPanelType } from '../../../state/shell-state-unit';
 import { ExportCard, type ExportCardTranslations } from './ExportCard';
 import { ImportCard, type ImportCardProps, type ImportCardTranslations } from './ImportCard';
 import { ImportProgress, type ImportProgressTranslations } from './ImportProgress';

package/src/features/admin-exchange/components/ImportCard.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { useRef, useState, useCallback } from 'react';
-import type { ImportPreview } from '@semiont/sdk';
+import type { ImportPreview } from '../state/exchange-state-unit';
 export type { ImportPreview };
 
 export interface ImportCardTranslations {

package/src/features/admin-exchange/state/__tests__/exchange-state-unit.test.ts

@@ -0,0 +1,171 @@
+import { describe, it, expect, vi } from 'vitest';
+import { firstValueFrom, of, throwError } from 'rxjs';
+import type { ShellStateUnit } from '../../../../state/shell-state-unit';
+import { createExchangeStateUnit } from '../exchange-state-unit';
+
+function mockBrowse(): ShellStateUnit {
+  return { dispose: vi.fn() } as unknown as ShellStateUnit;
+}
+
+function makeMockFile(name: string): File {
+  return new File(['content'], name, { type: 'application/gzip' });
+}
+
+describe('createExchangeStateUnit', () => {
+  it('initializes with null/empty state', async () => {
+    const stateUnit = createExchangeStateUnit(mockBrowse(), vi.fn(), vi.fn());
+
+    expect(await firstValueFrom(stateUnit.selectedFile$)).toBeNull();
+    expect(await firstValueFrom(stateUnit.preview$)).toBeNull();
+    expect(await firstValueFrom(stateUnit.importPhase$)).toBeNull();
+    expect(await firstValueFrom(stateUnit.isExporting$)).toBe(false);
+    expect(await firstValueFrom(stateUnit.isImporting$)).toBe(false);
+
+    stateUnit.dispose();
+  });
+
+  it('selectFile sets file and generates preview', async () => {
+    const stateUnit = createExchangeStateUnit(mockBrowse(), vi.fn(), vi.fn());
+
+    stateUnit.selectFile(makeMockFile('backup.tar.gz'));
+
+    const file = await firstValueFrom(stateUnit.selectedFile$);
+    expect(file?.name).toBe('backup.tar.gz');
+
+    const preview = await firstValueFrom(stateUnit.preview$);
+    expect(preview?.format).toBe('semiont-linked-data');
+
+    stateUnit.dispose();
+  });
+
+  it('selectFile detects unknown format', async () => {
+    const stateUnit = createExchangeStateUnit(mockBrowse(), vi.fn(), vi.fn());
+
+    stateUnit.selectFile(makeMockFile('data.json'));
+
+    const preview = await firstValueFrom(stateUnit.preview$);
+    expect(preview?.format).toBe('unknown');
+
+    stateUnit.dispose();
+  });
+
+  it('cancelImport resets all state', async () => {
+    const stateUnit = createExchangeStateUnit(mockBrowse(), vi.fn(), vi.fn());
+
+    stateUnit.selectFile(makeMockFile('backup.tar.gz'));
+    stateUnit.cancelImport();
+
+    expect(await firstValueFrom(stateUnit.selectedFile$)).toBeNull();
+    expect(await firstValueFrom(stateUnit.preview$)).toBeNull();
+    expect(await firstValueFrom(stateUnit.importPhase$)).toBeNull();
+
+    stateUnit.dispose();
+  });
+
+  // jsdom doesn't implement `Blob.prototype.stream()` portably, so build
+  // the stream literal — same shape, no environment dependency.
+  function streamOf(text: string): ReadableStream<Uint8Array> {
+    return new ReadableStream<Uint8Array>({
+      start(controller) {
+        controller.enqueue(new TextEncoder().encode(text));
+        controller.close();
+      },
+    });
+  }
+
+  it('doExport calls exportFn and returns blob + filename from BackendDownload', async () => {
+    // exportFn now returns a BackendDownload — a transport-neutral
+    // { stream, contentType, filename? } object. The state unit converts the
+    // stream to a Blob and threads filename through.
+    const exportFn = vi.fn().mockResolvedValue({
+      stream: streamOf('data'),
+      contentType: 'application/x-tar',
+      filename: 'export.tar.gz',
+    });
+
+    const stateUnit = createExchangeStateUnit(mockBrowse(), exportFn, vi.fn());
+
+    const result = await stateUnit.doExport();
+    expect(result.filename).toBe('export.tar.gz');
+    expect(await result.blob.text()).toBe('data');
+
+    expect(await firstValueFrom(stateUnit.isExporting$)).toBe(false);
+
+    stateUnit.dispose();
+  });
+
+  it('doExport falls back to a synthesized filename when the download omits one', async () => {
+    const exportFn = vi.fn().mockResolvedValue({
+      stream: streamOf('data'),
+      contentType: 'application/x-tar',
+      // no filename
+    });
+
+    const stateUnit = createExchangeStateUnit(mockBrowse(), exportFn, vi.fn());
+
+    const result = await stateUnit.doExport();
+    expect(result.filename).toMatch(/^semiont-export-\d+\.tar\.gz$/);
+
+    stateUnit.dispose();
+  });
+
+  it('doExport propagates errors from exportFn and clears isExporting$', async () => {
+    // The state unit no longer inspects HTTP status — non-OK responses are the
+    // transport's concern (ky throws on non-OK by default). The state unit just
+    // propagates whatever the exportFn rejects with and resets state.
+    const exportFn = vi.fn().mockRejectedValue(new Error('transport boom'));
+
+    const stateUnit = createExchangeStateUnit(mockBrowse(), exportFn, vi.fn());
+
+    await expect(stateUnit.doExport()).rejects.toThrow('transport boom');
+    expect(await firstValueFrom(stateUnit.isExporting$)).toBe(false);
+
+    stateUnit.dispose();
+  });
+
+  it('doImport subscribes to importFn Observable and mirrors each progress event', async () => {
+    // importFn now returns Observable<ProgressEvent>. The state unit subscribes,
+    // mirrors each emit into its state subjects, and resolves when the
+    // observable completes.
+    const importFn = vi.fn().mockReturnValue(
+      of(
+        { phase: 'uploading', message: '50%' },
+        { phase: 'complete', result: { resources: 10 } },
+      ),
+    );
+
+    const stateUnit = createExchangeStateUnit(mockBrowse(), vi.fn(), importFn);
+    stateUnit.selectFile(makeMockFile('import.tar.gz'));
+
+    await stateUnit.doImport();
+
+    expect(importFn).toHaveBeenCalledOnce();
+    expect(await firstValueFrom(stateUnit.importResult$)).toEqual({ resources: 10 });
+    expect(await firstValueFrom(stateUnit.importPhase$)).toBe('complete');
+    expect(await firstValueFrom(stateUnit.isImporting$)).toBe(false);
+
+    stateUnit.dispose();
+  });
+
+  it('doImport propagates errors from the importFn Observable and clears isImporting$', async () => {
+    const importFn = vi.fn().mockReturnValue(throwError(() => new Error('import boom')));
+
+    const stateUnit = createExchangeStateUnit(mockBrowse(), vi.fn(), importFn);
+    stateUnit.selectFile(makeMockFile('import.tar.gz'));
+
+    await expect(stateUnit.doImport()).rejects.toThrow('import boom');
+    expect(await firstValueFrom(stateUnit.isImporting$)).toBe(false);
+
+    stateUnit.dispose();
+  });
+
+  it('doImport is no-op without selected file', async () => {
+    const importFn = vi.fn();
+    const stateUnit = createExchangeStateUnit(mockBrowse(), vi.fn(), importFn);
+
+    await stateUnit.doImport();
+    expect(importFn).not.toHaveBeenCalled();
+
+    stateUnit.dispose();
+  });
+});

package/src/features/admin-exchange/state/exchange-state-unit.ts

@@ -0,0 +1,131 @@
+import { BehaviorSubject, lastValueFrom, type Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { createDisposer } from '@semiont/sdk';
+import type { StateUnit } from '@semiont/sdk';
+import type { ShellStateUnit } from '../../../state/shell-state-unit';
+import type { BackendDownload, ProgressEvent } from '@semiont/core';
+
+export interface ImportPreview {
+  format: string;
+  version: number;
+  sourceUrl: string;
+  stats: Record<string, number>;
+}
+
+export interface ExchangeStateUnit extends StateUnit {
+  browse: ShellStateUnit;
+  selectedFile$: Observable<File | null>;
+  preview$: Observable<ImportPreview | null>;
+  importPhase$: Observable<string | null>;
+  importMessage$: Observable<string | undefined>;
+  importResult$: Observable<Record<string, unknown> | undefined>;
+  isExporting$: Observable<boolean>;
+  isImporting$: Observable<boolean>;
+  selectFile(file: File): void;
+  cancelImport(): void;
+  doExport(): Promise<{ blob: Blob; filename: string }>;
+  doImport(): Promise<void>;
+}
+
+export function createExchangeStateUnit(
+  browse: ShellStateUnit,
+  exportFn: (params?: { includeArchived?: boolean }) => Promise<BackendDownload>,
+  importFn: (file: File) => Observable<ProgressEvent>,
+): ExchangeStateUnit {
+  const disposer = createDisposer();
+  disposer.add(browse);
+
+  const selectedFile$ = new BehaviorSubject<File | null>(null);
+  const preview$ = new BehaviorSubject<ImportPreview | null>(null);
+  const importPhase$ = new BehaviorSubject<string | null>(null);
+  const importMessage$ = new BehaviorSubject<string | undefined>(undefined);
+  const importResult$ = new BehaviorSubject<Record<string, unknown> | undefined>(undefined);
+  const isExporting$ = new BehaviorSubject<boolean>(false);
+  const isImporting$ = new BehaviorSubject<boolean>(false);
+
+  const selectFile = (file: File): void => {
+    selectedFile$.next(file);
+    importPhase$.next(null);
+    importMessage$.next(undefined);
+    importResult$.next(undefined);
+    preview$.next({
+      format: file.name.endsWith('.tar.gz') || file.name.endsWith('.gz') ? 'semiont-linked-data' : 'unknown',
+      version: 1,
+      sourceUrl: '',
+      stats: {} as Record<string, number>,
+    });
+  };
+
+  const cancelImport = (): void => {
+    selectedFile$.next(null);
+    preview$.next(null);
+    importPhase$.next(null);
+    importMessage$.next(undefined);
+    importResult$.next(undefined);
+  };
+
+  const doExport = async (): Promise<{ blob: Blob; filename: string }> => {
+    isExporting$.next(true);
+    try {
+      const download = await exportFn();
+      // Wrap the stream in a Response purely as a Blob-collection helper —
+      // BackendDownload itself carries no fetch dependency.
+      const blob = await new Response(download.stream).blob();
+      const filename = download.filename ?? `semiont-export-${Date.now()}.tar.gz`;
+      return { blob, filename };
+    } finally {
+      isExporting$.next(false);
+    }
+  };
+
+  const doImport = async (): Promise<void> => {
+    const file = selectedFile$.getValue();
+    if (!file) return;
+    isImporting$.next(true);
+    importPhase$.next('started');
+    importMessage$.next(undefined);
+    importResult$.next(undefined);
+    try {
+      // The importFn is `Observable<ProgressEvent>` — every emit is a
+      // progress event; the final emit before complete is the outcome.
+      // `tap` mirrors each event into our state subjects; `lastValueFrom`
+      // awaits the last value (so callers can `await vm.doImport()`).
+      await lastValueFrom(
+        importFn(file).pipe(
+          tap((event) => {
+            importPhase$.next(event.phase);
+            importMessage$.next(event.message);
+            if (event.result) importResult$.next(event.result);
+          }),
+        ),
+      );
+    } finally {
+      isImporting$.next(false);
+    }
+  };
+
+  return {
+    browse,
+    selectedFile$: selectedFile$.asObservable(),
+    preview$: preview$.asObservable(),
+    importPhase$: importPhase$.asObservable(),
+    importMessage$: importMessage$.asObservable(),
+    importResult$: importResult$.asObservable(),
+    isExporting$: isExporting$.asObservable(),
+    isImporting$: isImporting$.asObservable(),
+    selectFile,
+    cancelImport,
+    doExport,
+    doImport,
+    dispose: () => {
+      selectedFile$.complete();
+      preview$.complete();
+      importPhase$.complete();
+      importMessage$.complete();
+      importResult$.complete();
+      isExporting$.complete();
+      isImporting$.complete();
+      disposer.dispose();
+    },
+  };
+}

package/src/features/admin-security/components/AdminSecurityPage.tsx

@@ -12,7 +12,7 @@ import {
   CheckCircleIcon,
   InformationCircleIcon
 } from '@heroicons/react/24/outline';
-import { COMMON_PANELS, type ToolbarPanelType } from '@semiont/sdk';
+import { COMMON_PANELS, type ToolbarPanelType } from '../../../state/shell-state-unit';
 export interface OAuthProvider {
   name: string;
   clientId?: string;