@jmruthers/pace-core 0.6.10 → 0.6.11

package/src/components/PaceLoginPage/PaceLoginPage.tsx

@@ -124,11 +124,11 @@
 import React, { useEffect, useState, useContext } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { UnifiedAuthContext } from '../../providers/services/UnifiedAuthProvider';
-import { isSuperAdmin } from '../../rbac/api';
 import { LoginForm } from '../LoginForm';
 import { clearPalette } from '../../theming/runtime';
 import { EventServiceContext } from '../../providers/services/EventServiceContext';
 import { logger } from '../../utils/core/logger';
+import { useLoginAppAccess } from './useLoginAppAccess';
 
 /**
  * Props for the PaceLoginPage component.
@@ -179,8 +179,6 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
   const navigate = useNavigate();
   const location = useLocation();
   const [isSigningIn, setIsSigningIn] = useState(false);
-  const [accessError, setAccessError] = useState<string | null>(null);
-  const [isCheckingAccess, setIsCheckingAccess] = useState(false);
 
   // Get event service context (may not be available if outside EventServiceProvider)
   // Using useContext directly allows graceful handling when provider is not available
@@ -196,6 +194,18 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
   const user = authContext?.user ?? null;
   const supabase = authContext?.supabase ?? null;
 
+  // RBAC app access check (data fetching in hook, not in component)
+  const { isCheckingAccess, accessError, clearAccessError } = useLoginAppAccess({
+    requireAppAccess,
+    isAuthenticated,
+    isLoading,
+    user,
+    supabase,
+    appName,
+    onSuccessRedirectPath,
+    navigate,
+  });
+
   // Clear any active event theme when login page mounts
   // This ensures the login screen always uses default colors
   useEffect(() => {
@@ -233,135 +243,34 @@ export const PaceLoginPage: React.FC<PaceLoginPageProps> = ({
     return () => clearTimeout(timeoutId);
   }, [eventService]);
 
-  // Check app access after authentication using RBAC
+  // When requireAppAccess is false: navigate only after auth context has updated.
+  // Navigating immediately after signIn() can race with React state updates, so ProtectedRoute
+  // may still see isAuthenticated false and redirect back to /login. Navigating when
+  // isAuthenticated/user become true ensures the next render of protected routes sees the session.
+  const isOnLoginPage = location.pathname === '/login' || location.pathname.startsWith('/login');
   useEffect(() => {
-    if (!requireAppAccess || !isAuthenticated || isLoading || !user || !supabase) {
-      return;
+    if (requireAppAccess || !isOnLoginPage || !isAuthenticated || !user) return;
+    try {
+      navigate(onSuccessRedirectPath, { replace: true });
+    } catch (navError) {
+      logger.error('PaceLoginPage', 'Navigation error after sign-in:', navError);
     }
-
-    const checkAccess = async () => {
-      setIsCheckingAccess(true);
-      setAccessError(null);
-
-      try {
-        const userId = user.id;
-        logger.debug('PaceLoginPage', 'Checking app access using RBAC:', { appName, userId });
-
-        // Step 1: Check if user is super admin (they have unrestricted access)
-        const superAdminCheck = await isSuperAdmin(userId);
-        
-        if (superAdminCheck) {
-          logger.debug('PaceLoginPage', 'User is super admin, granting access');
-          setIsCheckingAccess(false);
-          navigate(onSuccessRedirectPath, { replace: true });
-          return;
-        }
-
-        // Step 2: Get the app ID
-        const { data: appData, error: appError } = await supabase
-          .from('rbac_apps')
-          .select('id, name, is_active')
-          .eq('name', appName)
-          .eq('is_active', true)
-          .single();
-
-        if (appError || !appData) {
-          logger.error('PaceLoginPage', 'App not found:', { appName, error: appError });
-          setAccessError(`Application "${appName}" is not configured. Please contact your administrator.`);
-          setIsCheckingAccess(false);
-          return;
-        }
-
-        // Step 3: Get all pages for this app
-        const { data: pagesData, error: pagesError } = await supabase
-          .from('rbac_app_pages')
-          .select('id, page_name')
-          .eq('app_id', appData.id);
-
-        if (pagesError || !pagesData || pagesData.length === 0) {
-          setAccessError(`You do not have permission to access ${appName}. This application is currently unavailable. Please contact your administrator if you believe you should have access.`);
-          setIsCheckingAccess(false);
-          return;
-        }
-
-        // Step 4: Get user's first organisation
-        const { data: orgRow } = await supabase
-          .from('rbac_organisation_roles')
-          .select('organisation_id')
-          .eq('user_id', userId)
-          .eq('status', 'active')
-          .is('revoked_at', null)
-          .limit(1)
-          .maybeSingle();
-
-        const organisationId = orgRow?.organisation_id;
-
-        if (!organisationId) {
-          setAccessError(`You do not have permission to access ${appName}. You are not assigned to any organisation. Please contact your administrator.`);
-          setIsCheckingAccess(false);
-          return;
-        }
-
-        // Step 5: Check if user has ANY read permission on ANY page in this app
-        // We check each page and see if user has the 'read' operation allowed
-        let hasAnyAccess = false;
-        for (const page of pagesData) {
-          const { data: hasPermission, error: permError } = await supabase
-            .rpc('rbac_check_permission_simplified', {
-              p_user_id: userId,
-              p_permission: `read:page.${page.page_name}`, // Permission format: operation:resource
-              p_organisation_id: organisationId,
-              p_event_id: null,
-              p_app_id: appData.id,
-              p_page_id: page.page_name // Page name to resolve to UUID
-            });
-
-          if (!permError && hasPermission === true) {
-            hasAnyAccess = true;
-            break;
-          }
-        }
-
-        if (hasAnyAccess) {
-          setIsCheckingAccess(false);
-          navigate(onSuccessRedirectPath, { replace: true });
-          return;
-        }
-
-        // No access - deny
-        setAccessError(`You do not have permission to access ${appName}. This application is restricted to authorized users only. Please contact your administrator if you believe you should have access.`);
-        setIsCheckingAccess(false);
-      } catch (error) {
-        logger.error('PaceLoginPage', 'Error checking app access:', error);
-        setAccessError('An error occurred while checking your permissions. Please try again or contact support.');
-        setIsCheckingAccess(false);
-      }
-    };
-
-    checkAccess();
-  }, [isAuthenticated, isLoading, user, supabase, appName, requireAppAccess, navigate, onSuccessRedirectPath]);
+  }, [requireAppAccess, isOnLoginPage, isAuthenticated, user, navigate, onSuccessRedirectPath]);
 
   const handleSubmit = async (data: { email: string; password: string }) => {
     setIsSigningIn(true);
-    setAccessError(null); // Clear previous access errors
-    
+    clearAccessError();
+
     try {
-      const { error } = await signIn(data.email, data.password);
+      const result = await signIn(data.email, data.password);
 
-      if (error) {
+      if ('ok' in result && !result.ok) {
         // Throw error so LoginForm can catch and display it
-        throw error;
+        throw new Error(result.error.message);
       }
 
-      // Navigation will be handled by the useEffect that checks app access
-      // Don't navigate here if requireAppAccess is true
-      if (!requireAppAccess) {
-        try {
-          navigate(onSuccessRedirectPath, { replace: true });
-        } catch (navError) {
-          logger.error('PaceLoginPage', 'Navigation error after sign-in:', navError);
-        }
-      }
+      // When requireAppAccess is true, useLoginAppAccess handles navigation.
+      // When requireAppAccess is false, the useEffect above navigates once isAuthenticated/user update.
     } finally {
       setIsSigningIn(false);
     }

package/src/components/PaceLoginPage/useLoginAppAccess.ts

@@ -0,0 +1,153 @@
+/**
+ * @file useLoginAppAccess
+ * @package @jmruthers/pace-core
+ * @module Components/PaceLoginPage/useLoginAppAccess
+ *
+ * Hook that checks RBAC-based app access after login. Encapsulates data fetching
+ * (Supabase tables and RPC) so the login page component stays UI-only.
+ */
+
+import { useEffect, useState } from 'react';
+import type { NavigateFunction } from 'react-router-dom';
+import type { SupabaseClient } from '@supabase/supabase-js';
+import { isSuperAdmin } from '../../rbac/api';
+import { logger } from '../../utils/core/logger';
+
+export interface UseLoginAppAccessParams {
+  requireAppAccess: boolean;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  user: { id: string } | null;
+  supabase: SupabaseClient | null;
+  appName: string;
+  onSuccessRedirectPath: string;
+  navigate: NavigateFunction;
+}
+
+export interface UseLoginAppAccessResult {
+  isCheckingAccess: boolean;
+  accessError: string | null;
+  clearAccessError: () => void;
+}
+
+/**
+ * Checks whether the authenticated user has permission to access the app (RBAC).
+ * If requireAppAccess is true and user is authenticated, runs the check and
+ * navigates on success or sets accessError on failure.
+ */
+export function useLoginAppAccess({
+  requireAppAccess,
+  isAuthenticated,
+  isLoading,
+  user,
+  supabase,
+  appName,
+  onSuccessRedirectPath,
+  navigate,
+}: UseLoginAppAccessParams): UseLoginAppAccessResult {
+  const [isCheckingAccess, setIsCheckingAccess] = useState(false);
+  const [accessError, setAccessError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!requireAppAccess || !isAuthenticated || isLoading || !user || !supabase) {
+      return;
+    }
+
+    const checkAccess = async () => {
+      setIsCheckingAccess(true);
+      setAccessError(null);
+
+      try {
+        const userId = user.id;
+        logger.debug('PaceLoginPage', 'Checking app access using RBAC:', { appName, userId });
+
+        const superResult = await isSuperAdmin(userId);
+        if (superResult.ok && superResult.data) {
+          logger.debug('PaceLoginPage', 'User is super admin, granting access');
+          setIsCheckingAccess(false);
+          navigate(onSuccessRedirectPath, { replace: true });
+          return;
+        }
+
+        const { data: appData, error: appError } = await supabase
+          .from('rbac_apps')
+          .select('id, name, is_active')
+          .eq('name', appName)
+          .eq('is_active', true)
+          .single();
+
+        if (appError || !appData) {
+          logger.error('PaceLoginPage', 'App not found:', { appName, error: appError });
+          setAccessError(`Application "${appName}" is not configured. Please contact your administrator.`);
+          setIsCheckingAccess(false);
+          return;
+        }
+
+        const { data: pagesData, error: pagesError } = await supabase
+          .from('rbac_app_pages')
+          .select('id, page_name')
+          .eq('app_id', appData.id);
+
+        if (pagesError || !pagesData || pagesData.length === 0) {
+          setAccessError(`You do not have permission to access ${appName}. This application is currently unavailable. Please contact your administrator if you believe you should have access.`);
+          setIsCheckingAccess(false);
+          return;
+        }
+
+        const { data: orgRow } = await supabase
+          .from('rbac_organisation_roles')
+          .select('organisation_id')
+          .eq('user_id', userId)
+          .eq('status', 'active')
+          .is('revoked_at', null)
+          .limit(1)
+          .maybeSingle();
+
+        const organisationId = orgRow?.organisation_id;
+
+        if (!organisationId) {
+          setAccessError(`You do not have permission to access ${appName}. You are not assigned to any organisation. Please contact your administrator.`);
+          setIsCheckingAccess(false);
+          return;
+        }
+
+        let hasAnyAccess = false;
+        for (const page of pagesData) {
+          const { data: hasPermission, error: permError } = await supabase
+            .rpc('rbac_check_permission_simplified', {
+              p_user_id: userId,
+              p_permission: `read:page.${page.page_name}`,
+              p_organisation_id: organisationId,
+              p_event_id: null,
+              p_app_id: appData.id,
+              p_page_id: page.page_name,
+            });
+
+          if (!permError && hasPermission === true) {
+            hasAnyAccess = true;
+            break;
+          }
+        }
+
+        if (hasAnyAccess) {
+          setIsCheckingAccess(false);
+          navigate(onSuccessRedirectPath, { replace: true });
+          return;
+        }
+
+        setAccessError(`You do not have permission to access ${appName}. This application is restricted to authorized users only. Please contact your administrator if you believe you should have access.`);
+        setIsCheckingAccess(false);
+      } catch (error) {
+        logger.error('PaceLoginPage', 'Error checking app access:', error);
+        setAccessError('An error occurred while checking your permissions. Please try again or contact support.');
+        setIsCheckingAccess(false);
+      }
+    };
+
+    checkAccess();
+  }, [isAuthenticated, isLoading, user, supabase, appName, requireAppAccess, navigate, onSuccessRedirectPath]);
+
+  const clearAccessError = () => setAccessError(null);
+
+  return { isCheckingAccess, accessError, clearAccessError };
+}

