@jjlmoya/utils-motor 1.3.0 → 1.5.0

package/src/tool/evChargingTimeCostPlanner/logic.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest';
+import { CHARGING_PRESETS, calculateChargingPlan } from './logic';
+import { evaluateChargingStatus } from './evaluator';
+
+describe('EV charging planner', () => {
+  it('calculates battery energy, grid energy, time, cost, losses, and range', () => {
+    const plan = calculateChargingPlan(CHARGING_PRESETS[0]!.inputs);
+
+    expect(plan.chargeFraction).toBeCloseTo(0.48);
+    expect(plan.batteryEnergyKwh).toBeCloseTo(28.8);
+    expect(plan.gridEnergyKwh).toBeCloseTo(32);
+    expect(plan.lossEnergyKwh).toBeCloseTo(3.2);
+    expect(plan.timeMinutes).toBe(260);
+    expect(plan.cost).toBeCloseTo(8);
+    expect(plan.recoveredRangeKm).toBeCloseTo(160);
+    expect(evaluateChargingStatus(plan)).toBe('long');
+  });
+
+  it('returns no charge when the target is below the starting level', () => {
+    const plan = calculateChargingPlan({ ...CHARGING_PRESETS[0]!.inputs, startSoc: 80, endSoc: 40 });
+
+    expect(plan.chargeFraction).toBe(0);
+    expect(plan.timeMinutes).toBe(0);
+    expect(plan.cost).toBe(0);
+    expect(evaluateChargingStatus(plan)).toBe('empty');
+  });
+
+  it('calculates the recovered range from the exact charge window', () => {
+    const plan = calculateChargingPlan({ ...CHARGING_PRESETS[1]!.inputs, endSoc: 90 });
+
+    expect(plan.batteryEnergyKwh).toBeCloseTo(34.8);
+    expect(plan.gridEnergyKwh).toBeCloseTo(37.8261, 3);
+    expect(plan.recoveredRangeKm).toBeCloseTo(193.3333, 3);
+  });
+
+  it('clamps invalid values to safe calculation bounds', () => {
+    const plan = calculateChargingPlan({
+      capacityKwh: Number.NaN,
+      startSoc: -10,
+      endSoc: 140,
+      chargerPowerKw: 0,
+      efficiency: 0,
+      pricePerKwh: -1,
+      consumptionKwhPer100Km: 0,
+      currency: 'USD',
+    });
+
+    expect(plan.batteryEnergyKwh).toBe(60);
+    expect(plan.gridEnergyKwh).toBe(120);
+    expect(plan.timeMinutes).toBe(72000);
+    expect(plan.cost).toBe(0);
+    expect(plan.recoveredRangeKm).toBe(6000);
+  });
+
+  it('converts the same tariff through the selected currency factor', () => {
+    const euroPlan = calculateChargingPlan({ ...CHARGING_PRESETS[0]!.inputs, currency: 'EUR' });
+    const dollarPlan = calculateChargingPlan({ ...CHARGING_PRESETS[0]!.inputs, currency: 'USD', pricePerKwh: 0.25 * 1.1643 });
+
+    expect(dollarPlan.exchangeFactor).toBeCloseTo(1.1643);
+    expect(dollarPlan.pricePerKwhEur).toBeCloseTo(0.25);
+    expect(dollarPlan.cost).toBeCloseTo(euroPlan.cost * 1.1643);
+  });
+
+  it('classifies short and standard charge windows', () => {
+    const shortPlan = calculateChargingPlan({ ...CHARGING_PRESETS[0]!.inputs, startSoc: 50, endSoc: 52, chargerPowerKw: 100 });
+    const standardPlan = calculateChargingPlan({ ...CHARGING_PRESETS[0]!.inputs, startSoc: 40, endSoc: 60, chargerPowerKw: 7.4 });
+
+    expect(evaluateChargingStatus(shortPlan)).toBe('short');
+    expect(evaluateChargingStatus(standardPlan)).toBe('standard');
+  });
+});

package/src/tool/evChargingTimeCostPlanner/logic.ts

