@striae-org/striae 3.0.4 → 3.1.0

package/app/components/sidebar/cases/cases-modal.tsx

@@ -23,6 +23,11 @@ export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }:
   }>({});
   const CASES_PER_PAGE = 10;
 
+  const startLoading = () => {
+    setIsLoading(true);
+    setError('');
+  };
+
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
@@ -38,8 +43,9 @@ export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }:
 
   useEffect(() => {
     if (isOpen) {
-      setIsLoading(true);
-      setError('');
+      const loadingTimer = window.setTimeout(() => {
+        startLoading();
+      }, 0);
       
       listCases(user)
         .then(fetchedCases => {
@@ -52,6 +58,10 @@ export const CasesModal = ({ isOpen, onClose, onSelectCase, currentCase, user }:
         .finally(() => {
           setIsLoading(false);
         });
+
+      return () => {
+        window.clearTimeout(loadingTimer);
+      };
     }
   }, [isOpen, user]);
 

package/app/components/sidebar/files/files-modal.tsx

@@ -41,7 +41,10 @@ export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files,
   // Fetch confirmation status only for currently visible paginated files
   useEffect(() => {
     const fetchConfirmationStatuses = async () => {
-      const visibleFiles = currentFiles;
+      const visibleFiles = files.slice(
+        currentPage * FILES_PER_PAGE,
+        currentPage * FILES_PER_PAGE + FILES_PER_PAGE
+      );
 
       if (!isOpen || !currentCase || !user || visibleFiles.length === 0) {
         return;
@@ -84,6 +87,21 @@ export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files,
     fetchConfirmationStatuses();
   }, [isOpen, currentCase, currentPage, files, user]);
 
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      return () => {
+        document.removeEventListener('keydown', handleEscape);
+      };
+    }
+  }, [isOpen, onClose]);
+
   const handleFileSelect = (file: FileData) => {
     onFileSelect?.(file);
     onClose();
@@ -123,12 +141,6 @@ export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files,
     }
   };
 
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      onClose();
-    }
-  };
-
   const formatDate = (dateString: string) => {
     try {
       return new Date(dateString).toLocaleDateString();
@@ -153,7 +165,7 @@ export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files,
   if (!isOpen) return null;
 
   return (
-    <div className={styles.modalOverlay} onKeyDown={handleKeyDown} tabIndex={-1}>
+    <div className={styles.modalOverlay}>
       <div className={styles.modal}>
         <div className={styles.modalHeader}>
           <h2>Files in Case {currentCase}</h2>
@@ -188,6 +200,14 @@ export const FilesModal = ({ isOpen, onClose, onFileSelect, currentCase, files,
                     key={file.id}
                     className={`${styles.fileItem} ${selectedFileId === file.id ? styles.active : ''} ${confirmationClass}`}
                     onClick={() => handleFileSelect(file)}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        handleFileSelect(file);
+                      }
+                    }}
+                    role="button"
+                    tabIndex={0}
                   >
                     <div className={styles.fileInfo}>
                       <div className={styles.fileName} title={file.originalFilename}>

package/app/components/sidebar/sidebar.module.css

@@ -255,7 +255,8 @@
 
 .oinBadgeLink {
   display: inline-block;
-  transition: opacity var(--durationS, 0.2s) var(--bezierFastoutSlowin, ease-out);
+  transition: opacity var(--durationS, 0.2s)
+    var(--bezierFastoutSlowin, ease-out);
 }
 
 .oinBadgeLink:hover {
@@ -317,5 +318,3 @@
   background: #5c636a;
   box-shadow: 0 2px 6px color-mix(in lab, #6c757d 40%, transparent);
 }
-
-

package/app/components/sidebar/sidebar.tsx

@@ -6,10 +6,8 @@ import { SignOut } from '../actions/signout';
 import { CaseSidebar } from './cases/case-sidebar';
 import { NotesSidebar } from './notes/notes-sidebar';
 import { CaseImport } from './case-import/case-import';
-import { HashUtility } from './hash/hash-utility';
 import { Toast } from '../toast/toast';
-import { FileData } from '~/types';
-import { ImportResult, ConfirmationImportResult } from '~/types';
+import { FileData, ImportResult, ConfirmationImportResult } from '~/types';
 
 interface SidebarProps {
   user: User;
@@ -64,7 +62,6 @@ export const Sidebar = ({
 }: SidebarProps) => {
   const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
   const [isImportModalOpen, setIsImportModalOpen] = useState(false);
-  const [isHashModalOpen, setIsHashModalOpen] = useState(false);
   const [isUploading, setIsUploading] = useState(initialIsUploading);
   const [toastMessage, setToastMessage] = useState('');
   const [toastType, setToastType] = useState<'success' | 'error' | 'warning'>('success');
@@ -143,10 +140,6 @@ export const Sidebar = ({
         onClose={() => setIsImportModalOpen(false)}
         onImportComplete={handleImportComplete}
       />
-      <HashUtility 
-        isOpen={isHashModalOpen}
-        onClose={() => setIsHashModalOpen(false)}
-      />
       {showNotes ? (
         <NotesSidebar 
           currentCase={currentCase}
@@ -193,14 +186,6 @@ export const Sidebar = ({
             >
               Import/Clear RO Case
             </button>
-            <button 
-              onClick={() => setIsHashModalOpen(true)}
-              className={styles.hashButton}
-              disabled={isUploading}
-              title={isUploading ? 'Cannot open hash utility while uploading files' : undefined}
-            >
-              Hash Utility
-            </button>
           </div>
         </>
       )}

package/app/components/sidebar/upload/image-upload-zone.tsx

@@ -198,7 +198,7 @@ export const ImageUploadZone = ({
     }
   };
 
-  const handleFileInputChange = useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileInputChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
     if (isReadOnly) {
       return;
     }
@@ -209,7 +209,7 @@ export const ImageUploadZone = ({
     // Convert FileList to Array
     const filesToUpload = Array.from(files);
     await processFileQueue(filesToUpload);
-  }, [isReadOnly, currentCase]);
+  };
 
   const handleDragEnter = useCallback((e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
@@ -234,7 +234,7 @@ export const ImageUploadZone = ({
     e.stopPropagation();
   }, []);
 
-  const handleDrop = useCallback(async (e: React.DragEvent<HTMLDivElement>) => {
+  const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDraggingFiles(false);
@@ -249,7 +249,7 @@ export const ImageUploadZone = ({
     // Convert FileList to Array and process all files
     const filesToUpload = Array.from(files);
     await processFileQueue(filesToUpload);
-  }, [isReadOnly, currentCase]);
+  };
 
   // If read-only or uploads restricted, show only error message
   if (isReadOnly || !canUploadNewFile) {

package/app/components/toolbar/toolbar-color-selector.module.css

@@ -84,7 +84,7 @@
   border-radius: 3px;
   padding: var(--spaceXS) var(--spaceS);
   cursor: pointer;
-  font-size: var(--fontSizeXS);
+  font-size: var(--fontSizeBodyXS);
 }
 
 .toggleButton:hover {
@@ -157,7 +157,7 @@
 }
 
 .previewLabel {
-  font-size: var(--fontSizeXS);
+  font-size: var(--fontSizeBodyXS);
   color: var(--foreground);
   font-weight: 500;
 }

package/app/components/toolbar/toolbar-color-selector.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import styles from './toolbar-color-selector.module.css';
 
 interface ToolbarColorSelectorProps {
@@ -39,11 +39,11 @@ export const ToolbarColorSelector = ({
     onColorConfirm(tempSelectedColor);
   };
 
-  const handleCancel = () => {
+  const handleCancel = useCallback(() => {
     setTempSelectedColor(selectedColor); // Reset to original color
     setShowColorWheel(false); // Reset to presets view
     onCancel();
-  };
+  }, [selectedColor, onCancel]);
 
   // Handle keyboard events for escape
   useEffect(() => {

package/app/components/toolbar/toolbar.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Button } from '../button/button';
 import { ToolbarColorSelector } from './toolbar-color-selector';
 import styles from './toolbar.module.css';
@@ -34,18 +34,28 @@ export const Toolbar = ({
   const [isVisible, setIsVisible] = useState(true);
   const [showColorSelector, setShowColorSelector] = useState(false);
 
+  const deactivateBoxTool = useCallback(() => {
+    setActiveTools(prev => {
+      const next = new Set(prev);
+      next.delete('box');
+      onToolSelect?.('box', false);
+      return next;
+    });
+    setShowColorSelector(false);
+  }, [onToolSelect]);
+
   // Automatically deactivate box annotations when notes are opened
   useEffect(() => {
     if (isNotesOpen && activeTools.has('box')) {
-      setActiveTools(prev => {
-        const next = new Set(prev);
-        next.delete('box');
-        onToolSelect?.('box', false);
-        return next;
-      });
-      setShowColorSelector(false);
+      const deactivateTimer = window.setTimeout(() => {
+        deactivateBoxTool();
+      }, 0);
+
+      return () => {
+        window.clearTimeout(deactivateTimer);
+      };
     }
-  }, [isNotesOpen, activeTools, onToolSelect]);
+  }, [isNotesOpen, activeTools, deactivateBoxTool]);
 
   const handleToolClick = (toolId: ToolId) => {
     if (toolId === 'print') {

package/app/components/user/delete-account.module.css

@@ -7,6 +7,7 @@
   justify-content: center;
   align-items: center;
   z-index: var(--zIndex5);
+  cursor: default;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
 }
 
@@ -16,11 +17,13 @@
   border-radius: var(--spaceXS);
   width: 90%;
   max-width: 600px;
-  box-shadow: 0 var(--spaceXS) var(--spaceL) color-mix(in lab, var(--black) 10%, transparent);
+  box-shadow: 0 var(--spaceXS) var(--spaceL)
+    color-mix(in lab, var(--black) 10%, transparent);
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
   overflow: hidden;
   max-height: 90vh;
   overflow-y: auto;
+  cursor: default;
 }
 
 /* Modal Header */

package/app/components/user/delete-account.tsx

@@ -317,18 +317,37 @@ export const DeleteAccount = ({ isOpen, onClose, user, company }: DeleteAccountP
           ? `Deleting case ${deletionProgress.currentCaseNumber}...`
           : 'Preparing account deletion...');
 
+  const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+
+  const handleOverlayKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClose();
+    }
+  };
+
   return (
     <div 
       className={styles.modalOverlay} 
-      onClick={onClose}
-      role="presentation"
+      onClick={handleOverlayClick}
+      onKeyDown={handleOverlayKeyDown}
+      role="button"
+      tabIndex={0}
+      aria-label="Close delete account dialog"
     >
       <div 
         className={styles.modal}
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-title"
-        onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
         <header className={styles.modalHeader}>

package/app/components/user/manage-profile.tsx

@@ -21,7 +21,6 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
   const [displayName, setDisplayName] = useState(user?.displayName || '');
   const [company, setCompany] = useState('');
   const [email, setEmail] = useState('');
-  const [permitted, setPermitted] = useState(false); // Default to false for safety - updated after data loads.
   const [isLoading, setIsLoading] = useState(false);
   const [isMfaBusy, setIsMfaBusy] = useState(false);
   const [error, setError] = useState('');
@@ -52,7 +51,6 @@ export const ManageProfile = ({ isOpen, onClose }: ManageProfileProps) => {
           if (userData) {
             setCompany(userData.company || '');
             setEmail(userData.email || '');
-            setPermitted(userData.permitted === true);
           }
         } catch (err) {
           console.error('Failed to load user data:', err);

package/app/entry.server.tsx

@@ -1,4 +1,4 @@
-import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
+import type { EntryContext } from "@remix-run/cloudflare";
 import { RemixServer } from "@remix-run/react";
 import { isbot } from "isbot";
 import { renderToReadableStream } from "react-dom/server";
@@ -7,8 +7,7 @@ export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
-  loadContext: AppLoadContext
+  remixContext: EntryContext
 ) {
   const body = await renderToReadableStream(
     <RemixServer context={remixContext} url={request.url} />,

package/app/hooks/useInactivityTimeout.ts

@@ -22,11 +22,15 @@ export const useInactivityTimeout = ({
   const location = useLocation();
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const warningTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const lastActivityRef = useRef<number>(Date.now());
+  const lastActivityRef = useRef<number>(0);
 
   const isAuthRoute = location.pathname.startsWith('/auth');
   const shouldEnable = enabled && isAuthRoute;
 
+  useEffect(() => {
+    lastActivityRef.current = Date.now();
+  }, []);
+
   const clearTimeouts = useCallback(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);

package/app/root.tsx

@@ -30,11 +30,8 @@ export const links: LinksFunction = () => [
     rel: "stylesheet",
     href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
   },
-  { rel: 'manifest', href: '/manifest.json' },
   { rel: 'icon', href: '/favicon.ico' },
   { rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' },
-  { rel: 'shortcut_icon', href: '/shortcut.png', type: 'image/png', sizes: '64x64' },
-  { rel: 'apple-touch-icon', href: '/icon-256.png', sizes: '256x256' },
 ];
 
 type AppTheme = 'dark' | 'light';

package/app/routes/_index.tsx

@@ -1,16 +1 @@
-import { redirect, type LoaderFunctionArgs } from '@remix-run/cloudflare';
-import { isMobileOrTabletUserAgent } from '~/utils/device-detection';
-
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-	const requestUrl = new URL(request.url);
-	const search = requestUrl.search ?? '';
-	const userAgent = request.headers.get('user-agent') ?? '';
-
-	if (isMobileOrTabletUserAgent(userAgent)) {
-		throw redirect(`/mobile-prevented${search}`);
-	}
-
-	return null;
-};
-
-export { Login as default, meta } from './auth/login';
+export { Login as default, meta } from './auth/login';

package/app/routes/auth/emailVerification.tsx

@@ -107,7 +107,7 @@ export const EmailVerification = ({
         </div>
         
         <div className={styles.verificationHints}>
-          <p className={styles.hint}>Didn't receive the email?</p>
+          <p className={styles.hint}>Didn&apos;t receive the email?</p>
           <ul className={styles.hintList}>
             <li>Check your spam or junk folder</li>
             <li>Make sure {user?.email} is correct</li>

package/app/routes/auth/login.tsx

@@ -20,7 +20,6 @@ import { MFAVerification } from '~/components/auth/mfa-verification';
 import { MFAEnrollment } from '~/components/auth/mfa-enrollment';
 import { Icon } from '~/components/icon/icon';
 import styles from './login.module.css';
-import { baseMeta } from '~/utils/meta';
 import { Striae } from '~/routes/striae/striae';
 import { getUserData, createUser } from '~/utils/permissions';
 import { auditService } from '~/services/audit.service';
@@ -30,10 +29,13 @@ import { buildActionCodeSettings } from '~/utils/auth-action-settings';
 import { userHasMFA } from '~/utils/mfa';
 
 export const meta = () => {
-  return baseMeta({
-    title: 'Welcome to Striae',
-    description: 'Login to your Striae account to access your projects and data',
-  });
+  const titleText = 'Striae | Welcome to Striae';
+  const description = 'Login to your Striae account to access your projects and data';
+
+  return [
+    { title: titleText },
+    { name: 'description', content: description },
+  ];
 };
 
 const SUPPORTED_EMAIL_ACTION_MODES = new Set(['resetPassword', 'verifyEmail', 'recoverEmail']);

package/app/routes/auth/route.ts

@@ -1,16 +1,7 @@
-import { redirect, type LoaderFunctionArgs } from '@remix-run/cloudflare';
-import { isMobileOrTabletUserAgent } from '~/utils/device-detection';
+import { redirect } from '@remix-run/cloudflare';
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-	const requestUrl = new URL(request.url);
-	const search = requestUrl.search ?? '';
-	const userAgent = request.headers.get('user-agent') ?? '';
-
-	if (isMobileOrTabletUserAgent(userAgent)) {
-		throw redirect(`/mobile-prevented${search}`);
-	}
-
-	throw redirect(`/${search}`);
+export const loader = async () => {
+	throw redirect('/');
 };
 
 export { Login as default, meta } from './login';

package/app/routes/striae/striae.tsx

@@ -125,7 +125,7 @@ export const Striae = ({ user }: StriaePage) => {
     };
 
     checkReadOnlyStatus();
-  }, [currentCase, user?.uid]);
+  }, [currentCase, user]);
 
   // Disable box annotation mode when notes sidebar is opened
   useEffect(() => {

package/app/services/audit.service.ts

@@ -18,6 +18,20 @@ import { generateWorkflowId } from '../utils/id-generator';
 
 const AUDIT_WORKER_URL = paths.audit_worker_url;
 
+type AnnotationSnapshot = Record<string, unknown> & {
+  type?: 'measurement' | 'identification' | 'comparison' | 'note' | 'region';
+  position?: { x: number; y: number };
+  size?: { width: number; height: number };
+};
+
+const toAnnotationSnapshot = (value: unknown): AnnotationSnapshot | undefined => {
+  if (typeof value !== 'object' || value === null) {
+    return undefined;
+  }
+
+  return value as AnnotationSnapshot;
+};
+
 /**
  * Audit Service for ValidationAuditEntry system
  * Provides comprehensive audit logging throughout the confirmation workflow
@@ -552,7 +566,7 @@ export class AuditService {
         fileId,
         originalFileName,
         fileSize: 0, // File size not available for access events
-        uploadMethod: accessMethod as any, // Reuse for access method
+        uploadMethod: accessMethod,
         processingTime,
         sourceLocation: accessReason || 'Image viewer'
       },
@@ -570,12 +584,14 @@ export class AuditService {
     user: User,
     annotationId: string,
     annotationType: 'measurement' | 'identification' | 'comparison' | 'note' | 'region',
-    annotationData: any,
+    annotationData: unknown,
     caseNumber: string,
     tool?: string,
     imageFileId?: string,
     originalImageFileName?: string
   ): Promise<void> {
+    const annotationSnapshot = toAnnotationSnapshot(annotationData);
+
     await this.logEvent({
       userId: user.uid,
       userEmail: user.email || '',
@@ -591,8 +607,8 @@ export class AuditService {
         annotationType,
         annotationData,
         tool,
-        canvasPosition: annotationData?.position,
-        annotationSize: annotationData?.size
+        canvasPosition: annotationSnapshot?.position,
+        annotationSize: annotationSnapshot?.size
       },
       fileDetails: imageFileId || originalImageFileName ? {
         fileId: imageFileId,
@@ -610,13 +626,15 @@ export class AuditService {
   public async logAnnotationEdit(
     user: User,
     annotationId: string,
-    previousValue: any,
-    newValue: any,
+    previousValue: unknown,
+    newValue: unknown,
     caseNumber: string,
     tool?: string,
     imageFileId?: string,
     originalImageFileName?: string
   ): Promise<void> {
+    const newValueSnapshot = toAnnotationSnapshot(newValue);
+
     await this.logEvent({
       userId: user.uid,
       userEmail: user.email || '',
@@ -629,7 +647,7 @@ export class AuditService {
       workflowPhase: 'casework',
       annotationDetails: {
         annotationId,
-        annotationType: newValue?.type,
+        annotationType: newValueSnapshot?.type,
         annotationData: newValue,
         previousValue,
         tool
@@ -650,12 +668,14 @@ export class AuditService {
   public async logAnnotationDelete(
     user: User,
     annotationId: string,
-    annotationData: any,
+    annotationData: unknown,
     caseNumber: string,
     deleteReason?: string,
     imageFileId?: string,
     originalImageFileName?: string
   ): Promise<void> {
+    const annotationSnapshot = toAnnotationSnapshot(annotationData);
+
     await this.logEvent({
       userId: user.uid,
       userEmail: user.email || '',
@@ -668,7 +688,7 @@ export class AuditService {
       workflowPhase: 'casework',
       annotationDetails: {
         annotationId,
-        annotationType: annotationData?.type,
+        annotationType: annotationSnapshot?.type,
         annotationData,
         tool: deleteReason
       },

package/app/tailwind.css

@@ -43,8 +43,23 @@
     display: block;
   }
 
+  ul,
+  ol {
+    padding-left: var(--spaceL);
+    margin: 0;
+    list-style-position: outside;
+  }
+
   ul {
-    padding: 0;
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  ol li::marker {
+    content: counter(list-item) ") ";
   }
 
   html,

package/app/types/audit.ts

@@ -211,7 +211,7 @@ export interface FileAuditDetails {
   originalFileName?: string;
   fileSize: number;
   mimeType?: string;
-  uploadMethod?: 'drag-drop' | 'file-picker' | 'api' | 'import';
+  uploadMethod?: 'drag-drop' | 'file-picker' | 'api' | 'import' | 'direct-url' | 'signed-url' | 'download';
   processingTime?: number;
   thumbnailGenerated?: boolean;
   deleteReason?: string;
@@ -224,10 +224,10 @@ export interface FileAuditDetails {
 export interface AnnotationAuditDetails {
   annotationId?: string;
   annotationType?: 'measurement' | 'identification' | 'comparison' | 'note' | 'region';
-  annotationData?: any; // The actual annotation data structure
+  annotationData?: unknown; // The actual annotation data structure
   canvasPosition?: { x: number; y: number };
   annotationSize?: { width: number; height: number };
-  previousValue?: any; // For edit operations
+  previousValue?: unknown; // For edit operations
   tool?: string; // Which tool was used to create/edit
 }
 

package/app/types/case.ts

@@ -82,7 +82,7 @@ export interface CaseConfirmations {
 export interface CaseDataWithConfirmations {
   createdAt: string;
   caseNumber: string;
-  files: any[];
+  files: FileData[];
   isReadOnly?: boolean;
   importedAt?: string;
   originalImageIds?: { [originalId: string]: string };