@jjlmoya/utils-motor 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-motor",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -1,12 +1,13 @@
 import type { MotorCategoryEntry, MotorToolEntry } from '../types';
 import { brakingDistanceCalculator } from '../tool/brakingDistanceCalculator/entry';
 import { carMotorcycleGearRatioCalculator } from '../tool/carMotorcycleGearRatioCalculator/entry';
+import { motorcycleSkidMarkSpeedEstimator } from '../tool/motorcycleSkidMarkSpeedEstimator/entry';
 import { realFuelConsumptionCalculator } from '../tool/realFuelConsumptionCalculator/entry';
 import { tirePressureConverter } from '../tool/tirePressureConverter/entry';
 
 export const motorCategory: MotorCategoryEntry = {
   icon: 'mdi:car-cog',
-  tools: [brakingDistanceCalculator, realFuelConsumptionCalculator, carMotorcycleGearRatioCalculator, tirePressureConverter] as unknown as MotorToolEntry<Record<string, string>>[],
+  tools: [brakingDistanceCalculator, realFuelConsumptionCalculator, carMotorcycleGearRatioCalculator, tirePressureConverter, motorcycleSkidMarkSpeedEstimator] as unknown as MotorToolEntry<Record<string, string>>[],
   i18n: {
     es: () => import('./i18n/es').then((module) => module.content),
     en: () => import('./i18n/en').then((module) => module.content),

package/src/entries.ts

@@ -2,6 +2,8 @@ export { brakingDistanceCalculator } from './tool/brakingDistanceCalculator/entr
 export type { BrakingDistanceCalculatorLocaleContent } from './tool/brakingDistanceCalculator/entry';
 export { carMotorcycleGearRatioCalculator } from './tool/carMotorcycleGearRatioCalculator/entry';
 export type { CarMotorcycleGearRatioCalculatorLocaleContent } from './tool/carMotorcycleGearRatioCalculator/entry';
+export { motorcycleSkidMarkSpeedEstimator } from './tool/motorcycleSkidMarkSpeedEstimator/entry';
+export type { MotorcycleSkidMarkSpeedEstimatorLocaleContent } from './tool/motorcycleSkidMarkSpeedEstimator/entry';
 export { realFuelConsumptionCalculator } from './tool/realFuelConsumptionCalculator/entry';
 export type { RealFuelConsumptionCalculatorLocaleContent } from './tool/realFuelConsumptionCalculator/entry';
 export { tirePressureConverter } from './tool/tirePressureConverter/entry';
@@ -10,7 +12,8 @@ export { motorCategory } from './category';
 
 import { brakingDistanceCalculator } from './tool/brakingDistanceCalculator/entry';
 import { carMotorcycleGearRatioCalculator } from './tool/carMotorcycleGearRatioCalculator/entry';
+import { motorcycleSkidMarkSpeedEstimator } from './tool/motorcycleSkidMarkSpeedEstimator/entry';
 import { realFuelConsumptionCalculator } from './tool/realFuelConsumptionCalculator/entry';
 import { tirePressureConverter } from './tool/tirePressureConverter/entry';
 
-export const ALL_ENTRIES = [brakingDistanceCalculator, realFuelConsumptionCalculator, carMotorcycleGearRatioCalculator, tirePressureConverter];
+export const ALL_ENTRIES = [brakingDistanceCalculator, realFuelConsumptionCalculator, carMotorcycleGearRatioCalculator, tirePressureConverter, motorcycleSkidMarkSpeedEstimator];

package/src/index.ts

@@ -36,3 +36,8 @@ export type {
   TirePressureConverterUI,
   TirePressureConverterLocaleContent,
 } from './tool/tirePressureConverter';
+export { MOTORCYCLE_SKID_MARK_SPEED_ESTIMATOR_TOOL, motorcycleSkidMarkSpeedEstimator } from './tool/motorcycleSkidMarkSpeedEstimator';
+export type {
+  MotorcycleSkidMarkSpeedEstimatorUI,
+  MotorcycleSkidMarkSpeedEstimatorLocaleContent,
+} from './tool/motorcycleSkidMarkSpeedEstimator';

package/src/tests/locale_completeness.test.ts

@@ -4,7 +4,7 @@ import type { ToolLocaleContent } from '../types';
 
 describe('Locale Completeness and Slug Validation', () => {
   it('all tools registered in ALL_TOOLS', () => {
-    expect(ALL_TOOLS.length).toBe(4);
+    expect(ALL_TOOLS.length).toBe(5);
   });
 
   ALL_TOOLS.forEach((tool) => {

package/src/tests/tool_validation.test.ts

@@ -5,7 +5,7 @@ import { motorCategory } from '../data';
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
     it('should have tools registered in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(4);
+      expect(ALL_TOOLS.length).toBe(5);
     });
 
     it('motorCategory should be defined', () => {

package/src/tool/motorcycleSkidMarkSpeedEstimator/bibliography.astro

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

package/src/tool/motorcycleSkidMarkSpeedEstimator/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliographyEntries: BibliographyEntry[] = [
+  {
+    name: '49 CFR 571.122 Motorcycle brake systems, including independent front and rear controls, wheel lock, and peak braking coefficient test surfaces',
+    url: 'https://www.ecfr.gov/current/title-49/subtitle-B/chapter-V/part-571/subpart-B/section-571.122',
+  },
+  {
+    name: 'FHWA Technical Advisory T 5040.38 Pavement Friction Management, locked-wheel method as the analog of emergency braking without ABS',
+    url: 'https://www.fhwa.dot.gov/pavement/t504038.cfm',
+  },
+];

package/src/tool/motorcycleSkidMarkSpeedEstimator/component.astro

@@ -0,0 +1,166 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="trace" data-trace-root data-surface="dry-asphalt" data-unit="metric" data-brake="both" data-eval="ready">
+  <div class="trace-card">
+    <div class="trace-header">
+      <div class="trace-control-group">
+        <span class="trace-label-sm">{ui.unitMetric} / {ui.unitImperial}</span>
+        <div class="trace-segmented" role="group" aria-label={ui.unitMetric}>
+          <button type="button" class="trace-pill" data-unit-choice="metric">
+            <span class="trace-pill-title">{ui.unitMetric}</span>
+            <span class="trace-pill-unit">{ui.stencilUnitKmh}</span>
+          </button>
+          <button type="button" class="trace-pill" data-unit-choice="imperial">
+            <span class="trace-pill-title">{ui.unitImperial}</span>
+            <span class="trace-pill-unit">{ui.stencilUnitMph}</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="trace-control-group trace-length-group">
+        <label class="trace-length-input-box">
+          <span class="trace-input-label">{ui.lengthLabel}</span>
+          <div class="trace-input-wrapper">
+            <input data-trace-length type="number" min="1" step="0.1" inputmode="decimal" class="trace-numeric-input" />
+            <b class="trace-unit-badge" data-length-unit>{ui.lengthUnitM}</b>
+          </div>
+        </label>
+      </div>
+
+      <div class="trace-control-group">
+        <span class="trace-label-sm">{ui.brakeLabel}</span>
+        <div class="trace-segmented" role="group" aria-label={ui.brakeLabel}>
+          <button type="button" class="trace-pill" data-brake-choice="rear">{ui.brakeRear}</button>
+          <button type="button" class="trace-pill" data-brake-choice="front">{ui.brakeFront}</button>
+          <button type="button" class="trace-pill" data-brake-choice="both">{ui.brakeBoth}</button>
+          <button type="button" class="trace-pill" data-brake-choice="unknown">{ui.brakeUnknown}</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="trace-canvas-container" data-trace-road>
+      <div class="trace-hud-overlay">
+        <div class="trace-hud-badge">
+          <span class="trace-hud-caption">{ui.speedLabel}</span>
+          <div class="trace-hud-speed" data-trace-speed>56.6 km/h</div>
+          <div class="trace-hud-range" data-trace-range>51.2 to 62.0 km/h</div>
+        </div>
+      </div>
+
+      <svg class="trace-svg" viewBox="0 0 1000 340" role="img" aria-label={ui.speedLabel}>
+        <defs>
+          <pattern id="trace-grit" width="24" height="24" patternUnits="userSpaceOnUse">
+            <rect width="24" height="24" class="trace-fill-road"></rect>
+            <circle cx="4" cy="6" r="1.5" class="trace-fill-grit" opacity="0.4"></circle>
+            <circle cx="16" cy="18" r="1.2" class="trace-fill-grit" opacity="0.3"></circle>
+            <circle cx="11" cy="4" r="1" class="trace-fill-grit" opacity="0.5"></circle>
+            <circle cx="20" cy="9" r="1.6" class="trace-fill-grit" opacity="0.35"></circle>
+          </pattern>
+          <linearGradient id="trace-road-shade" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#000000" stop-opacity="0.35"></stop>
+            <stop offset="50%" stop-color="#000000" stop-opacity="0"></stop>
+            <stop offset="100%" stop-color="#000000" stop-opacity="0.4"></stop>
+          </linearGradient>
+        </defs>
+
+        <rect class="trace-pavement" x="0" y="0" width="1000" height="340" fill="url(#trace-grit)"></rect>
+        <rect class="trace-pavement-shade" x="0" y="0" width="1000" height="340" fill="url(#trace-road-shade)"></rect>
+        <path class="trace-lane" d="M20 188 H980"></path>
+
+        <path class="trace-scar-line trace-scar-rear" pathLength="1" d="M188 248 C 400 242 640 234 940 224"></path>
+        <path class="trace-scar-line trace-scar-front" pathLength="1" d="M300 236 C 500 230 720 224 940 216"></path>
+        <path class="trace-stria" pathLength="1" d="M190 244 C 400 238 640 230 930 220"></path>
+        <path class="trace-stria" pathLength="1" d="M190 252 C 400 246 640 238 930 228"></path>
+
+        <g class="trace-machine">
+          <circle class="trace-tyre" cx="150" cy="210" r="40"></circle>
+          <circle class="trace-tyre" cx="278" cy="204" r="38"></circle>
+          <circle class="trace-hub" cx="150" cy="210" r="14"></circle>
+          <circle class="trace-hub" cx="278" cy="204" r="13"></circle>
+          <circle class="trace-rotor trace-rotor-rear" cx="150" cy="210" r="22" data-brake-choice="rear"></circle>
+          <circle class="trace-rotor trace-rotor-front" cx="278" cy="204" r="21" data-brake-choice="front"></circle>
+          <path class="trace-swing" d="M150 210 L214 194 L278 204"></path>
+          <path class="trace-body" d="M168 194 C 186 164 230 152 262 170 L 270 186 L 214 194 L 176 202 Z"></path>
+          <path class="trace-saddle" d="M176 180 C 164 172 150 176 144 188 L 168 194 Z"></path>
+          <path class="trace-bars" d="M262 170 L 286 156 L 298 158"></path>
+          <path class="trace-pipe" d="M188 202 C 210 216 240 218 268 210"></path>
+          <circle class="trace-head" cx="248" cy="146" r="11"></circle>
+          <path class="trace-rider" d="M248 156 L 232 184 L 200 194 L 226 172 L 258 182"></path>
+        </g>
+      </svg>
+    </div>
+
+    <div class="trace-controls-bottom">
+      <div class="trace-surfaces-section">
+        <h4 class="trace-section-title">{ui.surfaceLabel}</h4>
+        <div class="trace-surface-grid" role="group" aria-label={ui.surfaceLabel}>
+          <button type="button" class="trace-surface-chip" data-surface-choice="dry-asphalt" data-tone="dry">
+            <span class="trace-surface-dot"></span>
+            <span>{ui.surfaceDryAsphalt}</span>
+          </button>
+          <button type="button" class="trace-surface-chip" data-surface-choice="wet-asphalt" data-tone="wet">
+            <span class="trace-surface-dot"></span>
+            <span>{ui.surfaceWetAsphalt}</span>
+          </button>
+          <button type="button" class="trace-surface-chip" data-surface-choice="dry-concrete" data-tone="concrete">
+            <span class="trace-surface-dot"></span>
+            <span>{ui.surfaceDryConcrete}</span>
+          </button>
+          <button type="button" class="trace-surface-chip" data-surface-choice="gravel" data-tone="gravel">
+            <span class="trace-surface-dot"></span>
+            <span>{ui.surfaceGravel}</span>
+          </button>
+          <button type="button" class="trace-surface-chip" data-surface-choice="grass" data-tone="earth">
+            <span class="trace-surface-dot"></span>
+            <span>{ui.surfaceGrass}</span>
+          </button>
+          <button type="button" class="trace-surface-chip" data-surface-choice="ice" data-tone="ice">
+            <span class="trace-surface-dot"></span>
+            <span>{ui.surfaceIce}</span>
+          </button>
+          <button type="button" class="trace-surface-chip" data-surface-choice="custom" data-tone="steel">
+            <span class="trace-surface-dot"></span>
+            <span>{ui.surfaceCustom}</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="trace-sliders-section">
+        <div class="trace-slider-card">
+          <div class="trace-slider-header">
+            <span class="trace-slider-title">{ui.frictionLabel}</span>
+            <div class="trace-slider-number-box">
+              <input data-trace-friction-number type="number" min="0.05" max="1.2" step="0.01" inputmode="decimal" class="trace-small-input" aria-label={ui.frictionLabel} />
+            </div>
+          </div>
+          <input data-trace-friction type="range" min="0.05" max="1.2" step="0.01" value="0.70" class="trace-range-slider" aria-label={ui.frictionLabel} />
+        </div>
+
+        <div class="trace-slider-card">
+          <div class="trace-slider-header">
+            <span class="trace-slider-title">{ui.gradeLabel}</span>
+            <span class="trace-slider-val-badge" data-grade-value>0%</span>
+          </div>
+          <input data-trace-grade type="range" min="-20" max="20" step="1" value="0" class="trace-range-slider" aria-label={ui.gradeLabel} />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script is:inline type="application/json" data-trace-ui set:html={JSON.stringify(ui)}></script>
+<script>
+  import { mountSkidEstimator } from './controller';
+
+  const root = document.querySelector('[data-trace-root]');
+  const payload = document.querySelector('[data-trace-ui]');
+  if (root instanceof HTMLElement && payload?.textContent) {
+    mountSkidEstimator(root, JSON.parse(payload.textContent));
+  }
+</script>

package/src/tool/motorcycleSkidMarkSpeedEstimator/controller.ts

@@ -0,0 +1,207 @@
+import { applyScene, buildSceneView, formatFriction, formatGrade, formatLength, lengthUnit } from './dom-views';
+import { evaluateSkid } from './evaluator';
+import {
+  clamp,
+  estimateSkidSpeed,
+  getSurfaceSpec,
+  isBrakeUse,
+  isSurfaceId,
+  isUnitSystem,
+  lengthToMeters,
+  MAX_FRICTION,
+  MAX_GRADE,
+  MAX_LENGTH_M,
+  MIN_FRICTION,
+  MIN_GRADE,
+  MIN_LENGTH_M,
+  parsePositiveNumber,
+  parseSignedNumber,
+  type BrakeUse,
+  type SkidInput,
+  type SurfaceId,
+  type UnitSystem,
+} from './logic';
+import { loadSkidState, saveSkidState } from './storage';
+
+type SkidUI = Record<string, string>;
+
+interface SkidState {
+  lengthMeters: number;
+  unit: UnitSystem;
+  surface: SurfaceId;
+  friction: number;
+  gradePercent: number;
+  brakeUse: BrakeUse;
+}
+
+const DEFAULT_STATE: SkidState = {
+  lengthMeters: 18,
+  unit: 'metric',
+  surface: 'dry-asphalt',
+  friction: 0.7,
+  gradePercent: 0,
+  brakeUse: 'both',
+};
+
+function toInput(state: SkidState): SkidInput {
+  return {
+    lengthMeters: state.lengthMeters,
+    friction: state.friction,
+    gradePercent: state.gradePercent,
+    surface: state.surface,
+    brakeUse: state.brakeUse,
+  };
+}
+
+function restoreState(): SkidState {
+  const saved = loadSkidState();
+  return saved ? { ...DEFAULT_STATE, ...saved } : { ...DEFAULT_STATE };
+}
+
+function queryEl(root: HTMLElement, selector: string): HTMLElement | null {
+  return root.querySelector(selector);
+}
+
+function queryInput(root: HTMLElement, selector: string): HTMLInputElement | null {
+  return root.querySelector(selector);
+}
+
+function bindHandle(root: HTMLElement, state: SkidState, ui: SkidUI): void {
+  const road = queryEl(root, '[data-trace-road]');
+  if (!road) return;
+  const move = (event: PointerEvent) => {
+    const box = road.getBoundingClientRect();
+    if (box.width <= 0) return;
+    const ratio = clamp((event.clientX - box.left) / box.width, 0.18, 0.92);
+    const meters = MIN_LENGTH_M + ((ratio - 0.18) / 0.74) * (MAX_LENGTH_M - MIN_LENGTH_M);
+    state.lengthMeters = clamp(meters, MIN_LENGTH_M, MAX_LENGTH_M);
+    render(root, state, ui);
+  };
+  road.addEventListener('pointerdown', (event) => {
+    const target = event.target;
+    if (target instanceof Element && target.closest('button, label, input, [data-brake-choice]')) return;
+    road.setPointerCapture(event.pointerId);
+    move(event);
+  });
+  road.addEventListener('pointermove', (event) => {
+    if (!road.hasPointerCapture(event.pointerId)) return;
+    move(event);
+  });
+}
+
+function markChoice(root: HTMLElement, attr: string, value: string, on: string): void {
+  root.querySelectorAll(`[${attr}]`).forEach((node) => {
+    node.classList.toggle(on, node.getAttribute(attr) === value);
+  });
+}
+
+function syncFields(root: HTMLElement, state: SkidState, ui: SkidUI): void {
+  const length = queryInput(root, '[data-trace-length]');
+  const grade = queryInput(root, '[data-trace-grade]');
+  const friction = queryInput(root, '[data-trace-friction]');
+  const frictionNumber = queryInput(root, '[data-trace-friction-number]');
+  const lengthUnitNode = queryEl(root, '[data-length-unit]');
+  const gradeValue = queryEl(root, '[data-grade-value]');
+  if (length) length.value = formatLength(state.lengthMeters, state.unit);
+  if (grade) grade.value = String(state.gradePercent);
+  if (friction) friction.value = formatFriction(state.friction);
+  if (frictionNumber) frictionNumber.value = formatFriction(state.friction);
+  if (lengthUnitNode) lengthUnitNode.textContent = lengthUnit(ui, state.unit);
+  if (gradeValue) gradeValue.textContent = `${formatGrade(state.gradePercent)}${ui.percentSuffix ?? '%'}`;
+  root.dataset.unit = state.unit;
+  root.dataset.brake = state.brakeUse;
+  markChoice(root, 'data-unit-choice', state.unit, 'is-stencil');
+  markChoice(root, 'data-surface-choice', state.surface, 'is-core');
+  markChoice(root, 'data-brake-choice', state.brakeUse, 'is-lock');
+}
+
+function render(root: HTMLElement, state: SkidState, ui: SkidUI): void {
+  const input = toInput(state);
+  root.dataset.eval = evaluateSkid(input);
+  applyScene(root, buildSceneView(input, estimateSkidSpeed(input), state.unit, ui));
+  syncFields(root, state, ui);
+  saveSkidState(state);
+}
+
+function onLengthInput(state: SkidState, raw: string): void {
+  const parsed = parsePositiveNumber(raw);
+  if (parsed === null) return;
+  state.lengthMeters = clamp(lengthToMeters(parsed, state.unit), MIN_LENGTH_M, MAX_LENGTH_M);
+}
+
+function onGradeInput(state: SkidState, raw: string): void {
+  const parsed = parseSignedNumber(raw);
+  if (parsed === null) return;
+  state.gradePercent = clamp(parsed, MIN_GRADE, MAX_GRADE);
+}
+
+function onFrictionInput(state: SkidState, raw: string): void {
+  const parsed = parsePositiveNumber(raw);
+  if (parsed === null) return;
+  state.friction = clamp(parsed, MIN_FRICTION, MAX_FRICTION);
+  state.surface = 'custom';
+}
+
+function onSurfaceChoice(state: SkidState, raw: string): void {
+  if (!isSurfaceId(raw)) return;
+  state.surface = raw;
+  if (raw === 'custom') return;
+  state.friction = getSurfaceSpec(raw).mu;
+}
+
+function onUnitChoice(state: SkidState, raw: string): void {
+  if (!isUnitSystem(raw)) return;
+  state.unit = raw;
+}
+
+function onBrakeChoice(state: SkidState, raw: string): void {
+  if (!isBrakeUse(raw)) return;
+  state.brakeUse = raw;
+}
+
+function bindClicks(root: HTMLElement, attr: string, apply: (value: string) => void): void {
+  root.querySelectorAll(`[${attr}]`).forEach((node) => {
+    node.addEventListener('click', (event) => {
+      event.stopPropagation();
+      const value = node.getAttribute(attr);
+      if (value) apply(value);
+    });
+  });
+}
+
+function bindNumber(
+  root: HTMLElement,
+  bind: { selector: string; apply: (raw: string) => void; state: SkidState; ui: SkidUI },
+): void {
+  const input = queryInput(root, bind.selector);
+  input?.addEventListener('input', () => {
+    bind.apply(input.value);
+    render(root, bind.state, bind.ui);
+  });
+}
+
+function bindInputs(root: HTMLElement, state: SkidState, ui: SkidUI): void {
+  bindNumber(root, { selector: '[data-trace-length]', apply: (raw) => onLengthInput(state, raw), state, ui });
+  bindNumber(root, { selector: '[data-trace-grade]', apply: (raw) => onGradeInput(state, raw), state, ui });
+  bindNumber(root, { selector: '[data-trace-friction]', apply: (raw) => onFrictionInput(state, raw), state, ui });
+  bindNumber(root, { selector: '[data-trace-friction-number]', apply: (raw) => onFrictionInput(state, raw), state, ui });
+}
+
+export function mountSkidEstimator(root: HTMLElement, ui: SkidUI): void {
+  const state = restoreState();
+  bindInputs(root, state, ui);
+  bindClicks(root, 'data-unit-choice', (value) => {
+    onUnitChoice(state, value);
+    render(root, state, ui);
+  });
+  bindClicks(root, 'data-surface-choice', (value) => {
+    onSurfaceChoice(state, value);
+    render(root, state, ui);
+  });
+  bindClicks(root, 'data-brake-choice', (value) => {
+    onBrakeChoice(state, value);
+    render(root, state, ui);
+  });
+  bindHandle(root, state, ui);
+  render(root, state, ui);
+}

package/src/tool/motorcycleSkidMarkSpeedEstimator/dom-views.ts

@@ -0,0 +1,101 @@
+import {
+  gradeTilt,
+  markRatio,
+  metersToLength,
+  speedFromMps,
+  type SkidEstimate,
+  type SkidInput,
+  type UnitSystem,
+} from './logic';
+
+function uiText(ui: Record<string, string>, key: string): string {
+  return ui[key] ?? '';
+}
+
+export function formatSpeed(mps: number, unit: UnitSystem): string {
+  const value = speedFromMps(mps, unit);
+  return value >= 100 ? value.toFixed(0) : value.toFixed(1);
+}
+
+export function formatLength(meters: number, unit: UnitSystem): string {
+  return metersToLength(meters, unit).toFixed(1);
+}
+
+export function formatFriction(value: number): string {
+  return value.toFixed(2);
+}
+
+export function formatGrade(value: number): string {
+  if (Object.is(value, -0) || value === 0) return '0';
+  return value.toFixed(0);
+}
+
+export function speedUnit(ui: Record<string, string>, unit: UnitSystem): string {
+  return unit === 'imperial' ? uiText(ui, 'stencilUnitMph') : uiText(ui, 'stencilUnitKmh');
+}
+
+export function lengthUnit(ui: Record<string, string>, unit: UnitSystem): string {
+  return unit === 'imperial' ? uiText(ui, 'lengthUnitFt') : uiText(ui, 'lengthUnitM');
+}
+
+export function gradeCaption(gradePercent: number, ui: Record<string, string>): string {
+  if (gradePercent > 0) return uiText(ui, 'gradeUphill');
+  if (gradePercent < 0) return uiText(ui, 'gradeDownhill');
+  return uiText(ui, 'gradeLevel');
+}
+
+export function formatRange(lowMps: number, highMps: number, unit: UnitSystem): string {
+  return `${formatSpeed(lowMps, unit)} to ${formatSpeed(highMps, unit)}`;
+}
+
+export interface SceneView {
+  tilt: number;
+  needle: number;
+  mark: number;
+  surface: string;
+  speedText: string;
+  rangeText: string;
+}
+
+function emptyScene(input: SkidInput, ui: Record<string, string>): SceneView {
+  return {
+    tilt: gradeTilt(input.gradePercent),
+    needle: input.gradePercent * 1.7,
+    mark: markRatio(input.lengthMeters),
+    surface: input.surface,
+    speedText: uiText(ui, 'invalidMessage'),
+    rangeText: '',
+  };
+}
+
+export function buildSceneView(
+  input: SkidInput,
+  estimate: SkidEstimate,
+  unit: UnitSystem,
+  ui: Record<string, string>,
+): SceneView {
+  if (estimate.status === 'invalid' || !estimate.band) return emptyScene(input, ui);
+  const unitLabel = speedUnit(ui, unit);
+  return {
+    tilt: gradeTilt(input.gradePercent),
+    needle: input.gradePercent * 1.7,
+    mark: markRatio(input.lengthMeters),
+    surface: input.surface,
+    speedText: `${formatSpeed(estimate.band.midMps, unit)} ${unitLabel}`,
+    rangeText: `${formatRange(estimate.band.lowMps, estimate.band.highMps, unit)} ${unitLabel}`,
+  };
+}
+
+export function applyScene(root: HTMLElement, view: SceneView): void {
+  root.dataset.surface = view.surface;
+  root.style.setProperty('--trace-tilt', `${view.tilt}deg`);
+  root.style.setProperty('--trace-needle', `${view.needle}deg`);
+  root.style.setProperty('--trace-span', view.mark.toFixed(3));
+  writeText(root, '[data-trace-speed]', view.speedText);
+  writeText(root, '[data-trace-range]', view.rangeText);
+}
+
+function writeText(root: HTMLElement, selector: string, text: string): void {
+  const node = root.querySelector(selector);
+  if (node) node.textContent = text;
+}

package/src/tool/motorcycleSkidMarkSpeedEstimator/entry.ts

@@ -0,0 +1,30 @@
+import type { MotorToolEntry, ToolLocaleContent } from '../../types';
+import type { MotorcycleSkidMarkSpeedEstimatorUI } from './ui';
+
+export type { MotorcycleSkidMarkSpeedEstimatorUI };
+export type MotorcycleSkidMarkSpeedEstimatorLocaleContent = ToolLocaleContent<MotorcycleSkidMarkSpeedEstimatorUI>;
+
+export const motorcycleSkidMarkSpeedEstimator: MotorToolEntry<MotorcycleSkidMarkSpeedEstimatorUI> = {
+  id: 'motorcycle-skid-mark-speed-estimator',
+  icons: {
+    bg: 'mdi:motorbike',
+    fg: 'mdi:road',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((module) => module.content),
+    en: () => import('./i18n/en').then((module) => module.content),
+    es: () => import('./i18n/es').then((module) => module.content),
+    fr: () => import('./i18n/fr').then((module) => module.content),
+    id: () => import('./i18n/id').then((module) => module.content),
+    it: () => import('./i18n/it').then((module) => module.content),
+    ja: () => import('./i18n/ja').then((module) => module.content),
+    ko: () => import('./i18n/ko').then((module) => module.content),
+    nl: () => import('./i18n/nl').then((module) => module.content),
+    pl: () => import('./i18n/pl').then((module) => module.content),
+    pt: () => import('./i18n/pt').then((module) => module.content),
+    ru: () => import('./i18n/ru').then((module) => module.content),
+    sv: () => import('./i18n/sv').then((module) => module.content),
+    tr: () => import('./i18n/tr').then((module) => module.content),
+    zh: () => import('./i18n/zh').then((module) => module.content),
+  },
+};

package/src/tool/motorcycleSkidMarkSpeedEstimator/evaluator.ts

@@ -0,0 +1,7 @@
+import { estimateSkidSpeed, type SkidEstimate, type SkidInput } from './logic';
+
+export type SkidEvaluation = SkidEstimate['status'];
+
+export function evaluateSkid(input: SkidInput): SkidEvaluation {
+  return estimateSkidSpeed(input).status;
+}