@jjlmoya/utils-forensic-science 1.4.0 → 1.6.0

package/src/tool/fire-pattern-origin-analyzer/view-bindings.ts

@@ -0,0 +1,171 @@
+import type { FireOriginEstimator, FireVector } from './logic';
+import { drawHeatmap, drawOriginMarker, drawVector, pointFromPointer, snapPoint, WIDTH, HEIGHT } from './render';
+import {
+  animateToState,
+  closeRadialMenu,
+  commitDraft,
+  exportReport,
+  filteredVectors,
+  interpolatedState,
+  loadPlanFile,
+  openRadialMenu,
+  syncLayers,
+  type Pattern,
+  type ViewRefs,
+  type ViewState,
+  updateOriginOverlay,
+  updatePointerOverlay,
+} from './view-model';
+
+export function bindLayerToggles(refs: ViewRefs, estimator: FireOriginEstimator, state: ViewState): void {
+  refs.root.querySelectorAll<HTMLButtonElement>('[data-fire-layer-toggle]').forEach((button) => {
+    button.addEventListener('click', () => {
+      const pattern = button.dataset.fireLayerToggle as Pattern;
+      state.visibleLayers[pattern] = !state.visibleLayers[pattern];
+      syncLayers(refs, state);
+      animateToState(refs, estimator, state);
+    });
+  });
+}
+
+export function bindRadialMenu(refs: ViewRefs, state: ViewState, ui: Record<string, string>): void {
+  refs.radialMenu.querySelectorAll<HTMLButtonElement>('[data-fire-pattern]').forEach((button) => {
+    button.addEventListener('click', () => {
+      if (!state.pendingStart) return;
+      state.currentPattern = button.dataset.firePattern as Pattern;
+      state.draftVector = {
+        id: `vector-${Date.now()}`,
+        start: state.pendingStart,
+        end: state.pendingStart,
+        pattern: state.currentPattern,
+        confidence: 78,
+      };
+      closeRadialMenu(refs);
+      refs.modeLabel.textContent = `${ui.refiningVector}: ${ui[state.currentPattern] || state.currentPattern}`;
+    });
+  });
+}
+
+function handlePointerMove(refs: ViewRefs, state: ViewState, event: PointerEvent): void {
+  state.pointer = pointFromPointer(refs.svg, event);
+  state.pointerClient = { x: event.offsetX, y: event.offsetY };
+  updatePointerOverlay(refs, state);
+  if (state.draftVector && state.pendingStart) {
+    state.draftVector = { ...state.draftVector, end: snapPoint(state.pendingStart, state.pointer) };
+  }
+}
+
+export function bindCanvasInteractions(
+  refs: ViewRefs,
+  estimator: FireOriginEstimator,
+  state: ViewState,
+  ui: Record<string, string>,
+): void {
+  refs.svg.addEventListener('pointermove', (event) => {
+    handlePointerMove(refs, state, event);
+  });
+  refs.svg.addEventListener('pointerdown', (event) => {
+    state.pointer = pointFromPointer(refs.svg, event);
+    state.pointerClient = { x: event.offsetX, y: event.offsetY };
+    updatePointerOverlay(refs, state);
+    if (state.draftVector) {
+      commitDraft(refs, estimator, state, ui);
+      return;
+    }
+    openRadialMenu(refs, state, ui, state.pointer);
+  });
+  refs.svg.addEventListener('pointerleave', () => {
+    refs.pointerOverlay.style.opacity = '0';
+  });
+  refs.svg.addEventListener('pointerenter', () => {
+    refs.pointerOverlay.style.opacity = '1';
+  });
+}
+
+export function bindShortcuts(refs: ViewRefs, estimator: FireOriginEstimator, state: ViewState, ui: Record<string, string>): void {
+  const shortcutMap: Record<string, Pattern> = { v: 'vPattern', d: 'deepChar', s: 'sootShadow', c: 'cleanBurn' };
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      state.draftVector = null;
+      state.pendingStart = null;
+      closeRadialMenu(refs);
+      refs.modeLabel.textContent = ui.awaitingVector;
+      return;
+    }
+    const pattern = shortcutMap[event.key.toLowerCase()];
+    if (!state.hasLoadedPlan || !pattern) return;
+    state.visibleLayers[pattern] = !state.visibleLayers[pattern];
+    syncLayers(refs, state);
+    animateToState(refs, estimator, state);
+  });
+}
+
+export function bindUpload(refs: ViewRefs, estimator: FireOriginEstimator, state: ViewState): void {
+  refs.upload.addEventListener('change', () => {
+    const file = refs.upload.files?.[0];
+    if (file) loadPlanFile(refs, estimator, state, file);
+  });
+  refs.dropzone.addEventListener('click', () => {
+    refs.upload.click();
+  });
+  ['dragenter', 'dragover'].forEach((eventName) => {
+    refs.svg.addEventListener(eventName, (event) => {
+      event.preventDefault();
+      refs.dropzone.hidden = false;
+    });
+  });
+  ['dragleave', 'drop'].forEach((eventName) => {
+    refs.svg.addEventListener(eventName, (event) => {
+      event.preventDefault();
+      refs.dropzone.hidden = true;
+    });
+  });
+  refs.svg.addEventListener('drop', (event) => {
+    const file = event.dataTransfer?.files?.[0];
+    if (file) loadPlanFile(refs, estimator, state, file);
+  });
+}
+
+export function bindAuxiliaryActions(refs: ViewRefs, estimator: FireOriginEstimator, state: ViewState, ui: Record<string, string>): void {
+  document.addEventListener('click', (event) => {
+    const target = event.target as Node;
+    if (!refs.radialMenu.hidden && !refs.radialMenu.contains(target) && !refs.svg.contains(target)) {
+      closeRadialMenu(refs);
+      if (!state.draftVector) refs.modeLabel.textContent = ui.awaitingVector;
+    }
+  });
+  refs.exportButton.addEventListener('click', () => {
+    exportReport(state);
+  });
+  refs.resetButton.addEventListener('click', () => {
+    state.vectors = [];
+    state.draftVector = null;
+    state.pendingStart = null;
+    animateToState(refs, estimator, state);
+    refs.modeLabel.textContent = ui.awaitingVector;
+  });
+}
+
+export function startRenderLoop(refs: ViewRefs, state: ViewState): void {
+  const render = (now: number) => {
+    refs.ctx.clearRect(0, 0, WIDTH, HEIGHT);
+    if (state.hasLoadedPlan) {
+      const frame = interpolatedState(state, now);
+      filteredVectors(state).forEach((vector: FireVector) => drawVector(refs.ctx, vector, 0.96));
+      if (state.draftVector) drawVector(refs.ctx, state.draftVector, 0.52);
+      drawHeatmap(refs.ctx, {
+        point: frame.origin,
+        radius: frame.radius,
+        confidence: frame.confidence,
+        intersections: frame.intersections,
+      }, now);
+      drawOriginMarker(refs.ctx, frame.origin);
+      updateOriginOverlay(refs, frame.origin);
+    }
+    state.animationFrame = requestAnimationFrame(render);
+  };
+
+  state.animationFrame = requestAnimationFrame(render);
+  window.addEventListener('beforeunload', () => cancelAnimationFrame(state.animationFrame), { once: true });
+}

