@semiont/react-ui 0.2.33-build.79 → 0.2.33-build.80

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

@@ -21,11 +21,8 @@ const createMockProps = (overrides?: Partial<AdminSecurityPageProps>): AdminSecu
   allowedDomains: ['example.com'],
   isLoading: false,
   theme: 'light',
-  onThemeChange: vi.fn(),
   showLineNumbers: false,
-  onLineNumbersToggle: vi.fn(),
   activePanel: null,
-  onPanelToggle: vi.fn(),
   translations: {
     title: 'Security Settings',
     subtitle: 'Configure authentication and authorization',

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

@@ -26,11 +26,8 @@ export interface AdminSecurityPageProps {
 
   // UI state
   theme: 'light' | 'dark' | 'system';
-  onThemeChange: (theme: 'light' | 'dark' | 'system') => void;
   showLineNumbers: boolean;
-  onLineNumbersToggle: () => void;
   activePanel: string | null;
-  onPanelToggle: (panel: string | null) => void;
 
   // Translations
   translations: {
@@ -63,11 +60,8 @@ export function AdminSecurityPage({
   allowedDomains,
   isLoading,
   theme,
-  onThemeChange,
   showLineNumbers,
-  onLineNumbersToggle,
   activePanel,
-  onPanelToggle,
   translations: t,
   ToolbarPanels,
   Toolbar,
@@ -182,15 +176,12 @@ export function AdminSecurityPage({
         <ToolbarPanels
           activePanel={activePanel}
           theme={theme}
-          onThemeChange={onThemeChange}
           showLineNumbers={showLineNumbers}
-          onLineNumbersToggle={onLineNumbersToggle}
         />
 
         <Toolbar
           context="simple"
           activePanel={activePanel}
-          onPanelToggle={onPanelToggle}
         />
       </div>
     </div>

package/src/features/admin-users/__tests__/AdminUsersPage.test.tsx

@@ -78,11 +78,8 @@ const createMockProps = (overrides?: Partial<AdminUsersPageProps>): AdminUsersPa
   onAddUser: vi.fn(),
   onExportUsers: vi.fn(),
   theme: 'light',
-  onThemeChange: vi.fn(),
   showLineNumbers: false,
-  onLineNumbersToggle: vi.fn(),
   activePanel: null,
-  onPanelToggle: vi.fn(),
   translations: createMockTranslations(),
   ToolbarPanels: ({ children }: any) => <div data-testid="toolbar-panels">{children}</div>,
   Toolbar: () => <div data-testid="toolbar">Toolbar</div>,

package/src/features/admin-users/components/AdminUsersPage.tsx

@@ -151,11 +151,8 @@ export interface AdminUsersPageProps {
 
   // UI state
   theme: 'light' | 'dark' | 'system';
-  onThemeChange: (theme: 'light' | 'dark' | 'system') => void;
   showLineNumbers: boolean;
-  onLineNumbersToggle: () => void;
   activePanel: string | null;
-  onPanelToggle: (panel: string | null) => void;
 
   // Translations
   translations: {
@@ -215,11 +212,8 @@ export function AdminUsersPage({
   onAddUser,
   onExportUsers,
   theme,
-  onThemeChange,
   showLineNumbers,
-  onLineNumbersToggle,
   activePanel,
-  onPanelToggle,
   translations: t,
   ToolbarPanels,
   Toolbar,
@@ -458,15 +452,12 @@ export function AdminUsersPage({
         <ToolbarPanels
           activePanel={activePanel}
           theme={theme}
-          onThemeChange={onThemeChange}
           showLineNumbers={showLineNumbers}
-          onLineNumbersToggle={onLineNumbersToggle}
         />
 
         <Toolbar
           context="simple"
           activePanel={activePanel}
-          onPanelToggle={onPanelToggle}
         />
       </div>
     </div>

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

@@ -19,11 +19,8 @@ const createMockProps = (overrides?: Partial<EntityTagsPageProps>): EntityTagsPa
   onAddTag: vi.fn(),
   isAddingTag: false,
   theme: 'light',
-  onThemeChange: vi.fn(),
   showLineNumbers: false,
-  onLineNumbersToggle: vi.fn(),
   activePanel: null,
-  onPanelToggle: vi.fn(),
   translations: {
     pageTitle: 'Entity Tags',
     pageDescription: 'Manage entity type tags',

package/src/features/moderate-entity-tags/components/EntityTagsPage.tsx

@@ -28,11 +28,8 @@ export interface EntityTagsPageProps {
 
   // UI state
   theme: 'light' | 'dark' | 'system';
-  onThemeChange: (theme: 'light' | 'dark' | 'system') => void;
   showLineNumbers: boolean;
-  onLineNumbersToggle: () => void;
   activePanel: string | null;
-  onPanelToggle: (panel: string | null) => void;
 
   // Translations
   translations: {
@@ -58,15 +55,13 @@ export function EntityTagsPage({
   onAddTag,
   isAddingTag,
   theme,
-  onThemeChange,
   showLineNumbers,
-  onLineNumbersToggle,
   activePanel,
-  onPanelToggle,
   translations: t,
   ToolbarPanels,
   Toolbar,
 }: EntityTagsPageProps) {
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       onAddTag();
@@ -155,15 +150,12 @@ export function EntityTagsPage({
         <ToolbarPanels
           activePanel={activePanel}
           theme={theme}
-          onThemeChange={onThemeChange}
           showLineNumbers={showLineNumbers}
-          onLineNumbersToggle={onLineNumbersToggle}
         />
 
         <Toolbar
           context="simple"
           activePanel={activePanel}
-          onPanelToggle={onPanelToggle}
         />
       </div>
     </div>

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

@@ -14,11 +14,8 @@ const createMockProps = (overrides?: Partial<RecentDocumentsPageProps>): RecentD
   hasDocuments: false,
   isLoading: false,
   theme: 'light',
-  onThemeChange: vi.fn(),
   showLineNumbers: false,
-  onLineNumbersToggle: vi.fn(),
   activePanel: null,
-  onPanelToggle: vi.fn(),
   translations: {
     pageTitle: 'Recent Documents',
     pageDescription: 'View recently moderated documents',
@@ -219,35 +216,6 @@ describe('RecentDocumentsPage', () => {
       );
     });
 
-    it('passes callbacks to toolbar components', () => {
-      const onThemeChange = vi.fn();
-      const onLineNumbersToggle = vi.fn();
-      const onPanelToggle = vi.fn();
-      const ToolbarPanels = vi.fn(() => <div data-testid="toolbar-panels" />);
-      const Toolbar = vi.fn(() => <div data-testid="toolbar" />);
-
-      const props = createMockProps({
-        onThemeChange,
-        onLineNumbersToggle,
-        onPanelToggle,
-        ToolbarPanels,
-        Toolbar,
-      });
-      render(<RecentDocumentsPage {...props} />);
-
-      expect(ToolbarPanels).toHaveBeenCalledWith(
-        expect.objectContaining({
-          onThemeChange,
-          onLineNumbersToggle,
-        }),
-        expect.anything()
-      );
-
-      expect(Toolbar).toHaveBeenCalledWith(
-        expect.objectContaining({ onPanelToggle }),
-        expect.anything()
-      );
-    });
 
     it('passes context to toolbar', () => {
       const Toolbar = vi.fn(() => <div data-testid="toolbar" />);

package/src/features/moderate-recent/components/RecentDocumentsPage.tsx

@@ -15,11 +15,8 @@ export interface RecentDocumentsPageProps {
 
   // UI state
   theme: 'light' | 'dark' | 'system';
-  onThemeChange: (theme: 'light' | 'dark' | 'system') => void;
   showLineNumbers: boolean;
-  onLineNumbersToggle: () => void;
   activePanel: string | null;
-  onPanelToggle: (panel: string | null) => void;
 
   // Translations
   translations: {
@@ -40,15 +37,13 @@ export interface RecentDocumentsPageProps {
 export function RecentDocumentsPage({
   isLoading,
   theme,
-  onThemeChange,
   showLineNumbers,
-  onLineNumbersToggle,
   activePanel,
-  onPanelToggle,
   translations: t,
   ToolbarPanels,
   Toolbar,
 }: RecentDocumentsPageProps) {
+
   if (isLoading) {
     return (
       <div className="semiont-page__loading">
@@ -100,15 +95,12 @@ export function RecentDocumentsPage({
         <ToolbarPanels
           activePanel={activePanel}
           theme={theme}
-          onThemeChange={onThemeChange}
           showLineNumbers={showLineNumbers}
-          onLineNumbersToggle={onLineNumbersToggle}
         />
 
         <Toolbar
           context="simple"
           activePanel={activePanel}
-          onPanelToggle={onPanelToggle}
         />
       </div>
     </div>

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

@@ -61,11 +61,8 @@ const createMockProps = (overrides?: Partial<TagSchemasPageProps>): TagSchemasPa
   schemas: mockSchemas,
   isLoading: false,
   theme: 'light',
-  onThemeChange: vi.fn(),
   showLineNumbers: false,
-  onLineNumbersToggle: vi.fn(),
   activePanel: null,
-  onPanelToggle: vi.fn(),
   translations: {
     pageTitle: 'Tag Schemas',
     pageDescription: 'View available tag schemas for content analysis',
@@ -290,35 +287,6 @@ describe('TagSchemasPage', () => {
       );
     });
 
-    it('passes callbacks to toolbar components', () => {
-      const onThemeChange = vi.fn();
-      const onLineNumbersToggle = vi.fn();
-      const onPanelToggle = vi.fn();
-      const ToolbarPanels = vi.fn(() => <div data-testid="toolbar-panels" />);
-      const Toolbar = vi.fn(() => <div data-testid="toolbar" />);
-
-      const props = createMockProps({
-        onThemeChange,
-        onLineNumbersToggle,
-        onPanelToggle,
-        ToolbarPanels,
-        Toolbar,
-      });
-      render(<TagSchemasPage {...props} />);
-
-      expect(ToolbarPanels).toHaveBeenCalledWith(
-        expect.objectContaining({
-          onThemeChange,
-          onLineNumbersToggle,
-        }),
-        expect.anything()
-      );
-
-      expect(Toolbar).toHaveBeenCalledWith(
-        expect.objectContaining({ onPanelToggle }),
-        expect.anything()
-      );
-    });
   });
 
   describe('Layout and Structure', () => {

package/src/features/moderate-tag-schemas/components/TagSchemasPage.tsx

@@ -20,11 +20,8 @@ export interface TagSchemasPageProps {
 
   // UI state
   theme: 'light' | 'dark' | 'system';
-  onThemeChange: (theme: 'light' | 'dark' | 'system') => void;
   showLineNumbers: boolean;
-  onLineNumbersToggle: () => void;
   activePanel: string | null;
-  onPanelToggle: (panel: string | null) => void;
 
   // Translations
   translations: {
@@ -55,15 +52,13 @@ export function TagSchemasPage({
   schemas,
   isLoading,
   theme,
-  onThemeChange,
   showLineNumbers,
-  onLineNumbersToggle,
   activePanel,
-  onPanelToggle,
   translations: t,
   ToolbarPanels,
   Toolbar,
 }: TagSchemasPageProps) {
+
   if (isLoading) {
     return (
       <div className="semiont-page__loading">
@@ -156,15 +151,12 @@ export function TagSchemasPage({
         <ToolbarPanels
           activePanel={activePanel}
           theme={theme}
-          onThemeChange={onThemeChange}
           showLineNumbers={showLineNumbers}
-          onLineNumbersToggle={onLineNumbersToggle}
         />
 
         <Toolbar
           context="simple"
           activePanel={activePanel}
-          onPanelToggle={onPanelToggle}
         />
       </div>
     </div>

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

@@ -9,26 +9,19 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { ResourceComposePage } from '../components/ResourceComposePage';
 import type { ResourceComposePageProps, SaveResourceParams } from '../components/ResourceComposePage';
-
-// Mock dependencies
-vi.mock('@semiont/react-ui', async () => {
-  const actual = await vi.importActual('@semiont/react-ui');
-  return {
-    ...actual,
-    buttonStyles: {
-      primary: { base: 'btn-primary' },
-      tertiary: { base: 'btn-tertiary' },
-    },
-    CodeMirrorRenderer: ({ content, onChange, editable }: any) => (
-      <textarea
-        data-testid="code-editor"
-        value={content}
-        onChange={(e) => editable && onChange?.(e.target.value)}
-        disabled={!editable}
-      />
-    ),
-  };
-});
+import { EventBusProvider, resetEventBusForTesting } from '../../../contexts/EventBusContext';
+
+// Mock CodeMirrorRenderer to avoid CodeMirror dependencies
+vi.mock('../../../components/CodeMirrorRenderer', () => ({
+  CodeMirrorRenderer: ({ content, onChange, editable }: any) => (
+    <textarea
+      data-testid="code-editor"
+      value={content}
+      onChange={(e) => editable && onChange?.(e.target.value)}
+      disabled={!editable}
+    />
+  ),
+}));
 
 const createMockTranslations = () => ({
   title: 'Compose Resource',
@@ -69,11 +62,8 @@ const createMockProps = (overrides?: Partial<ResourceComposePageProps>): Resourc
   availableEntityTypes: ['Document', 'Article', 'Report'],
   initialLocale: 'en',
   theme: 'light',
-  onThemeChange: vi.fn(),
   showLineNumbers: false,
-  onLineNumbersToggle: vi.fn(),
   activePanel: null,
-  onPanelToggle: vi.fn(),
   onSaveResource: vi.fn().mockResolvedValue(undefined),
   onCancel: vi.fn(),
   translations: createMockTranslations(),
@@ -82,18 +72,27 @@ const createMockProps = (overrides?: Partial<ResourceComposePageProps>): Resourc
   ...overrides,
 });
 
+// Helper to render with EventBusProvider
+const renderWithProviders = (ui: React.ReactElement) => {
+  return render(<EventBusProvider>{ui}</EventBusProvider>);
+};
+
 describe('ResourceComposePage', () => {
+  beforeEach(() => {
+    resetEventBusForTesting();
+  });
+
   describe('Basic Rendering - New Resource Mode', () => {
     it('renders without crashing', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByText('Compose Resource')).toBeInTheDocument();
     });
 
     it('renders resource name input', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByLabelText('Resource Name')).toBeInTheDocument();
       expect(screen.getByPlaceholderText('Enter resource name')).toBeInTheDocument();
@@ -101,7 +100,7 @@ describe('ResourceComposePage', () => {
 
     it('renders entity type selection', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByText('Entity Types')).toBeInTheDocument();
       expect(screen.getByRole('button', { name: /Document entity type/ })).toBeInTheDocument();
@@ -111,14 +110,14 @@ describe('ResourceComposePage', () => {
 
     it('renders language selector', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByLabelText('Language')).toBeInTheDocument();
     });
 
     it('renders content source toggle', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByText('Upload File')).toBeInTheDocument();
       expect(screen.getByText('Write Content')).toBeInTheDocument();
@@ -126,7 +125,7 @@ describe('ResourceComposePage', () => {
 
     it('renders toolbar component', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByTestId('toolbar')).toBeInTheDocument();
     });
@@ -144,7 +143,7 @@ describe('ResourceComposePage', () => {
           sourceContent: 'Original content',
         },
       });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByText('Edit Cloned Resource')).toBeInTheDocument();
       expect(screen.getByText('Editing a cloned resource')).toBeInTheDocument();
@@ -161,7 +160,7 @@ describe('ResourceComposePage', () => {
           sourceContent: 'Original content',
         },
       });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const nameInput = screen.getByLabelText('Resource Name') as HTMLInputElement;
       expect(nameInput.value).toBe('Original Resource');
@@ -181,7 +180,7 @@ describe('ResourceComposePage', () => {
           sourceContent: 'Original content',
         },
       });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByLabelText('Archive original resource')).toBeInTheDocument();
     });
@@ -197,7 +196,7 @@ describe('ResourceComposePage', () => {
           sourceContent: 'Original content',
         },
       });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.queryByText('Upload File')).not.toBeInTheDocument();
       expect(screen.queryByText('Write Content')).not.toBeInTheDocument();
@@ -215,7 +214,7 @@ describe('ResourceComposePage', () => {
           entityTypes: ['Document'],
         },
       });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByText('Complete Reference')).toBeInTheDocument();
       expect(screen.getByText('Creating a new resource for reference')).toBeInTheDocument();
@@ -232,7 +231,7 @@ describe('ResourceComposePage', () => {
           entityTypes: ['Document', 'Article'],
         },
       });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const nameInput = screen.getByLabelText('Resource Name') as HTMLInputElement;
       expect(nameInput.value).toBe('Referenced Resource');
@@ -251,7 +250,7 @@ describe('ResourceComposePage', () => {
           entityTypes: ['Document'],
         },
       });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       // Should show read-only entity types
       expect(screen.getByText('Document')).toBeInTheDocument();
@@ -267,7 +266,7 @@ describe('ResourceComposePage', () => {
   describe('Content Input Method', () => {
     it('defaults to write mode', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const writeButton = screen.getByText('Write Content').closest('button');
       expect(writeButton).toHaveAttribute('data-active', 'true');
@@ -275,7 +274,7 @@ describe('ResourceComposePage', () => {
 
     it('allows switching to upload mode', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const uploadButton = screen.getByText('Upload File').closest('button');
       fireEvent.click(uploadButton!);
@@ -285,28 +284,28 @@ describe('ResourceComposePage', () => {
 
     it('shows format selector in write mode', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByLabelText('Format')).toBeInTheDocument();
     });
 
     it('shows encoding selector in write mode', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByLabelText('Encoding')).toBeInTheDocument();
     });
 
     it('shows code editor in write mode', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByTestId('code-editor')).toBeInTheDocument();
     });
 
     it('shows file upload in upload mode', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const uploadButton = screen.getByText('Upload File').closest('button');
       fireEvent.click(uploadButton!);
@@ -319,7 +318,7 @@ describe('ResourceComposePage', () => {
     it('calls onSaveResource with correct params for new resource', async () => {
       const onSaveResource = vi.fn().mockResolvedValue(undefined);
       const props = createMockProps({ onSaveResource });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       // Fill in name
       const nameInput = screen.getByLabelText('Resource Name');
@@ -353,7 +352,7 @@ describe('ResourceComposePage', () => {
     it('includes selected entity types', async () => {
       const onSaveResource = vi.fn().mockResolvedValue(undefined);
       const props = createMockProps({ onSaveResource });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       // Fill in name
       const nameInput = screen.getByLabelText('Resource Name');
@@ -378,7 +377,7 @@ describe('ResourceComposePage', () => {
 
     it('requires resource name', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const submitButton = screen.getByRole('button', { name: 'Create Resource' });
       expect(submitButton).toBeDisabled();
@@ -386,7 +385,7 @@ describe('ResourceComposePage', () => {
 
     it('enables submit button when name is provided', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const nameInput = screen.getByLabelText('Resource Name');
       fireEvent.change(nameInput, { target: { value: 'Test Resource' } });
@@ -398,7 +397,7 @@ describe('ResourceComposePage', () => {
     it('disables form during submission', async () => {
       const onSaveResource = vi.fn(() => new Promise<void>(resolve => setTimeout(resolve, 100)));
       const props = createMockProps({ onSaveResource });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const nameInput = screen.getByLabelText('Resource Name');
       fireEvent.change(nameInput, { target: { value: 'Test Resource' } });
@@ -419,7 +418,7 @@ describe('ResourceComposePage', () => {
     it('calls onCancel when cancel button clicked', () => {
       const onCancel = vi.fn();
       const props = createMockProps({ onCancel });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const cancelButton = screen.getByRole('button', { name: 'Cancel' });
       fireEvent.click(cancelButton);
@@ -431,7 +430,7 @@ describe('ResourceComposePage', () => {
   describe('Toolbar Integration', () => {
     it('renders ToolbarPanels component', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByTestId('toolbar-panels')).toBeInTheDocument();
     });
@@ -440,16 +439,14 @@ describe('ResourceComposePage', () => {
       const ToolbarPanels = vi.fn(() => <div data-testid="toolbar-panels" />);
       const props = createMockProps({
         theme: 'dark',
-        onThemeChange: vi.fn(),
         ToolbarPanels,
       });
 
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(ToolbarPanels).toHaveBeenCalledWith(
         expect.objectContaining({
           theme: 'dark',
-          onThemeChange: expect.any(Function),
         }),
         expect.anything()
       );
@@ -459,7 +456,7 @@ describe('ResourceComposePage', () => {
   describe('Code Editor Integration', () => {
     it('allows editing content', () => {
       const props = createMockProps();
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       const editor = screen.getByTestId('code-editor') as HTMLTextAreaElement;
       fireEvent.change(editor, { target: { value: 'New content' } });
@@ -469,7 +466,7 @@ describe('ResourceComposePage', () => {
 
     it('respects showLineNumbers prop', () => {
       const props = createMockProps({ showLineNumbers: true });
-      render(<ResourceComposePage {...props} />);
+      renderWithProviders(<ResourceComposePage {...props} />);
 
       expect(screen.getByTestId('code-editor')).toBeInTheDocument();
     });