@@ -0,0 +1,174 @@
+export interface CurrencyOption {
+  code: string;
+  symbol: string;
+  name: string;
+  unitsPerEur: number;
+}
+
+export const CURRENCY_OPTIONS = [
+  { code: 'EUR', symbol: '€', name: 'Euro', unitsPerEur: 1 },
+  { code: 'USD', symbol: '$', name: 'US dollar', unitsPerEur: 1.1643 },
+  { code: 'GBP', symbol: '£', name: 'Pound sterling', unitsPerEur: 0.8572 },
+  { code: 'JPY', symbol: '¥', name: 'Japanese yen', unitsPerEur: 185.92 },
+  { code: 'CNY', symbol: 'CN¥', name: 'Chinese yuan', unitsPerEur: 7.8251 },
+  { code: 'INR', symbol: '₹', name: 'Indian rupee', unitsPerEur: 111.0585 },
+  { code: 'BRL', symbol: 'R$', name: 'Brazilian real', unitsPerEur: 6.0126 },
+  { code: 'MXN', symbol: 'MX$', name: 'Mexican peso', unitsPerEur: 19.7327 },
+  { code: 'CAD', symbol: 'CA$', name: 'Canadian dollar', unitsPerEur: 1.613 },
+  { code: 'AUD', symbol: 'A$', name: 'Australian dollar', unitsPerEur: 1.6183 },
+  { code: 'CHF', symbol: 'CHF', name: 'Swiss franc', unitsPerEur: 0.9364 },
+  { code: 'SEK', symbol: 'kr', name: 'Swedish krona', unitsPerEur: 11.0885 },
+  { code: 'PLN', symbol: 'zł', name: 'Polish zloty', unitsPerEur: 4.3365 },
+  { code: 'TRY', symbol: '₺', name: 'Turkish lira', unitsPerEur: 56.1718 },
+  { code: 'KRW', symbol: '₩', name: 'South Korean won', unitsPerEur: 1600.39 },
+  { code: 'IDR', symbol: 'Rp', name: 'Indonesian rupiah', unitsPerEur: 20628.08 },
+] as const;
+
+export type CurrencyCode = typeof CURRENCY_OPTIONS[number]['code'];
+
+export const DEFAULT_CURRENCY: CurrencyCode = 'EUR';
+
+export function isCurrencyCode(value: unknown): value is CurrencyCode {
+  return typeof value === 'string' && CURRENCY_OPTIONS.some((option) => option.code === value);
+}
+
+export function getCurrencyOption(code: CurrencyCode): CurrencyOption {
+  return CURRENCY_OPTIONS.find((option) => option.code === code) ?? CURRENCY_OPTIONS[0]!;
+}
+
+export function convertCurrencyAmount(amount: number, from: CurrencyCode, to: CurrencyCode): number {
+  const fromFactor = getCurrencyOption(from).unitsPerEur;
+  const toFactor = getCurrencyOption(to).unitsPerEur;
+  return (amount / fromFactor) * toFactor;
+}
+
+export function getPriceInputStep(currency: CurrencyCode): number {
+  const factor = getCurrencyOption(currency).unitsPerEur;
+  if (factor >= 1000) return 10;
+  if (factor >= 100) return 1;
+  if (factor >= 10) return 0.1;
+  return 0.01;
+}
+
+export interface ChargingInputs {
+  capacityKwh: number;
+  startSoc: number;
+  endSoc: number;
+  chargerPowerKw: number;
+  efficiency: number;
+  pricePerKwh: number;
+  consumptionKwhPer100Km: number;
+  currency: CurrencyCode;
+}
+
+export interface ChargingPlan {
+  chargeFraction: number;
+  batteryEnergyKwh: number;
+  gridEnergyKwh: number;
+  lossEnergyKwh: number;
+  timeHours: number;
+  timeMinutes: number;
+  cost: number;
+  recoveredRangeKm: number;
+  currency: CurrencyCode;
+  exchangeFactor: number;
+  pricePerKwhEur: number;
+}
+
+export interface ChargingPreset {
+  id: 'home' | 'public' | 'fast';
+  inputs: ChargingInputs;
+}
+
+export const CHARGING_PRESETS: ChargingPreset[] = [
+  {
+    id: 'home',
+    inputs: {
+      capacityKwh: 60,
+      startSoc: 32,
+      endSoc: 80,
+      chargerPowerKw: 7.4,
+      efficiency: 0.9,
+      pricePerKwh: 0.25,
+      consumptionKwhPer100Km: 18,
+      currency: 'EUR',
+    },
+  },
+  {
+    id: 'public',
+    inputs: {
+      capacityKwh: 60,
+      startSoc: 32,
+      endSoc: 80,
+      chargerPowerKw: 11,
+      efficiency: 0.92,
+      pricePerKwh: 0.39,
+      consumptionKwhPer100Km: 18,
+      currency: 'EUR',
+    },
+  },
+  {
+    id: 'fast',
+    inputs: {
+      capacityKwh: 60,
+      startSoc: 32,
+      endSoc: 80,
+      chargerPowerKw: 100,
+      efficiency: 0.94,
+      pricePerKwh: 0.55,
+      consumptionKwhPer100Km: 18,
+      currency: 'EUR',
+    },
+  },
+];
+
+const finiteOr = (value: number, fallback: number): number => (
+  Number.isFinite(value) ? value : fallback
+);
+
+const clamp = (value: number, minimum: number, maximum: number): number => (
+  Math.min(maximum, Math.max(minimum, value))
+);
+
+const safeInputs = (inputs: ChargingInputs): ChargingInputs => ({
+  currency: isCurrencyCode(inputs.currency) ? inputs.currency : DEFAULT_CURRENCY,
+  capacityKwh: clamp(finiteOr(inputs.capacityKwh, 60), 1, 250),
+  startSoc: clamp(finiteOr(inputs.startSoc, 32), 0, 100),
+  endSoc: clamp(finiteOr(inputs.endSoc, 80), 0, 100),
+  chargerPowerKw: clamp(finiteOr(inputs.chargerPowerKw, 7.4), 0.1, 350),
+  efficiency: clamp(finiteOr(inputs.efficiency, 0.9), 0.5, 1),
+  pricePerKwh: clamp(
+    finiteOr(inputs.pricePerKwh, 0.25 * getCurrencyOption(isCurrencyCode(inputs.currency) ? inputs.currency : DEFAULT_CURRENCY).unitsPerEur),
+    0,
+    5 * getCurrencyOption(isCurrencyCode(inputs.currency) ? inputs.currency : DEFAULT_CURRENCY).unitsPerEur,
+  ),
+  consumptionKwhPer100Km: clamp(finiteOr(inputs.consumptionKwhPer100Km, 18), 1, 100),
+});
+
+export function calculateChargingPlan(inputs: ChargingInputs): ChargingPlan {
+  const values = safeInputs(inputs);
+  const chargeFraction = Math.max(0, values.endSoc - values.startSoc) / 100;
+  const batteryEnergyKwh = values.capacityKwh * chargeFraction;
+  const gridEnergyKwh = batteryEnergyKwh / values.efficiency;
+  const lossEnergyKwh = Math.max(0, gridEnergyKwh - batteryEnergyKwh);
+  const timeHours = gridEnergyKwh / values.chargerPowerKw;
+  const timeMinutes = Math.ceil(timeHours * 60);
+  const exchangeFactor = getCurrencyOption(values.currency).unitsPerEur;
+  const pricePerKwhEur = values.pricePerKwh / exchangeFactor;
+  const cost = gridEnergyKwh * pricePerKwhEur * exchangeFactor;
+  const recoveredRangeKm = (batteryEnergyKwh / values.consumptionKwhPer100Km) * 100;
+
+  return {
+    chargeFraction,
+    batteryEnergyKwh,
+    gridEnergyKwh,
+    lossEnergyKwh,
+    timeHours,
+    timeMinutes,
+    cost,
+    recoveredRangeKm,
+    currency: values.currency,
+    exchangeFactor,
+    pricePerKwhEur,
+  };
+}