package/src/tool/fire-pattern-origin-analyzer/view-model.ts

@@ -0,0 +1,244 @@
+import type { FireOriginEstimator, FirePoint, FireVector } from './logic';
+import { HEIGHT, TRANSITION_MS, WIDTH, clamp, ease, lerp, patternColor, toCanvas } from './render';
+
+export type Pattern = FireVector['pattern'];
+type PatternState = Record<Pattern, boolean>;
+
+export interface AnimatedState {
+  origin: FirePoint;
+  radius: number;
+  confidence: number;
+  intersections: FirePoint[];
+  vectorCount: number;
+  statusKey: 'needsMoreVectors' | 'wideArea' | 'focusedArea';
+}
+
+export interface ViewRefs {
+  root: HTMLElement;
+  svg: SVGSVGElement;
+  ctx: CanvasRenderingContext2D;
+  radialMenu: HTMLDivElement;
+  pointerOverlay: HTMLDivElement;
+  originOverlay: HTMLDivElement;
+  pointerCoordinate: HTMLElement;
+  originCoordinate: HTMLElement;
+  vectorCount: HTMLElement;
+  confidenceScore: HTMLElement;
+  variance: HTMLElement;
+  modeLabel: HTMLElement;
+  upload: HTMLInputElement;
+  exportButton: HTMLButtonElement;
+  resetButton: HTMLButtonElement;
+  dropzone: HTMLButtonElement;
+  planImage: SVGImageElement;
+}
+
+export interface ViewState {
+  visibleLayers: PatternState;
+  vectors: FireVector[];
+  pendingStart: FirePoint | null;
+  draftVector: FireVector | null;
+  pointer: FirePoint;
+  pointerClient: FirePoint;
+  hasLoadedPlan: boolean;
+  currentPattern: Pattern;
+  importedPlanName: string;
+  renderStart: number;
+  animationFrame: number;
+  previousState: AnimatedState | null;
+  currentState: AnimatedState;
+}
+
+const DEFAULT_STATE: AnimatedState = {
+  origin: { x: 50, y: 50 },
+  radius: 24,
+  confidence: 12,
+  intersections: [],
+  vectorCount: 0,
+  statusKey: 'needsMoreVectors',
+};
+
+function required<T>(value: T | null): T {
+  if (!value) throw new Error('Missing fire analyzer DOM node');
+  return value;
+}
+
+function download(name: string, content: string, type: string): void {
+  const blob = new Blob([content], { type });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = name;
+  anchor.click();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+
+export function getRefs(): ViewRefs | null {
+  try {
+    const canvas = required(document.getElementById('fire-overlay-canvas') as HTMLCanvasElement | null);
+    return {
+      root: required(document.querySelector<HTMLElement>('[data-fire-origin-tool]')),
+      svg: required(document.getElementById('fire-plan-svg') as SVGSVGElement | null),
+      ctx: required(canvas.getContext('2d')),
+      radialMenu: required(document.getElementById('fire-radial-menu') as HTMLDivElement | null),
+      pointerOverlay: required(document.getElementById('fire-pointer-overlay') as HTMLDivElement | null),
+      originOverlay: required(document.getElementById('fire-origin-overlay') as HTMLDivElement | null),
+      pointerCoordinate: required(document.getElementById('fire-pointer-coordinate')),
+      originCoordinate: required(document.getElementById('fire-origin-coordinate')),
+      vectorCount: required(document.getElementById('fire-vector-count')),
+      confidenceScore: required(document.getElementById('fire-confidence-score')),
+      variance: required(document.getElementById('fire-origin-variance')),
+      modeLabel: required(document.getElementById('fire-mode-label')),
+      upload: required(document.getElementById('fire-plan-upload') as HTMLInputElement | null),
+      exportButton: required(document.getElementById('fire-export') as HTMLButtonElement | null),
+      resetButton: required(document.getElementById('fire-reset') as HTMLButtonElement | null),
+      dropzone: required(document.getElementById('fire-dropzone') as HTMLButtonElement | null),
+      planImage: required(document.getElementById('fire-plan-image') as SVGImageElement | null),
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function createState(): ViewState {
+  return {
+    visibleLayers: { vPattern: true, deepChar: true, sootShadow: true, cleanBurn: true },
+    vectors: [],
+    pendingStart: null,
+    draftVector: null,
+    pointer: { x: 50, y: 50 },
+    pointerClient: { x: 0, y: 0 },
+    hasLoadedPlan: false,
+    currentPattern: 'vPattern',
+    importedPlanName: 'room-plan',
+    renderStart: performance.now(),
+    animationFrame: 0,
+    previousState: null,
+    currentState: { ...DEFAULT_STATE },
+  };
+}
+
+export function filteredVectors(state: ViewState): FireVector[] {
+  if (!state.hasLoadedPlan) return [];
+  return state.vectors.filter((vector) => state.visibleLayers[vector.pattern]);
+}
+
+export function syncControls(refs: ViewRefs, enabled: boolean): void {
+  refs.resetButton.disabled = !enabled;
+  refs.exportButton.disabled = !enabled;
+  refs.root.dataset.hasPlan = enabled ? 'true' : 'false';
+  refs.pointerOverlay.hidden = !enabled;
+  refs.originOverlay.hidden = !enabled;
+  refs.root.querySelectorAll<HTMLButtonElement>('[data-fire-layer-toggle]').forEach((button) => {
+    button.disabled = !enabled;
+  });
+}
+
+export function syncLayers(refs: ViewRefs, state: ViewState): void {
+  (Object.keys(state.visibleLayers) as Pattern[]).forEach((pattern) => {
+    refs.root.querySelectorAll<HTMLElement>(`[data-fire-layer-toggle="${pattern}"]`).forEach((node) => {
+      node.dataset.active = state.visibleLayers[pattern] ? 'true' : 'false';
+    });
+  });
+}
+
+export function animateToState(refs: ViewRefs, estimator: FireOriginEstimator, state: ViewState): void {
+  state.previousState = state.currentState;
+  state.currentState = estimator.estimate(filteredVectors(state));
+  state.renderStart = performance.now();
+  refs.vectorCount.textContent = String(state.currentState.vectorCount);
+  refs.confidenceScore.textContent = `${state.currentState.confidence.toFixed(1)}%`;
+  refs.variance.textContent = `+-${(state.currentState.radius / 10).toFixed(1)} m`;
+  refs.originCoordinate.textContent = `${state.currentState.origin.x.toFixed(1)}, ${state.currentState.origin.y.toFixed(1)}`;
+}
+
+export function interpolatedState(state: ViewState, now: number): AnimatedState {
+  if (!state.previousState) return state.currentState;
+  const progress = ease(clamp((now - state.renderStart) / TRANSITION_MS, 0, 1));
+  return {
+    origin: {
+      x: lerp(state.previousState.origin.x, state.currentState.origin.x, progress),
+      y: lerp(state.previousState.origin.y, state.currentState.origin.y, progress),
+    },
+    radius: lerp(state.previousState.radius, state.currentState.radius, progress),
+    confidence: lerp(state.previousState.confidence, state.currentState.confidence, progress),
+    intersections: state.currentState.intersections,
+    vectorCount: state.currentState.vectorCount,
+    statusKey: state.currentState.statusKey,
+  };
+}
+
+export function updatePointerOverlay(refs: ViewRefs, state: ViewState): void {
+  refs.pointerCoordinate.textContent = `${state.pointer.x.toFixed(1)}, ${state.pointer.y.toFixed(1)}`;
+  refs.pointerOverlay.style.left = `${state.pointerClient.x + 18}px`;
+  refs.pointerOverlay.style.top = `${state.pointerClient.y - 24}px`;
+}
+
+export function updateOriginOverlay(refs: ViewRefs, point: FirePoint): void {
+  const screen = toCanvas(point);
+  refs.originOverlay.style.left = `${screen.x + 18}px`;
+  refs.originOverlay.style.top = `${screen.y + 18}px`;
+}
+
+export function closeRadialMenu(refs: ViewRefs): void {
+  refs.radialMenu.hidden = true;
+}
+
+export function openRadialMenu(refs: ViewRefs, state: ViewState, ui: Record<string, string>, point: FirePoint): void {
+  if (!state.hasLoadedPlan) return;
+  state.pendingStart = point;
+  const canvasPoint = toCanvas(point);
+  refs.radialMenu.style.left = `${canvasPoint.x}px`;
+  refs.radialMenu.style.top = `${canvasPoint.y}px`;
+  refs.radialMenu.hidden = false;
+  refs.modeLabel.textContent = ui.selectIndicator;
+}
+
+export function commitDraft(refs: ViewRefs, estimator: FireOriginEstimator, state: ViewState, ui: Record<string, string>): void {
+  if (!state.draftVector) return;
+  state.vectors.push(state.draftVector);
+  state.draftVector = null;
+  state.pendingStart = null;
+  animateToState(refs, estimator, state);
+  refs.modeLabel.textContent = ui.awaitingVector;
+}
+
+export function loadPlanFile(refs: ViewRefs, estimator: FireOriginEstimator, state: ViewState, file: File): void {
+  state.importedPlanName = file.name.replace(/\.[^.]+$/, '') || 'room-plan';
+  refs.planImage.setAttribute('href', URL.createObjectURL(file));
+  state.hasLoadedPlan = true;
+  refs.dropzone.hidden = true;
+  refs.dropzone.setAttribute('aria-hidden', 'true');
+  syncControls(refs, true);
+  animateToState(refs, estimator, state);
+}
+
+export function exportReport(state: ViewState): void {
+  const payload = {
+    exportedAt: new Date().toISOString(),
+    plan: state.importedPlanName,
+    origin: state.currentState.origin,
+    confidence: Number(state.currentState.confidence.toFixed(1)),
+    varianceMeters: Number((state.currentState.radius / 10).toFixed(1)),
+    vectorCount: state.currentState.vectorCount,
+    vectors: state.vectors,
+    visibleLayers: state.visibleLayers,
+  };
+  const vectorMarkup = state.vectors.map((vector) => {
+    const start = toCanvas(vector.start);
+    const end = toCanvas(vector.end);
+    return `<line x1="${start.x.toFixed(2)}" y1="${start.y.toFixed(2)}" x2="${end.x.toFixed(2)}" y2="${end.y.toFixed(2)}" stroke="${patternColor(vector.pattern)}" stroke-width="4" stroke-linecap="round" />`;
+  }).join('');
+  const origin = toCanvas(state.currentState.origin);
+  const report = `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${WIDTH} ${HEIGHT}">
+  <metadata>${JSON.stringify(payload)}</metadata>
+  <rect width="${WIDTH}" height="${HEIGHT}" fill="#f7f2ea" />
+  ${vectorMarkup}
+  <circle cx="${origin.x.toFixed(2)}" cy="${origin.y.toFixed(2)}" r="10" fill="#161e28" stroke="#fff7ed" stroke-width="3" />
+  <text x="24" y="${HEIGHT - 26}" font-family="IBM Plex Mono, monospace" font-size="16" fill="#16314a">
+    VECTORS ${state.currentState.vectorCount} | CONFIDENCE ${state.currentState.confidence.toFixed(1)}% | VARIANCE +-${(state.currentState.radius / 10).toFixed(1)} m
+  </text>
+</svg>`;
+  download(`${state.importedPlanName}-fire-origin-report.svg`, report, 'image/svg+xml');
+}

package/src/tool/fire-pattern-origin-analyzer/view.ts

@@ -0,0 +1,30 @@
+import { FireOriginEstimator } from './logic';
+import {
+  bindAuxiliaryActions,
+  bindCanvasInteractions,
+  bindLayerToggles,
+  bindRadialMenu,
+  bindShortcuts,
+  bindUpload,
+  startRenderLoop,
+} from './view-bindings';
+import { createState, getRefs, syncControls, syncLayers, updatePointerOverlay } from './view-model';
+
+export function initFirePatternOriginAnalyzer(ui: Record<string, string>): void {
+  const refs = getRefs();
+  if (!refs) return;
+
+  const estimator = new FireOriginEstimator();
+  const state = createState();
+
+  syncControls(refs, false);
+  syncLayers(refs, state);
+  updatePointerOverlay(refs, state);
+  bindLayerToggles(refs, estimator, state);
+  bindRadialMenu(refs, state, ui);
+  bindCanvasInteractions(refs, estimator, state, ui);
+  bindShortcuts(refs, estimator, state, ui);
+  bindUpload(refs, estimator, state);
+  bindAuxiliaryActions(refs, estimator, state, ui);
+  startRenderLoop(refs, state);
+}

package/src/tool/forensic-toolmark-striation-matcher/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as BibliographyRenderer } from '@jjlmoya/utils-shared';
+import { bibliography } from './bibliography';
+---
+
+<BibliographyRenderer links={bibliography} />

package/src/tool/forensic-toolmark-striation-matcher/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'AFTE Theory of Identification as it Relates to Toolmarks.',
+    url: 'https://temp.afte.org/about-us/what-is-afte/afte-theory-of-identification',
+  },
+  {
+    name: 'OSAC Registry: Firearms and Toolmarks Subcommittee standards and guidelines.',
+    url: 'https://www.nist.gov/organization-scientific-area-committees-forensic-science/firearms-toolmarks-subcommittee',
+  },
+  {
+    name: 'National Research Council. Strengthening Forensic Science in the United States: A Path Forward.',
+    url: 'https://nap.nationalacademies.org/catalog/12589/strengthening-forensic-science-in-the-united-states-a-path-forward',
+  },
+];

package/src/tool/forensic-toolmark-striation-matcher/component.astro

@@ -0,0 +1,121 @@
+---
+import './forensic-toolmark-striation-matcher.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<section class="toolmark-shell" data-toolmark-tool>
+  <div class="toolmark-stage">
+    <div class="toolmark-view-wrap">
+      <div class="toolmark-view" aria-label={ui.viewerAria}>
+        <canvas id="toolmark-canvas" width="980" height="640"></canvas>
+        <input id="toolmark-split" class="toolmark-split" type="range" min="22" max="78" value="50" aria-label={ui.splitLabel} />
+        <div class="toolmark-handle" aria-hidden="true">
+          <span></span>
+        </div>
+        <div class="toolmark-score" id="toolmark-score-card">
+          <span>{ui.correlation}</span>
+          <strong id="toolmark-correlation">{ui.emptyValue}</strong>
+          <small id="toolmark-verdict">{ui.emptyValue}</small>
+        </div>
+      </div>
+      <div class="toolmark-strip" aria-hidden="true">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </div>
+
+    <aside class="toolmark-controls">
+      <div class="toolmark-panel">
+        <span class="toolmark-panel-label">{ui.loadImages}</span>
+        <label class="toolmark-upload">
+          <span>{ui.uploadKnown}</span>
+          <strong id="toolmark-known-name">{ui.noFile}</strong>
+          <input id="toolmark-known-file" type="file" accept="image/*" />
+        </label>
+        <label class="toolmark-upload">
+          <span>{ui.uploadQuestioned}</span>
+          <strong id="toolmark-questioned-name">{ui.noFile}</strong>
+          <input id="toolmark-questioned-file" type="file" accept="image/*" />
+        </label>
+      </div>
+
+      <div class="toolmark-panel">
+        <div class="toolmark-panel-head">
+          <span class="toolmark-panel-label">{ui.alignImage}</span>
+          <div class="toolmark-unit-toggle" role="group" aria-label={ui.units}>
+            <button type="button" data-toolmark-unit="metric" data-active="true">{ui.metric}</button>
+            <button type="button" data-toolmark-unit="imperial" data-active="false">{ui.imperial}</button>
+          </div>
+        </div>
+        <label class="toolmark-slider">
+          <span><b>{ui.offset}</b><strong id="toolmark-offset-label">-</strong></span>
+          <input id="toolmark-offset" type="range" min="-180" max="180" value="34" step="1" />
+        </label>
+
+        <label class="toolmark-slider">
+          <span><b>{ui.rotation}</b><strong id="toolmark-rotation-label">-</strong></span>
+          <input id="toolmark-rotation" type="range" min="-12" max="12" value="2.5" step="0.1" />
+        </label>
+
+        <label class="toolmark-slider">
+          <span><b>{ui.zoom}</b><strong id="toolmark-zoom-label">-</strong></span>
+          <input id="toolmark-zoom" type="range" min="50" max="260" value="100" step="2" />
+        </label>
+      </div>
+
+      <div class="toolmark-panel">
+        <span class="toolmark-panel-label">{ui.adjustImage}</span>
+        <div class="toolmark-tune">
+          <label>
+            <span>{ui.contrast}</span>
+            <input id="toolmark-contrast" type="range" min="50" max="180" value="108" step="1" />
+          </label>
+          <label>
+            <span>{ui.brightness}</span>
+            <input id="toolmark-brightness" type="range" min="55" max="150" value="100" step="1" />
+          </label>
+        </div>
+      </div>
+
+      <div class="toolmark-actions" aria-label={ui.outputControls}>
+        <button type="button" id="toolmark-reset">{ui.center}</button>
+        <button type="button" id="toolmark-grid" data-active="true">{ui.grid}</button>
+        <button type="button" id="toolmark-export">{ui.exportImage}</button>
+      </div>
+
+      <details class="toolmark-demo">
+        <summary>{ui.demoOptions}</summary>
+        <div class="toolmark-profile" role="group" aria-label={ui.toolProfile}>
+          <button type="button" data-toolmark-profile="screwdriver" data-active="true"><span>{ui.screwdriver}</span></button>
+          <button type="button" data-toolmark-profile="prybar" data-active="false"><span>{ui.prybar}</span></button>
+          <button type="button" data-toolmark-profile="boltCutter" data-active="false"><span>{ui.boltCutter}</span></button>
+        </div>
+        <div class="toolmark-bars">
+          <div>
+            <span>{ui.phaseFit}<strong id="toolmark-phase-label">{ui.zeroPercent}</strong></span>
+            <meter id="toolmark-phase" min="0" max="100" value="0"></meter>
+          </div>
+          <div>
+            <span>{ui.rotationFit}<strong id="toolmark-rotation-fit-label">{ui.zeroPercent}</strong></span>
+            <meter id="toolmark-rotation-fit" min="0" max="100" value="0"></meter>
+          </div>
+        </div>
+      </details>
+
+      <p class="toolmark-interpretation" id="toolmark-interpretation" aria-live="polite">{ui.emptyValue}</p>
+    </aside>
+  </div>
+</section>
+
+<script id="toolmark-ui" type="application/json" set:html={JSON.stringify(ui)}></script>
+<script>
+  import { initToolmarkStriationMatcher } from './view';
+
+  initToolmarkStriationMatcher(JSON.parse(document.getElementById('toolmark-ui')?.textContent || '{}'));
+</script>

package/src/tool/forensic-toolmark-striation-matcher/entry.ts

@@ -0,0 +1,32 @@
+import type { ScienceToolEntry, ToolLocaleContent } from '../../types';
+
+export interface ToolmarkStriationMatcherUI {
+  [key: string]: string;
+}
+
+export type ToolmarkStriationMatcherLocaleContent = ToolLocaleContent<ToolmarkStriationMatcherUI>;
+
+export const forensicToolmarkStriationMatcher: ScienceToolEntry<ToolmarkStriationMatcherUI> = {
+  id: 'forensic-toolmark-striation-matcher',
+  icons: {
+    bg: 'mdi:tools',
+    fg: 'mdi:vector-polyline',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};