@striae-org/striae 4.2.0 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@striae-org/striae",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "private": false,
   "description": "Striae is a specialized, cloud-native platform designed to streamline forensic firearms identification by providing an intuitive environment for digital comparison image annotation, authenticated confirmations, and automated report generation.",
   "license": "Apache-2.0",
@@ -44,7 +44,7 @@
     "app/entry.server.tsx",
     "app/root.tsx",
     "app/routes.ts",
-    "app/tailwind.css",
+    "app/global.css",
     "react-router.config.ts",
     "load-context.ts",
     "functions/",
@@ -54,24 +54,20 @@
     "workers/*/src/*.example.ts",
     "workers/*/src/*.example.js",
     "workers/*/src/*.ts",
-    "workers/pdf-worker/scripts/*.js",
-    "workers/pdf-worker/src/assets/icon-256.png",
+    "workers/pdf-worker/scripts/*.js",    
     "!workers/*/src/*worker.ts",
-    "workers/pdf-worker/src/assets/generated-assets.ts",
+    "workers/pdf-worker/src/assets/generated-assets.example.ts",
     "workers/pdf-worker/src/formats/format-striae.ts",
     "workers/pdf-worker/src/report-types.ts",
     "workers/*/wrangler.jsonc.example",
     ".env.example",
     "primershear.emails.example",
     "firebase.json",
-    "postcss.config.js",
-    "tailwind.config.ts",
     "tsconfig.json",
     "vite.config.ts",
     "worker-configuration.d.ts",
     "wrangler.toml.example",
-    "LICENSE",
-    "NOTICE"
+    "LICENSE"    
   ],
   "sideEffects": false,
   "type": "module",
@@ -129,15 +125,13 @@
     "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.57.1",
     "@typescript-eslint/parser": "^8.57.1",
-    "autoprefixer": "^10.4.27",
     "eslint": "^9.39.4",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "postcss": "^8.5.8",
-    "tailwindcss": "^3.4.19",
+    "modern-normalize": "^3.0.1",
     "typescript": "^5.9.3",
     "vite": "^6.4.1",
     "vite-tsconfig-paths": "^6.1.1",
@@ -157,4 +151,4 @@
     "node": ">=20.0.0"
   },
   "packageManager": "npm@11.11.0"
-}
+}

package/scripts/deploy-primershear-emails.sh

@@ -82,7 +82,7 @@ fi
 
 # Strip comment lines and blank lines, then join with commas
 # Use || true to avoid failure if paste gets no input (handles empty file gracefully)
-PRIMERSHEAR_EMAILS=$(grep -v '^\s*#' "$EMAILS_FILE" | grep -v '^\s*$' | paste -sd ',' - || true)
+PRIMERSHEAR_EMAILS=$(grep -v '^[[:space:]]*#' "$EMAILS_FILE" | grep -v '^[[:space:]]*$' | paste -sd ',' - || true)
 
 if [ -z "$PRIMERSHEAR_EMAILS" ]; then
     echo -e "${YELLOW}⚠️  primershear.emails contains no active email addresses.${NC}"

package/worker-configuration.d.ts

@@ -5485,7 +5485,7 @@ type AIGatewayHeaders = {
     [key: string]: string | number | boolean | object;
 };
 type AIGatewayUniversalRequest = {
-    provider: AIGatewayProviders | string; // eslint-disable-line
+    provider: AIGatewayProviders | string;
     endpoint: string;
     headers: Partial<AIGatewayHeaders>;
     query: unknown;
@@ -5501,7 +5501,7 @@ declare abstract class AiGateway {
         gateway?: UniversalGatewayOptions;
         extraHeaders?: object;
     }): Promise<Response>;
-    getUrl(provider?: AIGatewayProviders | string): Promise<string>; // eslint-disable-line
+    getUrl(provider?: AIGatewayProviders | string): Promise<string>;
 }
 interface AutoRAGInternalError extends Error {
 }

package/workers/audit-worker/package.json

@@ -12,7 +12,7 @@
 		"@cloudflare/puppeteer": "^1.0.6",
 		"@cloudflare/vitest-pool-workers": "^0.13.0",
 		"vitest": "~4.1.0",
