@elevasis/ui 1.20.0 → 1.21.0

package/dist/{chunk-AQ5MQDSS.js → chunk-EDAYKRPJ.js}

@@ -3,7 +3,7 @@ import { getTimeRangeDates, observabilityKeys } from './chunk-LXHZYSMQ.js';
 import { GRAPH_CONSTANTS } from './chunk-F6RBK7NJ.js';
 import { useNotificationAdapter } from './chunk-R7WLWGPO.js';
 import { HTTP_HEADERS } from './chunk-NVOCKXUQ.js';
-import { STALE_TIME_MONITORING, REFETCH_INTERVAL_DASHBOARD, REFETCH_INTERVAL_RUNNING, WS_MAX_RETRIES_BEFORE_ERROR, WS_RECONNECT_BASE_DELAY, WS_RECONNECT_MAX_DELAY, STALE_TIME_DEFAULT, STALE_TIME_ADMIN } from './chunk-IOKL7BKE.js';
+import { STALE_TIME_MONITORING, REFETCH_INTERVAL_DASHBOARD, REFETCH_INTERVAL_RUNNING, WS_MAX_RETRIES_BEFORE_ERROR, WS_RECONNECT_BASE_DELAY, WS_RECONNECT_MAX_DELAY, getErrorInfo, formatErrorMessage, getErrorTitle, STALE_TIME_DEFAULT, STALE_TIME_ADMIN } from './chunk-IOKL7BKE.js';
 import { useStableAccessToken } from './chunk-ALA56RGZ.js';
 import { useOrganization } from './chunk-DD3CCMCZ.js';
 import { useElevasisServices } from './chunk-QEPXAWE2.js';
@@ -11,6 +11,7 @@ import { useAuthContext } from './chunk-BRJ3QZ4E.js';
 import { useQuery, useQueryClient, useMutation, useQueries } from '@tanstack/react-query';
 import { z } from 'zod';
 import { useState, useCallback, useMemo, useRef, useEffect, useId } from 'react';
+import { notifications } from '@mantine/notifications';
 import { useNavigate, useSearch } from '@tanstack/react-router';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
@@ -2062,6 +2063,55 @@ function useSSEConnection({
   }, [enabled, connectionKey, url, subscriberId, getAccessToken, manager]);
   return { connected, error };
 }
+var showInfoNotification = (message) => {
+  notifications.show({
+    title: "Info",
+    message,
+    autoClose: 5e3,
+    color: "blue",
+    position: "top-right"
+  });
+};
+var showSuccessNotification = (message) => {
+  notifications.show({
+    title: "Action Successful",
+    message,
+    autoClose: 5e3,
+    color: "green",
+    position: "top-right"
+  });
+};
+var showErrorNotification = (error) => {
+  if (error instanceof Error) {
+    error = error.message;
+  }
+  notifications.show({
+    title: "Action Failed",
+    message: error,
+    autoClose: 5e3,
+    color: "red",
+    position: "top-right"
+  });
+};
+var showWarningNotification = (message) => {
+  notifications.show({
+    title: "Warning",
+    message,
+    autoClose: 5e3,
+    color: "orange",
+    position: "top-right"
+  });
+};
+var showApiErrorNotification = (error) => {
+  const { message, code, requestId, fields, retryAfter } = getErrorInfo(error);
+  notifications.show({
+    title: getErrorTitle(code),
+    message: formatErrorMessage(message, requestId, fields, retryAfter),
+    autoClose: retryAfter ? retryAfter * 1e3 : 5e3,
+    color: "red",
+    position: "top-right"
+  });
+};
 
 // src/hooks/operations/shared/queryKeys.ts
 var operationsKeys = {
@@ -2581,4 +2631,356 @@ function useResourceExecutions({ resourceId, timeRange, enabled = true }) {
   });
 }
 
