@jjlmoya/utils-forensic-science 1.1.0

package/src/tool/forensic-fiber-comparison-microscope/render.ts

@@ -0,0 +1,265 @@
+import type { FiberProfile, SpectrumPoint } from './logic';
+
+export interface RenderTheme {
+  field: string;
+  fiberA: string;
+  fiberB: string;
+  glow: string;
+  text: string;
+  grid: string;
+}
+
+interface ScopeMetrics {
+  width: number;
+  height: number;
+  radius: number;
+  blur: number;
+}
+
+interface HalfRenderConfig {
+  context: CanvasRenderingContext2D;
+  profile: FiberProfile;
+  theme: RenderTheme;
+  metrics: ScopeMetrics;
+  xOffset: number;
+  angle: number;
+  leftSide: boolean;
+}
+
+interface TextureStyle {
+  alpha: number;
+  stroke: string;
+  step: number;
+}
+
+interface MicroscopeScene {
+  context: CanvasRenderingContext2D;
+  canvas: HTMLCanvasElement;
+  left: FiberProfile;
+  right: FiberProfile;
+  focus: number;
+  polarizationDegrees: number;
+}
+
+interface TextureConfig {
+  context: CanvasRenderingContext2D;
+  width: number;
+  y: number;
+  profile: FiberProfile;
+  texture: TextureStyle;
+}
+
+const DYE_COLORS: Record<string, string> = {
+  'indigo reactive blue': '#1d5f84',
+  'acid crimson': '#b91c4a',
+  'disperse navy': '#243c8f',
+  'acid violet': '#8b5cf6',
+};
+
+export function currentTheme(): RenderTheme {
+  const dark = document.documentElement.classList.contains('theme-dark') || document.body.classList.contains('theme-dark');
+  if (dark) return { field: '#10171c', fiberA: '#7dd3fc', fiberB: '#c4b5fd', glow: '#facc15', text: '#f8fafc', grid: 'rgba(255,255,255,0.12)' };
+  return { field: '#f3f7ed', fiberA: '#1d5f84', fiberB: '#7c3aed', glow: '#b45309', text: '#17212b', grid: 'rgba(15,23,42,0.14)' };
+}
+
+export function dyeColor(profile: FiberProfile, fallback: string): string {
+  return DYE_COLORS[profile.dyeFamily] ?? fallback;
+}
+
+export function drawMicroscopeScene(scene: MicroscopeScene): void {
+  const { context, canvas, left, right, focus, polarizationDegrees } = scene;
+  const theme = currentTheme();
+  const metrics = scopeMetrics(canvas, focus);
+
+  context.clearRect(0, 0, metrics.width, metrics.height);
+  context.fillStyle = theme.field;
+  context.fillRect(0, 0, metrics.width, metrics.height);
+  context.save();
+  context.beginPath();
+  context.arc(metrics.width / 2, metrics.height / 2, metrics.radius, 0, Math.PI * 2);
+  context.clip();
+  drawHalf({ context, profile: left, theme, metrics, xOffset: 0, angle: polarizationDegrees, leftSide: true });
+  drawHalf({ context, profile: right, theme, metrics, xOffset: metrics.width / 2, angle: polarizationDegrees, leftSide: false });
+  drawReticle(context, metrics, theme);
+  context.restore();
+  context.lineWidth = 18;
+  context.strokeStyle = 'rgba(12,18,24,0.72)';
+  context.beginPath();
+  context.arc(metrics.width / 2, metrics.height / 2, metrics.radius, 0, Math.PI * 2);
+  context.stroke();
+}
+
+function scopeMetrics(canvas: HTMLCanvasElement, focus: number): ScopeMetrics {
+  return {
+    width: canvas.width,
+    height: canvas.height,
+    radius: Math.min(canvas.width, canvas.height) * 0.43,
+    blur: Math.abs(focus - 62) / 8,
+  };
+}
+
+function drawHalf(config: HalfRenderConfig): void {
+  const { context, profile, theme, metrics, xOffset, angle, leftSide } = config;
+  const brightness = 0.38 + Math.pow(Math.sin((angle * Math.PI) / 180), 2) * profile.birefringence * 9;
+  const fiberColor = dyeColor(profile, leftSide ? theme.fiberA : theme.fiberB);
+  const wave = fiberWave(profile.material);
+  const texture = textureStyle(profile);
+  const columnWidth = metrics.width / 2;
+
+  context.save();
+  context.translate(xOffset, 0);
+  context.fillStyle = `${fiberColor}18`;
+  context.fillRect(0, 0, columnWidth, metrics.height);
+  context.filter = `blur(${metrics.blur.toFixed(1)}px)`;
+
+  for (let i = 0; i < 7; i++) {
+    drawFiberStroke({ context, profile, fiberColor, theme, texture, wave, brightness, y: fiberY(i, leftSide), width: columnWidth });
+  }
+
+  context.restore();
+  context.globalAlpha = 1;
+  context.filter = 'none';
+  context.shadowBlur = 0;
+}
+
+function fiberWave(material: FiberProfile['material']): number {
+  if (material === 'wool') return 74;
+  if (material === 'cotton') return 48;
+  return 30;
+}
+
+function textureStyle(profile: FiberProfile): TextureStyle {
+  if (profile.material === 'wool') return { alpha: 0.38, stroke: 'rgba(255,255,255,0.62)', step: 22 };
+  if (profile.material === 'cotton') return { alpha: 0.28, stroke: 'rgba(255,255,255,0.62)', step: 30 };
+  return { alpha: 0.2, stroke: 'rgba(255,255,255,0.75)', step: 42 };
+}
+
+function fiberY(index: number, leftSide: boolean): number {
+  return 95 + index * 58 + (leftSide ? index % 2 : (index + 1) % 2) * 18;
+}
+
+function drawFiberStroke(config: {
+  context: CanvasRenderingContext2D;
+  profile: FiberProfile;
+  fiberColor: string;
+  theme: RenderTheme;
+  texture: TextureStyle;
+  wave: number;
+  brightness: number;
+  y: number;
+  width: number;
+}): void {
+  const { context, profile, fiberColor, theme, texture, wave, brightness, y, width } = config;
+  context.beginPath();
+  context.moveTo(-40, y);
+  context.bezierCurveTo(width * 0.24, y - wave, width * 0.52, y + wave, width + 45, y + (profile.twist === 'S' ? -28 : 28));
+  context.lineWidth = Math.max(4, profile.diameterMicrons / 2.7);
+  context.strokeStyle = fiberColor;
+  context.globalAlpha = Math.min(0.95, brightness + 0.035);
+  context.shadowColor = theme.glow;
+  context.shadowBlur = profile.natural ? 2 : 10 + brightness * 14;
+  context.stroke();
+  drawFiberTexture({ context, width, y, profile, texture });
+}
+
+function drawFiberTexture(config: TextureConfig): void {
+  const { context, width, y, profile, texture } = config;
+  context.save();
+  context.globalAlpha = texture.alpha;
+  context.strokeStyle = texture.stroke;
+  context.lineWidth = 1;
+
+  for (let x = 10; x < width; x += texture.step) {
+    context.beginPath();
+    if (profile.material === 'wool') {
+      context.arc(x, y, 8, -0.9, 0.9);
+    } else if (profile.material === 'cotton') {
+      context.moveTo(x, y - 16);
+      context.lineTo(x + (profile.twist === 'S' ? -12 : 12), y + 16);
+    } else {
+      context.moveTo(x, y - 10);
+      context.lineTo(x + (profile.twist === 'S' ? -18 : 18), y + 10);
+    }
+    context.stroke();
+  }
+
+  context.restore();
+}
+
+function drawReticle(context: CanvasRenderingContext2D, metrics: ScopeMetrics, theme: RenderTheme): void {
+  context.strokeStyle = theme.grid;
+  context.lineWidth = 1;
+  context.beginPath();
+  context.moveTo(metrics.width / 2, metrics.height / 2 - metrics.radius);
+  context.lineTo(metrics.width / 2, metrics.height / 2 + metrics.radius);
+  context.moveTo(metrics.width / 2 - metrics.radius, metrics.height / 2);
+  context.lineTo(metrics.width / 2 + metrics.radius, metrics.height / 2);
+  context.stroke();
+}
+
+export function buildSpectrumChartMarkup(ui: Record<string, string>, left: FiberProfile, right: FiberProfile): string {
+  const theme = currentTheme();
+  const leftColor = dyeColor(left, theme.fiberA);
+  const rightColor = dyeColor(right, theme.fiberB);
+  const leftPath = pathFor(left.spectrum);
+  const rightPath = pathFor(right.spectrum);
+  const leftArea = areaFor(left.spectrum);
+  const rightArea = areaFor(right.spectrum);
+  const gridLines = [60, 110, 160, 210]
+    .map((lineY) => `<line x1="54" y1="${lineY}" x2="688" y2="${lineY}"></line>`)
+    .join('');
+
+  return `${chartDefs(leftColor, rightColor)}
+    <rect x="0" y="0" width="720" height="270" rx="8" fill="transparent"></rect>
+    <g stroke="${theme.grid}" stroke-width="1">${gridLines}</g>
+    ${chartLabels(ui.uvVisTitle, theme.text)}
+    <path d="${leftArea}" fill="url(#fiber-left-area)"></path>
+    <path d="${rightArea}" fill="url(#fiber-right-area)"></path>
+    <path d="${leftPath}" fill="none" stroke="${leftColor}" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="${rightPath}" fill="none" stroke="${rightColor}" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="11 9"></path>
+  `;
+}
+
+function chartDefs(leftColor: string, rightColor: string): string {
+  return `
+    <defs>
+      <linearGradient id="fiber-left-area" x1="0" y1="44" x2="0" y2="222" gradientUnits="userSpaceOnUse">
+        <stop offset="0" stop-color="${leftColor}" stop-opacity="0.22"></stop>
+        <stop offset="0.62" stop-color="${leftColor}" stop-opacity="0.07"></stop>
+        <stop offset="1" stop-color="${leftColor}" stop-opacity="0"></stop>
+      </linearGradient>
+      <linearGradient id="fiber-right-area" x1="0" y1="44" x2="0" y2="222" gradientUnits="userSpaceOnUse">
+        <stop offset="0" stop-color="${rightColor}" stop-opacity="0.18"></stop>
+        <stop offset="0.62" stop-color="${rightColor}" stop-opacity="0.06"></stop>
+        <stop offset="1" stop-color="${rightColor}" stop-opacity="0"></stop>
+      </linearGradient>
+    </defs>
+  `;
+}
+
+function chartLabels(title: string, textColor: string): string {
+  return `
+    <text x="54" y="34" fill="${textColor}" font-size="19" font-weight="850">${title}</text>
+    <text x="54" y="246" fill="${textColor}" font-size="12" font-family="JetBrains Mono, ui-monospace, monospace">380 nm</text>
+    <text x="638" y="246" fill="${textColor}" font-size="12" font-family="JetBrains Mono, ui-monospace, monospace">720 nm</text>
+  `;
+}
+
+function pathFor(points: SpectrumPoint[]): string {
+  return points
+    .map((point, index) => {
+      const x = 54 + ((point.wavelength - 380) / 340) * 634;
+      const y = 222 - point.absorbance * 178;
+      return `${index === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
+    })
+    .join(' ');
+}
+
+function areaFor(points: SpectrumPoint[]): string {
+  const first = points[0];
+  const last = points[points.length - 1];
+  if (!first || !last) return '';
+  const firstX = 54 + ((first.wavelength - 380) / 340) * 634;
+  const lastX = 54 + ((last.wavelength - 380) / 340) * 634;
+  return `${pathFor(points)} L ${lastX.toFixed(1)} 222 L ${firstX.toFixed(1)} 222 Z`;
+}

package/src/tool/forensic-fiber-comparison-microscope/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { forensicFiberComparisonMicroscope } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await forensicFiberComparisonMicroscope.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo && content.seo.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/forensic-fiber-comparison-microscope/view.ts

@@ -0,0 +1,267 @@
+import { FiberComparisonMicroscope } from './logic';
+import { buildSpectrumChartMarkup, drawMicroscopeScene } from './render';
+import type { DyePreset, FiberMaterial, FiberReference, FiberTwist, QuestionedFiberInput } from './logic';
+
+type Ui = Record<string, string>;
+type Result = ReturnType<FiberComparisonMicroscope['compare']>;
+
+const STORAGE_KEY = 'forensic-fiber-comparison-microscope-state';
+const FIBER_VALUES: FiberReference[] = ['questionedCotton', 'suspectCotton', 'wool', 'polyester', 'nylon'];
+const MATERIAL_VALUES: FiberMaterial[] = ['cotton', 'wool', 'polyester', 'nylon'];
+const TWIST_VALUES: FiberTwist[] = ['S', 'Z', 'irregular'];
+const DYE_VALUES: DyePreset[] = ['indigo', 'crimson', 'navy', 'violet'];
+const DEFAULT_BUILDER: QuestionedFiberInput = { material: 'cotton', diameterMicrons: 18, twist: 'irregular', birefringence: 0.032, dyePreset: 'indigo' };
+
+function byId<T extends HTMLElement>(id: string): T | null {
+  return document.getElementById(id) as T | null;
+}
+
+function isFiberReference(value: unknown): value is FiberReference {
+  return typeof value === 'string' && FIBER_VALUES.includes(value as FiberReference);
+}
+
+function normalizeDegrees(value: number): number {
+  return Math.max(0, Math.min(180, value));
+}
+
+export function initFiberComparisonMicroscope(ui: Ui): void {
+  new FiberComparisonView(ui).init();
+}
+
+class FiberComparisonView {
+  private readonly model = new FiberComparisonMicroscope();
+  private readonly canvas = byId<HTMLCanvasElement>('fiber-canvas');
+  private readonly context = this.canvas?.getContext('2d') ?? null;
+  private readonly chart = byId<SVGSVGElement>('fiber-spectrum-chart');
+  private readonly rightSelect = byId<HTMLSelectElement>('fiber-right');
+  private readonly focusInput = byId<HTMLInputElement>('fiber-focus');
+  private readonly polarizerInput = byId<HTMLInputElement>('fiber-polarizer');
+  private readonly diameterInput = byId<HTMLInputElement>('fiber-diameter');
+  private readonly birefringenceInput = byId<HTMLInputElement>('fiber-questioned-birefringence');
+  private builder: QuestionedFiberInput = { ...DEFAULT_BUILDER };
+
+  constructor(private readonly ui: Ui) {}
+
+  init(): void {
+    this.restoreState();
+    this.bindEvents();
+    this.render();
+    new MutationObserver(() => this.render()).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+  }
+
+  private bindEvents(): void {
+    this.bindInputs();
+    this.bindChoiceMenu();
+    this.bindBuilderButtons();
+    document.addEventListener('click', (event) => this.closeMenusFromOutside(event.target as Node));
+    document.addEventListener('keydown', (event) => { if (event.key === 'Escape') this.closeChoiceMenu(); });
+  }
+
+  private bindInputs(): void {
+    const inputs = [this.rightSelect, this.focusInput, this.polarizerInput, this.diameterInput, this.birefringenceInput];
+    inputs.forEach((input) => {
+      input?.addEventListener('input', () => this.render());
+      input?.addEventListener('change', () => this.render());
+    });
+  }
+
+  private bindChoiceMenu(): void {
+    document.querySelectorAll<HTMLButtonElement>('[data-fiber-choice-trigger]').forEach((button) => {
+      button.addEventListener('click', () => this.toggleChoiceMenu(button.getAttribute('aria-expanded') !== 'true'));
+    });
+    document.querySelectorAll<HTMLButtonElement>('[data-fiber-choice]').forEach((button) => {
+      button.addEventListener('click', () => this.chooseFiber(button));
+    });
+  }
+
+  private bindBuilderButtons(): void {
+    document.querySelectorAll<HTMLButtonElement>('[data-fiber-builder]').forEach((button) => {
+      button.addEventListener('click', () => {
+        this.applyBuilderSelection(button.dataset.fiberBuilder, button.dataset.builderValue);
+        this.render();
+      });
+    });
+  }
+
+  private restoreState(): void {
+    try {
+      const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '{}') as Record<string, unknown>;
+      this.restoreChoiceState(saved);
+      this.restoreBuilderState(saved.builder);
+      this.syncBuilderInputs();
+    } catch {
+      localStorage.removeItem(STORAGE_KEY);
+    }
+  }
+
+  private restoreChoiceState(saved: Record<string, unknown>): void {
+    if (isFiberReference(saved.right) && this.rightSelect) this.rightSelect.value = saved.right;
+    if (typeof saved.focus === 'number' && this.focusInput) this.focusInput.value = String(saved.focus);
+    if (typeof saved.polarizer === 'number' && this.polarizerInput) this.polarizerInput.value = String(saved.polarizer);
+  }
+
+  private restoreBuilderState(value: unknown): void {
+    if (this.isBuilderState(value)) this.builder = value;
+  }
+
+  private syncBuilderInputs(): void {
+    if (this.diameterInput) this.diameterInput.value = String(this.builder.diameterMicrons);
+    if (this.birefringenceInput) this.birefringenceInput.value = String(Math.round(this.builder.birefringence * 1000));
+  }
+
+  private isBuilderState(value: unknown): value is QuestionedFiberInput {
+    if (!value || typeof value !== 'object') return false;
+    const candidate = value as QuestionedFiberInput;
+    return MATERIAL_VALUES.includes(candidate.material)
+      && TWIST_VALUES.includes(candidate.twist)
+      && DYE_VALUES.includes(candidate.dyePreset)
+      && typeof candidate.diameterMicrons === 'number'
+      && typeof candidate.birefringence === 'number';
+  }
+
+  private saveState(): void {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({
+      right: this.rightSelect?.value,
+      focus: Number(this.focusInput?.value ?? 62),
+      polarizer: Number(this.polarizerInput?.value ?? 45),
+      builder: this.builder,
+    }));
+  }
+
+  private toggleChoiceMenu(open: boolean): void {
+    document.querySelectorAll<HTMLButtonElement>('[data-fiber-choice-trigger]').forEach((button) => {
+      button.setAttribute('aria-expanded', open ? 'true' : 'false');
+    });
+    document.querySelectorAll<HTMLElement>('[data-fiber-choice-menu]').forEach((menu) => {
+      menu.classList.toggle('is-open', open);
+    });
+  }
+
+  private closeChoiceMenu(): void {
+    this.toggleChoiceMenu(false);
+  }
+
+  private closeMenusFromOutside(target: Node): void {
+    const element = target instanceof Element ? target : null;
+    if (element?.closest('[data-fiber-choice-trigger], [data-fiber-choice-menu]')) return;
+    this.closeChoiceMenu();
+  }
+
+  private chooseFiber(button: HTMLButtonElement): void {
+    if (!this.rightSelect || !isFiberReference(button.dataset.fiberValue)) return;
+    this.rightSelect.value = button.dataset.fiberValue;
+    this.closeChoiceMenu();
+    this.render();
+  }
+
+  private applyBuilderSelection(key?: string, value?: string): void {
+    if (key === 'material' && MATERIAL_VALUES.includes(value as FiberMaterial)) this.builder.material = value as FiberMaterial;
+    if (key === 'twist' && TWIST_VALUES.includes(value as FiberTwist)) this.builder.twist = value as FiberTwist;
+    if (key === 'dyePreset' && DYE_VALUES.includes(value as DyePreset)) this.builder.dyePreset = value as DyePreset;
+  }
+
+  private render(): void {
+    const right = isFiberReference(this.rightSelect?.value) ? this.rightSelect.value : 'suspectCotton';
+    const focus = Number(this.focusInput?.value ?? 62);
+    const polarizationDegrees = normalizeDegrees(Number(this.polarizerInput?.value ?? 45));
+    this.updateBuilderFromInputs();
+
+    const leftProfile = this.model.createQuestionedFiber(this.builder);
+    const result = this.model.compare({ left: leftProfile, right, focus, polarizationDegrees });
+
+    this.renderVisuals(result, focus, polarizationDegrees);
+    this.renderReadout(result, right, leftProfile);
+    this.saveState();
+  }
+
+  private updateBuilderFromInputs(): void {
+    this.builder.diameterMicrons = Number(this.diameterInput?.value ?? this.builder.diameterMicrons);
+    this.builder.birefringence = Number((Number(this.birefringenceInput?.value ?? 32) / 1000).toFixed(3));
+  }
+
+  private renderVisuals(result: Result, focus: number, polarizationDegrees: number): void {
+    if (this.canvas && this.context) {
+      drawMicroscopeScene({ context: this.context, canvas: this.canvas, left: result.left, right: result.right, focus, polarizationDegrees });
+    }
+    if (this.chart) this.chart.innerHTML = buildSpectrumChartMarkup(this.ui, result.left, result.right);
+  }
+
+  private renderReadout(result: Result, right: FiberReference, leftProfile: ReturnType<FiberComparisonMicroscope['createQuestionedFiber']>): void {
+    this.setText('fiber-left-label', this.ui.customQuestionedLabel ?? 'Questioned case fiber');
+    this.setText('fiber-right-label', this.label(right));
+    this.setText('fiber-left-choice', this.ui.customQuestionedLabel ?? 'Questioned case fiber');
+    this.setText('fiber-left-summary', this.questionedSummary());
+    this.setText('fiber-right-choice', this.label(right));
+    this.updateChoiceState(right);
+    this.updateBuilderState();
+    this.setText('fiber-diameter-label', `${leftProfile.diameterMicrons} \u00b5m`);
+    this.setText('fiber-birefringence-label', leftProfile.birefringence.toFixed(3));
+    this.setText('fiber-focus-label', `${Math.round(result.visualSharpness)}%`);
+    this.setText('fiber-polar-label', `${normalizeDegrees(Number(this.polarizerInput?.value ?? 45))}\u00b0`);
+    this.setText('fiber-combined-score', `${result.combinedScore}%`);
+    this.setText('fiber-verdict-score', `${result.combinedScore}%`);
+    this.setText('fiber-morphology-score', `${result.morphologyScore}%`);
+    this.setText('fiber-spectrum-score', `${result.spectrumScore}%`);
+    this.setText('fiber-birefringence', result.birefringenceContrast.toFixed(3));
+    this.setText('fiber-verdict', this.ui[result.verdictKey] ?? result.verdictKey);
+    this.updateVerdict(result);
+  }
+
+  private label(id: FiberReference): string {
+    return this.ui[id] ?? id;
+  }
+
+  private questionedSummary(): string {
+    const material = this.ui[`material${this.builder.material}`] ?? this.builder.material;
+    const dye = this.ui[`dye${this.builder.dyePreset}`] ?? this.builder.dyePreset;
+    return `${material} / ${this.builder.diameterMicrons} \u00b5m / ${this.builder.twist} / ${dye}`;
+  }
+
+  private setText(id: string, value: string): void {
+    const element = byId(id);
+    if (element) element.textContent = value;
+  }
+
+  private updateChoiceState(right: FiberReference): void {
+    document.querySelectorAll<HTMLButtonElement>('[data-fiber-choice]').forEach((button) => {
+      button.setAttribute('aria-selected', button.dataset.fiberValue === right ? 'true' : 'false');
+    });
+  }
+
+  private updateBuilderState(): void {
+    document.querySelectorAll<HTMLButtonElement>('[data-fiber-builder]').forEach((button) => {
+      const key = button.dataset.fiberBuilder;
+      const value = button.dataset.builderValue;
+      const active = (key === 'material' && value === this.builder.material)
+        || (key === 'twist' && value === this.builder.twist)
+        || (key === 'dyePreset' && value === this.builder.dyePreset);
+      button.dataset.active = active ? 'true' : 'false';
+    });
+  }
+
+  private updateVerdict(result: Result): void {
+    const panel = byId<HTMLElement>('fiber-verdict-panel');
+    const meter = byId<HTMLElement>('fiber-verdict-meter');
+    const statusKey = this.statusKey(result.verdictKey);
+    const state = this.verdictState(result.verdictKey);
+    this.setText('fiber-verdict-status', this.ui[statusKey] ?? statusKey);
+    if (meter) meter.style.width = `${result.combinedScore}%`;
+    if (!panel) return;
+    panel.dataset.verdict = state;
+    panel.classList.remove('is-updating');
+    void panel.offsetWidth;
+    panel.classList.add('is-updating');
+  }
+
+  private statusKey(verdictKey: Result['verdictKey']): string {
+    if (verdictKey === 'verdictStrong') return 'statusStrong';
+    if (verdictKey === 'verdictPartial') return 'statusPartial';
+    return 'statusDifferent';
+  }
+
+  private verdictState(verdictKey: Result['verdictKey']): string {
+    if (verdictKey === 'verdictStrong') return 'strong';
+    if (verdictKey === 'verdictPartial') return 'partial';
+    return 'different';
+  }
+}

package/src/tool/forensic-glass-becke-line-simulator/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-glass-becke-line-simulator/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'ASTM E1967 - Standard Test Method for the Automated Determination of Refractive Index of Glass Samples Using the Oil Immersion Method.',
+    url: 'https://store.astm.org/e1967-11a.html',
+  },
+  {
+    name: 'Forensic Examination of Glass and Paint Evidence.',
+    url: 'https://www.justice.gov/archives/olp/file/861916/dl?inline=',
+  },
+  {
+    name: 'Forensic Science Communications. Glass Evidence: Interpretation and Significance.',
+    url: 'https://archives.fbi.gov/archives/about-us/lab/forensic-science-communications/fsc/july2004/research/2004_03_research01.htm',
+  },
+];

package/src/tool/forensic-glass-becke-line-simulator/component.astro

@@ -0,0 +1,81 @@
+---
+import './forensic-glass-becke-line-simulator.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<section class="becke-shell" data-becke-tool>
+  <div class="becke-scope">
+    <div class="becke-viewer" aria-label={ui.viewerAria}>
+      <canvas id="becke-canvas" width="720" height="540"></canvas>
+      <div class="becke-reticle" aria-hidden="true"></div>
+      <div class="becke-material-chip" id="becke-material-chip">{ui.sodaLime}</div>
+      <div class="becke-badge">
+        <span>{ui.matchMeter}</span>
+        <strong id="becke-match">-</strong>
+      </div>
+    </div>
+
+    <aside class="becke-controls">
+      <div class="becke-unit-toggle" role="group" aria-label={ui.units}>
+        <button type="button" data-becke-unit="metric" data-active="true">{ui.metric}</button>
+        <button type="button" data-becke-unit="imperial" data-active="false">{ui.imperial}</button>
+      </div>
+
+      <div class="becke-field becke-choice" data-becke-choice>
+        <span>{ui.glassSample}</span>
+        <button id="becke-glass-trigger" class="becke-choice-trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
+          <span id="becke-glass-label">{ui.sodaLime}</span>
+          <span class="becke-choice-icon" aria-hidden="true"></span>
+        </button>
+        <div class="becke-choice-menu" id="becke-glass-menu" role="listbox" aria-label={ui.glassSample}>
+          <button type="button" role="option" data-becke-glass="sodaLime" aria-selected="true">{ui.sodaLime}</button>
+          <button type="button" role="option" data-becke-glass="borosilicate" aria-selected="false">{ui.borosilicate}</button>
+          <button type="button" role="option" data-becke-glass="leadCrystal" aria-selected="false">{ui.leadCrystal}</button>
+          <button type="button" role="option" data-becke-glass="tempered" aria-selected="false">{ui.tempered}</button>
+        </div>
+      </div>
+
+      <label class="becke-slider becke-heat">
+        <span>{ui.stageTemperature}</span>
+        <strong id="becke-temperature-label">-</strong>
+        <input id="becke-temperature" type="range" min="15" max="145" value="96" step="0.5" />
+      </label>
+
+      <div class="becke-focus" role="group" aria-label={ui.focusDirection}>
+        <button type="button" data-becke-focus="raised" data-active="true">{ui.focusRaised}</button>
+        <button type="button" data-becke-focus="lowered" data-active="false">{ui.focusLowered}</button>
+      </div>
+
+      <div class="becke-readouts">
+        <div>
+          <span>{ui.liquidRi}</span>
+          <strong id="becke-liquid-ri">-</strong>
+        </div>
+        <div>
+          <span>{ui.glassRi}</span>
+          <strong id="becke-glass-ri">-</strong>
+        </div>
+        <div>
+          <span>{ui.deltaRi}</span>
+          <strong id="becke-delta-ri">-</strong>
+        </div>
+      </div>
+
+      <p class="becke-interpretation" id="becke-interpretation">-</p>
+    </aside>
+
+    <p class="becke-disclaimer">{ui.disclaimer}</p>
+  </div>
+</section>
+
+<script id="becke-ui" type="application/json" set:html={JSON.stringify(ui)}></script>
+<script>
+  import { initBeckeLineSimulator } from './view';
+
+  initBeckeLineSimulator(JSON.parse(document.getElementById('becke-ui')?.textContent || '{}'));
+</script>