@striae-org/striae 3.2.0 → 3.2.1

package/README.md

@@ -1,6 +1,6 @@
 # @striae-org/striae
 
-Striae is a cloud-native forensic annotation application for firearms identification, built with Remix and Cloudflare Workers.
+Striae is a cloud-native forensic annotation application for firearms identification, built with React Router and Cloudflare Workers.
 
 This npm package publishes the Striae application source and deployment scaffolding for teams that run their own Striae environment.
 
@@ -40,7 +40,7 @@ npm i @striae-org/striae
 cp -R node_modules/@striae-org/striae/. .
 ```
 
-3) Reinstall using Striae's own package.json (includes dev deps like wrangler/remix)
+3) Reinstall using Striae's own package.json (includes dev deps like wrangler/react-router)
 
 ```bash
 rm -rf node_modules package-lock.json
@@ -62,41 +62,12 @@ cp -f app/config-example/admin-service.json app/config/admin-service.json
 npx wrangler login
 ```
 
-6) Run guided config + full deployment
+7) Run guided config + full deployment
 
 ```bash
 npm run deploy:all
 ```
 
-## Publish To npmjs And GitHub Packages
-
-1) Verify auth for both registries
-
-```bash
-npm whoami --registry=https://registry.npmjs.org/
-npm whoami --registry=https://npm.pkg.github.com/
-```
-
-2) Publish current version to npmjs (public)
-
-```bash
-npm run publish:npm
-```
-
-3) Publish the same version to GitHub Packages
-
-```bash
-npm run publish:github
-```
-
-4) Optional dry-runs before a real release
-
-```bash
-npm run publish:npm:dry-run
-npm run publish:github:dry-run
-npm run publish:all:dry-run
-```
-
 ## NPM Package Content Policy
 
 This package intentionally includes only non-sensitive defaults and runtime source needed for setup.

package/app/components/actions/case-export/data-processing.ts

@@ -3,11 +3,51 @@ import { calculateSHA256Secure } from '~/utils/SHA256';
 import { CSV_HEADERS } from './types-constants';
 import { addForensicDataWarning } from './metadata-helpers';
 
+export type TabularCell = string | number | boolean | null;
+
+const MAX_SPREADSHEET_CELL_LENGTH = 32767;
+const CONTROL_CHAR_PATTERN = /[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F]/g;
+const DANGEROUS_FORMULA_PREFIX_PATTERN = /^[\s\u0000-\u001F]*[=+\-@]/;
+
+/**
+ * Sanitize cell values before CSV/XLSX export.
+ * - Strips non-printable control characters (except tab/newline/carriage return)
+ * - Prevents formula injection when files are opened in spreadsheet tools
+ * - Caps content length to Excel's per-cell limit
+ */
+export function sanitizeTabularCell(value: unknown): TabularCell {
+  if (value === null || value === undefined) {
+    return '';
+  }
+
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return value;
+  }
+
+  let normalized = String(value).replace(CONTROL_CHAR_PATTERN, '');
+
+  if (normalized.length > MAX_SPREADSHEET_CELL_LENGTH) {
+    normalized = normalized.slice(0, MAX_SPREADSHEET_CELL_LENGTH);
+  }
+
+  if (DANGEROUS_FORMULA_PREFIX_PATTERN.test(normalized)) {
+    return `'${normalized}`;
+  }
+
+  return normalized;
+}
+
+export function sanitizeTabularMatrix(
+  rows: Array<Array<string | number | boolean | null | undefined>>
+): TabularCell[][] {
+  return rows.map((row) => row.map((cell) => sanitizeTabularCell(cell)));
+}
+
 /**
  * Generate metadata rows for tabular format
  */