package/src/tool/evChargingTimeCostPlanner/seo.astro

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

package/src/tool/evChargingTimeCostPlanner/storage.ts

@@ -0,0 +1,27 @@
+import type { ChargingInputs } from './logic';
+
+const STORAGE_KEY = 'jjlmoya-ev-charging-time-cost-planner';
+
+export function loadChargingInputs(): Partial<ChargingInputs> | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const value: unknown = JSON.parse(raw);
+    if (!value || typeof value !== 'object' || Array.isArray(value)) return null;
+    return value as Partial<ChargingInputs>;
+  } catch {
+    return null;
+  }
+}
+
+export function saveChargingInputs(inputs: ChargingInputs): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(inputs));
+  } catch {}
+}
+
+export function clearChargingInputs(): void {
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+  } catch {}
+}

package/src/tool/evChargingTimeCostPlanner/ui.ts

@@ -0,0 +1,50 @@
+export interface EVChargingTimeCostPlannerUI extends Record<string, string> {
+  defaultCurrency: string;
+  currencyLabel: string;
+  currencyHint: string;
+  currencyMenuLabel: string;
+  currencyFactorTemplate: string;
+  presetMetaTemplate: string;
+  presetLabel: string;
+  homePreset: string;
+  publicPreset: string;
+  fastPreset: string;
+  resetLabel: string;
+  setupLabel: string;
+  setupHint: string;
+  chargeWindowLabel: string;
+  chargeWindowHint: string;
+  startSocLabel: string;
+  startSocHint: string;
+  endSocLabel: string;
+  endSocHint: string;
+  capacityLabel: string;
+  capacityHint: string;
+  chargerPowerLabel: string;
+  chargerPowerHint: string;
+  efficiencyLabel: string;
+  efficiencyHint: string;
+  priceLabel: string;
+  priceHint: string;
+  consumptionLabel: string;
+  consumptionHint: string;
+  resultKicker: string;
+  resultTitle: string;
+  batterySceneLabel: string;
+  startingChargeLabel: string;
+  targetChargeLabel: string;
+  batteryEnergyLabel: string;
+  gridEnergyLabel: string;
+  lossesLabel: string;
+  timeLabel: string;
+  costLabel: string;
+  rangeLabel: string;
+  statusEmpty: string;
+  statusShort: string;
+  statusStandard: string;
+  statusLong: string;
+  summaryTemplate: string;
+  formulaLabel: string;
+  formulaText: string;
+  rangeUnit: string;
+}

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>