package/src/components/Progress/Progress.tsx

@@ -97,8 +97,7 @@ const Progress = React.forwardRef<
     <progress
       ref={ref}
       className={cn(
-        'appearance-none border-0 h-2 w-full rounded-full overflow-hidden transition-all accent-main-800',
-        !isIndeterminate && 'bg-sec-600/50',
+        'appearance-none border-0 h-2 w-full rounded-full overflow-hidden transition-all',
         className
       )}
       {...(isIndeterminate ? {} : { value })}

package/src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -68,16 +68,12 @@
  * - LoadingSpinner - Loading state UI
  */
 
-import React, { useMemo, useEffect, useRef, useState } from 'react';
+import React from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
-import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
-import { useSessionRestoration } from '../../hooks/useSessionRestoration';
-import { useEvents } from '../../hooks/useEvents';
-import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
 import { SessionRestorationLoader } from '../SessionRestorationLoader';
+import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
 import { Alert, AlertDescription, AlertTitle } from '../Alert/Alert';
-import { logger } from '../../utils/core/logger';
-import { usePreventTabReload } from '../../hooks/usePreventTabReload';
+import { useProtectedRouteState } from './useProtectedRouteState';
 
 /**
  * Props for the ProtectedRoute component.
@@ -130,251 +126,49 @@ export function ProtectedRoute({
   requireEvent = false,
   noEventsFallback,
   loadingFallback,
-  loginPath = '/login'
+  loginPath = '/login',
 }: ProtectedRouteProps) {
-  const { isAuthenticated, isLoading } = useUnifiedAuth();
-  
-  // Always call useEvents() - UnifiedAuthProvider always includes EventServiceProvider
-  // Only use the values when requireEvent is true
-  const eventsContext = useEvents();
-  const selectedEvent = requireEvent ? eventsContext.selectedEvent : null;
-  const events = requireEvent ? (eventsContext.events || []) : [];
-  const eventLoading = requireEvent ? (eventsContext.isLoading || false) : false;
-  
-  const sessionRestoration = useSessionRestoration();
-
-  // Prevent full page reloads when switching tabs (handles bfcache and visibility changes)
-  usePreventTabReload({ enabled: true, gracePeriodMs: 2000 });
-
-  // Track if user was previously authenticated to prevent redirects during session refresh
-  const wasAuthenticatedRef = useRef(false);
-  const [shouldRedirect, setShouldRedirect] = useState(false);
-  const tabJustBecameVisibleRef = useRef(false);
-  
-  // Track authentication state to detect when user was previously logged in
-  useEffect(() => {
-    if (isAuthenticated) {
-      wasAuthenticatedRef.current = true;
-      setShouldRedirect(false);
-      tabJustBecameVisibleRef.current = false; // Clear visibility flag when authenticated
-    }
-  }, [isAuthenticated]);
-
-  // Handle tab visibility changes - prevent immediate redirects when tab becomes visible
-  // This prevents the page from refreshing when switching back to the tab
-  useEffect(() => {
-    if (typeof document === 'undefined') return;
-
-    let timeoutId: ReturnType<typeof setTimeout> | null = null;
-    let wasHidden = document.hidden;
-
-    const handleVisibilityChange = () => {
-      const isNowVisible = !document.hidden;
-      
-      // When tab becomes visible, immediately prevent redirects and give session refresh time
-      if (isNowVisible && wasHidden) {
-        // Tab just became visible - immediately prevent redirects
-        if (!isAuthenticated && wasAuthenticatedRef.current) {
-          tabJustBecameVisibleRef.current = true;
-          setShouldRedirect(false); // Immediately clear redirect flag
-          
-          // Clear any existing timeout
-          if (timeoutId) {
-            clearTimeout(timeoutId);
-          }
-          
-          // Wait a bit to see if session refresh completes
-          timeoutId = setTimeout(() => {
-            // Only allow redirect if still not authenticated after delay
-            tabJustBecameVisibleRef.current = false;
-            // Use a function to get the latest state
-            setShouldRedirect((prev) => {
-              // Only set to true if we're still not authenticated
-              // This will be checked again in the render logic
-              return prev;
-            });
-          }, 2000); // 2 second grace period for session refresh
-        }
-      } else if (!isNowVisible) {
-        // Tab became hidden - clear the visibility flag
-        tabJustBecameVisibleRef.current = false;
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-          timeoutId = null;
-        }
-      }
-      
-      wasHidden = !isNowVisible;
-    };
-
-    // Check initial state - if tab is visible and user appears logged out, give grace period
-    if (!document.hidden && !isAuthenticated && wasAuthenticatedRef.current) {
-      tabJustBecameVisibleRef.current = true;
-      setShouldRedirect(false);
-      timeoutId = setTimeout(() => {
-        tabJustBecameVisibleRef.current = false;
-      }, 2000);
-    }
-
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-    return () => {
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
-  }, [isAuthenticated]);
+  const { phase, loginPath: resolvedLoginPath } = useProtectedRouteState({
+    requireEvent,
+    loginPath,
+  });
 
-  // Reset redirect flag when authenticated
-  useEffect(() => {
-    if (isAuthenticated) {
-      setShouldRedirect(false);
-      tabJustBecameVisibleRef.current = false;
-    }
-  }, [isAuthenticated]);
-
-  const isRestoringSession = useMemo(() => {
-    return sessionRestoration.isRestoring &&
-      !sessionRestoration.restorationComplete &&
-      !sessionRestoration.restorationError &&
-      !sessionRestoration.hasTimedOut;
-  }, [
-    sessionRestoration.isRestoring,
-    sessionRestoration.restorationComplete,
-    sessionRestoration.restorationError,
-    sessionRestoration.hasTimedOut
-  ]);
-
-  // Show session restoration loader during restoration
-  if (isRestoringSession) {
+  if (phase === 'session-restoring') {
     return <SessionRestorationLoader />;
   }
 
-  // Allow rendering during event loading - prevents blocking UI while events load
-  // This must come before auth loading check to avoid blocking when only events are loading
-  if (requireEvent && eventLoading) {
+  if (phase === 'event-loading') {
     return <Outlet />;
   }
 
-  // Show loading state while auth is being determined (but not organisation/event loading)
-  // Use isLoading (combined loading state) for consistency with simpler implementations
-  if (isLoading && !sessionRestoration.hasTimedOut) {
-    return loadingFallback || (
-      <main className="grid place-items-center size-full">
-        <LoadingSpinner />
-      </main>
-    );
-  }
-
-  // Redirect to login if not authenticated
-  // Priority order:
-  // 1. If session restoration has timed out or errored → redirect immediately (even if loading)
-  // 2. If session restoration hasn't completed yet (and hasn't failed) → show loading (wait for restoration)
-  // 3. If session restoration is in progress or still loading → show loading (wait for restoration)
-  // 4. If user was never authenticated → redirect immediately (only after restoration/loading complete)
-  // 5. If tab just became visible → show loading (prevent redirect during grace period)
-  // 6. If we've confirmed they should redirect (after visibility change grace period) → redirect
-  // 7. Otherwise, if loading → show loading spinner (session might be refreshing)
-  // 8. Otherwise → redirect (user is not authenticated and not loading)
-  if (!isAuthenticated) {
-    // Session restoration timeout/error always redirects immediately
-    if (sessionRestoration.hasTimedOut || sessionRestoration.restorationError) {
-      logger.warn('ProtectedRoute', 'Session restoration failed, redirecting to login', {
-        timedOut: sessionRestoration.hasTimedOut,
-        error: sessionRestoration.restorationError?.message
-      });
-      return <Navigate to={loginPath} replace />;
-    }
-
-    // CRITICAL FIX: Check if session restoration hasn't completed yet
-    // This covers the case where restoration hasn't started (200ms delay in AuthServiceProvider)
-    // or is in progress. We wait if restoration hasn't completed AND hasn't failed.
-    // This prevents redirecting to login during page refresh before session restoration completes.
-    const restorationNotComplete = !sessionRestoration.restorationComplete && 
-                                    !sessionRestoration.hasTimedOut && 
-                                    !sessionRestoration.restorationError;
-    
-    if (restorationNotComplete || sessionRestoration.isRestoring || isLoading) {
-      return loadingFallback || (
+  if (phase === 'auth-loading') {
+    return (
+      loadingFallback ?? (
         <main className="grid place-items-center size-full">
           <LoadingSpinner />
         </main>
-      );
-    }
-
-    // User was never authenticated → redirect immediately (only after restoration/loading complete)
-    if (!wasAuthenticatedRef.current) {
-      return <Navigate to={loginPath} replace />;
-    }
-
-    // Tab just became visible - show loading to prevent redirect during grace period
-    // Also check document visibility state directly as a fallback
-    const isTabVisible = typeof document !== 'undefined' && !document.hidden;
-    if (tabJustBecameVisibleRef.current || (isTabVisible && wasAuthenticatedRef.current && isLoading)) {
-      return loadingFallback || (
-        <main className="grid place-items-center size-full">
-          <LoadingSpinner />
-        </main>
-      );
-    }
-
-    // We've confirmed redirect after grace period → redirect
-    if (shouldRedirect) {
-      return <Navigate to={loginPath} replace />;
-    }
-
-    // User was authenticated before but now appears logged out
-    // Show loading state while we wait for session refresh (unless we're not loading)
-    if (isLoading) {
-      return loadingFallback || (
-        <main className="grid place-items-center size-full">
-          <LoadingSpinner />
-        </main>
-      );
-    }
-
-    // Not loading and not authenticated → redirect
-    return <Navigate to={loginPath} replace />;
+      )
+    );
   }
 
-  // If event is not required, allow rendering
-  if (!requireEvent) {
-    return <Outlet />;
+  if (phase === 'redirect') {
+    return <Navigate to={resolvedLoginPath} replace />;
   }
 
-  // Note: Super admin bypass would require useRBAC hook which adds complexity
-  // Apps that need super admin access without events should set requireEvent={false}
-  // For now, we keep it simple and always require events when requireEvent=true
-
-  // Event loading check already handled above before auth loading check
-
-  // If no events are available, show error message
-  if (!events || events.length === 0) {
-    return noEventsFallback || (
-      <main className="grid place-items-center text-center min-h-screen p-8">
-        <Alert variant="destructive" className="max-w-md">
-          <AlertTitle>No Events Available</AlertTitle>
-          <AlertDescription>
-            You don't have access to any events. Please contact your administrator if you believe this is an error.
-          </AlertDescription>
-        </Alert>
-      </main>
+  if (phase === 'no-events') {
+    return (
+      noEventsFallback ?? (
+        <main className="grid place-items-center text-center min-h-screen p-8">
+          <Alert variant="destructive" className="max-w-md">
+            <AlertTitle>No Events Available</AlertTitle>
+            <AlertDescription>
+              You don't have access to any events. Please contact your administrator if you believe this is an error.
+            </AlertDescription>
+          </Alert>
+        </main>
+      )
     );
   }
 
-  // KEY FIX: Allow rendering when events exist but none selected
-  // This allows the event selector (typically in PaceAppLayout header) to be visible
-  // Individual pages should handle "no selected event" state gracefully
-  // Auto-selection will handle selecting the next event, or user can manually select
-  
-  // If no event selected but events exist, allow rendering
-  // The event selector will be visible and user can select, or auto-selection will kick in
-  if (!selectedEvent) {
-    // Log for debugging - this is expected behavior, not an error
-    return <Outlet />;
-  }
-
-  // Event is selected - allow rendering
   return <Outlet />;
 }
-