-export { CredentialNameSchema, OperationsService, UuidSchema, createUseFeatureAccess, executionsKeys, isSessionCapable, operationsKeys, scheduleKeys, sessionsKeys, sortData, useActivities, useActivityTrend, useArchiveSession, useArchivedLogs, useBatchDelete, useBatchedResourcesHealth, useBulkDeleteExecutions, useBusinessImpact, useCancelExecution, useCancelSchedule, useCheckpointTasks, useCommandQueue, useCommandQueueTotals, useCommandViewData, useCommandViewLayout, useCommandViewStats, useCommandViewStore, useCostBreakdown, useCostByModel, useCostSummary, useCostTrends, useCreateSchedule, useCreateSession, useDashboardMetrics, useDeleteExecution, useDeleteSchedule, useDeleteSession, useDeleteTask, useDeploymentDocs, useErrorAnalysis, useErrorDetail, useErrorDetails, useErrorDistribution, useErrorNotification, useExecuteAsync, useExecution, useExecutionHealth, useExecutionLogSSE, useExecutionLogs, useExecutionPanelState, useExecutions, useGetExecutionHistory, useGetSchedule, useGraphStats, useListSchedules, useMarkAllAsRead, useMarkAsRead, useNotificationCount, useNotifications, usePaginationState, usePatchTask, usePauseSchedule, useRecentExecutionsByResource, useResolveAllErrors, useResolveError, useResolveErrorsByExecution, useResourceDefinition, useResourceErrors, useResourceExecutions, useResources, useResourcesHealth, useResumeSchedule, useRetryExecution, useSSEConnection, useScheduledTasks, useSession, useSessionExecution, useSessionExecutions, useSessionMessages, useSessionWebSocket, useSessions, useSortedData, useSubmitAction, useSuccessNotification, useTableSelection, useTableSort, useTestNotification, useTopFailingResources, useUnresolveError, useUnresolvedErrors, useUpdateAnchor, useUpdateSchedule, useWarningNotification };
+// src/hooks/operations/calibration/queryKeys.ts
+var calibrationKeys = {
+  all: ["calibration"],
+  // Projects
+  projects: (org) => [...calibrationKeys.all, "projects", org],
+  projectsByResource: (org, resourceId, resourceType) => [...calibrationKeys.all, "projects", org, resourceId, resourceType],
+  project: (org, projectId) => [...calibrationKeys.all, "project", org, projectId],
+  // Runs
+  runs: (org, projectId) => [...calibrationKeys.all, "runs", org, projectId],
+  run: (org, runId) => [...calibrationKeys.all, "run", org, runId],
+  runFull: (org, runId) => [...calibrationKeys.all, "run-full", org, runId]
+};
+function useCalibrationRuns(projectId) {
+  const { apiRequest, organizationId, isReady } = useElevasisServices();
+  return useQuery({
+    queryKey: calibrationKeys.runs(organizationId ?? "none", projectId),
+    queryFn: async () => {
+      const response = await apiRequest(`/calibration/runs?projectId=${projectId}`);
+      return response.runs;
+    },
+    enabled: isReady && !!projectId && !!organizationId
+  });
+}
+function useCalibrationRun(runId) {
+  const { apiRequest, organizationId, isReady } = useElevasisServices();
+  return useQuery({
+    queryKey: calibrationKeys.run(organizationId ?? "none", runId),
+    queryFn: async () => {
+      const response = await apiRequest(`/calibration/runs/${runId}`);
+      return response.run;
+    },
+    enabled: isReady && !!runId && !!organizationId
+  });
+}
+function useCreateRun() {
+  const { apiRequest, organizationId } = useElevasisServices();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (input) => {
+      const response = await apiRequest("/calibration/runs", {
+        method: "POST",
+        body: JSON.stringify(input)
+      });
+      return response.run;
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({
+        queryKey: calibrationKeys.runs(organizationId ?? "none", data.projectId)
+      });
+    },
+    onError: (error) => {
+      showApiErrorNotification(error);
+    }
+  });
+}
+function useExecuteRun() {
+  const { apiRequest, organizationId } = useElevasisServices();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (runId) => {
+      await apiRequest(`/calibration/runs/${runId}/execute`, {
+        method: "POST"
+      });
+    },
+    onSuccess: (_, runId) => {
+      queryClient.invalidateQueries({
+        queryKey: calibrationKeys.run(organizationId ?? "none", runId)
+      });
+    },
+    onError: (error) => {
+      showApiErrorNotification(error);
+    }
+  });
+}
+function useDeleteRun() {
+  const { apiRequest, organizationId } = useElevasisServices();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ runId }) => {
+      await apiRequest(`/calibration/runs/${runId}`, {
+        method: "DELETE"
+      });
+    },
+    onSuccess: (_, { projectId }) => {
+      queryClient.invalidateQueries({
+        queryKey: calibrationKeys.runs(organizationId ?? "none", projectId)
+      });
+    },
+    onError: (error) => {
+      showApiErrorNotification(error);
+    }
+  });
+}
+function useGradeRun() {
+  const { apiRequest, organizationId } = useElevasisServices();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      runId,
+      rubric,
+      graderModel
+    }) => {
+      await apiRequest(`/calibration/runs/${runId}/grade`, {
+        method: "POST",
+        body: JSON.stringify({ rubric, graderModel })
+      });
+    },
+    onSuccess: (_, { runId }) => {
+      queryClient.invalidateQueries({
+        queryKey: calibrationKeys.run(organizationId ?? "none", runId)
+      });
+      queryClient.invalidateQueries({
+        queryKey: calibrationKeys.runFull(organizationId ?? "none", runId)
+      });
+    },
+    onError: (error) => {
+      showApiErrorNotification(error);
+    }
+  });
+}
+function useCalibrationRunFull(runId) {
+  const { apiRequest, organizationId, isReady } = useElevasisServices();
+  return useQuery({
+    queryKey: calibrationKeys.runFull(organizationId ?? "none", runId),
+    queryFn: async () => {
+      const response = await apiRequest(`/calibration/runs/${runId}/full`);
+      return response;
+    },
+    enabled: isReady && !!runId && !!organizationId
+  });
+}
+function useCalibrationSSE({ runId, manager, apiUrl, enabled = true }) {
+  const queryClient = useQueryClient();
+  const { isReady: isOrganizationReady, organizationId } = useElevasisServices();
+  const { currentMembership } = useOrganization();
+  const currentWorkOSOrganizationId = currentMembership?.organization?.workos_org_id;
+  const [progress, setProgress] = useState({
+    connected: false,
+    events: [],
+    isComplete: false
+  });
+  const sseUrl = `${apiUrl}/api/calibration/runs/${runId}/sse`;
+  const headers = useMemo(() => {
+    const h = {};
+    if (currentWorkOSOrganizationId) h[HTTP_HEADERS.WORKOS_ORGANIZATION_ID] = currentWorkOSOrganizationId;
+    return h;
+  }, [currentWorkOSOrganizationId]);
+  const handleMessage = useCallback(
+    (data) => {
+      try {
+        const event = JSON.parse(data);
+        setProgress((prev) => {
+          const newProgress = {
+            ...prev,
+            events: [...prev.events, event]
+          };
+          switch (event.type) {
+            case "connected":
+              newProgress.connected = true;
+              break;
+            case "calibration-completed":
+              newProgress.isComplete = true;
+              newProgress.summary = event.summary;
+              queryClient.invalidateQueries({
+                queryKey: calibrationKeys.run(currentWorkOSOrganizationId || "none", runId)
+              });
+              queryClient.invalidateQueries({
+                queryKey: calibrationKeys.runFull(currentWorkOSOrganizationId || "none", runId)
+              });
+              break;
+            case "calibration-failed":
+              newProgress.isComplete = true;
+              newProgress.error = event.error;
+              queryClient.invalidateQueries({
+                queryKey: calibrationKeys.run(currentWorkOSOrganizationId || "none", runId)
+              });
+              queryClient.invalidateQueries({
+                queryKey: calibrationKeys.runFull(currentWorkOSOrganizationId || "none", runId)
+              });
+              break;
+          }
+          return newProgress;
+        });
+      } catch {
+      }
+    },
+    [queryClient, currentWorkOSOrganizationId, runId]
+  );
+  const { connected, error } = useSSEConnection({
+    manager,
+    connectionKey: `calibration-${runId}`,
+    url: sseUrl,
+    enabled: enabled && !!runId && !!currentWorkOSOrganizationId && isOrganizationReady,
+    headers,
+    onmessage: handleMessage,
+    onopen: (response) => {
+      if (response.ok) {
+        setProgress((prev) => ({ ...prev, connected: true }));
+      }
+      return void 0;
+    },
+    onerror: () => {
+      setProgress((prev) => ({ ...prev, connected: false }));
+    },
+    onclose: () => {
+      setProgress((prev) => ({ ...prev, connected: false }));
+    }
+  });
+  useEffect(() => {
+    setProgress((prev) => ({ ...prev, connected }));
+  }, [connected]);
+  useEffect(() => {
+    if (error) {
+      setProgress((prev) => ({ ...prev, error }));
+    }
+  }, [error]);
+  useEffect(() => {
+    return () => {
+      setProgress({
+        connected: false,
+        events: [],
+        isComplete: false
+      });
+    };
+  }, [runId, organizationId, isOrganizationReady]);
+  const disconnect = useCallback(() => {
+    manager.closeConnection(`calibration-${runId}`);
+  }, [manager, runId]);
+  const reset = useCallback(() => {
+    setProgress({
+      connected: false,
+      events: [],
+      isComplete: false
+    });
+  }, []);
+  return {
+    ...progress,
+    disconnect,
+    reset
+  };
+}
+
+// src/hooks/operations/calibration/useCalibrationProjects.ts
+function useAllCalibrationProjects() {
+  const { apiRequest, organizationId, isReady } = useElevasisServices();
+  return useQuery({
+    queryKey: calibrationKeys.projects(organizationId ?? "none"),
+    queryFn: async () => {
+      const response = await apiRequest("/calibration/projects");
+      return response.projects;
+    },
+    enabled: isReady && !!organizationId
+  });
+}
+function useCalibrationProjects(resourceId, resourceType) {
+  const { apiRequest, organizationId, isReady } = useElevasisServices();
+  return useQuery({
+    queryKey: calibrationKeys.projectsByResource(organizationId ?? "none", resourceId, resourceType),
+    queryFn: async () => {
+      const response = await apiRequest(
+        `/calibration/projects?resourceId=${resourceId}&resourceType=${resourceType}`
+      );
+      return response.projects;
+    },
+    enabled: isReady && !!resourceId && !!resourceType && !!organizationId
+  });
+}
+function useCalibrationProject(projectId) {
+  const { apiRequest, organizationId, isReady } = useElevasisServices();
+  return useQuery({
+    queryKey: calibrationKeys.project(organizationId ?? "none", projectId),
+    queryFn: async () => {
+      const response = await apiRequest(`/calibration/projects/${projectId}`);
+      return response.project;
+    },
+    enabled: isReady && !!projectId && !!organizationId
+  });
+}
+function useCreateProject() {
+  const { apiRequest, organizationId } = useElevasisServices();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (input) => {
+      const response = await apiRequest("/calibration/projects", {
+        method: "POST",
+        body: JSON.stringify(input)
+      });
+      return response.project;
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({
+        queryKey: calibrationKeys.projects(organizationId ?? "none")
+      });
+      queryClient.invalidateQueries({
+        queryKey: calibrationKeys.projectsByResource(organizationId ?? "none", data.resourceId, data.resourceType)
+      });
+    },
+    onError: (error) => {
+      showApiErrorNotification(error);
+    }
+  });
+}
+function useUpdateProject() {
+  const { apiRequest, organizationId } = useElevasisServices();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      id,
+      ...input
+    }) => {
+      const response = await apiRequest(`/calibration/projects/${id}`, {
+        method: "PATCH",
+        body: JSON.stringify(input)
+      });
+      return response.project;
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({
+        queryKey: calibrationKeys.projects(organizationId ?? "none")
+      });
+      queryClient.invalidateQueries({
+        queryKey: calibrationKeys.projectsByResource(organizationId ?? "none", data.resourceId, data.resourceType)
+      });
+      queryClient.invalidateQueries({
+        queryKey: calibrationKeys.project(organizationId ?? "none", data.id)
+      });
+    },
+    onError: (error) => {
+      showApiErrorNotification(error);
+    }
+  });
+}
+function useDeleteProject() {
+  const { apiRequest } = useElevasisServices();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (id) => {
+      await apiRequest(`/calibration/projects/${id}`, {
+        method: "DELETE"
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: calibrationKeys.all
+      });
+    },
+    onError: (error) => {
+      showApiErrorNotification(error);
+    }
+  });
+}
+
+export { CredentialNameSchema, OperationsService, UuidSchema, calibrationKeys, createUseFeatureAccess, executionsKeys, isSessionCapable, operationsKeys, scheduleKeys, sessionsKeys, showApiErrorNotification, showErrorNotification, showInfoNotification, showSuccessNotification, showWarningNotification, sortData, useActivities, useActivityTrend, useAllCalibrationProjects, useArchiveSession, useArchivedLogs, useBatchDelete, useBatchedResourcesHealth, useBulkDeleteExecutions, useBusinessImpact, useCalibrationProject, useCalibrationProjects, useCalibrationRun, useCalibrationRunFull, useCalibrationRuns, useCalibrationSSE, useCancelExecution, useCancelSchedule, useCheckpointTasks, useCommandQueue, useCommandQueueTotals, useCommandViewData, useCommandViewLayout, useCommandViewStats, useCommandViewStore, useCostBreakdown, useCostByModel, useCostSummary, useCostTrends, useCreateProject, useCreateRun, useCreateSchedule, useCreateSession, useDashboardMetrics, useDeleteExecution, useDeleteProject, useDeleteRun, useDeleteSchedule, useDeleteSession, useDeleteTask, useDeploymentDocs, useErrorAnalysis, useErrorDetail, useErrorDetails, useErrorDistribution, useErrorNotification, useExecuteAsync, useExecuteRun, useExecution, useExecutionHealth, useExecutionLogSSE, useExecutionLogs, useExecutionPanelState, useExecutions, useGetExecutionHistory, useGetSchedule, useGradeRun, useGraphStats, useListSchedules, useMarkAllAsRead, useMarkAsRead, useNotificationCount, useNotifications, usePaginationState, usePatchTask, usePauseSchedule, useRecentExecutionsByResource, useResolveAllErrors, useResolveError, useResolveErrorsByExecution, useResourceDefinition, useResourceErrors, useResourceExecutions, useResources, useResourcesHealth, useResumeSchedule, useRetryExecution, useSSEConnection, useScheduledTasks, useSession, useSessionExecution, useSessionExecutions, useSessionMessages, useSessionWebSocket, useSessions, useSortedData, useSubmitAction, useSuccessNotification, useTableSelection, useTableSort, useTestNotification, useTopFailingResources, useUnresolveError, useUnresolvedErrors, useUpdateAnchor, useUpdateProject, useUpdateSchedule, useWarningNotification };

