@semiont/react-ui 0.5.1 → 0.5.3

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

@@ -4,8 +4,10 @@ import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
+import { of } from 'rxjs';
+import { CacheObservable } from '@semiont/sdk';
 import { TaggingPanel } from '../TaggingPanel';
-import type { components, EventBus } from '@semiont/core';
+import type { components, EventBus, TagSchema } from '@semiont/core';
 import { createTestSemiontWrapper } from '../../../../test-utils';
 
 import type { Annotation } from '@semiont/core';
@@ -32,8 +34,30 @@ function createEventTracker() {
   };
 }
 
+// Test tag schemas — the panel subscribes to `client.browse.tagSchemas()`.
+// We stub that method directly to return a `CacheObservable` that emits
+// these schemas synchronously, mirroring the post-resolve cache state
+// without the round-trip through bus/transport plumbing.
+const TEST_TAG_SCHEMAS: TagSchema[] = [
+  {
+    id: 'legal-irac',
+    name: 'Legal (IRAC)',
+    description: 'Issue, Rule, Application, Conclusion framework for legal analysis',
+    domain: 'legal',
+    tags: [
+      { name: 'Issue',       description: 'Legal question to be resolved', examples: [] },
+      { name: 'Rule',        description: 'Legal principle or statute',    examples: [] },
+      { name: 'Application', description: 'Application of rule to facts',  examples: [] },
+      { name: 'Conclusion',  description: 'Resolution of the issue',       examples: [] },
+    ],
+  },
+];
+
 const renderWithEventBus = (component: React.ReactElement, tracker?: ReturnType<typeof createEventTracker>) => {
-  const { SemiontWrapper, eventBus } = createTestSemiontWrapper();
+  const { SemiontWrapper, eventBus, client } = createTestSemiontWrapper();
+  vi.spyOn(client.browse, 'tagSchemas').mockReturnValue(
+    CacheObservable.from(of(TEST_TAG_SCHEMAS))
+  );
   if (tracker) tracker._attach(eventBus);
   const Wrapper = ({ children }: { children: React.ReactNode }) => (
     <SemiontWrapper>{children}</SemiontWrapper>
@@ -41,20 +65,36 @@ const renderWithEventBus = (component: React.ReactElement, tracker?: ReturnType<
   return render(component, { wrapper: Wrapper });
 };
 
-// Mock TranslationContext
+// Variant for the empty-registry case: the cache resolves to `[]`
+// (post-bootstrap, no schemas registered). Distinct from the still-
+// loading case where the observable yields `undefined`.
+const renderWithEmptyRegistry = (component: React.ReactElement) => {
+  const { SemiontWrapper, client } = createTestSemiontWrapper();
+  vi.spyOn(client.browse, 'tagSchemas').mockReturnValue(
+    CacheObservable.from(of([]))
+  );
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <SemiontWrapper>{children}</SemiontWrapper>
+  );
+  return render(component, { wrapper: Wrapper });
+};
+
+// Mock TranslationContext. The component now uses `schema.name` /
+// `category.name` directly off the registered TagSchema objects (Stage 2.B
+// of TAG-SCHEMAS-GAP), so the per-schema/per-category translation keys
+// the older mock carried (`schemaLegal`, `categoryIssue`, etc.) are no
+// longer referenced — kept the mock minimal.
 vi.mock('../../../../contexts/TranslationContext', () => ({
   useTranslations: vi.fn(() => (key: string, params?: Record<string, any>) => {
     const translations: Record<string, string> = {
       title: 'Tags',
       noTags: 'No tags yet. Select text to add a tag.',
+      noSchemas: 'No tag schemas registered for this knowledge base.',
       createTagForSelection: 'Create tag for selection',
       selectSchema: 'Select schema',
       selectCategory: 'Select category',
       selectCategories: 'Select categories',
       chooseCategory: 'Choose a category',
-      schemaLegal: 'Legal (IRAC)',
-      schemaScientific: 'Scientific (IMRAD)',
-      schemaArgument: 'Argument',
       annotateTags: 'Annotate Tags',
       annotate: 'Annotate',
       cancel: 'Cancel',
@@ -62,10 +102,6 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
       selectAll: 'Select All',
       deselectAll: 'Deselect All',
       categoriesSelected: '{count} categories selected',
-      categoryIssue: 'Issue',
-      categoryRule: 'Rule',
-      categoryApplication: 'Application',
-      categoryConclusion: 'Conclusion',
     };
     let result = translations[key] || key;
     if (params?.count !== undefined) {
@@ -95,23 +131,6 @@ vi.mock('../TagEntry', () => ({
   ),
 }));
 
-// Mock tag schemas
-vi.mock('../../../../lib/tag-schemas', () => ({
-  getAllTagSchemas: vi.fn(() => [
-    {
-      id: 'legal-irac',
-      name: 'Legal (IRAC)',
-      description: 'Issue, Rule, Application, Conclusion framework for legal analysis',
-      tags: [
-        { name: 'Issue', description: 'Legal question to be resolved', color: '#3b82f6' },
-        { name: 'Rule', description: 'Legal principle or statute', color: '#10b981' },
-        { name: 'Application', description: 'Application of rule to facts', color: '#f59e0b' },
-        { name: 'Conclusion', description: 'Resolution of the issue', color: '#ef4444' },
-      ],
-    },
-  ]),
-}));
-
 import { getTextPositionSelector, getTargetSelector } from '@semiont/core';
 const mockGetTextPositionSelector = getTextPositionSelector as MockedFunction<typeof getTextPositionSelector>;
 const mockGetTargetSelector = getTargetSelector as MockedFunction<typeof getTargetSelector>;
@@ -307,7 +326,7 @@ describe('TaggingPanel Component', () => {
       expect(selects.length).toBeGreaterThan(0);
     });
 
-    it('should show category selector in tag creation form', () => {
+    it('should show category selector in tag creation form', async () => {
       const pendingAnnotation = createPendingAnnotation('Selected text');
 
       renderWithEventBus(
@@ -317,7 +336,10 @@ describe('TaggingPanel Component', () => {
         />
       );
 
-      expect(screen.getByText(/Select category/)).toBeInTheDocument();
+      // The category selector only renders once the schema list has
+      // resolved and the default schema (first registered) has been
+      // picked — async because the schemas come from `browse.tagSchemas()`.
+      expect(await screen.findByText(/Select category/)).toBeInTheDocument();
     });
 
     it('should emit mark:submitevent when category is selected', async () => {
@@ -332,7 +354,10 @@ describe('TaggingPanel Component', () => {
         tracker
       );
 
-      // Find the category selector (the one in the pending annotation form)
+      // Wait for the schema list to load — `browse.tagSchemas()` is
+      // async, so the category dropdown only renders after the bus
+      // response lands.
+      await screen.findByText(/Select category/);
       const categorySelects = screen.getAllByRole('combobox');
       const categorySelect = categorySelects.find(select =>
         select.querySelector('option[value=""]')?.textContent === 'Choose a category'
@@ -366,6 +391,7 @@ describe('TaggingPanel Component', () => {
         tracker
       );
 
+      await screen.findByText(/Select category/);
       const categorySelects = screen.getAllByRole('combobox');
       const categorySelect = categorySelects.find(select =>
         select.querySelector('option[value=""]')?.textContent === 'Choose a category'
@@ -474,7 +500,7 @@ describe('TaggingPanel Component', () => {
       expect(selects.length).toBeGreaterThan(0);
     });
 
-    it('should show Select All and Deselect All buttons', () => {
+    it('should show Select All and Deselect All buttons', async () => {
       renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
@@ -482,11 +508,11 @@ describe('TaggingPanel Component', () => {
         />
       );
 
-      expect(screen.getByText('Select All')).toBeInTheDocument();
+      expect(await screen.findByText('Select All')).toBeInTheDocument();
       expect(screen.getByText('Deselect All')).toBeInTheDocument();
     });
 
-    it('should show category checkboxes', () => {
+    it('should show category checkboxes', async () => {
       renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
@@ -494,7 +520,9 @@ describe('TaggingPanel Component', () => {
         />
       );
 
-      expect(screen.getByText('Issue')).toBeInTheDocument();
+      // Categories appear once `browse.tagSchemas()` resolves and the
+      // default schema is selected.
+      expect(await screen.findByText('Issue')).toBeInTheDocument();
       expect(screen.getByText('Rule')).toBeInTheDocument();
       expect(screen.getByText('Application')).toBeInTheDocument();
       expect(screen.getByText('Conclusion')).toBeInTheDocument();
@@ -520,7 +548,7 @@ describe('TaggingPanel Component', () => {
         />
       );
 
-      const issueCheckbox = screen.getByLabelText(/Issue/);
+      const issueCheckbox = await screen.findByLabelText(/Issue/);
       await userEvent.click(issueCheckbox);
 
       const annotateButton = screen.getByRole('button', { name: /✨\s*Annotate/i });
@@ -537,7 +565,7 @@ describe('TaggingPanel Component', () => {
         tracker
       );
 
-      const issueCheckbox = screen.getByLabelText(/Issue/);
+      const issueCheckbox = await screen.findByLabelText(/Issue/);
       const ruleCheckbox = screen.getByLabelText(/Rule/);
 
       await userEvent.click(issueCheckbox);
@@ -581,7 +609,7 @@ describe('TaggingPanel Component', () => {
       expect(headings[0]).toHaveClass('semiont-panel-header__text');
     });
 
-    it('should have proper checkbox labels', () => {
+    it('should have proper checkbox labels', async () => {
       renderWithEventBus(
         <TaggingPanel
           {...defaultProps}
@@ -589,8 +617,70 @@ describe('TaggingPanel Component', () => {
         />
       );
 
-      expect(screen.getByLabelText(/Issue/)).toBeInTheDocument();
+      expect(await screen.findByLabelText(/Issue/)).toBeInTheDocument();
       expect(screen.getByLabelText(/Rule/)).toBeInTheDocument();
     });
   });
+
+  describe('Empty registry (no tag schemas registered)', () => {
+    // The empty path: `browse.tagSchemas()` resolves to `[]` (KB has
+    // not run `register-tag-schemas` yet, no skill has registered a
+    // schema either). The panel should surface a clear message in
+    // both contexts where the schema picker would otherwise render —
+    // not just leave the dropdown empty.
+
+    it('shows the noSchemas message in the assist section instead of the picker', async () => {
+      renderWithEmptyRegistry(
+        <TaggingPanel {...defaultProps} annotateMode={true} />
+      );
+
+      // The empty-state message renders…
+      expect(
+        await screen.findByText(/No tag schemas registered for this knowledge base/i),
+      ).toBeInTheDocument();
+
+      // …and the picker UI does NOT (the form-field label `Select schema`
+      // is gated on `!noSchemasRegistered`).
+      expect(screen.queryByLabelText(/Select schema/i)).not.toBeInTheDocument();
+    });
+
+    it('shows the noSchemas message in the pending tag-creation form instead of the picker', async () => {
+      const pendingAnnotation = createPendingAnnotation('Selected text');
+
+      renderWithEmptyRegistry(
+        <TaggingPanel
+          {...defaultProps}
+          pendingAnnotation={pendingAnnotation}
+          annotateMode={false}
+        />
+      );
+
+      // The pending form opens. With annotateMode={false} the assist
+      // section is skipped so we get exactly one empty-state message —
+      // the one inside the pending form. (Default annotateMode=true
+      // renders the message in both places, which is the right product
+      // behavior; a separate test covers the assist-section path.)
+      expect(screen.getByText(/Create tag for selection/)).toBeInTheDocument();
+      expect(
+        await screen.findByText(/No tag schemas registered for this knowledge base/i),
+      ).toBeInTheDocument();
+      // No "Select category" label — the second dropdown renders only
+      // when `selectedSchema` exists, which requires a schema to be
+      // registered first.
+      expect(screen.queryByText(/Select category/i)).not.toBeInTheDocument();
+    });
+
+    it('keeps the panel rendering tags in the list section even with an empty registry', () => {
+      // The existing tag annotations on the resource still render —
+      // schema-registration is a write-side concern; reading existing
+      // tags doesn't depend on the registry being populated.
+      renderWithEmptyRegistry(
+        <TaggingPanel {...defaultProps} annotations={mockTags.multiple} />
+      );
+
+      expect(screen.getByTestId('tag-1')).toBeInTheDocument();
+      expect(screen.getByTestId('tag-2')).toBeInTheDocument();
+      expect(screen.getByTestId('tag-3')).toBeInTheDocument();
+    });
+  });
 });

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;