@jmruthers/pace-core 0.5.188 → 0.5.190

package/src/components/FileUpload/FileUpload.tsx

@@ -19,7 +19,8 @@ export interface FileUploadProps {
   supabase: SupabaseClient;
   table_name: string;
   record_id: string;
-  organisation_id: string;
+  organisation_id?: string | null; // Optional for user-scoped files (e.g., profile photos)
+  userId?: string; // Optional userId for user-scoped files (required if organisation_id is not provided)
   app_id?: string; // Optional - will be resolved from app name if not provided
   category: FileCategory;
   folder: string; // Folder name in storage bucket (e.g., 'profile_photos', 'documents')
@@ -51,6 +52,7 @@ export function FileUpload({
   table_name,
   record_id,
   organisation_id,
+  userId,
   app_id,
   category,
   folder,
@@ -287,7 +289,8 @@ export function FileUpload({
         const result = await uploadFile({
           table_name,
           record_id,
-          organisation_id,
+          organisation_id: organisation_id || null,
+          userId: userId, // Pass userId prop directly - it's required for user-scoped files when organisation_id is null
           app_id: resolvedAppId ? assertAppId(resolvedAppId) : assertAppId(''),
           category,
           folder,
@@ -500,7 +503,7 @@ export function FileUpload({
             aria-live="polite"
             aria-label="Uploading file"
           >
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-main-500" aria-hidden="true"></div>
+            <div className="animate-spin rounded-full size-8 border-b-2 border-main-500" aria-hidden="true"></div>
           </div>
         )}
       </div>
@@ -581,7 +584,7 @@ export function FileUpload({
                   )}
                   {isUploading && (
                     <div 
-                      className="animate-spin rounded-full h-5 w-5 border-b-2 border-main-500"
+                      className="animate-spin rounded-full size-5 border-b-2 border-main-500"
                       role="status"
                       aria-label="Uploading"
                       aria-hidden="true"

package/src/components/Header/Header.test.tsx

@@ -68,6 +68,34 @@ vi.mock('../OrganisationSelector', () => ({
   ),
 }));
 
+// Mock useOrganisations hook
+vi.mock('../../hooks/useOrganisations', () => ({
+  useOrganisations: vi.fn(() => ({
+    organisations: [
+      {
+        id: 'test-org-id',
+        name: 'Test Organisation',
+        slug: 'test-org',
+        created_at: '2023-01-01T00:00:00Z',
+        updated_at: '2023-01-01T00:00:00Z'
+      }
+    ],
+    selectedOrganisation: {
+      id: 'test-org-id',
+      name: 'Test Organisation',
+      slug: 'test-org',
+      created_at: '2023-01-01T00:00:00Z',
+      updated_at: '2023-01-01T00:00:00Z'
+    },
+    isContextReady: true,
+    isLoading: false,
+    error: null,
+    selectOrganisation: vi.fn(),
+    refreshOrganisations: vi.fn(),
+    userMemberships: []
+  }))
+}));
+
 // Test data
 const mockUser: User = {
   id: '123',

package/src/components/Header/Header.tsx

@@ -97,6 +97,7 @@ import { UserMenu } from '../UserMenu';
 import { NavigationMenu } from '../NavigationMenu';
 import type { NavigationItem } from '../NavigationMenu';
 import type { PasswordChangeFormError } from '../PasswordChange/PasswordChangeForm';
+import { useOrganisations } from '../../hooks/useOrganisations';
 
 /**
  * Props for the Header component
@@ -255,6 +256,23 @@ export function Header({
   onNavigate,
   logoHref
 }: HeaderProps) {
+  // Conditional wrapper for organisation selector - only show if user has organisations
+  const OrganisationSelectorConditional = () => {
+    const { organisations, isContextReady } = useOrganisations();
+    // Only show selector if user has organisations and context is ready
+    if (!isContextReady || !organisations || organisations.length === 0) {
+      return null;
+    }
+    return (
+      <OrganisationSelector 
+        placeholder="Select organisation" 
+        className="w-64" 
+        data-testid="org-selector"
+        compact={true}
+      />
+    );
+  };
+
   return (
     <header className={cn(
       "w-full border-b border-main-200 h-16 shadow-sm bg-main-100 ",
@@ -292,14 +310,14 @@ export function Header({
                 <img
                   src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='14' font-weight='bold'%3EL%3C/text%3E%3C/svg%3E"
                   alt={logoAlt || 'Logo'}
-                  className="h-8 w-8 shadow-md"
+                  className="size-8 shadow-md"
                 />
               </Link>
             ) : (
               <img
                 src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Ctext x='16' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='14' font-weight='bold'%3EL%3C/text%3E%3C/svg%3E"
                 alt={logoAlt || 'Logo'}
-                className="h-8 w-8 shadow-md"
+                className="size-8 shadow-md"
               />
             )
           )}
@@ -319,14 +337,9 @@ export function Header({
 
         {/* Right side: Organisation Selector, Event Selector, Actions, and User Menu */}
         <div className="flex items-center gap-4 ml-auto">
-          {/* Organisation Selector */}
+          {/* Organisation Selector - Only show if user has organisations */}
           {showOrgSelector ? (
-            <OrganisationSelector 
-              placeholder="Select organisation" 
-              className="w-64" 
-              data-testid="org-selector"
-              compact={true}
-            />
+            <OrganisationSelectorConditional />
           ) : null}
 
           {/* Event Selector */}

package/src/components/InactivityWarningModal/InactivityWarningModal.tsx

@@ -103,7 +103,7 @@ export function InactivityWarningModal({
         <DialogHeader>
           <div className="flex items-center gap-3">
             <div className="flex-shrink-0">
-              <AlertTriangle className="h-6 w-6 text-acc-600" />
+              <AlertTriangle className="size-6 text-acc-600" />
             </div>
             <div>
               <DialogTitle className="text-lg font-semibold text-main-900">
@@ -120,7 +120,7 @@ export function InactivityWarningModal({
           {/* Countdown Timer */}
           <div className="text-center">
             <div className="inline-flex items-center gap-2 px-4 py-3 bg-acc-50 border border-acc-200 rounded-lg">
-              <Clock className="h-5 w-5 text-acc-600" />
+              <Clock className="size-5 text-acc-600" />
               <span className="text-2xl font-mono font-bold text-acc-700">
                 {formatTime(displayTime)}
               </span>

package/src/components/LoadingSpinner/LoadingSpinner.test.tsx

@@ -54,44 +54,47 @@ describe('LoadingSpinner Component', () => {
       renderWithProviders(<LoadingSpinner size="sm" />);
       
       const spinner = screen.getByRole('status');
-      expect(spinner).toHaveClass('w-4', 'h-4');
+      // LoadingSpinner uses Tailwind v4 size-* utility instead of h-* w-*
+      expect(spinner).toHaveClass('size-4');
     });
 
     it('renders medium size spinner (default)', () => {
       renderWithProviders(<LoadingSpinner size="md" />);
       
       const spinner = screen.getByRole('status');
-      expect(spinner).toHaveClass('w-6', 'h-6');
+      // LoadingSpinner uses Tailwind v4 size-* utility instead of h-* w-*
+      expect(spinner).toHaveClass('size-6');
     });
 
     it('renders large size spinner', () => {
       renderWithProviders(<LoadingSpinner size="lg" />);
       
       const spinner = screen.getByRole('status');
-      expect(spinner).toHaveClass('w-8', 'h-8');
+      // LoadingSpinner uses Tailwind v4 size-* utility instead of h-* w-*
+      expect(spinner).toHaveClass('size-8');
     });
 
     it('uses medium size as default when no size specified', () => {
       renderWithProviders(<LoadingSpinner />);
       
       const spinner = screen.getByRole('status');
-      expect(spinner).toHaveClass('w-6', 'h-6');
+      // LoadingSpinner uses Tailwind v4 size-* utility instead of h-* w-*
+      expect(spinner).toHaveClass('size-6');
     });
 
     it('applies correct size classes for each variant', () => {
       const sizeTests: Array<{ size: LoadingSpinnerProps['size']; expectedClasses: string[] }> = [
-        { size: 'sm', expectedClasses: ['w-4', 'h-4'] },
-        { size: 'md', expectedClasses: ['w-6', 'h-6'] },
-        { size: 'lg', expectedClasses: ['w-8', 'h-8'] },
+        { size: 'sm', expectedClass: 'size-4' },
+        { size: 'md', expectedClass: 'size-6' },
+        { size: 'lg', expectedClass: 'size-8' },
       ];
 
-      sizeTests.forEach(({ size, expectedClasses }) => {
+      sizeTests.forEach(({ size, expectedClass }) => {
         const { unmount } = renderWithProviders(<LoadingSpinner size={size} />);
         
         const spinner = screen.getByRole('status');
-        expectedClasses.forEach(className => {
-          expect(spinner).toHaveClass(className);
-        });
+        // LoadingSpinner uses Tailwind v4 size-* utility instead of h-* w-*
+        expect(spinner).toHaveClass(expectedClass);
         
         unmount();
       });
@@ -246,8 +249,9 @@ describe('LoadingSpinner Component', () => {
       // Component defaults to 'md' size when invalid size is passed
       expect(spinner).toHaveClass('inline-block', 'animate-spin');
       // Should default to medium size classes when invalid size is passed
-      expect(spinner).toHaveClass('w-6', 'h-6');
-      expect(spinner).not.toHaveClass('w-4', 'h-4', 'w-8', 'h-8');
+      // LoadingSpinner uses Tailwind v4 size-* utility instead of h-* w-*
+      expect(spinner).toHaveClass('size-6');
+      expect(spinner).not.toHaveClass('size-4', 'size-8');
     });
 
     it('handles null className gracefully', () => {
@@ -313,7 +317,8 @@ describe('LoadingSpinner Component', () => {
       
       expect(updatedSpinner).toBeInTheDocument();
       expect(updatedScreenReaderText).toBeInTheDocument();
-      expect(updatedSpinner).toHaveClass('w-8', 'h-8', 'custom');
+      // LoadingSpinner uses Tailwind v4 size-* utility instead of h-* w-*
+      expect(updatedSpinner).toHaveClass('size-8', 'custom');
     });
   });
 

package/src/components/LoadingSpinner/LoadingSpinner.tsx

@@ -85,9 +85,9 @@ export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
   className = '' 
 }) => {
   const sizeClasses: Record<'sm' | 'md' | 'lg', string> = {
-    sm: 'w-4 h-4',
-    md: 'w-6 h-6',
-    lg: 'w-8 h-8'
+    sm: 'size-4',
+    md: 'size-6',
+    lg: 'size-8'
   };
 
   // Ensure we always have a valid size class, defaulting to 'md' if invalid
@@ -95,8 +95,8 @@ export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
   const sizeClass = sizeClasses[validSize];
 
   return (
-    <div className={`inline-block animate-spin rounded-full border-2 border-solid border-current border-r-transparent motion-reduce:animate-[spin_1.5s_linear_infinite] ${sizeClass} ${className}`.trim()} role="status">
+    <canvas className={`inline-block animate-spin rounded-full border-2 border-solid border-current border-r-transparent motion-reduce:animate-[spin_1.5s_linear_infinite] ${sizeClass} ${className}`.trim()} role="status">
       <span className="sr-only">Loading...</span>
-    </div>
+    </canvas>
   );
 };

package/src/components/NavigationMenu/NavigationMenu.test.tsx

@@ -373,6 +373,40 @@ describe('NavigationMenu Component', () => {
         expect(dashboardItem).toBeInTheDocument();
       }, { interval: 10 });
     });
+
+    it('trusts pre-filtered items while still hiding meta-hidden entries', async () => {
+      const user = userEvent.setup();
+
+      mockUsePermissions.mockReturnValue({
+        permissions: {},
+        isLoading: false,
+        error: null,
+        hasPermission: vi.fn(() => false),
+        hasAnyPermission: vi.fn(() => false),
+        hasAllPermissions: vi.fn(() => false),
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(
+        <NavigationMenu
+          items={[
+            { id: 'home', label: 'Home', href: '/' },
+            { id: 'hidden', label: 'Hidden', href: '/hidden', meta: { hidden: true } },
+          ]}
+          itemsPreFiltered
+          onNavigate={mockNavigate}
+          buttonText="Menu"
+        />
+      );
+
+      await user.click(screen.getByRole('combobox'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Home')).toBeInTheDocument();
+      }, { interval: 10 });
+
+      expect(screen.queryByText('Hidden')).not.toBeInTheDocument();
+    });
   });
 
   // Hierarchical mode tests
@@ -931,6 +965,46 @@ describe('NavigationMenu Component', () => {
         expect.stringContaining('Insufficient permissions')
       );
     });
+
+    it('blocks navigation and reports violations when pre-filtered items lack permission', async () => {
+      const user = userEvent.setup();
+
+      mockUsePermissions.mockReturnValue({
+        permissions: { 'read:page.restricted': true } as any,
+        isLoading: false,
+        error: null,
+        hasPermission: vi.fn(() => false),
+        hasAnyPermission: vi.fn(() => false),
+        hasAllPermissions: vi.fn(() => false),
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(
+        <NavigationMenu
+          items={[{ id: 'restricted', label: 'Restricted', href: '/restricted', permissions: ['restricted:read'] }]}
+          onNavigate={mockNavigate}
+          onNavigationAccessDenied={mockOnNavigationAccessDenied}
+          onStrictModeViolation={mockOnStrictModeViolation}
+          itemsPreFiltered
+          strictMode
+          buttonText="Menu"
+        />
+      );
+
+      await user.click(screen.getByRole('combobox'));
+
+      const restrictedItem = await screen.findByText('Restricted');
+      await user.click(restrictedItem);
+
+      expect(mockNavigate).not.toHaveBeenCalled();
+      expect(mockOnNavigationAccessDenied).toHaveBeenCalledWith(
+        expect.objectContaining({ id: 'restricted' })
+      );
+      expect(mockOnStrictModeViolation).toHaveBeenCalledWith(
+        expect.objectContaining({ id: 'restricted' }),
+        'Insufficient permissions'
+      );
+    });
   });
 
   // Accessibility tests
@@ -1210,6 +1284,30 @@ describe('NavigationMenu Component', () => {
       expect(logoutItem.closest('[role="option"]')).toHaveAttribute('data-disabled', 'true');
     });
 
+    it('handles space key activation for hierarchical leaf items', async () => {
+      const user = userEvent.setup();
+      const leafOnlyItems: NavigationItem[] = [
+        { id: 'leaf', label: 'Leaf', href: '/leaf' },
+      ];
+
+      renderWithProviders(
+        <NavigationMenu
+          items={leafOnlyItems}
+          mode="hierarchical"
+          onNavigate={mockNavigate}
+        />
+      );
+
+      const leafLink = screen.getByText('Leaf');
+      leafLink.focus();
+
+      await user.keyboard(' ');
+
+      expect(mockNavigate).toHaveBeenCalledWith(
+        expect.objectContaining({ id: 'leaf', href: '/leaf' })
+      );
+    });
+
     it('forwards ref correctly', () => {
       const ref = React.createRef<HTMLDivElement>();
       renderWithProviders(
@@ -1305,6 +1403,35 @@ describe('NavigationMenu Component', () => {
       const listbox = screen.getByRole('listbox');
       expect(listbox.childNodes.length).toBe(0);
     });
+
+    it('surfaces items when permission map is empty but scope is available', async () => {
+      const user = userEvent.setup();
+
+      mockUsePermissions.mockReturnValue({
+        permissions: {},
+        isLoading: false,
+        error: null,
+        hasPermission: vi.fn(() => false),
+        hasAnyPermission: vi.fn(() => false),
+        hasAllPermissions: vi.fn(() => false),
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(
+        <NavigationMenu
+          items={basicNavItems}
+          onNavigate={mockNavigate}
+          buttonText="Menu"
+        />
+      );
+
+      await user.click(screen.getByRole('combobox'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Home')).toBeInTheDocument();
+        expect(screen.getByText('Dashboard')).toBeInTheDocument();
+      }, { interval: 10 });
+    });
   });
 
   // Audit logging tests
@@ -1369,4 +1496,3 @@ describe('NavigationMenu Component', () => {
     });
   });
 });
-    mockUseUnifiedAuthFn.mockImplementation(() => mockAuthContext);

package/src/components/OrganisationSelector/OrganisationSelector.tsx

@@ -184,7 +184,7 @@ export function OrganisationSelector({
     return (
       <div className={`space-y-2 ${className}`}>
         <Alert variant="destructive">
-          <AlertCircle className="h-4 w-4" />
+          <AlertCircle className="size-4" />
           <AlertDescription>
             Failed to load organisations: {orgError.message}
           </AlertDescription>
@@ -197,7 +197,7 @@ export function OrganisationSelector({
             disabled={isLoading}
             className="w-full"
           >
-            <RefreshCw className={`h-4 w-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
+            <RefreshCw className={`size-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
             Retry
           </Button>
         )}
@@ -211,7 +211,7 @@ export function OrganisationSelector({
       return (
         <div className={`space-y-2 ${className}`}>
           <Alert>
-            <Building2 className="h-4 w-4" />
+            <Building2 className="size-4" />
             <AlertDescription>
               No organisations available. Please contact your administrator to be added to an organisation.
             </AlertDescription>
@@ -224,7 +224,7 @@ export function OrganisationSelector({
               disabled={isLoading}
               className="w-full"
             >
-              <RefreshCw className={`h-4 w-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
+              <RefreshCw className={`size-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
               Check Again
             </Button>
           )}
@@ -237,7 +237,7 @@ export function OrganisationSelector({
   // Switch error display
   const switchErrorDisplay = switchError && (
     <Alert variant="destructive" className="mt-2">
-      <AlertCircle className="h-4 w-4" />
+      <AlertCircle className="size-4" />
       <AlertDescription>{switchError}</AlertDescription>
     </Alert>
   );
@@ -255,7 +255,7 @@ export function OrganisationSelector({
             {isLoading ? (
               <LoadingSpinner size="sm" />
             ) : (
-              <Building2 className="h-4 w-4 text-muted-foreground" />
+              <Building2 className="size-4 text-muted-foreground" />
             )}
             <SelectValue placeholder={placeholder} />
           </div>
@@ -274,7 +274,7 @@ export function OrganisationSelector({
               >
                 <div className="flex items-center justify-between w-full">
                   <div className="flex items-center gap-2">
-                    <Building2 className="h-4 w-4" />
+                    <Building2 className="size-4" />
                     <div className="flex flex-col">
                       <span className="font-medium">{org.display_name}</span>
                       {!compact && org.description && (
@@ -286,7 +286,7 @@ export function OrganisationSelector({
                   </div>
                   {showRole && (
                     <div className="flex items-center gap-1 ml-4">
-                      <Shield className="h-3 w-3 text-muted-foreground" />
+                      <Shield className="size-3 text-muted-foreground" />
                       <span className="text-xs text-muted-foreground capitalize">
                         {userRole?.replace('_', ' ') || 'No Role'}
                       </span>

package/src/components/PaceAppLayout/PaceAppLayout.integration.test.tsx

@@ -48,8 +48,10 @@ const mockOrganisationContext = vi.hoisted(() => {
     updated_at: '2023-01-01T00:00:00Z'
   }],
   isLoading: false,
+  isContextReady: true,
   error: null,
   hasValidOrganisationContext: true,
+  isContextReady: true,
   setSelectedOrganisation: vi.fn(),
   switchOrganisation: vi.fn().mockResolvedValue(undefined),
   getUserRole: vi.fn().mockReturnValue('member'),
@@ -94,6 +96,7 @@ const mockUseUnifiedAuthFn = vi.hoisted(() => vi.fn(() => {
     selectedOrganisation: mockOrganisationObj(),
     selectedEvent: null,
     isLoading: false,
+    isContextReady: true,
     error: null,
     isAuthenticated: true,
     selectedOrganisationId: 'test-org-id',
@@ -117,6 +120,7 @@ vi.mock('../../hooks/services/useOrganisationService', () => ({
     getOrganisations: () => [mockOrganisationObj()],
     getUserMemberships: () => mockOrganisationContext().userMemberships,
     isLoading: () => false,
+    isContextReady: () => true,
     getError: () => null,
     hasValidOrganisationContext: () => true,
     setSelectedOrganisation: vi.fn(),

package/src/components/PaceAppLayout/PaceAppLayout.performance.test.tsx

@@ -75,8 +75,10 @@ const mockOrganisationContext = {
     updated_at: '2023-01-01T00:00:00Z'
   }],
   isLoading: false,
+  isContextReady: true,
   error: null,
   hasValidOrganisationContext: true,
+  isContextReady: true,
   setSelectedOrganisation: vi.fn(),
   switchOrganisation: vi.fn().mockResolvedValue(undefined),
   getUserRole: vi.fn().mockReturnValue('member'),
@@ -94,6 +96,7 @@ vi.mock('../../hooks/services/useOrganisationService', () => ({
     getOrganisations: () => [mockOrganisation],
     getUserMemberships: () => mockOrganisationContext.userMemberships,
     isLoading: () => false,
+    isContextReady: () => true,
     getError: () => null,
     hasValidOrganisationContext: () => true,
     setSelectedOrganisation: vi.fn(),

package/src/components/PaceAppLayout/PaceAppLayout.security.test.tsx

@@ -112,8 +112,10 @@ const mockOrganisationContext = {
     updated_at: '2023-01-01T00:00:00Z'
   }],
   isLoading: false,
+  isContextReady: true,
   error: null,
   hasValidOrganisationContext: true,
+  isContextReady: true,
   setSelectedOrganisation: vi.fn(),
   switchOrganisation: vi.fn().mockResolvedValue(undefined),
   getUserRole: vi.fn().mockReturnValue('member'),
@@ -131,6 +133,7 @@ vi.mock('../../hooks/services/useOrganisationService', () => ({
     getOrganisations: () => [mockOrganisation],
     getUserMemberships: () => mockOrganisationContext.userMemberships,
     isLoading: () => false,
+    isContextReady: () => true,
     getError: () => null,
     hasValidOrganisationContext: () => true,
     setSelectedOrganisation: vi.fn(),

package/src/components/PaceAppLayout/PaceAppLayout.test.tsx

@@ -866,13 +866,18 @@ describe('PaceAppLayout Component', () => {
       );
       
       await waitFor(() => {
-        // useCan is called with userId, scope, permission, pageId, useCache
+        // useCan is called with userId, scope, permission, pageId, useCache, appName
         expect(mockUseCan).toHaveBeenCalledWith(
           'user-123',
-          expect.objectContaining({ organisationId: 'org-123' }),
+          expect.objectContaining({
+            organisationId: 'org-123',
+            eventId: 'event-123',
+            appId: 'app-123',
+          }),
           'update:page.dashboard-page',
           'dashboard-page',
-          true
+          true,
+          'Test App'
         );
       }, { timeout: 2000 });
     }, { timeout: 3000 });
@@ -893,14 +898,19 @@ describe('PaceAppLayout Component', () => {
       );
       
       await waitFor(() => {
-        // useCan is called with userId, scope, permission, pageId, useCache
+        // useCan is called with userId, scope, permission, pageId, useCache, appName
         // Uses defaultPermission "create" since /dashboard is not in routePermissions
         expect(mockUseCan).toHaveBeenCalledWith(
           'user-123',
-          expect.objectContaining({ organisationId: 'org-123' }),
+          expect.objectContaining({
+            organisationId: 'org-123',
+            eventId: 'event-123',
+            appId: 'app-123',
+          }),
           'create:page.dashboard',
           'dashboard',
-          true
+          true,
+          'Test App'
         );
       }, { timeout: 2000 });
     }, { timeout: 3000 });