-export function generateMetadataRows(exportData: CaseExportData): string[][] {
-  return [
+export function generateMetadataRows(exportData: CaseExportData): TabularCell[][] {
+  return sanitizeTabularMatrix([
     ['Case Export Report'],
     [''],
     ['Case Number', exportData.metadata.caseNumber],
@@ -31,13 +71,13 @@ export function generateMetadataRows(exportData: CaseExportData): string[][] {
     ['Latest Annotation Date', exportData.summary?.latestAnnotationDate || 'N/A'],
     [''],
     ['File Details']
-  ];
+  ]);
 }
 
 /**
  * Process file data for tabular format (CSV/Excel)
  */
-export function processFileDataForTabular(fileEntry: CaseExportData['files'][0]): string[][] {
+export function processFileDataForTabular(fileEntry: CaseExportData['files'][0]): TabularCell[][] {
   // Full file data for the first row (excluding Additional Notes and Last Updated)
   const fullFileData = [
     fileEntry.fileData.id,
@@ -83,7 +123,7 @@ export function processFileDataForTabular(fileEntry: CaseExportData['files'][0])
   const emptyFileData = Array(fileDataColumnCount).fill('');
   const emptyAdditionalData = Array(additionalDataColumnCount).fill('');
 
-  const rows: string[][] = [];
+  const rows: Array<Array<string | number | boolean | null | undefined>> = [];
 
   // If there are box annotations, create a row for each one
   if (fileEntry.annotations?.boxAnnotations && fileEntry.annotations.boxAnnotations.length > 0) {
@@ -120,7 +160,7 @@ export function processFileDataForTabular(fileEntry: CaseExportData['files'][0])
     ]);
   }
 
-  return rows;
+  return sanitizeTabularMatrix(rows);
 }
 
 /**
@@ -131,16 +171,16 @@ export async function generateCSVContent(exportData: CaseExportData, protectFore
   const metadataRows = generateMetadataRows(exportData);
 
   // File data rows
-  const fileRows: string[][] = [];
+  const fileRows: TabularCell[][] = [];
   exportData.files.forEach(fileEntry => {
     const processedRows = processFileDataForTabular(fileEntry);
     fileRows.push(...processedRows);
   });
 
   // Combine data rows for hash calculation (excluding header comments)
-  const dataRows = [
+  const dataRows: TabularCell[][] = [
     ...metadataRows,
-    CSV_HEADERS,
+    ...sanitizeTabularMatrix([CSV_HEADERS]),
     ...fileRows
   ];
 

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

@@ -5,10 +5,96 @@ import { generateForensicManifestSecure, calculateSHA256Secure } from '~/utils/S
 import { signForensicManifest } from '~/utils/data-operations';
 import { ExportFormat, formatDateForFilename, CSV_HEADERS } from './types-constants';
 import { protectExcelWorksheet, addForensicDataWarning } from './metadata-helpers';
-import { generateMetadataRows, generateCSVContent, processFileDataForTabular } from './data-processing';
+import { generateMetadataRows, generateCSVContent, processFileDataForTabular, sanitizeTabularMatrix } from './data-processing';
 import { exportCaseData } from './core-export';
 import { auditService } from '~/services/audit.service';
 
+type TabularRow = Array<string | number | boolean | null | undefined>;
+type ExcelJsBrowserBundle = typeof import('exceljs');
+
+const EXCELJS_BROWSER_BUNDLE_SRC = '/vendor/exceljs.bare.min.js';
+let excelJsBundlePromise: Promise<ExcelJsBrowserBundle> | null = null;
+
+async function loadExcelJsBrowserBundle(): Promise<ExcelJsBrowserBundle> {
+  if (typeof window === 'undefined') {
+    throw new Error('Excel export is only available in a browser context.');
+  }
+
+  if (window.ExcelJS?.Workbook) {
+    return window.ExcelJS;
+  }
+
+  if (!excelJsBundlePromise) {
+    excelJsBundlePromise = new Promise((resolve, reject) => {
+      const resolveFromWindow = () => {
+        if (window.ExcelJS?.Workbook) {
+          resolve(window.ExcelJS);
+          return;
+        }
+
+        excelJsBundlePromise = null;
+        reject(new Error('ExcelJS bundle loaded but Workbook API is unavailable.'));
+      };
+
+      const failLoad = () => {
+        excelJsBundlePromise = null;
+        reject(new Error('Failed to load ExcelJS browser bundle.'));
+      };
+
+      const existingScript = document.querySelector<HTMLScriptElement>('script[data-exceljs-bundle="true"]');
+
+      if (existingScript) {
+        if (existingScript.dataset.loaded === 'true') {
+          resolveFromWindow();
+          return;
+        }
+
+        existingScript.addEventListener('load', resolveFromWindow, { once: true });
+        existingScript.addEventListener('error', failLoad, { once: true });
+        return;
+      }
+
+      const script = document.createElement('script');
+      script.src = EXCELJS_BROWSER_BUNDLE_SRC;
+      script.async = true;
+      script.dataset.exceljsBundle = 'true';
+      script.addEventListener(
+        'load',
+        () => {
+          script.dataset.loaded = 'true';
+          resolveFromWindow();
+        },
+        { once: true }
+      );
+      script.addEventListener('error', failLoad, { once: true });
+      document.head.appendChild(script);
+    });
+  }
+
+  return excelJsBundlePromise;
+}
+
+function sanitizeWorksheetName(name: string): string {
+  const cleaned = name.replace(/[\\/?*:\x5B\x5D]/g, '_').trim();
+  const normalized = cleaned.length > 0 ? cleaned : 'Sheet';
+  return normalized.substring(0, 31);
+}
+
+function createUniqueWorksheetName(existingNames: Set<string>, desiredName: string): string {
+  const baseName = sanitizeWorksheetName(desiredName);
+  let candidate = baseName;
+  let suffix = 1;
+
+  while (existingNames.has(candidate)) {
+    const suffixText = `_${suffix}`;
+    candidate = `${baseName.substring(0, 31 - suffixText.length)}${suffixText}`;
+    suffix += 1;
+  }
+
+  existingNames.add(candidate);
+  return candidate;
+}
+
 /**
  * Generate export filename with embedded ID to prevent collisions
  * Format: {originalFilename}-{id}.{extension}
@@ -122,10 +208,22 @@ export async function downloadAllCasesAsCSV(user: User, exportData: AllCasesExpo
     // Start audit workflow
     auditService.startWorkflow('all-cases');
     
-    // Dynamic import of XLSX to avoid bundle size issues
-    const XLSX = await import('xlsx');
+    const ExcelJS = await loadExcelJsBrowserBundle();
     
-    const workbook = XLSX.utils.book_new();
+    const workbook = new ExcelJS.Workbook();
+    workbook.creator = exportData.metadata.exportedBy || 'Striae';
+    workbook.lastModifiedBy = exportData.metadata.exportedBy || 'Striae';
+    workbook.created = new Date();
+    workbook.modified = new Date();
+
+    const existingWorksheetNames = new Set<string>();
+
+    const appendRowsToWorksheet = (worksheet: { addRow: (row: TabularRow) => unknown }, rows: TabularRow[]) => {
+      rows.forEach((row) => {
+        worksheet.addRow(row);
+      });
+    };
+
     let exportPassword: string | undefined;
 
     // Create summary worksheet
@@ -146,7 +244,7 @@ export async function downloadAllCasesAsCSV(user: User, exportData: AllCasesExpo
     ];
     
     // XLSX files are inherently protected, no hash validation needed
-    const summaryData = [
+    const summaryData = sanitizeTabularMatrix([
       protectForensicData ? ['CASE DATA - PROTECTED EXPORT'] : ['Striae - All Cases Export Summary'],
       protectForensicData ? ['WARNING: This workbook contains evidence data and is protected from editing.'] : [''],
       [''],
@@ -195,36 +293,37 @@ export async function downloadAllCasesAsCSV(user: User, exportData: AllCasesExpo
         caseData.summary?.latestAnnotationDate || '',
         caseData.summary?.exportError || ''
       ])
-    ];
+    ]);
 
-    const summaryWorksheet = XLSX.utils.aoa_to_sheet(summaryData);
+    const summaryWorksheetName = createUniqueWorksheetName(existingWorksheetNames, 'Summary');
+    const summaryWorksheet = workbook.addWorksheet(summaryWorksheetName);
+    appendRowsToWorksheet(summaryWorksheet, summaryData);
     
     // Protect summary worksheet if forensic protection is enabled
     if (protectForensicData) {
-      exportPassword = protectExcelWorksheet(summaryWorksheet);
+      exportPassword = await protectExcelWorksheet(summaryWorksheet);
     }
-    
-    XLSX.utils.book_append_sheet(workbook, summaryWorksheet, 'Summary');
 
     // Create a worksheet for each case
-    exportData.cases.forEach((caseData) => {
+    for (const caseData of exportData.cases) {
       if (caseData.summary?.exportError) {
         // For failed cases, create a simple error sheet
-        const errorData = [
+        const errorData = sanitizeTabularMatrix([
           [`Case ${caseData.metadata.caseNumber} - Export Failed`],
           [''],
           ['Error:', caseData.summary.exportError],
           ['Case Number:', caseData.metadata.caseNumber],
           ['Total Files:', caseData.metadata.totalFiles]
-        ];
-        const errorWorksheet = XLSX.utils.aoa_to_sheet(errorData);
+        ]);
+        const errorSheetName = createUniqueWorksheetName(existingWorksheetNames, `Case_${caseData.metadata.caseNumber}_Error`);
+        const errorWorksheet = workbook.addWorksheet(errorSheetName);
+        appendRowsToWorksheet(errorWorksheet, errorData);
         
         if (protectForensicData && exportPassword) {
-          protectExcelWorksheet(errorWorksheet, exportPassword);
+          await protectExcelWorksheet(errorWorksheet, exportPassword);
         }
-        
-        XLSX.utils.book_append_sheet(workbook, errorWorksheet, `Case_${caseData.metadata.caseNumber}_Error`);
-        return;
+
+        continue;
       }
 
       // For successful cases, create detailed worksheets
@@ -257,36 +356,22 @@ export async function downloadAllCasesAsCSV(user: User, exportData: AllCasesExpo
         caseDetailsData.push(['No detailed file data available for this case']);
       }
 
-      const caseWorksheet = XLSX.utils.aoa_to_sheet(caseDetailsData);
+      const sanitizedCaseDetailsData = sanitizeTabularMatrix(caseDetailsData);
+
+      // Clean sheet name for Excel compatibility and uniqueness
+      const sheetName = createUniqueWorksheetName(existingWorksheetNames, `Case_${caseData.metadata.caseNumber}`);
+      const caseWorksheet = workbook.addWorksheet(sheetName);
+      appendRowsToWorksheet(caseWorksheet, sanitizedCaseDetailsData);
       
       // Protect worksheet if forensic protection is enabled
       if (protectForensicData && exportPassword) {
-        protectExcelWorksheet(caseWorksheet, exportPassword);
+        await protectExcelWorksheet(caseWorksheet, exportPassword);
       }
-      
-      // Clean sheet name for Excel compatibility
-      const sheetName = `Case_${caseData.metadata.caseNumber}`.replace(/[\\/?*\x5B\x5D]/g, '_').substring(0, 31);
-      XLSX.utils.book_append_sheet(workbook, caseWorksheet, sheetName);
-    });
 
-    // Set workbook protection if forensic protection is enabled
-    if (protectForensicData && exportPassword) {
-      workbook.Props = {
-        Title: 'Striae Case Export - Protected',
-        Subject: 'Case Data Export',
-        Author: exportData.metadata.exportedBy || 'Striae',
-        Comments: `This workbook contains protected case data. Modification may compromise evidence integrity. Worksheets are password protected.`,
-        Company: 'Striae'
-      };
     }
 
     // Generate Excel file
-    const excelBuffer = XLSX.write(workbook, { 
-      bookType: 'xlsx', 
-      type: 'array',
-      bookSST: true, // Shared string table for better compression
-      cellStyles: true
-    });
+    const excelBuffer = await workbook.xlsx.writeBuffer();
     
     // Create blob and download
     const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

package/app/components/actions/case-export/metadata-helpers.ts

@@ -68,16 +68,38 @@ export function generateRandomPassword(): string {
   return password.split('').sort(() => Math.random() - 0.5).join('');
 }
 
+type WorksheetProtectionOptions = {
+  selectLockedCells: boolean;
+  selectUnlockedCells: boolean;
+  formatCells: boolean;
+  formatColumns: boolean;
+  formatRows: boolean;
+  insertColumns: boolean;
+  insertRows: boolean;
+  insertHyperlinks: boolean;
+  deleteColumns: boolean;
+  deleteRows: boolean;
+  sort: boolean;
+  autoFilter: boolean;
+  pivotTables: boolean;
+  objects: boolean;
+  scenarios: boolean;
+  spinCount: number;
+};
+
+type ProtectableWorksheet = {
+  protect: (password: string, options: Record<string, unknown>) => Promise<unknown> | unknown;
+};
+
 /**
  * Protect Excel worksheet from editing
  */
-export function protectExcelWorksheet(worksheet: Record<string, unknown>, sheetPassword?: string): string {
+export async function protectExcelWorksheet(worksheet: ProtectableWorksheet, sheetPassword?: string): Promise<string> {
   // Generate random password if none provided
   const password = sheetPassword || generateRandomPassword();
-  
-  // Set worksheet protection
-  worksheet['!protect'] = {
-    password: password,
+
+  const protectionOptions: WorksheetProtectionOptions = {
+    // Keep read-only defaults and prevent structural edits.
     selectLockedCells: true,
     selectUnlockedCells: true,
     formatCells: false,
@@ -92,15 +114,11 @@ export function protectExcelWorksheet(worksheet: Record<string, unknown>, sheetP
     autoFilter: false,
     pivotTables: false,
     objects: false,
-    scenarios: false
+    scenarios: false,
+    spinCount: 100000
   };
-  
-  // Lock all cells by default
-  if (!worksheet['!cols']) worksheet['!cols'] = [];
-  if (!worksheet['!rows']) worksheet['!rows'] = [];
-  
-  // Add protection metadata
-  worksheet['!margins'] = { left: 0.7, right: 0.7, top: 0.75, bottom: 0.75, header: 0.3, footer: 0.3 };
+
+  await Promise.resolve(worksheet.protect(password, protectionOptions as Record<string, unknown>));
   
   // Return the password for inclusion in metadata
   return password;

package/app/components/form/base-form.tsx

@@ -1,4 +1,4 @@
-import { Form as RemixForm } from '@remix-run/react';
+import { Form as RemixForm } from 'react-router';
 import styles from './form.module.css';
 
 interface BaseFormProps {

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

@@ -364,20 +364,6 @@ export const CaseExport = ({
               </>
             )}
 
-            <div className={styles.divider}>
-              <span>Verification</span>
-            </div>
-
-            <div className={styles.publicKeySection}>
-              <button
-                type="button"
-                className={styles.publicKeyButton}
-                onClick={() => setIsPublicKeyModalOpen(true)}
-              >
-                View Public Signing Key
-              </button>
-            </div>
-            
             {exportProgress && exportProgress.total > 0 && (
               <div className={styles.progressSection}>
                 <div className={styles.progressText}>
@@ -391,7 +377,7 @@ export const CaseExport = ({
                 </div>
               </div>
             )}
-            
+
             {isExportingAll && !exportProgress && (
               <div className={styles.progressSection}>
                 <div className={styles.progressText}>
@@ -399,6 +385,20 @@ export const CaseExport = ({
                 </div>
               </div>
             )}
+
+            <div className={styles.divider}>
+              <span>Verification</span>
+            </div>
+
+            <div className={styles.publicKeySection}>
+              <button
+                type="button"
+                className={styles.publicKeyButton}
+                onClick={() => setIsPublicKeyModalOpen(true)}
+              >
+                View Public Signing Key
+              </button>
+            </div>
             
             {error && (
               <div className={styles.error}>

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

@@ -1,13 +1,4 @@
 import { User } from 'firebase/auth';
-import {
-  exportCaseData,
-  exportAllCases,
-  downloadCaseAsJSON,
-  downloadCaseAsCSV,
-  downloadAllCasesAsJSON,
-  downloadAllCasesAsCSV,
-  downloadCaseAsZip
-} from '../../actions/case-export';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import styles from './cases.module.css';
 import { CasesModal } from './cases-modal';
@@ -66,6 +57,18 @@ interface CaseSidebarProps {
 
 const SUCCESS_MESSAGE_TIMEOUT = 3000;
 
+type CaseExportActionsModule = typeof import('../../actions/case-export');
+
+let caseExportActionsPromise: Promise<CaseExportActionsModule> | null = null;
+
+const loadCaseExportActions = (): Promise<CaseExportActionsModule> => {
+  if (!caseExportActionsPromise) {
+    caseExportActionsPromise = import('../../actions/case-export');
+  }
+
+  return caseExportActionsPromise;
+};
+
 export const CaseSidebar = ({ 
   user, 
   onImageSelect, 
@@ -512,20 +515,22 @@ const handleImageSelect = (file: FileData) => {
 
   const handleExport = async (exportCaseNumber: string, format: ExportFormat, includeImages?: boolean) => {
     try {
+      const caseExportActions = await loadCaseExportActions();
+
       if (includeImages) {
         // ZIP export with images - only available for single case exports
-        await downloadCaseAsZip(user, exportCaseNumber, format);
+        await caseExportActions.downloadCaseAsZip(user, exportCaseNumber, format);
       } else {
         // Standard data-only export
-        const exportData = await exportCaseData(user, exportCaseNumber, {
+        const exportData = await caseExportActions.exportCaseData(user, exportCaseNumber, {
           includeMetadata: true
         });
         
         // Download the exported data in the selected format
         if (format === 'json') {
-          await downloadCaseAsJSON(user, exportData);
+          await caseExportActions.downloadCaseAsJSON(user, exportData);
         } else {
-          await downloadCaseAsCSV(user, exportData);
+          await caseExportActions.downloadCaseAsCSV(user, exportData);
         }
       }
       
@@ -537,16 +542,18 @@ const handleImageSelect = (file: FileData) => {
 
   const handleExportAll = async (onProgress: (current: number, total: number, caseName: string) => void, format: ExportFormat) => {
     try {
+      const caseExportActions = await loadCaseExportActions();
+
       // Export all cases with progress callback
-      const exportData = await exportAllCases(user, {
+      const exportData = await caseExportActions.exportAllCases(user, {
         includeMetadata: true
       }, onProgress);
       
       // Download the exported data in the selected format
       if (format === 'json') {
-        await downloadAllCasesAsJSON(user, exportData);
+        await caseExportActions.downloadAllCasesAsJSON(user, exportData);
       } else {
-        await downloadAllCasesAsCSV(user, exportData);
+        await caseExportActions.downloadAllCasesAsCSV(user, exportData);
       }
       
     } catch (error) {

package/app/components/sidebar/sidebar-container.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { useState, useEffect } from 'react';
-import { Link } from '@remix-run/react';
+import { Link } from 'react-router';
 import { Sidebar } from './sidebar';
 import { User } from 'firebase/auth';
 import { FileData } from '~/types';

package/app/entry.client.tsx

@@ -1,12 +1,12 @@
-import { RemixBrowser } from "@remix-run/react";
-import { startTransition, StrictMode } from "react";
-import { hydrateRoot } from "react-dom/client";
-
-startTransition(() => {
-  hydrateRoot(
-    document,
-    <StrictMode>
-      <RemixBrowser />
-    </StrictMode>
-  );
-});
+import { HydratedRouter } from "react-router/dom";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <HydratedRouter />
+    </StrictMode>
+  );
+});

package/app/entry.server.tsx

@@ -1,5 +1,5 @@
-import type { EntryContext } from "@remix-run/cloudflare";
-import { RemixServer } from "@remix-run/react";
+import type { EntryContext } from "react-router";
+import { ServerRouter } from "react-router";
 import { isbot } from "isbot";
 import { renderToReadableStream } from "react-dom/server";
 
@@ -7,10 +7,10 @@ export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  reactRouterContext: EntryContext
 ) {
   const body = await renderToReadableStream(
-    <RemixServer context={remixContext} url={request.url} />,
+    <ServerRouter context={reactRouterContext} url={request.url} />,
     {
       // If you wish to abort the rendering process, you can pass a signal here.
       // Please refer to the templates for example son how to configure this.

package/app/hooks/useInactivityTimeout.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useCallback } from 'react';
-import { useLocation } from '@remix-run/react';
+import { useLocation } from 'react-router';
 import { signOut } from 'firebase/auth';
 import { auth } from '~/services/firebase';
 import { INACTIVITY_CONFIG } from '~/config/inactivity';

package/app/root.tsx

@@ -1,4 +1,4 @@
-import type { LinksFunction } from "@remix-run/cloudflare";
+import type { LinksFunction } from 'react-router';
 import {
   Links,
   Meta,
@@ -9,8 +9,8 @@ import {
   useRouteError,
   Link,
   useLocation,
-  useMatches
-} from "@remix-run/react";
+  useMatches,
+} from 'react-router';
 import { 
   ThemeProvider,
   themeStyles