-		"wrangler": "^4.73.0"
+		"wrangler": "^4.76.0"
 	},
 	"overrides": {
 		"undici": "7.24.1",

package/workers/audit-worker/wrangler.jsonc.example

@@ -2,7 +2,7 @@
   "name": "AUDIT_WORKER_NAME",
   "account_id": "ACCOUNT_ID",
   "main": "src/audit-worker.ts",
-  "compatibility_date": "2026-03-20",
+  "compatibility_date": "2026-03-22",
   "compatibility_flags": [
     "nodejs_compat"
   ], 

package/workers/data-worker/package.json

@@ -12,7 +12,7 @@
 		"@cloudflare/puppeteer": "^1.0.6",
 		"@cloudflare/vitest-pool-workers": "^0.13.0",
 		"vitest": "~4.1.0",
-		"wrangler": "^4.73.0"
+		"wrangler": "^4.76.0"
 	},
 	"overrides": {
 		"undici": "7.24.1",

package/workers/data-worker/wrangler.jsonc.example

@@ -3,7 +3,7 @@
   "name": "DATA_WORKER_NAME",
   "account_id": "ACCOUNT_ID",
   "main": "src/data-worker.ts",
-  "compatibility_date": "2026-03-20",
+  "compatibility_date": "2026-03-22",
   "compatibility_flags": [
     "nodejs_compat"
   ], 

package/workers/image-worker/package.json

@@ -12,7 +12,7 @@
 		"@cloudflare/puppeteer": "^1.0.6",
 		"@cloudflare/vitest-pool-workers": "^0.13.0",
 		"vitest": "~4.1.0",
-		"wrangler": "^4.73.0"
+		"wrangler": "^4.76.0"
 	},
 	"overrides": {
 		"undici": "7.24.1",

package/workers/image-worker/src/image-worker.example.ts

@@ -145,17 +145,28 @@ async function handleImageServing(request: Request, env: Env): Promise<Response>
 
   const url = new URL(request.url);
   const encodedPath = url.pathname.slice(1);
-  let decodedPath = encodedPath;
+  if (!encodedPath) {
+    return createResponse({ error: 'Image delivery URL is required' }, 400);
+  }
+
+  let decodedPath: string;
 
   try {
     decodedPath = decodeURIComponent(encodedPath);
   } catch {
-    decodedPath = encodedPath;
+    return createResponse({ error: 'Image delivery URL must be URL-encoded' }, 400);
   }
 
-  const imageDeliveryURL = new URL(
-    decodedPath.replace('https:/imagedelivery.net', 'https://imagedelivery.net')
-  );
+  let imageDeliveryURL: URL;
+  try {
+    imageDeliveryURL = new URL(decodedPath);
+  } catch {
+    return createResponse({ error: 'Image delivery URL is invalid' }, 400);
+  }
+
+  if (imageDeliveryURL.protocol !== 'https:' || imageDeliveryURL.hostname !== 'imagedelivery.net') {
+    return createResponse({ error: 'Image delivery URL must target imagedelivery.net over HTTPS' }, 400);
+  }
   
   return generateSignedUrl(imageDeliveryURL, env);
 }

package/workers/image-worker/wrangler.jsonc.example

@@ -2,7 +2,7 @@
   "name": "IMAGES_WORKER_NAME",
   "account_id": "ACCOUNT_ID",
   "main": "src/image-worker.ts",
-  "compatibility_date": "2026-03-20",
+  "compatibility_date": "2026-03-22",
   "compatibility_flags": [
     "nodejs_compat"
   ], 

package/workers/keys-worker/package.json

@@ -12,7 +12,7 @@
 		"@cloudflare/puppeteer": "^1.0.6",
 		"@cloudflare/vitest-pool-workers": "^0.13.0",
 		"vitest": "~4.1.0",