package/dist/{chunk-XOTN3X3Z.js → chunk-FATKFO7X.js}

@@ -1,7 +1,7 @@
-import { CredentialNameSchema, UuidSchema, useErrorNotification } from './chunk-AQ5MQDSS.js';
+import { CredentialNameSchema, UuidSchema, useErrorNotification, showApiErrorNotification } from './chunk-EDAYKRPJ.js';
 import { getTimeRangeDates } from './chunk-LXHZYSMQ.js';
 import { useNotificationAdapter } from './chunk-R7WLWGPO.js';
-import { GC_TIME_SHORT, STALE_TIME_MONITORING, GC_TIME_MEDIUM, STALE_TIME_DEFAULT, getErrorInfo, formatErrorMessage, getErrorTitle } from './chunk-IOKL7BKE.js';
+import { GC_TIME_SHORT, STALE_TIME_MONITORING, GC_TIME_MEDIUM, STALE_TIME_DEFAULT } from './chunk-IOKL7BKE.js';
 import { useElevasisServices } from './chunk-QEPXAWE2.js';
 import { z } from 'zod';
 import { create } from 'zustand';
@@ -979,57 +979,6 @@ function useListWebhookEndpoints() {
     enabled: isReady
   });
 }
-var showInfoNotification = (message) => {
-  notifications.show({
-    title: "Info",
-    message,
-    autoClose: 5e3,
-    color: "blue",
-    position: "top-right"
-  });
-};
-var showSuccessNotification = (message) => {
-  notifications.show({
-    title: "Action Successful",
-    message,
-    autoClose: 5e3,
-    color: "green",
-    position: "top-right"
-  });
-};
-var showErrorNotification = (error) => {
-  if (error instanceof Error) {
-    error = error.message;
-  }
-  notifications.show({
-    title: "Action Failed",
-    message: error,
-    autoClose: 5e3,
-    color: "red",
-    position: "top-right"
-  });
-};
-var showWarningNotification = (message) => {
-  notifications.show({
-    title: "Warning",
-    message,
-    autoClose: 5e3,
-    color: "orange",
-    position: "top-right"
-  });
-};
-var showApiErrorNotification = (error) => {
-  const { message, code, requestId, fields, retryAfter } = getErrorInfo(error);
-  notifications.show({
-    title: getErrorTitle(code),
-    message: formatErrorMessage(message, requestId, fields, retryAfter),
-    autoClose: retryAfter ? retryAfter * 1e3 : 5e3,
-    color: "red",
-    position: "top-right"
-  });
-};
-
-// src/hooks/settings/webhooks/useCreateWebhookEndpoint.ts
 function useCreateWebhookEndpoint() {
   const { apiRequest } = useElevasisServices();
   const queryClient = useQueryClient();
@@ -1092,4 +1041,4 @@ function useUpdateWebhookEndpoint() {
   });
 }
 
