@semiont/react-ui 0.5.9 → 0.5.11

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

@@ -59,8 +59,9 @@ interface UnifiedAnnotationsPanelProps {
   referencedBy?: any[];
   referencedByLoading?: boolean;
 
-  // Resource context
-  resourceId?: string;
+  // Resource context — threaded to every per-motivation panel, which stamps it
+  // as `source` on mark:submit (multi-viewer routing).
+  resourceId: string;
   initialTab?: TabKey;
   initialTabGeneration?: number; // Generation counter for tab switching
 
@@ -244,6 +245,7 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
 
           // Common props for all annotation panels
           const commonProps = {
+            resourceId: props.resourceId,
             annotations,
             pendingAnnotation: props.pendingAnnotation,
             isAssisting,
@@ -268,6 +270,7 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
           if (activeTab === 'reference') {
             return (
               <ReferencesPanel
+                resourceId={commonProps.resourceId}
                 annotations={commonProps.annotations}
                 pendingAnnotation={commonProps.pendingAnnotation}
                 isAssisting={commonProps.isAssisting}

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

@@ -140,6 +140,7 @@ const createPendingAnnotation = (exact: string) => ({
 
 describe('AssessmentPanel Component', () => {
   const defaultProps = {
+    resourceId: 'res-1',
     annotations: mockAssessments.empty,
     pendingAnnotation: null,
   };

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

@@ -141,6 +141,7 @@ const createPendingAnnotation = (exact: string) => ({
 
 describe('CommentsPanel Component', () => {
   const defaultProps = {
+    resourceId: 'res-1',
     annotations: mockComments.empty,
     pendingAnnotation: null,
   };

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

@@ -74,7 +74,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
   describe('Detection Progress Prop Passing', () => {
     it('should pass progress to AssistSection when provided', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={true}
@@ -93,7 +93,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     it('should pass null progress to AssistSection', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={false}
@@ -109,7 +109,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     it('should pass undefined progress to AssistSection', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={false}
@@ -125,7 +125,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     it('should keep progress visible after detection completes (isAssisting=false)', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={false}
@@ -146,7 +146,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     it('should pass progress with request parameters to AssistSection', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={true}
@@ -172,7 +172,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
   describe('Annotate Mode Toggling', () => {
     it('should render AssistSection when annotateMode is true', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={false}
@@ -186,7 +186,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     it('should NOT render AssistSection when annotateMode is false', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={false}
@@ -200,7 +200,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     it('should hide progress when switching to browse mode (annotateMode=false)', () => {
       const { rerender } = renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={true}
@@ -217,7 +217,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
       // Switch to browse mode
       rerender(
-        <HighlightPanel
+        <HighlightPanel resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={true}
@@ -238,7 +238,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
   describe('State Combinations', () => {
     it('should handle isAssisting=true with no progress (starting state)', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={true}
@@ -253,7 +253,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     it('should handle isAssisting=false with progress (final state)', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={false}
@@ -274,7 +274,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     it('should handle multiple progress updates', () => {
       const { rerender } = renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={true}
@@ -291,7 +291,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
       // Update to analyzing
       rerender(
-        <HighlightPanel
+        <HighlightPanel resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={true}
@@ -309,7 +309,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
       // Update to complete
       rerender(
-        <HighlightPanel
+        <HighlightPanel resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={false}
@@ -330,7 +330,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
   describe('Highlights List Rendering', () => {
     it('should render highlights list alongside detection progress', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel resourceId="res-1"
           annotations={mockAnnotations}
           pendingAnnotation={null}
           isAssisting={true}
@@ -350,7 +350,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
 
     it('should show empty state when no highlights', () => {
       renderWithProviders(
-        <HighlightPanel
+        <HighlightPanel resourceId="res-1"
           annotations={[]}
           pendingAnnotation={null}
           isAssisting={false}

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

@@ -69,7 +69,7 @@ const mockRoutes = { resourceDetail: (id: string) => `/resource/${id}` } as any;
 function ObservableHarness({ source$ }: { source$: BehaviorSubject<string[]> }) {
   const entityTypes = useObservable(source$) ?? [];
   return (
-    <ReferencesPanel
+    <ReferencesPanel resourceId="res-1"
       annotations={[]}
       isAssisting={false}
       progress={null}

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

@@ -86,6 +86,7 @@ describe('ReferencesPanel Component', () => {
   } as any;
 
   const defaultProps = {
+    resourceId: 'res-1',
     allEntityTypes: ['Person', 'Organization', 'Location', 'Date'],
     isAssisting: false,
     progress: null,

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

@@ -20,6 +20,8 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
       storageUri: 'Storage',
       clone: 'Clone',
       cloneDescription: 'Generate a shareable clone link for this resource',
+      generate: 'Generate',
+      generateDescription: "Generate a new resource from this one's context",
       archive: 'Archive',
       archiveDescription: 'Move this resource to archived status',
       unarchive: 'Unarchive',
@@ -269,6 +271,30 @@ describe('ResourceInfoPanel Component', () => {
     });
   });
 
+  describe('Generate Action', () => {
+    it('renders the Generate button when onGenerate is provided', () => {
+      renderWithEventBus(
+        <ResourceInfoPanel {...defaultProps} onGenerate={() => {}} />
+      );
+      expect(screen.getByRole('button', { name: /Generate/i })).toBeInTheDocument();
+      expect(screen.getByText("Generate a new resource from this one's context")).toBeInTheDocument();
+    });
+
+    it('hides the Generate button when onGenerate is omitted', () => {
+      renderWithEventBus(<ResourceInfoPanel {...defaultProps} />);
+      expect(screen.queryByRole('button', { name: /Generate/i })).not.toBeInTheDocument();
+    });
+
+    it('calls onGenerate when clicked', () => {
+      const onGenerate = vi.fn();
+      renderWithEventBus(
+        <ResourceInfoPanel {...defaultProps} onGenerate={onGenerate} />
+      );
+      fireEvent.click(screen.getByRole('button', { name: /Generate/i }));
+      expect(onGenerate).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe('Provenance Section', () => {
     it('should not render provenance section when no provenance data', () => {
       renderWithEventBus(<ResourceInfoPanel {...defaultProps} />);

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

@@ -185,6 +185,7 @@ const createPendingAnnotation = (exact: string) => ({
 
 describe('TaggingPanel Component', () => {
   const defaultProps = {
+    resourceId: 'res-1',
     annotations: mockTags.empty,
     pendingAnnotation: null,
   };

package/src/components/toolbar/Toolbar.css

@@ -219,3 +219,17 @@
 }
 
 /* Popup Components */
+
+/* ── Compact display form ────────────────────────────────────────────────────
+ * Display-only variant for inline embeds: icon-only, tight, chromeless. The
+ * bar's functionality is identical — only its form changes. */
+.semiont-annotate-toolbar--compact {
+  gap: 0.375rem;
+  padding: 0.25rem 0;
+  background: transparent; /* the host container owns the background */
+  border-bottom: none;
+}
+
+.semiont-annotate-toolbar--compact .semiont-dropdown-label {
+  display: none; /* icon-only collapsed triggers; expanded menus keep labels */
+}

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

@@ -2,6 +2,7 @@ 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';
+import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing';
 
 function mockBrowse(): ShellStateUnit {
   return { dispose: vi.fn() } as unknown as ShellStateUnit;
@@ -169,3 +170,16 @@ describe('createExchangeStateUnit', () => {
     stateUnit.dispose();
   });
 });
+
+describe('ExchangeStateUnit — StateUnit axioms', () => {
+  it('satisfies the StateUnit axioms (incl. A7-passed: never disposes the injected browse)', () => {
+    assertStateUnitAxioms({
+      setup: () => {
+        const browse = disposeProbe();
+        return { unit: createExchangeStateUnit(browse as unknown as ShellStateUnit, vi.fn(), vi.fn()), passedIn: [browse] };
+      },
+      surfaces: (u) => [u.selectedFile$, u.preview$, u.importPhase$, u.importMessage$, u.importResult$, u.isExporting$, u.isImporting$],
+      invocations: (u) => [() => u.cancelImport(), () => u.doImport()],
+    });
+  });
+});

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

@@ -1,7 +1,7 @@
 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 { StateUnit } from '@semiont/core';
 import type { ShellStateUnit } from '../../../state/shell-state-unit';
 import type { BackendDownload, ProgressEvent } from '@semiont/core';
 
@@ -33,7 +33,9 @@ export function createExchangeStateUnit(
   importFn: (file: File) => Observable<ProgressEvent>,
 ): ExchangeStateUnit {
   const disposer = createDisposer();
-  disposer.add(browse);
+  // `browse` (ShellStateUnit) is a *passed-in* dependency owned by the caller
+  // (`useShellStateUnit`), not this unit — do NOT add it to the disposer (it's the
+  // shared, app-scoped shell). See packages/sdk/docs/STATE-UNITS.md (composition rule).
 
   const selectedFile$ = new BehaviorSubject<File | null>(null);
   const preview$ = new BehaviorSubject<ImportPreview | null>(null);

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

@@ -4,6 +4,7 @@ import { filter } from 'rxjs/operators';
 import type { SemiontClient } from '@semiont/sdk';
 import type { ShellStateUnit } from '../../../../state/shell-state-unit';
 import { createAdminSecurityStateUnit } from '../admin-security-state-unit';
+import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing';
 
 function mockBrowse(): ShellStateUnit {
   return { dispose: vi.fn() } as unknown as ShellStateUnit;
@@ -66,3 +67,16 @@ describe('createAdminSecurityStateUnit', () => {
     stateUnit.dispose();
   });
 });
+
+describe('AdminSecurityStateUnit — StateUnit axioms', () => {
+  it('satisfies the StateUnit axioms (incl. A7-passed: never disposes the injected browse)', () => {
+    assertStateUnitAxioms({
+      setup: () => {
+        const browse = disposeProbe();
+        const client = mockClient(vi.fn().mockResolvedValue({ providers: [], allowedDomains: [] }));
+        return { unit: createAdminSecurityStateUnit(client, browse as unknown as ShellStateUnit), passedIn: [browse] };
+      },
+      surfaces: (u) => [u.providers$, u.allowedDomains$, u.isLoading$],
+    });
+  });
+});

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

@@ -1,6 +1,6 @@
 import { BehaviorSubject, type Observable } from 'rxjs';
 import { createDisposer } from '@semiont/sdk';
-import type { StateUnit } from '@semiont/sdk';
+import type { StateUnit } from '@semiont/core';
 import type { ShellStateUnit } from '../../../state/shell-state-unit';
 import type { SemiontClient } from '@semiont/sdk';
 
@@ -16,7 +16,9 @@ export function createAdminSecurityStateUnit(
   browse: ShellStateUnit,
 ): AdminSecurityStateUnit {
   const disposer = createDisposer();
-  disposer.add(browse);
+  // `browse` (ShellStateUnit) is a *passed-in* dependency owned by the caller
+  // (`useShellStateUnit`), not this unit — do NOT add it to the disposer (it's the
+  // shared, app-scoped shell). See packages/sdk/docs/STATE-UNITS.md (composition rule).
 
   const providers$ = new BehaviorSubject<unknown[]>([]);
   const allowedDomains$ = new BehaviorSubject<string[]>([]);

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

@@ -4,6 +4,7 @@ import { filter } from 'rxjs/operators';
 import type { SemiontClient } from '@semiont/sdk';
 import type { ShellStateUnit } from '../../../../state/shell-state-unit';
 import { createAdminUsersStateUnit } from '../admin-users-state-unit';
+import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing';
 
 function mockBrowse(): ShellStateUnit {
   return { dispose: vi.fn() } as unknown as ShellStateUnit;
@@ -77,10 +78,16 @@ describe('createAdminUsersStateUnit', () => {
     stateUnit.dispose();
   });
 
-  it('disposes browse on dispose', () => {
-    const browse = mockBrowse();
-    const stateUnit = createAdminUsersStateUnit(mockClient(), browse);
-    stateUnit.dispose();
-    expect(browse.dispose).toHaveBeenCalled();
+});
+
+describe('AdminUsersStateUnit — StateUnit axioms', () => {
+  it('satisfies the StateUnit axioms (incl. A7-passed: never disposes the injected browse)', () => {
+    assertStateUnitAxioms({
+      setup: () => {
+        const browse = disposeProbe();
+        return { unit: createAdminUsersStateUnit(mockClient(), browse as unknown as ShellStateUnit), passedIn: [browse] };
+      },
+      surfaces: (u) => [u.users$, u.stats$, u.usersLoading$, u.statsLoading$],
+    });
   });
 });

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

@@ -1,7 +1,7 @@
 import { BehaviorSubject, type Observable } from 'rxjs';
 import { userDID } from '@semiont/core';
 import { createDisposer } from '@semiont/sdk';
-import type { StateUnit } from '@semiont/sdk';
+import type { StateUnit } from '@semiont/core';
 import type { ShellStateUnit } from '../../../state/shell-state-unit';
 import type { SemiontClient } from '@semiont/sdk';
 
@@ -19,7 +19,9 @@ export function createAdminUsersStateUnit(
   browse: ShellStateUnit,
 ): AdminUsersStateUnit {
   const disposer = createDisposer();
-  disposer.add(browse);
+  // `browse` (ShellStateUnit) is a *passed-in* dependency owned by the caller
+  // (`useShellStateUnit`), not this unit — do NOT add it to the disposer (it's the
+  // shared, app-scoped shell). See packages/sdk/docs/STATE-UNITS.md (composition rule).
 
   const users$ = new BehaviorSubject<unknown[]>([]);
   const stats$ = new BehaviorSubject<unknown | null>(null);

package/src/features/auth-welcome/state/__tests__/welcome-state-unit.test.ts

@@ -3,6 +3,7 @@ import { firstValueFrom } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import type { SemiontClient } from '@semiont/sdk';
 import { createWelcomeStateUnit } from '../welcome-state-unit';
+import { assertStateUnitAxioms } from '@semiont/core/testing';
 
 function mockClient(overrides: {
   getMe?: ReturnType<typeof vi.fn>;
@@ -84,3 +85,13 @@ describe('createWelcomeStateUnit', () => {
     stateUnit.dispose();
   });
 });
+
+describe('WelcomeStateUnit — StateUnit axioms', () => {
+  it('satisfies the StateUnit axioms', () => {
+    assertStateUnitAxioms({
+      setup: () => createWelcomeStateUnit(mockClient()),
+      surfaces: (u) => [u.userData$, u.isProcessing$],
+      invocations: (u) => [() => u.acceptTerms()],
+    });
+  });
+});

package/src/features/auth-welcome/state/welcome-state-unit.ts

@@ -1,6 +1,6 @@
 import { BehaviorSubject, type Observable } from 'rxjs';
 import { createDisposer } from '@semiont/sdk';
-import type { StateUnit } from '@semiont/sdk';
+import type { StateUnit } from '@semiont/core';
 import type { SemiontClient } from '@semiont/sdk';
 
 export interface WelcomeStateUnit extends StateUnit {

package/src/features/moderate-entity-tags/state/__tests__/entity-tags-state-unit.test.ts

@@ -4,6 +4,7 @@ import { filter } from 'rxjs/operators';
 import type { SemiontClient } from '@semiont/sdk';
 import type { ShellStateUnit } from '../../../../state/shell-state-unit';
 import { createEntityTagsStateUnit } from '../entity-tags-state-unit';
+import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing';
 
 function mockBrowse(): ShellStateUnit {
   return { dispose: vi.fn() } as unknown as ShellStateUnit;
@@ -100,3 +101,16 @@ describe('createEntityTagsStateUnit', () => {
     stateUnit.dispose();
   });
 });
+
+describe('EntityTagsStateUnit — StateUnit axioms', () => {
+  it('satisfies the StateUnit axioms (incl. A7-passed: never disposes the injected browse)', () => {
+    assertStateUnitAxioms({
+      setup: () => {
+        const browse = disposeProbe();
+        return { unit: createEntityTagsStateUnit(mockClient(), browse as unknown as ShellStateUnit), passedIn: [browse] };
+      },
+      surfaces: (u) => [u.newTag$, u.error$, u.isAdding$],
+      invocations: (u) => [() => u.setNewTag(''), () => u.addTag()],
+    });
+  });
+});

package/src/features/moderate-entity-tags/state/entity-tags-state-unit.ts

@@ -1,6 +1,6 @@
 import { BehaviorSubject, type Observable, map } from 'rxjs';
 import { createDisposer } from '@semiont/sdk';
-import type { StateUnit } from '@semiont/sdk';
+import type { StateUnit } from '@semiont/core';
 import type { ShellStateUnit } from '../../../state/shell-state-unit';
 import type { SemiontClient } from '@semiont/sdk';
 
@@ -20,7 +20,9 @@ export function createEntityTagsStateUnit(
   browse: ShellStateUnit,
 ): EntityTagsStateUnit {
   const disposer = createDisposer();
-  disposer.add(browse);
+  // `browse` (ShellStateUnit) is a *passed-in* dependency owned by the caller
+  // (`useShellStateUnit`), not this unit — do NOT add it to the disposer (it's the
+  // shared, app-scoped shell). See packages/sdk/docs/STATE-UNITS.md (composition rule).
 
   const newTag$ = new BehaviorSubject<string>('');
   const error$ = new BehaviorSubject<string>('');

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

@@ -7,7 +7,7 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import type { GatheredContext } from '@semiont/core';
+import { deriveViews, type GatheredContext } from '@semiont/core';
 import { capabilitiesOf, AUTHORABLE_MEDIA_TYPES, MEDIA_TYPES, mediaTypeForExtension, isSupportedMediaType, LOCALES } from '@semiont/core';
 import type { UploadProgress } from '@semiont/sdk';
 import { type CloneData, type ReferenceData } from '../state/compose-page-state-unit';
@@ -283,6 +283,12 @@ export function ResourceComposePage({
   const isClone = mode === 'clone';
   const isReferenceCompletion = mode === 'reference';
 
+  // Gathered-context panel — annotation-focus only for now.
+  const composeFocus = gatheredContext?.focus.kind === 'annotation' ? gatheredContext.focus : null;
+  const composeConnections = gatheredContext && composeFocus
+    ? deriveViews(gatheredContext.graph, String(composeFocus.sourceResource.id)).connections
+    : [];
+
   return (
     <div className={`semiont-page${activePanel && COMMON_PANELS.includes(activePanel as ToolbarPanelType) ? ' semiont-page--panel-open' : ''}`}>
       {/* Main Content Area */}
@@ -316,7 +322,7 @@ export function ResourceComposePage({
             border: '1px solid var(--semiont-border-primary)',
           }}>
             <h3 className="semiont-form__label" style={{ marginBottom: '0.75rem' }}>Gathered Context</h3>
-            {gatheredContext.sourceContext && (
+            {composeFocus?.selected && (
               <div style={{
                 padding: '0.75rem',
                 backgroundColor: 'var(--semiont-bg-primary)',
@@ -327,27 +333,27 @@ export function ResourceComposePage({
                 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>}
+                  {composeFocus.selected.before && <span>{composeFocus.selected.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}
+                    {composeFocus.selected.text}
                   </span>
-                  {gatheredContext.sourceContext.after && <span>{gatheredContext.sourceContext.after}</span>}
+                  {composeFocus.selected.after && <span>{composeFocus.selected.after}</span>}
                 </div>
               </div>
             )}
-            {gatheredContext.graphContext && gatheredContext.graphContext.connections && gatheredContext.graphContext.connections.length > 0 && (
+            {composeConnections.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 => (
+                {composeConnections.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>

package/src/features/resource-compose/state/__tests__/compose-page-state-unit.test.ts

@@ -4,6 +4,7 @@ import { filter } from 'rxjs/operators';
 import type { SemiontClient } from '@semiont/sdk';
 import type { ShellStateUnit } from '../../../../state/shell-state-unit';
 import { createComposePageStateUnit } from '../compose-page-state-unit';
+import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing';
 
 /** Build an `UploadObservable`-shaped mock that emits started → finished. */
 function mockUpload(resourceId: string) {
@@ -185,3 +186,15 @@ describe('createComposePageStateUnit', () => {
     stateUnit.dispose();
   });
 });
+
+describe('ComposePageStateUnit — StateUnit axioms', () => {
+  it('satisfies the StateUnit axioms (incl. A7-passed: never disposes the injected browse)', () => {
+    assertStateUnitAxioms({
+      setup: () => {
+        const browse = disposeProbe();
+        return { unit: createComposePageStateUnit(mockClient(), browse as unknown as ShellStateUnit, {}), passedIn: [browse] };
+      },
+      surfaces: (u) => [u.mode$, u.loading$, u.cloneData$, u.referenceData$, u.gatheredContext$, u.uploadProgress$],
+    });
+  });
+});

package/src/features/resource-compose/state/compose-page-state-unit.ts

@@ -2,7 +2,7 @@ import { BehaviorSubject, type Observable, map } from 'rxjs';
 import type { GatheredContext, AnnotationId, AccessToken, ResourceDescriptor, ResourceId } from '@semiont/core';
 import { resourceId as makeResourceId, annotationId as makeAnnotationId } from '@semiont/core';
 import { createDisposer } from '@semiont/sdk';
-import type { StateUnit } from '@semiont/sdk';
+import type { StateUnit } from '@semiont/core';
 import type { ShellStateUnit } from '../../../state/shell-state-unit';
 import type { SemiontClient } from '@semiont/sdk';
 import { decodeWithCharset, extensionForMediaType } from '@semiont/core';
@@ -72,7 +72,9 @@ export function createComposePageStateUnit(
   auth?: AccessToken,
 ): ComposePageStateUnit {
   const disposer = createDisposer();
-  disposer.add(browse);
+  // `browse` (ShellStateUnit) is a *passed-in* dependency owned by the caller
+  // (`useShellStateUnit`), not this unit — do NOT add it to the disposer (it's the
+  // shared, app-scoped shell). See packages/sdk/docs/STATE-UNITS.md (composition rule).
 
   const isReferenceMode = Boolean(params.annotationUri && params.sourceDocumentId && params.name);
   const isCloneMode = params.mode === 'clone' && Boolean(params.token);
@@ -199,6 +201,7 @@ export function createComposePageStateUnit(
       cloneData$.complete();
       referenceData$.complete();
       gatheredContext$.complete();
+      uploadProgress$.complete();
       disposer.dispose();
     },
   };

package/src/features/resource-discovery/state/__tests__/discover-state-unit.test.ts

@@ -4,6 +4,7 @@ import { filter, skip, take, toArray } from 'rxjs/operators';
 import type { SemiontClient } from '@semiont/sdk';
 import type { ShellStateUnit } from '../../../../state/shell-state-unit';
 import { createDiscoverStateUnit } from '../discover-state-unit';
+import { assertStateUnitAxioms, disposeProbe } from '@semiont/core/testing';
 
 function mockBrowse(): ShellStateUnit {
   return { dispose: vi.fn() } as unknown as ShellStateUnit;
@@ -100,15 +101,6 @@ describe('createDiscoverStateUnit', () => {
     stateUnit.dispose();
   });
 
-  it('disposes browse and search on dispose', () => {
-    const browse = mockBrowse();
-    const { client } = mockClient();
-    const stateUnit = createDiscoverStateUnit(client, browse);
-    stateUnit.dispose();
-
-    expect(browse.dispose).toHaveBeenCalled();
-  });
-
   it('initial selectedEntityType$ is empty and recent fetch carries no entityType', async () => {
     const { client, resourceCalls } = mockClient();
     const stateUnit = createDiscoverStateUnit(client, mockBrowse());
@@ -267,3 +259,17 @@ describe('createDiscoverStateUnit', () => {
     stateUnit.dispose();
   });
 });
+
+describe('DiscoverStateUnit — StateUnit axioms', () => {
+  it('satisfies the StateUnit axioms (incl. A7-passed: never disposes the injected browse)', () => {
+    assertStateUnitAxioms({
+      setup: () => {
+        const browse = disposeProbe();
+        const { client } = mockClient();
+        return { unit: createDiscoverStateUnit(client, browse as unknown as ShellStateUnit), passedIn: [browse] };
+      },
+      surfaces: (u) => [u.selectedEntityType$],
+      invocations: (u) => [() => u.setSelectedEntityType('')],
+    });
+  });
+});