-		"wrangler": "^4.73.0"
+		"wrangler": "^4.76.0"
 	},
 	"overrides": {
 		"undici": "7.24.1",

package/workers/keys-worker/wrangler.jsonc.example

@@ -2,7 +2,7 @@
   "name": "KEYS_WORKER_NAME",
   "account_id": "ACCOUNT_ID",
   "main": "src/keys.ts",
-  "compatibility_date": "2026-03-20",
+  "compatibility_date": "2026-03-22",
   "compatibility_flags": [
     "nodejs_compat"
   ], 

package/workers/pdf-worker/package.json

@@ -13,7 +13,7 @@
 		"@cloudflare/puppeteer": "^1.0.6",
 		"@cloudflare/vitest-pool-workers": "^0.13.0",
 		"vitest": "~4.1.0",
-		"wrangler": "^4.73.0"
+		"wrangler": "^4.76.0"
 	},
 	"overrides": {
 		"undici": "7.24.1",

package/workers/pdf-worker/src/formats/format-striae.ts

@@ -1,9 +1,12 @@
-import type { PDFGenerationData, ReportRenderer } from '../report-types';
+import type { PDFGenerationData, ReportPdfOptionsBuilder, ReportRenderer } from '../report-types';
 import { ICON_256 } from '../assets/generated-assets';
+import { buildRepeatedChromePdfOptions, escapeHtml } from '../report-layout';
 
 export const renderReport: ReportRenderer = (data: PDFGenerationData): string => {
-  const { imageUrl, caseNumber, annotationData, activeAnnotations, currentDate, notesUpdatedFormatted, userCompany } = data;
+  const { imageUrl, annotationData, activeAnnotations } = data;
   const annotationsSet = new Set(activeAnnotations);
+  const hasImage = Boolean(imageUrl && imageUrl !== '/clear.jpg');
+  const safeText = (value: unknown): string => escapeHtml(String(value ?? ''));
 
   // Programmatically determine if a color is dark and needs a light background
   const needsLightBackground = (color: string | undefined): boolean => {
@@ -63,12 +66,6 @@ export const renderReport: ReportRenderer = (data: PDFGenerationData): string =>
     return luminance < 0.5;
   };
   
-  // Use passed currentDate or generate fallback
-  const displayDate = currentDate || (() => {
-    const now = new Date();
-    return `${(now.getMonth() + 1).toString().padStart(2, '0')}/${now.getDate().toString().padStart(2, '0')}/${now.getFullYear()}`;
-  })();
-  
   return `
 <!DOCTYPE html>
 <html lang="en">
@@ -77,42 +74,23 @@ export const renderReport: ReportRenderer = (data: PDFGenerationData): string =>
     <style>
       html, body {
         width: 100%;
-        height: 100%;
         margin: 0;
         font-family: Arial, sans-serif;
         background-color: white;
-        display: flex;
-        flex-direction: column;
-        min-height: 100vh;
-      }
-      .header {
-        display: flex;
-        align-items: center;
-        margin-bottom: 15px;
-        border-bottom: 2px solid #333;
-        padding-bottom: 8px;
-        position: relative;
       }
-      .header-content {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+      body {
+        color: #333;
       }
-      .date {
-        font-size: 16px;
-        font-weight: bold;
+      .report-body {
+        width: 100%;
+        box-sizing: border-box;
       }
-      .case-number {
-        font-size: 16px;
-        font-weight: bold;
-        color: #333;
-        text-align: right;
-      }      
       .image-container {
         width: 100%;
-        margin: 10px 0;
+        margin: 0 0 10px;
         position: relative;
+        page-break-inside: avoid;
+        break-inside: avoid;
       }
       .image-wrapper {
         display: flex;
@@ -176,6 +154,8 @@ export const renderReport: ReportRenderer = (data: PDFGenerationData): string =>
         width: 100%;
         margin-top: 12px;
         min-height: 50px;
+        page-break-inside: avoid;
+        break-inside: avoid;
       }
       .support-level-annotation {
         flex: 1;
@@ -241,10 +221,21 @@ export const renderReport: ReportRenderer = (data: PDFGenerationData): string =>
       }
       .confirmation-section {
         margin-top: 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+      .notes-page {
+        page-break-before: always;
+        break-before: page;
+      }
+      .confirmation-summary {
         display: flex;
         justify-content: flex-start;
         align-items: flex-start;
         gap: 20px;
+        page-break-inside: avoid;
+        break-inside: avoid;
       }
       .confirmation-box {
         background: #ffffff;
@@ -253,6 +244,7 @@ export const renderReport: ReportRenderer = (data: PDFGenerationData): string =>
         padding: 15px;
         width: 280px;
         font-family: 'Inter', Arial, sans-serif;
+        box-sizing: border-box;
       }
       .confirmation-label {
         font-size: 14px;
@@ -280,6 +272,7 @@ export const renderReport: ReportRenderer = (data: PDFGenerationData): string =>
         padding: 15px;
         width: 280px;
         font-family: 'Inter', Arial, sans-serif;
+        box-sizing: border-box;
       }
       .confirmation-title {
         font-size: 14px;
@@ -322,64 +315,32 @@ export const renderReport: ReportRenderer = (data: PDFGenerationData): string =>
         letter-spacing: 1px;
       }
       .additional-notes-section {
-        max-width: 400px;
+        border: 1px solid #d7dbe0;
+        border-radius: 8px;
+        background: #fafbfc;
+        padding: 16px 18px;
+        box-sizing: border-box;
         font-family: 'Inter', Arial, sans-serif;
-        font-size: 14px;
-        line-height: 1.6;
         color: #333;
-        white-space: pre-wrap;
-        word-wrap: break-word;
-        text-indent: 0 !important;
-        padding: 0;
-        margin: 0;
-        margin-left: 20px;
-        flex-shrink: 0;
-        text-align: left;
-        display: block;
       }
-      .footer {
-        margin-top: auto;
-        padding-top: 15px;
-        border-top: 1px solid #ccc;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-family: 'Inter', Arial, sans-serif;
-        font-size: 11px;
+      .additional-notes-title {
+        margin: 0 0 10px;
+        font-size: 12px;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
         color: #666;
       }
-      .main-content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-      }
-      .content-wrapper {
-        flex-grow: 0;
-        flex-shrink: 0;
-      }
-      .footer-left {
-        font-weight: 500;
-        flex: 1;
-        text-align: left;
-        display: flex;
-        align-items: center;
-        gap: 6px;
-      }
-      .footer-brand-icon {
-        width: 14px;
-        height: 14px;
-        object-fit: contain;
-      }
-      .footer-center {
-        font-weight: 600;
-        flex: 1;
-        text-align: center;
-        color: #333;
-      }
-      .footer-right {
-        font-style: italic;
-        flex: 1;
-        text-align: right;
+      .additional-notes-body {
+        margin: 0;
+        font-size: 14px;
+        line-height: 1.6;
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+        word-break: break-word;
+        text-indent: 0 !important;
+        orphans: 3;
+        widows: 3;
       }
       .index-section {
         text-align: center;
@@ -401,19 +362,12 @@ export const renderReport: ReportRenderer = (data: PDFGenerationData): string =>
     </style>
   </head>
   <body>
-    <div class="main-content">
-    <div class="content-wrapper">
-    <div class="header">
-      <div class="header-content">
-        <div class="date">${displayDate}</div>
-        ${caseNumber ? `<div class="case-number">${caseNumber}</div>` : '<div class="case-number"></div>'}
-      </div>
-    </div>
+    <div class="report-body">
     
-    ${imageUrl && imageUrl !== '/clear.jpg' ? `
+    ${hasImage ? `
     ${annotationData && annotationsSet?.has('index') && annotationData.indexType === 'number' && annotationData.indexNumber ? `
     <div class="index-section">
-      Index: ${annotationData.indexNumber}
+      Index: ${safeText(annotationData.indexNumber)}
     </div>
     ` : ''}
     
@@ -425,12 +379,12 @@ export const renderReport: ReportRenderer = (data: PDFGenerationData): string =>
         <div class="annotations-overlay">
           <div class="left-annotation" style="${needsLightBackground(annotationData.caseFontColor || '#FFDE21') ? 'background: rgba(255, 255, 255, 0.9); border: 2px solid rgba(0, 0, 0, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);' : ''}">
             <div class="case-text" style="color: ${annotationData.caseFontColor || '#FFDE21'};">
-              ${annotationData.leftCase}${annotationData.leftItem ? ` ${annotationData.leftItem}` : ''}
+              ${safeText(annotationData.leftCase)}${annotationData.leftItem ? ` ${safeText(annotationData.leftItem)}` : ''}
             </div>
           </div>
           <div class="right-annotation" style="${needsLightBackground(annotationData.caseFontColor || '#FFDE21') ? 'background: rgba(255, 255, 255, 0.9); border: 2px solid rgba(0, 0, 0, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);' : ''}">
             <div class="case-text" style="color: ${annotationData.caseFontColor || '#FFDE21'};">
-              ${annotationData.rightCase}${annotationData.rightItem ? ` ${annotationData.rightItem}` : ''}
+              ${safeText(annotationData.rightCase)}${annotationData.rightItem ? ` ${safeText(annotationData.rightItem)}` : ''}
             </div>
           </div>
         </div>
@@ -456,7 +410,7 @@ export const renderReport: ReportRenderer = (data: PDFGenerationData): string =>
         ${annotationData && annotationsSet?.has('id') ? `
         <div class="support-level-annotation">
           <div class="support-level-text" style="color: ${annotationData.supportLevel === 'ID' ? '#28a745' : annotationData.supportLevel === 'Exclusion' ? '#dc3545' : '#ffc107'}; background: ${annotationData.supportLevel === 'Inconclusive' ? 'rgba(120, 120, 120, 0.95)' : 'rgba(240, 240, 240, 0.95)'};">
-            ${annotationData.supportLevel === 'ID' ? 'Identification' : annotationData.supportLevel}
+            ${safeText(annotationData.supportLevel === 'ID' ? 'Identification' : annotationData.supportLevel)}
           </div>
         </div>
         ` : '<div class="support-level-annotation"></div>'}
@@ -464,7 +418,7 @@ export const renderReport: ReportRenderer = (data: PDFGenerationData): string =>
         ${annotationData && annotationsSet?.has('class') ? `
         <div class="class-annotation">
           <div class="class-text-annotation">
-            ${annotationData.customClass || annotationData.classType}${annotationData.classNote ? ` (${annotationData.classNote})` : ''}
+            ${safeText(annotationData.customClass || annotationData.classType)}${annotationData.classNote ? ` (${safeText(annotationData.classNote)})` : ''}
           </div>
         </div>
         ` : '<div class="class-annotation"></div>'}
@@ -483,20 +437,21 @@ export const renderReport: ReportRenderer = (data: PDFGenerationData): string =>
     ${annotationData && ((annotationData.includeConfirmation === true) || annotationData.additionalNotes) ? `
     <div class="confirmation-section">
       ${annotationData && (annotationData.includeConfirmation === true) ? `
+        <div class="confirmation-summary">
         ${annotationData.confirmationData ? `
         <div class="confirmation-data">
           <div class="confirmation-title">IDENTIFICATION CONFIRMED</div>
           <div class="confirmation-field">
-            <div class="confirmation-name">${annotationData.confirmationData.fullName}, ${annotationData.confirmationData.badgeId}</div>
+            <div class="confirmation-name">${safeText(annotationData.confirmationData.fullName)}, ${safeText(annotationData.confirmationData.badgeId)}</div>
           </div>
           <div class="confirmation-field">
-            <div class="confirmation-company">${annotationData.confirmationData.confirmedByCompany || 'N/A'}</div>
+            <div class="confirmation-company">${safeText(annotationData.confirmationData.confirmedByCompany || 'N/A')}</div>
           </div>
           <div class="confirmation-field">
-            <div class="confirmation-timestamp">${annotationData.confirmationData.timestamp}</div>
+            <div class="confirmation-timestamp">${safeText(annotationData.confirmationData.timestamp)}</div>
           </div>
           <div class="confirmation-field">
-            <div class="confirmation-id">ID: ${annotationData.confirmationData.confirmationId}</div>
+            <div class="confirmation-id">ID: ${safeText(annotationData.confirmationData.confirmationId)}</div>
           </div>
         </div>
         ` : `
@@ -507,30 +462,35 @@ export const renderReport: ReportRenderer = (data: PDFGenerationData): string =>
           <div class="confirmation-line"></div>
         </div>
         `}
-      ` : '<div></div>'}
+        </div>
+      ` : ''}
 
       ${annotationData && annotationsSet?.has('notes') && annotationData.additionalNotes && annotationData.additionalNotes.trim() ? `
-      <div class="additional-notes-section">${annotationData.additionalNotes.trim()}</div>
-      ` : '<div></div>'}
+      <section class="additional-notes-section ${hasImage || annotationData.includeConfirmation === true ? 'notes-page' : ''}">
+        <h2 class="additional-notes-title">Additional Notes</h2>
+        <p class="additional-notes-body">${escapeHtml(annotationData.additionalNotes.trim())}</p>
+      </section>
+      ` : ''}
     </div>
     ` : ''}
     
     </div>
-    </div>
-    
-    <div class="footer">
-      <div class="footer-left">
-        <span>Notes formatted by Striae</span>
-          <img class="footer-brand-icon" src="${ICON_256}" alt="Striae icon" />
-      </div>
-      <div class="footer-center">
-        ${userCompany ? userCompany : ''}
-      </div>
-      <div class="footer-right">
-        ${notesUpdatedFormatted ? `Notes updated ${notesUpdatedFormatted}` : ''}
-      </div>
-    </div>
   </body>
 </html>
 `;
-};
+};
+
+export const getPdfOptions: ReportPdfOptionsBuilder = (data: PDFGenerationData) => buildRepeatedChromePdfOptions({
+  headerLeft: data.currentDate,
+  headerRight: data.caseNumber,
+  headerDetailLeft: [data.annotationData?.leftCase, data.annotationData?.leftItem].filter(Boolean).join(' / ')
+    ? `Left Case / Item: ${[data.annotationData?.leftCase, data.annotationData?.leftItem].filter(Boolean).join(' / ')}`
+    : undefined,
+  headerDetailRight: [data.annotationData?.rightCase, data.annotationData?.rightItem].filter(Boolean).join(' / ')
+    ? `Right Case / Item: ${[data.annotationData?.rightCase, data.annotationData?.rightItem].filter(Boolean).join(' / ')}`
+    : undefined,
+  footerLeft: 'Notes formatted by Striae',
+  footerCenter: data.userCompany,
+  footerRight: data.notesUpdatedFormatted ? `Notes updated ${data.notesUpdatedFormatted}` : undefined,
+  footerLeftImageSrc: ICON_256,
+});