-export { ApiKeyService, CredentialSchemas, CredentialService, DeploymentService, MEMBERSHIP_STATUS_COLORS, OrganizationMembershipService, WebhookEndpointService, filterByDomainFilters, showApiErrorNotification, showErrorNotification, showInfoNotification, showSuccessNotification, showWarningNotification, transformMembershipToTableRow, useActivateDeployment, useActivityFilters, useCommandViewDomainFilters, useCreateApiKey, useCreateCredential, useCreateWebhookEndpoint, useCredentials, useDeactivateDeployment, useDeactivateMembership, useDeleteApiKey, useDeleteCredential, useDeleteDeployment, useDeleteWebhookEndpoint, useExecutionLogsFilters, useListApiKeys, useListDeployments, useListWebhookEndpoints, useOrganizationMembers, useReactivateMembership, useResourceSearch, useResourcesDomainFilters, useStatusFilter, useTimeRangeDates, useUpdateApiKey, useUpdateCredential, useUpdateMemberConfig, useUpdateWebhookEndpoint, useUserMemberships, useVisibleResources };
+export { ApiKeyService, CredentialSchemas, CredentialService, DeploymentService, MEMBERSHIP_STATUS_COLORS, OrganizationMembershipService, WebhookEndpointService, filterByDomainFilters, transformMembershipToTableRow, useActivateDeployment, useActivityFilters, useCommandViewDomainFilters, useCreateApiKey, useCreateCredential, useCreateWebhookEndpoint, useCredentials, useDeactivateDeployment, useDeactivateMembership, useDeleteApiKey, useDeleteCredential, useDeleteDeployment, useDeleteWebhookEndpoint, useExecutionLogsFilters, useListApiKeys, useListDeployments, useListWebhookEndpoints, useOrganizationMembers, useReactivateMembership, useResourceSearch, useResourcesDomainFilters, useStatusFilter, useTimeRangeDates, useUpdateApiKey, useUpdateCredential, useUpdateMemberConfig, useUpdateWebhookEndpoint, useUserMemberships, useVisibleResources };

package/dist/{chunk-ERVB3QJQ.js → chunk-FVBYSDM4.js}

@@ -1,4 +1,4 @@
-import { CardHeader, APIErrorAlert, TrendIndicator, EmptyState, StatCard } from './chunk-AWMZCYKH.js';
+import { CardHeader, APIErrorAlert, TrendIndicator, EmptyState, StatCard } from './chunk-BC6TJEON.js';
 import { getTimeRangeLabel, getTimeRangeDates, useErrorTrends, formatBucketTime } from './chunk-LXHZYSMQ.js';
 import { useRef, useState, useLayoutEffect, useEffect, useMemo, useCallback } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';