@striae-org/striae 3.0.4 → 3.1.0

package/app/components/canvas/box-annotations/box-annotations.tsx

@@ -111,7 +111,7 @@ export const BoxAnnotations = ({
         x: Math.max(0, Math.min(100, x)), 
         y: Math.max(0, Math.min(100, y))
       };
-    } catch (error) {
+    } catch {
       return { x: 0, y: 0 };
     }
   }, [imageRef]);
@@ -143,7 +143,7 @@ export const BoxAnnotations = ({
       x: Math.max(DIALOG_OFFSET, adjustedX),
       y: Math.max(DIALOG_OFFSET, adjustedY)
     };
-  }, []);
+  }, [imageRef]);
 
   // Handle mouse down - start drawing
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
@@ -173,7 +173,7 @@ export const BoxAnnotations = ({
         currentY: y
       });
     }
-  }, [isAnnotationMode, getRelativeCoordinates]);
+  }, [isReadOnly, isAnnotationMode, imageRef, getRelativeCoordinates]);
 
   // Handle mouse move - update current drawing box
   const handleMouseMove = useCallback((e: React.MouseEvent) => {
@@ -281,9 +281,14 @@ export const BoxAnnotations = ({
     annotationColor, 
     annotations, 
     onAnnotationsChange, 
+    annotationData,
+    onAnnotationDataChange,
     generateAnnotationId,
     calculateDialogPosition,
-    user
+    user,
+    caseNumber,
+    imageFileId,
+    originalImageFileName
   ]);
 
   // Remove a box annotation with validation
@@ -364,7 +369,16 @@ export const BoxAnnotations = ({
       console.error('Failed to remove annotation or log audit:', error);
       // Continue with removal even if audit logging fails
     }
-  }, [annotations, onAnnotationsChange, annotationData, onAnnotationDataChange, user]);
+  }, [
+    annotations,
+    onAnnotationsChange,
+    annotationData,
+    onAnnotationDataChange,
+    user,
+    caseNumber,
+    imageFileId,
+    originalImageFileName
+  ]);
 
   // Handle right-click to remove annotation
   const handleAnnotationRightClick = useCallback((e: React.MouseEvent, annotationId: string) => {
@@ -461,7 +475,17 @@ export const BoxAnnotations = ({
       // Still try to close dialog even if update fails
       setLabelDialog({ isVisible: false, annotationId: null, x: 0, y: 0, label: '' });
     }
-  }, [labelDialog, annotations, onAnnotationsChange, annotationData, onAnnotationDataChange, user]);
+  }, [
+    labelDialog,
+    annotations,
+    onAnnotationsChange,
+    annotationData,
+    onAnnotationDataChange,
+    user,
+    caseNumber,
+    imageFileId,
+    originalImageFileName
+  ]);
 
   // Handle label cancellation
   const handleLabelCancel = useCallback(() => {
@@ -584,7 +608,6 @@ export const BoxAnnotations = ({
             onKeyDown={handleLabelKeyDown}
             placeholder="Enter label..."
             className={styles.labelInput}
-            autoFocus
           />
           <div className={styles.labelDialogButtons}>
             <button
@@ -620,6 +643,12 @@ export const BoxAnnotations = ({
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}
         onMouseLeave={handleMouseUp}
+        onKeyDown={() => {
+          // Keyboard interactions are handled by parent canvas tools.
+        }}
+        role="button"
+        tabIndex={0}
+        aria-label="Box annotation canvas"
         style={{ 
           cursor: isAnnotationMode && !isReadOnly ? 'crosshair' : 'default',
           pointerEvents: 'auto' // Always allow pointer events for viewing annotations

package/app/components/canvas/canvas.tsx

@@ -1,10 +1,9 @@
-import { useEffect, useState, useRef, useContext } from 'react';
+import { useEffect, useState, useRef, useContext, useCallback } from 'react';
 import { BoxAnnotations } from './box-annotations/box-annotations';
 import { ConfirmationModal } from './confirmation/confirmation';
 import { AnnotationData, BoxAnnotation, ConfirmationData } from '~/types/annotations';
 import { AuthContext } from '~/contexts/auth.context';
 import { storeConfirmation } from '~/components/actions/confirm-export';
-import { auditService } from '~/services/audit.service';
 import styles from './canvas.module.css';
 
 interface CanvasProps {
@@ -51,6 +50,15 @@ export const Canvas = ({
   const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
   const imageRef = useRef<HTMLImageElement>(null);
 
+  const resetImageLoadState = useCallback(() => {
+    setLoadError(undefined);
+    setIsLoading(false);
+  }, []);
+
+  const clearFlashingState = useCallback(() => {
+    setIsFlashing(false);
+  }, []);
+
   // Handle box annotation changes
   const handleBoxAnnotationsChange = (boxAnnotations: BoxAnnotation[]) => {
     if (!onAnnotationUpdate || !annotationData || isReadOnly || annotationData.confirmationData) return;
@@ -114,13 +122,19 @@ export const Canvas = ({
 
   useEffect(() => {
     if (!imageUrl) {
-      setLoadError(undefined);
-      setIsLoading(false);
-      return;
+      const resetTimer = window.setTimeout(() => {
+        resetImageLoadState();
+      }, 0);
+
+      return () => {
+        window.clearTimeout(resetTimer);
+      };
     }
     
-    setIsLoading(true);
-    setLoadError(undefined);
+    const startLoadingTimer = window.setTimeout(() => {
+      setIsLoading(true);
+      setLoadError(undefined);
+    }, 0);
 
     const img = new Image();
     
@@ -129,36 +143,33 @@ export const Canvas = ({
       setLoadError(undefined);
     };
     
-    img.onerror = (e) => {
+    img.onerror = () => {
       setLoadError({
         type: 'load',
-        message: `Failed to load image: ${e instanceof Error ? e.message : 'Unknown error'}`
+        message: 'Failed to load image: Unknown error'
       });
       setIsLoading(false);
     };
 
-    try {
-      img.src = imageUrl;
-    } catch (e) {
-      setLoadError({
-        type: 'invalid',
-        message: 'Invalid image URL provided'
-      });
-      setIsLoading(false);
-    }
+    img.src = imageUrl;
     
     return () => {
+      window.clearTimeout(startLoadingTimer);
       img.onload = null;
       img.onerror = null;
-      setLoadError(undefined);
-      setIsLoading(false);
+      resetImageLoadState();
     };
-  }, [imageUrl]);
+  }, [imageUrl, resetImageLoadState]);
   
   useEffect(() => {
     if (!activeAnnotations?.has('class') || !annotationData?.hasSubclass) {
-      setIsFlashing(false);
-      return;
+      const flashResetTimer = window.setTimeout(() => {
+        clearFlashingState();
+      }, 0);
+
+      return () => {
+        window.clearTimeout(flashResetTimer);
+      };
     }
 
     const flashInterval = setInterval(() => {
@@ -171,7 +182,7 @@ export const Canvas = ({
     }, 60000);
 
     return () => clearInterval(flashInterval);
-  }, [activeAnnotations, annotationData?.hasSubclass]);
+  }, [activeAnnotations, annotationData?.hasSubclass, clearFlashingState]);
 
   const getErrorMessage = () => {
     if (error) return error;

package/app/components/canvas/confirmation/confirmation.module.css

@@ -6,6 +6,7 @@
   justify-content: center;
   align-items: center;
   z-index: var(--zIndex5);
+  cursor: default;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
 }
 
@@ -15,7 +16,9 @@
   width: 90%;
   max-width: 400px;
   max-height: 90vh;
-  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);
+  cursor: default;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
 }
 
@@ -106,7 +109,7 @@
   border-radius: var(--spaceXS);
   font-size: var(--fontSizeBodyXS);
   color: var(--text);
-  font-family: 'Inter', monospace;
+  font-family: "Inter", monospace;
 }
 
 .error {

package/app/components/canvas/confirmation/confirmation.tsx

@@ -104,14 +104,32 @@ export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, existin
     }
   };
 
-  const handleOverlayClick = (e: React.MouseEvent) => {
+  const handleOverlayMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
     if (e.target === e.currentTarget) {
       onClose();
     }
   };
 
+  const handleOverlayKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onClose();
+    }
+  };
+
   return (
-    <div className={styles.overlay} onClick={handleOverlayClick}>
+    <div
+      className={styles.overlay}
+      onMouseDown={handleOverlayMouseDown}
+      onKeyDown={handleOverlayKeyDown}
+      role="button"
+      tabIndex={0}
+      aria-label="Close confirmation dialog"
+    >
       <div className={styles.modal}>
         <div className={styles.header}>
           <h2 className={styles.title}>
@@ -135,7 +153,7 @@ export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, existin
         <div className={styles.content}>
           <div className={styles.fieldGroup}>
             <div className={styles.field}>
-              <label className={styles.label}>Name:</label>
+              <span className={styles.label}>Name:</span>
               <div className={styles.readOnlyValue}>
                 {hasExistingConfirmation ? existingConfirmation.fullName : fullName}
               </div>
@@ -154,33 +172,32 @@ export const ConfirmationModal = ({ isOpen, onClose, onConfirm, company, existin
                 }}
                 placeholder="Enter your badge or ID number"
                 disabled={isConfirming || hasExistingConfirmation}
-                autoFocus={!hasExistingConfirmation}
               />
             </div>
 
             <div className={styles.field}>
-              <label className={styles.label}>Email:</label>
+              <span className={styles.label}>Email:</span>
               <div className={styles.readOnlyValue}>
                 {hasExistingConfirmation ? existingConfirmation.confirmedByEmail : userEmail}
               </div>
             </div>
 
             <div className={styles.field}>
-              <label className={styles.label}>Lab/Company:</label>
+              <span className={styles.label}>Lab/Company:</span>
               <div className={styles.readOnlyValue}>
                 {hasExistingConfirmation ? existingConfirmation.confirmedByCompany : labCompany}
               </div>
             </div>
 
             <div className={styles.field}>
-              <label className={styles.label}>Timestamp:</label>
+              <span className={styles.label}>Timestamp:</span>
               <div className={styles.readOnlyValue}>
                 {hasExistingConfirmation ? existingConfirmation.timestamp : timestamp}
               </div>
             </div>
 
             <div className={styles.field}>
-              <label className={styles.label}>Confirmation ID:</label>
+              <span className={styles.label}>Confirmation ID:</span>
               <div className={styles.readOnlyValue}>
                 {hasExistingConfirmation ? existingConfirmation.confirmationId : confirmationId}
               </div>

package/app/components/sidebar/case-export/case-export.module.css

@@ -6,6 +6,7 @@
   justify-content: center;
   align-items: center;
   z-index: var(--zIndex5);
+  cursor: default;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
 }
 
@@ -15,7 +16,12 @@
   width: 90%;
   max-width: 480px;
   max-height: 90vh;
-  box-shadow: 0 var(--spaceXS) var(--spaceL) color-mix(in lab, var(--black) 10%, transparent);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 var(--spaceXS) var(--spaceL)
+    color-mix(in lab, var(--black) 10%, transparent);
+  cursor: default;
   transition: background-color var(--durationM) var(--bezierFastoutSlowin);
 }
 
@@ -52,8 +58,10 @@
 
 .content {
   padding: var(--spaceL);
+  flex: 1 1 auto;
+  min-height: 0;
   overflow-y: auto;
-  max-height: calc(90vh - var(--space3XL));
+  overflow-x: hidden;
 }
 
 .formatSelector {
@@ -154,7 +162,7 @@
 }
 
 .checkbox:checked::after {
-  content: '';
+  content: "";
   position: absolute;
   left: 3px;
   top: 0px;
@@ -191,6 +199,7 @@
 }
 
 .checkboxTooltip {
+  display: block;
   font-size: var(--fontSizeBodyXS);
   color: var(--textBody);
   margin: 0;
@@ -286,6 +295,186 @@
   box-shadow: none;
 }
 
+.publicKeySection {
+  margin-top: var(--spaceS);
+}
+
+.publicKeyButton {
+  width: 100%;
+  background: transparent;
+  color: var(--primary);
+  border: 1px solid color-mix(in lab, var(--primary) 35%, transparent);
+  border-radius: var(--spaceXS);
+  padding: var(--spaceS) var(--spaceM);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.publicKeyButton:hover {
+  background: color-mix(in lab, var(--primary) 10%, transparent);
+  border-color: color-mix(in lab, var(--primary) 55%, transparent);
+}
+
+.publicKeyOverlay {
+  position: fixed;
+  inset: 0;
+  background-color: color-mix(in lab, var(--background) 60%, transparent);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--zIndex5);
+  padding: var(--spaceL);
+}
+
+.publicKeyModal {
+  width: 100%;
+  max-width: 640px;
+  max-height: 90vw;
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 var(--spaceXS) var(--spaceL)
+    color-mix(in lab, var(--black) 18%, transparent);
+  overflow: hidden;
+  cursor: default;
+}
+
+.publicKeyHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spaceL);
+  border-bottom: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+}
+
+.publicKeyTitle {
+  margin: 0;
+  font-size: var(--fontSizeBodyL);
+  font-weight: 600;
+  color: var(--textTitle);
+}
+
+.publicKeyContent {
+  padding: var(--spaceL);
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceM);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.publicKeyDescription {
+  margin: 0;
+  font-size: var(--fontSizeBodyS);
+  color: var(--textBody);
+}
+
+.publicKeyMeta {
+  margin: 0;
+  font-size: var(--fontSizeBodyS);
+  color: var(--textTitle);
+}
+
+.publicKeyMeta span {
+  font-weight: var(--fontWeightMedium);
+}
+
+.publicKeyLabel {
+  font-size: var(--fontSizeBodyXS);
+  font-weight: var(--fontWeightMedium);
+  color: var(--textTitle);
+}
+
+.publicKeyField {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  min-height: 180px;
+  padding: var(--spaceM);
+  border: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  border-radius: var(--spaceXS);
+  background: color-mix(in lab, var(--background) 96%, transparent);
+  color: var(--textBody);
+  font-size: var(--fontSizeBodyXS);
+  line-height: 1.4;
+  font-family: Consolas, "Courier New", monospace;
+  resize: vertical;
+}
+
+.publicKeyHowToTitle {
+  margin: 0;
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  color: var(--textTitle);
+}
+
+.publicKeyHowToList {
+  margin: 0;
+  padding-left: var(--spaceL);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceXS);
+  color: var(--textBody);
+  font-size: var(--fontSizeBodyS);
+}
+
+.publicKeyActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spaceS);
+}
+
+.publicKeyStatus {
+  margin: 0;
+  font-size: var(--fontSizeBodyXS);
+  color: var(--textBody);
+}
+
+.publicKeyCopyButton {
+  background: transparent;
+  color: var(--primary);
+  border: 1px solid color-mix(in lab, var(--primary) 35%, transparent);
+  border-radius: var(--spaceXS);
+  padding: var(--spaceS) var(--spaceL);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.publicKeyCopyButton:hover:not(:disabled) {
+  background: color-mix(in lab, var(--primary) 10%, transparent);
+  border-color: color-mix(in lab, var(--primary) 55%, transparent);
+}
+
+.publicKeyCopyButton:disabled {
+  background: color-mix(in lab, var(--background) 95%, transparent);
+  color: var(--textLight);
+  border-color: color-mix(in lab, var(--text) 10%, transparent);
+  cursor: not-allowed;
+}
+
+.publicKeyCloseButton {
+  background: var(--primary);
+  color: white;
+  border: none;
+  border-radius: var(--spaceXS);
+  padding: var(--spaceS) var(--spaceL);
+  font-size: var(--fontSizeBodyS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.publicKeyCloseButton:hover {
+  background: color-mix(in lab, var(--primary) 85%, var(--black));
+}
+
 .divider {
   margin: var(--spaceL) 0;
   text-align: center;
@@ -296,7 +485,7 @@
 }
 
 .divider::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 50%;
   left: 0;
@@ -383,4 +572,4 @@
   color: var(--error);
   font-size: var(--fontSizeBodyS);
   font-weight: var(--fontWeightMedium);
-}
+}