@striae-org/striae 6.0.0 → 6.1.0

package/README.md

@@ -8,6 +8,7 @@ This npm package publishes the Striae application source for teams that run/deve
 
 - Application: [https://striae.app](https://striae.app)
 - Source repository: [https://github.com/striae-org/striae](https://github.com/striae-org/striae)
+- Installation guide: [https://github.com/striae-org/striae/wiki/Installation-Guide](https://github.com/striae-org/striae/wiki/Installation-Guide)
 - Releases: [https://github.com/striae-org/striae/releases](https://github.com/striae-org/striae/releases)
 - Security policy: [https://github.com/striae-org/striae/security/policy](https://github.com/striae-org/striae/security/policy)
 
@@ -55,9 +56,10 @@ Excluded (by design):
 
 ## License
 
-See `LICENSE` and `NOTICE`.
+See `LICENSE`.
 
 ## Support
 
+- Striae Community: [https://community.striae.org](https://community.striae.org)
 - Support page: [https://www.striae.org/support](https://www.striae.org/support)
 - Contact: [info@striae.org](mailto:info@striae.org)

package/app/components/actions/case-export/core-export.ts

@@ -63,17 +63,26 @@ export async function exportCaseData(
       try {
         annotations = await getNotes(user, caseNumber, file.id) || undefined;
         
-        // Check if file has any annotation data beyond just defaults
+        // Check if file has any annotation data beyond just defaults.
+        // Includes left/right split fields and legacy single-value fields as fallbacks.
         hasAnnotations = !!(annotations && (
           annotations.additionalNotes ||
+          annotations.leftAdditionalNotes ||
+          annotations.rightAdditionalNotes ||
           annotations.classNote ||
+          annotations.leftClassNote ||
+          annotations.rightClassNote ||
           annotations.customClass ||
+          annotations.leftCustomClass ||
+          annotations.rightCustomClass ||
           annotations.leftCase ||
           annotations.rightCase ||
           annotations.leftItem ||
           annotations.rightItem ||
+          annotations.leftItemType ||
+          annotations.rightItemType ||
           annotations.supportLevel ||
-          annotations.classType ||
+          annotations.itemType ||
           (annotations.boxAnnotations && annotations.boxAnnotations.length > 0)
         ));
 

package/app/components/actions/case-export/download-handlers.ts

@@ -95,10 +95,12 @@ export async function downloadCaseAsZip(
         exportData.metadata.exportedByName ||
         exportData.metadata.exportedBy ||
         'Unknown';
+      // Don't add forensic warning comment to encrypted content; it will break JSON parsing on decryption.
+      // The archive package already includes forensic metadata in README.txt and FORENSIC_MANIFEST.json.
       const caseJsonContent = await generateJSONContent(
         exportData,
         options.includeUserInfo,
-        protectForensicData
+        false
       );
 
       const archivePackage = await buildArchivePackage({

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

@@ -187,7 +187,7 @@
   letter-spacing: 0.5px;
 }
 
-/* Class Characteristics Display */
+/* Item Type Display */
 .classCharacteristics {
   position: absolute;
   bottom: calc(100% + 0.5rem);

package/app/components/canvas/canvas.tsx

@@ -167,7 +167,8 @@ export const Canvas = ({
   }, [imageUrl, resetImageLoadState]);
   
   useEffect(() => {
-    if (!activeAnnotations?.has('class') || !annotationData?.hasSubclass) {
+    const hasAnySubclass = annotationData?.leftHasSubclass || annotationData?.rightHasSubclass || annotationData?.hasSubclass;
+    if (!activeAnnotations?.has('item') || !hasAnySubclass) {
       const flashResetTimer = window.setTimeout(() => {
         clearFlashingState();
       }, 0);
@@ -187,7 +188,7 @@ export const Canvas = ({
     }, 60000);
 
     return () => clearInterval(flashInterval);
-  }, [activeAnnotations, annotationData?.hasSubclass, clearFlashingState]);
+  }, [activeAnnotations, annotationData?.leftHasSubclass, annotationData?.rightHasSubclass, annotationData?.hasSubclass, clearFlashingState]);
 
   const getErrorMessage = () => {
     if (error) return error;
@@ -302,15 +303,35 @@ export const Canvas = ({
         <div className={styles.imageAndNotesContainer}>
           <div className={styles.imageContainer}>
             <div className={styles.imageWrapper}>
-            {/* Class Characteristics - Above Image */}
-            {activeAnnotations?.has('class') && annotationData && (annotationData.customClass || annotationData.classType) && (
-              <div className={styles.classCharacteristics}>
-                <div className={styles.classText}>
-                  {annotationData.customClass || annotationData.classType}
-                  {annotationData.classNote && ` (${annotationData.classNote})`}
+            {/* Item Type - Above Image */}
+            {activeAnnotations?.has('item') && annotationData && (() => {
+              // Resolve display values from left/right fields, falling back to legacy single-set fields.
+              // When both sides are populated and differ, combine them as "Left / Right".
+              // classType is a legacy field kept for backward compat with older annotations (also handled in PDF generation).
+              const leftValue = annotationData.leftCustomClass || annotationData.leftItemType;
+              const rightValue = annotationData.rightCustomClass || annotationData.rightItemType;
+              const legacyValue = annotationData.customClass || annotationData.itemType || annotationData.classType;
+              const displayValue =
+                leftValue && rightValue && leftValue !== rightValue
+                  ? `${leftValue} / ${rightValue}`
+                  : leftValue || rightValue || legacyValue;
+              const leftClassNote = annotationData.leftClassNote?.trim();
+              const rightClassNote = annotationData.rightClassNote?.trim();
+              const legacyClassNote = annotationData.classNote?.trim();
+              const displayClassNote =
+                leftClassNote && rightClassNote && leftClassNote !== rightClassNote
+                  ? `${leftClassNote} / ${rightClassNote}`
+                  : leftClassNote || rightClassNote || legacyClassNote;
+              if (!displayValue) return null;
+              return (
+                <div className={styles.classCharacteristics}>
+                  <div className={styles.classText}>
+                    {displayValue}
+                    {displayClassNote && ` (${displayClassNote})`}
+                  </div>
                 </div>
-              </div>
-            )}
+              );
+            })()}
             
             <img 
             ref={imageRef}
@@ -440,7 +461,7 @@ export const Canvas = ({
       )}
       
       {/* Subclass Warning - Bottom Right of Canvas */}
-      {activeAnnotations?.has('class') && annotationData?.hasSubclass && (
+      {activeAnnotations?.has('item') && annotationData && (annotationData.leftHasSubclass || annotationData.rightHasSubclass || annotationData.hasSubclass) && (
         <div className={`${styles.subclassWarning} ${isFlashing ? styles.flashing : ''}`}>
           <div className={styles.subclassText}>
             POTENTIAL SUBCLASS

package/app/components/icon/icons.svg

@@ -3,7 +3,7 @@
     <symbol id="number" viewBox="0 0 24 24">
       <path d="M1,9h24M1,17h24M10,1l-3,24M19,1l-3,24" style="stroke:#1e1e1e; stroke-linecap:round; stroke-linejoin:round; stroke-width:2px;" />
     </symbol>
-    <symbol id="class" viewBox="0 0 24 24">
+    <symbol id="item" viewBox="0 0 24 24">
       <path d="M12,24c-1.66,0-3.22-.31-4.68-.95-1.46-.63-2.73-1.48-3.81-2.56s-1.94-2.35-2.57-3.81c-.63-1.46-.94-3.02-.94-4.68s.31-3.22.94-4.68,1.49-2.73,2.57-3.81,2.35-1.94,3.81-2.57,3.02-.94,4.68-.94,3.22.31,4.68.94c1.46.63,2.73,1.49,3.81,2.57s1.94,2.35,2.56,3.81c.63,1.46.95,3.02.95,4.68s-.31,3.22-.95,4.68c-.63,1.46-1.48,2.73-2.56,3.81s-2.35,1.94-3.81,2.56c-1.46.63-3.02.95-4.68.95ZM12,21.6c2.68,0,4.95-.93,6.81-2.79s2.79-4.13,2.79-6.81-.93-4.95-2.79-6.81-4.13-2.79-6.81-2.79-4.95.93-6.81,2.79-2.79,4.13-2.79,6.81.93,4.95,2.79,6.81,4.13,2.79,6.81,2.79Z" />
       <path d="M12.29,15.89c-.5,0-.97-.09-1.4-.28-.44-.19-.82-.45-1.14-.77-.32-.32-.58-.71-.77-1.14-.19-.44-.28-.91-.28-1.4s.09-.97.28-1.4c.19-.44.45-.82.77-1.14.32-.32.7-.58,1.14-.77.44-.19.91-.28,1.4-.28s.97.09,1.4.28c.44.19.82.45,1.14.77.32.32.58.7.77,1.14.19.44.28.91.28,1.4s-.09.97-.28,1.4c-.19.44-.45.82-.77,1.14-.32.32-.71.58-1.14.77-.44.19-.91.28-1.4.28ZM12.29,15.17c.8,0,1.49-.28,2.04-.84s.84-1.24.84-2.04-.28-1.48-.84-2.04-1.24-.84-2.04-.84-1.48.28-2.04.84-.84,1.24-.84,2.04.28,1.49.84,2.04,1.24.84,2.04.84Z" />
     </symbol>

package/app/components/icon/manifest.json

@@ -3,7 +3,7 @@
     "width": 24,
     "height": 24
   },
-  "class": {
+  "item": {
     "width": 24,
     "height": 24
   },

package/app/components/navbar/navbar.tsx

@@ -117,11 +117,12 @@ export const Navbar = ({
   const disableLongRunningCaseActions = isUploading;
   const isCaseManagementActive = true;
   const isFileManagementActive = isFileMenuOpen || hasLoadedImage;
-  const canOpenImageNotes = hasLoadedImage && !isCurrentImageConfirmed && !isReadOnly;
+  const canOpenImageNotes = hasLoadedImage;
+  const isImageNotesReadOnly = isReadOnly || isCurrentImageConfirmed || isUploading;
   const isImageNotesActive = canOpenImageNotes;
   const canDeleteCurrentFile = hasLoadedImage && !isReadOnly;
-  const isArchivedRegularReadOnly = Boolean(isReadOnly && archiveDetails?.archived && !isReviewOnlyCase);
-  const caseExportLabel = isArchivedRegularReadOnly
+  const isArchivedCase = Boolean(isReadOnly && archiveDetails?.archived);
+  const caseExportLabel = isArchivedCase
     ? 'Export Archive'
     : isReadOnly
       ? 'Export Confirmations'
@@ -184,13 +185,15 @@ export const Navbar = ({
                   type="button"
                   role="menuitem"
                   className={`${styles.caseMenuItem} ${styles.caseMenuItemExport}`}
-                  disabled={!hasLoadedCase || disableLongRunningCaseActions}
+                  disabled={!hasLoadedCase || disableLongRunningCaseActions || (isArchivedCase && isReviewOnlyCase)}
                   title={
                     !hasLoadedCase
                       ? 'Load a case to export case data'
                       : disableLongRunningCaseActions
                         ? 'Export is unavailable while files are uploading'
-                        : undefined
+                        : isArchivedCase && isReviewOnlyCase
+                          ? 'Cannot export imported archive packages'
+                          : undefined
                   }
                   onClick={() => {
                     onOpenCaseExport?.();
@@ -365,10 +368,8 @@ export const Navbar = ({
             title={
               !hasLoadedImage
                 ? 'Load an image to enable image notes'
-                : isCurrentImageConfirmed
-                  ? 'Confirmed images are read-only and viewable via toolbar only'
-                  : isReadOnly
-                    ? 'Image notes are disabled for read-only cases'
+                : isImageNotesReadOnly
+                  ? 'Image notes are view-only in this state'
                     : undefined
             }
             onClick={() => {

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

@@ -26,6 +26,7 @@ interface CaseSidebarProps {
   setFiles: React.Dispatch<React.SetStateAction<FileData[]>>;
   currentCase: string | null;
   isReadOnly?: boolean;
+  isReviewOnlyCase?: boolean;
   isArchivedCase?: boolean;
   isConfirmed?: boolean;
   confirmationSaveVersion?: number;
@@ -47,6 +48,7 @@ export const CaseSidebar = ({
   setFiles,
   currentCase,
   isReadOnly = false,
+  isReviewOnlyCase = false,
   isArchivedCase = false,
   isConfirmed = false,
   confirmationSaveVersion = 0,
@@ -260,11 +262,14 @@ const handleImageSelect = (file: FileData) => {
 
   const showCaseExportButton = Boolean(currentCase && isReadOnly);
   const caseExportButtonLabel = isArchivedCase ? 'Export Archive' : 'Export Confirmations';
+  const isImportedArchive = isArchivedCase && isReviewOnlyCase;
 
   const exportCaseTitle = isUploading
     ? 'Cannot export while uploading'
     : !currentCase
     ? 'Load a case first'
+    : isImportedArchive
+    ? 'Cannot export imported archive packages'
     : undefined;
 
 return (
@@ -389,7 +394,7 @@ return (
         <button
           className={styles.confirmationExportButton}
           onClick={onOpenCaseExport}
-          disabled={isUploading || !currentCase}
+          disabled={isUploading || !currentCase || isImportedArchive}
           title={exportCaseTitle}
         >
           {caseExportButtonLabel}

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

@@ -9,7 +9,7 @@ import {
 import {
   type FilesModalSortBy,
   type FilesModalConfirmationFilter,
-  type FilesModalClassTypeFilter,
+  type FilesModalItemTypeFilter,
   getFilesForModal,
 } from '~/utils/data/file-filters';
 import { deleteFile } from '~/components/actions/image-manage';
@@ -61,12 +61,24 @@ function formatDate(dateString: string): string {
   return new Date(parsed).toLocaleDateString();
 }
 
-function getClassTypeLabel(classType?: FileConfirmationSummary['classType']): string {
-  if (!classType) {
+function getItemTypeLabel(summary: FileConfirmationSummary): string {
+  const itemTypes = [
+    summary.leftItemType,
+    summary.rightItemType,
+    summary.itemType,
+  ].filter((value): value is NonNullable<FileConfirmationSummary['itemType']> => Boolean(value));
+
+  const uniqueItemTypes = Array.from(new Set(itemTypes));
+
+  if (uniqueItemTypes.length === 0) {
     return 'Unset';
   }
 
-  return classType;
+  if (uniqueItemTypes.length === 1) {
+    return uniqueItemTypes[0];
+  }
+
+  return `${uniqueItemTypes[0]} / ${uniqueItemTypes[1]}`;
 }
 
 function getConfirmationLabel(summary: FileConfirmationSummary): string {
@@ -110,7 +122,7 @@ export const FilesModal = ({
     preferences,
     setSortBy,
     setConfirmationFilter,
-    setClassTypeFilter,
+    setItemTypeFilter,
     resetPreferences,
   } = useFileListPreferences();
   const {
@@ -125,7 +137,7 @@ export const FilesModal = ({
   const hasCustomPreferences =
     preferences.sortBy !== DEFAULT_FILES_MODAL_PREFERENCES.sortBy ||
     preferences.confirmationFilter !== DEFAULT_FILES_MODAL_PREFERENCES.confirmationFilter ||
-    preferences.classTypeFilter !== DEFAULT_FILES_MODAL_PREFERENCES.classTypeFilter;
+    preferences.itemTypeFilter !== DEFAULT_FILES_MODAL_PREFERENCES.itemTypeFilter;
 
   const existingFileIdSet = useMemo(
     () => new Set(files.map((file) => file.id)),
@@ -162,6 +174,9 @@ export const FilesModal = ({
     (effectiveCurrentPage + 1) * FILES_PER_PAGE
   );
 
+  const shouldForceItemTypeSummaryRefresh =
+    preferences.sortBy === 'itemType' || preferences.itemTypeFilter !== 'all';
+
   useEffect(() => {
     let isCancelled = false;
 
@@ -173,7 +188,9 @@ export const FilesModal = ({
         return;
       }
 
-      const caseSummary = await ensureCaseConfirmationSummary(user, currentCase, files).catch((err) => {
+      const caseSummary = await ensureCaseConfirmationSummary(user, currentCase, files, {
+        forceRefresh: shouldForceItemTypeSummaryRefresh,
+      }).catch((err) => {
         console.error(`Error fetching confirmation summary for case ${currentCase}:`, err);
         return null;
       });
@@ -190,7 +207,14 @@ export const FilesModal = ({
     return () => {
       isCancelled = true;
     };
-  }, [isOpen, currentCase, files, user, confirmationSaveVersion]);
+  }, [
+    isOpen,
+    currentCase,
+    files,
+    user,
+    confirmationSaveVersion,
+    shouldForceItemTypeSummaryRefresh,
+  ]);
 
   const toggleDeleteSelection = (fileId: string) => {
     setDeleteSelectedFileIds((previous) => {
@@ -339,7 +363,7 @@ export const FilesModal = ({
                     <option value="recent">Date Uploaded</option>
                     <option value="filename">File Name</option>
                     <option value="confirmation">Confirmation Status</option>
-                    <option value="classType">Class Type</option>
+                    <option value="itemType">Item Type</option>
                   </select>
                 </div>
 
@@ -361,12 +385,12 @@ export const FilesModal = ({
                 </div>
 
                 <div className={styles.controlGroup}>
-                  <label htmlFor="files-class-filter">Class Type</label>
+                  <label htmlFor="files-item-filter">Item Type</label>
                   <select
-                    id="files-class-filter"
-                    value={preferences.classTypeFilter}
+                    id="files-item-filter"
+                    value={preferences.itemTypeFilter}
                     onChange={(event) => {
-                      setClassTypeFilter(event.target.value as FilesModalClassTypeFilter);
+                      setItemTypeFilter(event.target.value as FilesModalItemTypeFilter);
                       setCurrentPage(0);
                     }}
                   >
@@ -434,7 +458,7 @@ export const FilesModal = ({
                     const isOpenSelected = effectiveOpenSelectedFileId === file.id;
                     const isDeleteSelected = effectiveDeleteSelectedFileIds.has(file.id);
                     const confirmationLabel = getConfirmationLabel(summary);
-                    const classTypeLabel = getClassTypeLabel(summary.classType);
+                    const itemTypeLabel = getItemTypeLabel(summary);
 
                     let confirmationClass = '';
                     if (summary.includeConfirmation) {
@@ -472,7 +496,7 @@ export const FilesModal = ({
                             </div>
                             <div className={styles.fileMetaRow}>
                               <span className={styles.fileDate}>Uploaded: {formatDate(file.uploadedAt)}</span>
-                              <span className={styles.classTypeBadge}>Class: {classTypeLabel}</span>
+                              <span className={styles.classTypeBadge}>Item: {itemTypeLabel}</span>
                             </div>
                           </div>
 

package/app/components/sidebar/notes/addl-notes-modal.tsx

@@ -7,10 +7,11 @@ interface AddlNotesModalProps {
   onClose: () => void;
   notes: string;
   onSave: (notes: string) => void;
+  isReadOnly?: boolean;
   showNotification?: (message: string, type: 'success' | 'error' | 'warning') => void;
 }
 
-export const AddlNotesModal = ({ isOpen, onClose, notes, onSave, showNotification }: AddlNotesModalProps) => {
+export const AddlNotesModal = ({ isOpen, onClose, notes, onSave, isReadOnly = false, showNotification }: AddlNotesModalProps) => {
   const [tempNotes, setTempNotes] = useState(notes);
   const [isSaving, setIsSaving] = useState(false);
 
@@ -31,6 +32,11 @@ export const AddlNotesModal = ({ isOpen, onClose, notes, onSave, showNotificatio
   if (!isOpen) return null;  
 
   const handleSave = async () => {
+    if (isReadOnly) {
+      showNotification?.('This case is read-only. Notes cannot be modified.', 'error');
+      return;
+    }
+
     setIsSaving(true);
     try {
       await Promise.resolve(onSave(tempNotes));
@@ -58,12 +64,13 @@ export const AddlNotesModal = ({ isOpen, onClose, notes, onSave, showNotificatio
           onChange={(e) => setTempNotes(e.target.value)}
           className={styles.modalTextarea}
           placeholder="Enter additional notes..."
+          disabled={isReadOnly}
         />
         <div className={styles.modalButtons}>
           <button 
             onClick={handleSave} 
             className={styles.saveButton}
-            disabled={isSaving}
+            disabled={isSaving || isReadOnly}
             aria-busy={isSaving}
           >
             {isSaving ? 'Saving...' : 'Save'}

package/app/components/sidebar/notes/{class-details/class-details-fields.tsx → item-details/item-details-fields.tsx}

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import styles from '../notes.module.css';
-import { CUSTOM, handleSelectWithCustom } from './class-details-shared';
+import { CUSTOM, handleSelectWithCustom } from './item-details-shared';
 
 interface BaseFieldProps {
   label: string;
@@ -37,7 +37,7 @@ interface CheckboxFieldProps {
 }
 
 const fieldClassName = (fullWidth = false): string =>
-  fullWidth ? `${styles.classDetailsField} ${styles.classDetailsFieldFull}` : styles.classDetailsField;
+  fullWidth ? `${styles.itemDetailsField} ${styles.itemDetailsFieldFull}` : styles.itemDetailsField;
 
 export const TextField = ({
   label,
@@ -50,14 +50,14 @@ export const TextField = ({
   min,
 }: TextFieldProps) => (
   <div className={fieldClassName(fullWidth)}>
-    <span className={styles.classDetailsLabel}>{label}</span>
+    <span className={styles.itemDetailsLabel}>{label}</span>
     <input
       type={type}
       min={min}
       aria-label={label}
       value={value}
       onChange={(event) => onChange(event.target.value)}
-      className={styles.classDetailsInput}
+      className={styles.itemDetailsInput}
       disabled={disabled}
       placeholder={placeholder}
     />
@@ -74,12 +74,12 @@ export const SelectField = ({
   fullWidth = false,
 }: SelectFieldProps) => (
   <div className={fieldClassName(fullWidth)}>
-    <span className={styles.classDetailsLabel}>{label}</span>
+    <span className={styles.itemDetailsLabel}>{label}</span>
     <select
       aria-label={label}
       value={value}
       onChange={(event) => onChange(event.target.value)}
-      className={styles.classDetailsInput}
+      className={styles.itemDetailsInput}
       disabled={disabled}
     >
       <option value="">{placeholder}</option>
@@ -101,12 +101,12 @@ export const SelectWithCustomField = ({
   fullWidth = false,
 }: SelectWithCustomFieldProps) => (
   <div className={fieldClassName(fullWidth)}>
-    <span className={styles.classDetailsLabel}>{label}</span>
+    <span className={styles.itemDetailsLabel}>{label}</span>
     <select
       aria-label={label}
       value={isCustom ? CUSTOM : value}
       onChange={(event) => handleSelectWithCustom(event.target.value, onChange, onCustomChange)}
-      className={styles.classDetailsInput}
+      className={styles.itemDetailsInput}
       disabled={disabled}
     >
       <option value="">{placeholder}</option>
@@ -119,7 +119,7 @@ export const SelectWithCustomField = ({
         aria-label={label}
         value={value}
         onChange={(event) => onChange(event.target.value)}
-        className={styles.classDetailsInput}
+        className={styles.itemDetailsInput}
         disabled={disabled}
         placeholder={customPlaceholder}
       />
@@ -133,7 +133,7 @@ export const CheckboxField = ({
   onChange,
   disabled,
 }: CheckboxFieldProps) => (
-  <label className={styles.classDetailsCheckboxLabel}>
+  <label className={styles.itemDetailsCheckboxLabel}>
     <input
       type="checkbox"
       aria-label={label}

package/app/components/sidebar/notes/{class-details/class-details-modal.tsx → item-details/item-details-modal.tsx}

@@ -3,18 +3,16 @@ import type {
   BulletAnnotationData,
   CartridgeCaseAnnotationData,
   ShotshellAnnotationData,
+  ItemType,
 } from '~/types/annotations';
-import {
-  type ClassType,
-} from './class-details-shared';
-import { BulletSection, CartridgeCaseSection, ShotshellSection } from './class-details-sections';
-import { useClassDetailsState } from './use-class-details-state';
+import { BulletSection, CartridgeCaseSection, ShotshellSection } from './item-details-sections';
+import { useItemDetailsState } from './use-item-details-state';
 import styles from '../notes.module.css';
 
-interface ClassDetailsModalProps {
+interface ItemDetailsModalProps {
   isOpen: boolean;
   onClose: () => void;
-  classType: ClassType | '';
+  itemType: ItemType | '';
   bulletData?: BulletAnnotationData;
   cartridgeCaseData?: CartridgeCaseAnnotationData;
   shotshellData?: ShotshellAnnotationData;
@@ -27,17 +25,17 @@ interface ClassDetailsModalProps {
   isReadOnly?: boolean;
 }
 
-const ClassDetailsModalContent = ({
+const ItemDetailsModalContent = ({
   isOpen,
   onClose,
-  classType,
+  itemType,
   bulletData,
   cartridgeCaseData,
   shotshellData,
   onSave,
   showNotification,
   isReadOnly = false,
-}: ClassDetailsModalProps) => {
+}: ItemDetailsModalProps) => {
   const {
     bullet,
     cartridgeCase,
@@ -45,7 +43,7 @@ const ClassDetailsModalContent = ({
     isSaving,
     setIsSaving,
     buildSaveData,
-  } = useClassDetailsState({
+  } = useItemDetailsState({
     bulletData,
     cartridgeCaseData,
     shotshellData,
@@ -55,10 +53,10 @@ const ClassDetailsModalContent = ({
 
   if (!isOpen) return null;
 
-  const showBullet = classType === 'Bullet' || classType === 'Other' || classType === '';
-  const showCartridge = classType === 'Cartridge Case' || classType === 'Other' || classType === '';
-  const showShotshell = classType === 'Shotshell' || classType === 'Other' || classType === '';
-  const showHeaders = classType === 'Other' || classType === '';
+  const showBullet = itemType === 'Bullet' || itemType === 'Other' || itemType === '';
+  const showCartridge = itemType === 'Cartridge Case' || itemType === 'Other' || itemType === '';
+  const showShotshell = itemType === 'Shotshell' || itemType === 'Other' || itemType === '';
+  const showHeaders = itemType === 'Other' || itemType === '';
 
   const handleSave = async () => {
     setIsSaving(true);
@@ -90,10 +88,10 @@ const ClassDetailsModalContent = ({
       aria-label="Close class details dialog"
       {...overlayProps}
     >
-      <div className={`${styles.modal} ${styles.classDetailsModal}`}>
+      <div className={`${styles.modal} ${styles.itemDetailsModal}`}>
         <button {...getCloseButtonProps({ ariaLabel: 'Close class details dialog' })}>×</button>
         <h5 className={styles.modalTitle}>Class Characteristic Details</h5>
-        <div className={styles.classDetailsContent}>
+        <div className={styles.itemDetailsContent}>
           {showBullet && (
             <BulletSection
               showHeader={showHeaders}
@@ -118,10 +116,10 @@ const ClassDetailsModalContent = ({
             />
           )}
         </div>
-        <div className={`${styles.modalButtons} ${styles.classDetailsModalButtons}`}>
+        <div className={`${styles.modalButtons} ${styles.itemDetailsModalButtons}`}>
           <button
             onClick={handleSave}
-            className={`${styles.saveButton} ${styles.classDetailsModalAction}`}
+            className={`${styles.saveButton} ${styles.itemDetailsModalAction}`}
             disabled={isSaving || isReadOnly}
             aria-busy={isSaving}
           >
@@ -129,7 +127,7 @@ const ClassDetailsModalContent = ({
           </button>
           <button
             onClick={requestClose}
-            className={`${styles.cancelButton} ${styles.classDetailsModalAction}`}
+            className={`${styles.cancelButton} ${styles.itemDetailsModalAction}`}
             disabled={isSaving}
           >
             Cancel
@@ -140,8 +138,8 @@ const ClassDetailsModalContent = ({
   );
 };
 
-export const ClassDetailsModal = (props: ClassDetailsModalProps) => {
+export const ItemDetailsModal = (props: ItemDetailsModalProps) => {
   if (!props.isOpen) return null;
 
-  return <ClassDetailsModalContent {...props} />;
+  return <ItemDetailsModalContent {...props} />;
 };