@jjlmoya/utils-drones 1.35.0 → 1.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-drones",
-    "version": "1.35.0",
+    "version": "1.37.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -7,6 +7,8 @@ import { gsdFlightPlanner } from '../tool/gsd-flight-planner/entry';
 import { droneBatteryCRatingCalculator } from '../tool/drone-battery-c-rating-calculator/entry';
 import { fpvDroneThrustToWeightRatio } from '../tool/fpv-drone-thrust-to-weight-ratio/entry';
 import { droneMotorPropellerCalculator } from '../tool/drone-motor-propeller-calculator/entry';
+import { fpvDroneSpeedCalculator } from '../tool/fpv-drone-speed-calculator/entry';
+import { droneMissionBatteryReservePlanner } from '../tool/drone-mission-battery-reserve-planner/entry';
 
 export const dronesCategory: DronesCategoryEntry = {
   icon: 'mdi:drone',
@@ -19,6 +21,8 @@ export const dronesCategory: DronesCategoryEntry = {
     droneBatteryCRatingCalculator,
     fpvDroneThrustToWeightRatio,
     droneMotorPropellerCalculator,
+    fpvDroneSpeedCalculator,
+    droneMissionBatteryReservePlanner,
   ],
   i18n: {
     es: () => import('./i18n/es').then((m) => m.content),

package/src/entries.ts

@@ -14,6 +14,10 @@ export { fpvDroneThrustToWeightRatio } from './tool/fpv-drone-thrust-to-weight-r
 export type { FpvDroneThrustToWeightRatioUI, FpvDroneThrustToWeightRatioLocaleContent } from './tool/fpv-drone-thrust-to-weight-ratio/entry';
 export { droneMotorPropellerCalculator } from './tool/drone-motor-propeller-calculator/entry';
 export type { DroneMotorPropellerUI, DroneMotorPropellerLocaleContent } from './tool/drone-motor-propeller-calculator/entry';
+export { fpvDroneSpeedCalculator } from './tool/fpv-drone-speed-calculator/entry';
+export type { FpvDroneSpeedUI, FpvDroneSpeedLocaleContent } from './tool/fpv-drone-speed-calculator/entry';
+export { droneMissionBatteryReservePlanner } from './tool/drone-mission-battery-reserve-planner/entry';
+export type { DroneMissionBatteryReservePlannerUI, DroneMissionBatteryReservePlannerLocaleContent } from './tool/drone-mission-battery-reserve-planner/entry';
 export { dronesCategory } from './category';
 
 import { antennaLengthCalculator } from './tool/antenna-length-calculator/entry';
@@ -24,6 +28,8 @@ import { gsdFlightPlanner } from './tool/gsd-flight-planner/entry';
 import { droneBatteryCRatingCalculator } from './tool/drone-battery-c-rating-calculator/entry';
 import { fpvDroneThrustToWeightRatio } from './tool/fpv-drone-thrust-to-weight-ratio/entry';
 import { droneMotorPropellerCalculator } from './tool/drone-motor-propeller-calculator/entry';
+import { fpvDroneSpeedCalculator } from './tool/fpv-drone-speed-calculator/entry';
+import { droneMissionBatteryReservePlanner } from './tool/drone-mission-battery-reserve-planner/entry';
 
 export const ALL_ENTRIES = [
   antennaLengthCalculator,
@@ -34,4 +40,6 @@ export const ALL_ENTRIES = [
   droneBatteryCRatingCalculator,
   fpvDroneThrustToWeightRatio,
   droneMotorPropellerCalculator,
+  fpvDroneSpeedCalculator,
+  droneMissionBatteryReservePlanner,
 ];

package/src/index.ts

@@ -22,3 +22,4 @@ export { GPS_COORDINATES_CONVERTER_TOOL } from './tool/gps-coordinates-converter
 export { DRONE_POWER_ANALYZER_TOOL } from './tool/drone-power-analyzer/index';
 export { GSD_FLIGHT_PLANNER_TOOL } from './tool/gsd-flight-planner/index';
 export { DRONE_MOTOR_PROPELLER_CALCULATOR_TOOL } from './tool/drone-motor-propeller-calculator/index';
+export { FPV_DRONE_SPEED_CALCULATOR_TOOL } from './tool/fpv-drone-speed-calculator/index';

package/src/tests/locale_completeness.test.ts

@@ -17,7 +17,7 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('all 7 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(8);
+  it('all 10 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(10);
   });
 });

package/src/tests/tool_validation.test.ts

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

package/src/tool/drone-mission-battery-reserve-planner/bibliography.astro

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

package/src/tool/drone-mission-battery-reserve-planner/bibliography.ts

@@ -0,0 +1,7 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  { name: 'FAA Remote Pilot Study Guide (sUAS Reserve Standards)', url: 'https://www.faa.gov/regulations_policies/handbooks_manuals/aviation/media/remote_pilot_study_guide.pdf' },
+  { name: 'EASA Easy Access Rules for Unmanned Aircraft Systems', url: 'https://www.easa.europa.eu/en/domains/civil-drones' },
+  { name: 'DGAC France Guide de securite des aeronefs telepilotes', url: 'https://www.ecologie.gouv.fr/drones-aeronefs-telepilotes' },
+];

package/src/tool/drone-mission-battery-reserve-planner/component.astro

@@ -0,0 +1,229 @@
+---
+import type { DroneMissionBatteryReservePlannerUI } from './ui';
+
+interface Props {
+  ui?: DroneMissionBatteryReservePlannerUI;
+  content?: { ui: DroneMissionBatteryReservePlannerUI };
+}
+
+const props = Astro.props;
+const ui: DroneMissionBatteryReservePlannerUI = props.ui || props.content?.ui || ({} as DroneMissionBatteryReservePlannerUI);
+---
+
+<div class="drone-mission-battery-reserve-planner" id="drone-mission-planner-root">
+  <div class="planner-top-bar">
+    <div class="presets-section">
+      <span class="presets-label">{ui.inputs?.presetLabel || 'Quick Mission Presets'}</span>
+      <div class="presets-flex">
+        <button type="button" class="preset-pill" data-preset="mappingSurvey">
+          <span class="preset-name">{ui.presets?.mappingSurvey || 'Mapping Survey'}</span>
+          <span class="preset-meta">6S 10000mAh • 8km • 10m {ui.presets?.surveyMeta || 'survey'}</span>
+        </button>
+        <button type="button" class="preset-pill" data-preset="fpvRecon">
+          <span class="preset-name">{ui.presets?.fpvRecon || 'FPV Recon'}</span>
+          <span class="preset-meta">4S 3000mAh • 6km • 2m {ui.presets?.scoutMeta || 'scout'}</span>
+        </button>
+        <button type="button" class="preset-pill" data-preset="cinematicInspection">
+          <span class="preset-name">{ui.presets?.cinematicInspection || 'Cinematic Inspection'}</span>
+          <span class="preset-meta">4S 5000mAh • 2.5km • 8m {ui.presets?.hoverMeta || 'hover'}</span>
+        </button>
+        <button type="button" class="preset-pill" data-preset="microRecon">
+          <span class="preset-name">{ui.presets?.microRecon || 'Micro Scout'}</span>
+          <span class="preset-meta">2S 850mAh • 1km • 3m {ui.presets?.hoverMeta || 'hover'}</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="unit-switch-group">
+      <button type="button" class="unit-btn active" id="unit-btn-metric">{ui.inputs?.metricLabel || 'Metric'}</button>
+      <button type="button" class="unit-btn" id="unit-btn-imperial">{ui.inputs?.imperialLabel || 'Imperial'}</button>
+    </div>
+  </div>
+
+  <div class="planner-main-grid">
+    <div class="planner-controls-panel">
+      <h3 class="panel-heading">{ui.sections?.batteryPropulsion || '1. Battery & Propulsion'}</h3>
+
+      <div class="control-row">
+        <div class="control-header">
+          <label for="input-capacity">{ui.inputs?.batteryCapacityLabel || 'Battery Capacity'}</label>
+          <div class="control-val-display"><span id="val-disp-capacity">10000</span> mAh</div>
+        </div>
+        <div class="slider-with-number">
+          <input type="range" id="slider-capacity" aria-label="Battery Capacity Slider" min="500" max="30000" step="100" value="10000" class="tactile-slider" />
+          <input type="number" id="input-capacity" value="10000" min="100" max="100000" step="100" class="tactile-number" />
+        </div>
+      </div>
+
+      <div class="control-row">
+        <div class="control-header">
+          <label for="input-voltage">{ui.inputs?.batteryVoltageLabel || 'Nominal Voltage'}</label>
+          <div class="control-val-display"><span id="val-disp-voltage">22.2</span> V</div>
+        </div>
+        <div class="voltage-chips-row">
+          <button type="button" class="voltage-chip" data-v="11.1">3S (11.1V)</button>
+          <button type="button" class="voltage-chip" data-v="14.8">4S (14.8V)</button>
+          <button type="button" class="voltage-chip active" data-v="22.2">6S (22.2V)</button>
+          <button type="button" class="voltage-chip" data-v="44.4">12S (44.4V)</button>
+        </div>
+        <div class="slider-with-number" style="margin-top: 8px;">
+          <input type="range" id="slider-voltage" aria-label="Nominal Voltage Slider" min="3.7" max="60" step="0.1" value="22.2" class="tactile-slider" />
+          <input type="number" id="input-voltage" value="22.2" min="1" max="100" step="0.1" class="tactile-number" />
+        </div>
+      </div>
+
+      <div class="control-row">
+        <div class="control-header">
+          <label for="input-current">{ui.inputs?.averageCurrentLabel || 'Average Hover Cruise Current'}</label>
+          <div class="control-val-display"><span id="val-disp-current">18.0</span> A</div>
+        </div>
+        <div class="slider-with-number">
+          <input type="range" id="slider-current" aria-label="Average Current Slider" min="1" max="100" step="0.5" value="18" class="tactile-slider" />
+          <input type="number" id="input-current" value="18" min="0.1" max="500" step="0.5" class="tactile-number" />
+        </div>
+      </div>
+
+      <h3 class="panel-heading" style="margin-top: 24px;">{ui.sections?.flightAtmosphere || '2. Flight Profile & Atmosphere'}</h3>
+
+      <div class="control-row">
+        <div class="control-header">
+          <label for="input-speed">{ui.inputs?.cruiseSpeedLabel || 'Airspeed Cruise Speed'}</label>
+          <div class="control-val-display"><span id="val-disp-speed">45</span> <span class="unit-label-speed">km/h</span></div>
+        </div>
+        <div class="slider-with-number">
+          <input type="range" id="slider-speed" aria-label="Cruise Speed Slider" min="10" max="150" step="1" value="45" class="tactile-slider" />
+          <input type="number" id="input-speed" value="45" min="1" max="300" step="1" class="tactile-number" />
+        </div>
+      </div>
+
+      <div class="control-row">
+        <div class="control-header">
+          <label for="input-distance">{ui.inputs?.oneWayDistanceLabel || 'One-Way Transit Distance'}</label>
+          <div class="control-val-display"><span id="val-disp-distance">6.0</span> <span class="unit-label-dist">km</span></div>
+        </div>
+        <div class="slider-with-number">
+          <input type="range" id="slider-distance" aria-label="One-Way Distance Slider" min="0.5" max="30" step="0.5" value="6" class="tactile-slider" />
+          <input type="number" id="input-distance" value="6" min="0.1" max="200" step="0.5" class="tactile-number" />
+        </div>
+      </div>
+
+      <div class="control-row">
+        <div class="control-header">
+          <label for="input-target-hover">{ui.inputs?.targetHoverTimeLabel || 'Target Area Operational Duration'}</label>
+          <div class="control-val-display"><span id="val-disp-target-hover">5.0</span> min</div>
+        </div>
+        <div class="slider-with-number">
+          <input type="range" id="slider-target-hover" aria-label="Target Hover Duration Slider" min="0" max="30" step="0.5" value="5" class="tactile-slider" />
+          <input type="number" id="input-target-hover" value="5" min="0" max="120" step="0.5" class="tactile-number" />
+        </div>
+      </div>
+
+      <div class="control-row">
+        <div class="control-header">
+          <label for="input-wind-speed">{ui.inputs?.windSpeedLabel || 'Ambient Wind Speed'}</label>
+          <div class="control-val-display"><span id="val-disp-wind">12</span> <span class="unit-label-speed">km/h</span></div>
+        </div>
+        <div class="slider-with-number">
+          <input type="range" id="slider-wind-speed" aria-label="Wind Speed Slider" min="0" max="60" step="1" value="12" class="tactile-slider" />
+          <input type="number" id="input-wind-speed" value="12" min="0" max="120" step="1" class="tactile-number" />
+        </div>
+      </div>
+
+      <div class="control-row">
+        <label>{ui.inputs?.windDirectionLabel || 'Wind Heading Relative to Outbound'}</label>
+        <div class="wind-dir-segmented">
+          <button type="button" class="wind-seg-btn active" data-dir="headwind">
+            <span class="wind-tag font-mono">HEAD</span>
+            <span>{ui.inputs?.windHeadwindLabel || 'Headwind Outbound'}</span>
+          </button>
+          <button type="button" class="wind-seg-btn" data-dir="tailwind">
+            <span class="wind-tag font-mono">TAIL</span>
+            <span>{ui.inputs?.windTailwindLabel || 'Tailwind Outbound'}</span>
+          </button>
+          <button type="button" class="wind-seg-btn" data-dir="crosswind">
+            <span class="wind-tag font-mono">CROSS</span>
+            <span>{ui.inputs?.windCrosswindLabel || 'Crosswind'}</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="control-row">
+        <div class="control-header">
+          <label for="input-reserve">{ui.inputs?.reservePolicyLabel || 'Safety Reserve Buffer'}</label>
+          <div class="control-val-display"><span id="val-disp-reserve">20</span>%</div>
+        </div>
+        <div class="slider-with-number">
+          <input type="range" id="slider-reserve" aria-label="Safety Reserve Buffer Slider" min="10" max="40" step="1" value="20" class="tactile-slider" />
+          <input type="number" id="input-reserve" value="20" min="5" max="50" step="1" class="tactile-number" />
+        </div>
+      </div>
+    </div>
+
+    <div class="planner-telemetry-panel">
+      <div id="res-status-banner" class="status-banner status-banner-optimal">
+        <div class="status-icon-dot"></div>
+        <div class="status-banner-text">
+          <span class="status-banner-title" id="res-status-title">{ui.statusBadges?.optimalTitle || 'OPTIMAL ENERGY RESERVE MARGIN'}</span>
+          <span class="status-banner-subtitle" id="res-status-subtitle">{ui.statusBadges?.optimalSubtitle || 'Safe flight envelope with sufficient landing reserve margin'}</span>
+        </div>
+      </div>
+
+      <div class="telemetry-artwork-box" id="res-svg-wrapper"></div>
+
+      <div class="metrics-grid">
+        <div class="metric-card">
+          <span class="metric-label">{ui.results?.totalAutonomyTime || 'Total Autonomy'}</span>
+          <span class="metric-value" id="res-autonomy">24.0 min</span>
+          <span class="metric-sub font-mono" id="res-sag-loss">Voltage sag: -11.1 Wh</span>
+        </div>
+
+        <div class="metric-card highlight-card">
+          <span class="metric-label">{ui.results?.maxSafeMissionRadius || 'Point of No Return'}</span>
+          <span class="metric-value" id="res-max-radius">12.5 km</span>
+          <span class="metric-sub">{ui.results?.maxRadiusSubLabel || 'Max safe radius w/ target hover'}</span>
+        </div>
+
+        <div class="metric-card">
+          <span class="metric-label">{ui.results?.outboundLegTime || 'Outbound Duration'}</span>
+          <span class="metric-value" id="res-outbound-time">10.9 min</span>
+          <span class="metric-sub" id="res-outbound-power">Power: 472 W</span>
+        </div>
+
+        <div class="metric-card">
+          <span class="metric-label">{ui.results?.returnLegTime || 'Return Duration'}</span>
+          <span class="metric-value" id="res-return-time">7.6 min</span>
+          <span class="metric-sub" id="res-return-power">Power: 360 W</span>
+        </div>
+      </div>
+
+      <div class="touchdown-energy-card">
+        <div class="touchdown-info">
+          <span class="touchdown-title">{ui.results?.remainingEnergyLanding || 'Estimated Touchdown Battery'}</span>
+          <span class="touchdown-value" id="res-landing-energy">47.7% (105.9 Wh)</span>
+        </div>
+        <div class="touchdown-progress-track">
+          <div class="touchdown-progress-bar" id="res-landing-bar" style="width: 47.7%;"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script is:inline type="application/json" id="drone-mission-planner-ui-data" set:html={JSON.stringify(ui)} />
+
+<script>
+  import { loadSavedInputs } from './storage';
+  import { bindPlannerController } from './controller';
+  import type { DroneMissionBatteryReservePlannerUI } from './ui';
+
+  const root = document.getElementById('drone-mission-planner-root');
+  const dataEl = document.getElementById('drone-mission-planner-ui-data');
+
+  if (root && dataEl && dataEl.textContent) {
+    try {
+      const ui: DroneMissionBatteryReservePlannerUI = JSON.parse(dataEl.textContent);
+      const initial = loadSavedInputs();
+      bindPlannerController(root, initial, ui);
+    } catch {}
+  }
+</script>

package/src/tool/drone-mission-battery-reserve-planner/controller.ts

@@ -0,0 +1,124 @@
+import type { MissionInputs, MissionResults } from './logic';
+import { calculateMissionReserve, convertDistance } from './logic';
+import { renderTelemetrySvg } from './dom-views';
+import { saveInputs } from './storage';
+import type { DroneMissionBatteryReservePlannerUI } from './ui';
+
+function setElementsText(container: HTMLElement, s: { speedUnit: string; distUnit: string }): void {
+  container.querySelectorAll<HTMLElement>('.unit-label-speed').forEach((el) => { el.textContent = s.speedUnit; });
+  container.querySelectorAll<HTMLElement>('.unit-label-dist').forEach((el) => { el.textContent = s.distUnit; });
+}
+
+function getBannerTitle(statusKey: string, b?: DroneMissionBatteryReservePlannerUI['statusBadges']): string {
+  if (statusKey === 'tight') return b ? b.tightTitle : 'TIGHT ENERGY RESERVE MARGIN';
+  if (statusKey === 'critical') return b ? b.criticalTitle : 'CRITICAL ENERGY WARNING';
+  if (statusKey === 'exceeded') return b ? b.exceededTitle : 'MISSION EXCEEDS SAFE BATTERY CAPACITY';
+  return b ? b.optimalTitle : 'OPTIMAL ENERGY RESERVE MARGIN';
+}
+
+function getBannerSubtitle(statusKey: string, b?: DroneMissionBatteryReservePlannerUI['statusBadges']): string {
+  if (statusKey === 'tight') return b ? b.tightSubtitle : 'Low landing reserve';
+  if (statusKey === 'critical') return b ? b.criticalSubtitle : 'Reserve breached';
+  if (statusKey === 'exceeded') return b ? b.exceededSubtitle : 'Insufficient battery energy';
+  return b ? b.optimalSubtitle : 'Safe flight envelope';
+}
+
+function updateStatusBanner(
+  container: HTMLElement,
+  statusKey: string,
+  uiBadges?: DroneMissionBatteryReservePlannerUI['statusBadges']
+): void {
+  const banner = container.querySelector<HTMLElement>('#res-status-banner');
+  const title = container.querySelector<HTMLElement>('#res-status-title');
+  const subtitle = container.querySelector<HTMLElement>('#res-status-subtitle');
+  if (!banner || !title) return;
+
+  banner.className = `status-banner status-banner-${statusKey}`;
+  title.textContent = getBannerTitle(statusKey, uiBadges);
+  if (subtitle) subtitle.textContent = getBannerSubtitle(statusKey, uiBadges);
+}
+
+function setCardText(container: HTMLElement, id: string, text: string): void {
+  const el = container.querySelector<HTMLElement>(id);
+  if (el) el.textContent = text;
+}
+
+function updateMetricCards(
+  container: HTMLElement,
+  results: MissionResults,
+  unitSystem: MissionInputs['unitSystem'],
+  resultsUI?: DroneMissionBatteryReservePlannerUI['results']
+): void {
+  const distUnit = unitSystem === 'imperial' ? 'mi' : 'km';
+  const displayRadius = convertDistance(results.maxSafeRadiusKm, unitSystem);
+  const powerText = resultsUI ? resultsUI.powerSubLabel : 'Power';
+  const sagText = resultsUI ? resultsUI.voltageSagSubLabel : 'Voltage sag';
+
+  setCardText(container, '#res-autonomy', `${results.totalAutonomyMinutes.toFixed(1)} min`);
+  setCardText(container, '#res-sag-loss', `${sagText}: -${results.voltageSagWhLoss.toFixed(1)} Wh`);
+  setCardText(container, '#res-max-radius', `${displayRadius.toFixed(1)} ${distUnit}`);
+  setCardText(container, '#res-outbound-time', `${results.outboundTimeMinutes.toFixed(1)} min`);
+  setCardText(container, '#res-outbound-power', `${powerText}: ${Math.round(results.outboundPowerWatts)} W`);
+  setCardText(container, '#res-return-time', `${results.returnTimeMinutes.toFixed(1)} min`);
+  setCardText(container, '#res-return-power', `${powerText}: ${Math.round(results.returnPowerWatts)} W`);
+}
+
+function updateTouchdownBar(container: HTMLElement, results: MissionResults): void {
+  const elLandingEnergy = container.querySelector<HTMLElement>('#res-landing-energy');
+  const elLandingBar = container.querySelector<HTMLElement>('#res-landing-bar');
+  const remWh = Math.max(0, results.remainingEnergyLandingWh);
+  const remPct = Math.max(0, results.remainingEnergyLandingPercent);
+
+  if (elLandingEnergy) elLandingEnergy.textContent = `${remPct.toFixed(1)}% (${remWh.toFixed(1)} Wh)`;
+  if (elLandingBar) {
+    elLandingBar.style.width = `${Math.min(100, remPct)}%`;
+    const colorMap: Record<string, string> = { optimal: '#10b981', tight: '#f59e0b', critical: '#ef4444', exceeded: '#ef4444' };
+    elLandingBar.style.backgroundColor = colorMap[results.statusKey] ?? '#10b981';
+  }
+}
+
+function bindDual(container: HTMLElement, sliderId: string, inputId: string, onChange: (v: number) => void): void {
+  const slider = container.querySelector<HTMLInputElement>(sliderId);
+  const numInput = container.querySelector<HTMLInputElement>(inputId);
+  slider?.addEventListener('input', () => { const v = parseFloat(slider.value) || 0; if (numInput) numInput.value = String(v); onChange(v); });
+  numInput?.addEventListener('input', () => { const v = parseFloat(numInput.value) || 0; if (slider) slider.value = String(v); onChange(v); });
+}
+
+function bindAllInputs(container: HTMLElement, state: MissionInputs, update: () => void): void {
+  bindDual(container, '#slider-capacity', '#input-capacity', (v) => { state.batteryCapacityMah = Math.max(100, v); update(); });
+  bindDual(container, '#slider-voltage', '#input-voltage', (v) => { state.voltageNominal = Math.max(1, v); update(); });
+  bindDual(container, '#slider-current', '#input-current', (v) => { state.averageCurrentAmps = Math.max(0.1, v); update(); });
+  bindDual(container, '#slider-speed', '#input-speed', (v) => { state.cruiseSpeedKmh = state.unitSystem === 'imperial' ? Math.max(1, v) / 0.621371 : Math.max(1, v); update(); });
+  bindDual(container, '#slider-distance', '#input-distance', (v) => { state.oneWayDistanceKm = state.unitSystem === 'imperial' ? Math.max(0.1, v) / 0.621371 : Math.max(0.1, v); update(); });
+  bindDual(container, '#slider-target-hover', '#input-target-hover', (v) => { state.targetHoverTimeMin = Math.max(0, v); update(); });
+  bindDual(container, '#slider-wind-speed', '#input-wind-speed', (v) => { state.windSpeedKmh = state.unitSystem === 'imperial' ? Math.max(0, v) / 0.621371 : Math.max(0, v); update(); });
+  bindDual(container, '#slider-reserve', '#input-reserve', (v) => { state.reservePolicyPercent = Math.min(50, Math.max(5, v)); update(); });
+}
+
+export function bindPlannerController(
+  container: HTMLElement,
+  initialInputs: MissionInputs,
+  uiContent?: DroneMissionBatteryReservePlannerUI
+): void {
+  const state: MissionInputs = { ...initialInputs };
+  const update = () => {
+    const results = calculateMissionReserve(state);
+    saveInputs(state);
+    const speedUnit = state.unitSystem === 'imperial' ? 'mph' : 'km/h';
+    const distUnit = state.unitSystem === 'imperial' ? 'mi' : 'km';
+    setElementsText(container, { speedUnit, distUnit });
+    updateStatusBanner(container, results.statusKey, uiContent?.statusBadges);
+    updateMetricCards(container, results, state.unitSystem, uiContent?.results);
+    updateTouchdownBar(container, results);
+    const svgWrapper = container.querySelector<HTMLElement>('#res-svg-wrapper');
+    if (svgWrapper) svgWrapper.innerHTML = renderTelemetrySvg(state, results, uiContent);
+  };
+  bindAllInputs(container, state, update);
+  container.querySelectorAll<HTMLButtonElement>('.wind-seg-btn').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const dir = btn.dataset.dir as MissionInputs['windDirection'];
+      if (dir) { state.windDirection = dir; container.querySelectorAll('.wind-seg-btn').forEach((b) => b.classList.toggle('active', b === btn)); update(); }
+    });
+  });
+  update();
+}

package/src/tool/drone-mission-battery-reserve-planner/dom-views.ts

@@ -0,0 +1,114 @@
+import type { MissionInputs, MissionResults } from './logic';
+import { convertDistance } from './logic';
+import type { DroneMissionBatteryReservePlannerUI } from './ui';
+
+function getWindArrowRotation(dir: MissionInputs['windDirection']): number {
+  if (dir === 'headwind') return 180;
+  if (dir === 'tailwind') return 0;
+  return 90;
+}
+
+function renderWindBanner(inputs: MissionInputs, speedUnit: string, chartUI?: DroneMissionBatteryReservePlannerUI['chart']): string {
+  const rot = getWindArrowRotation(inputs.windDirection);
+  const titleText = chartUI ? chartUI.modelTitle : 'AERODYNAMIC POWER & WIND MODEL';
+  const windText = chartUI ? chartUI.windLabel : 'Wind';
+
+  return `<g transform="translate(40, 30)">
+      <rect x="0" y="0" width="520" height="42" rx="8" fill="var(--n-surface-card, #151d30)" stroke="var(--n-border, #2e3d5c)" stroke-dasharray="3,3" />
+      <text x="16" y="26" font-size="11" font-weight="700" fill="var(--n-text-primary, #f8fafc)" letter-spacing="0.05em">${titleText}</text>
+      <g transform="translate(350, 26)">
+        <text x="0" y="0" font-size="10" fill="var(--n-text-secondary, #94a3b8)">${windText}: <tspan font-weight="700" fill="var(--n-text-primary, #f8fafc)">${inputs.windSpeedKmh} ${speedUnit}</tspan> (${inputs.windDirection})</text>
+      </g>
+      <g transform="rotate(${rot} 300 35)"><path d="M295 35 L300 27 L305 35 L301 35 L301 43 L299 43 L299 35 Z" fill="var(--n-brand, #3b82f6)" /></g>
+    </g>`;
+}
+
+function renderDiagramNodes(c?: DroneMissionBatteryReservePlannerUI['chart']): string {
+  const home = c ? c.homeNode : 'HOME';
+  const target = c ? c.targetNode : 'TARGET';
+  const land = c ? c.landNode : 'LAND';
+  return `<circle cx="40" cy="30" r="18" fill="#151d30" stroke="#3b82f6" stroke-width="3" />
+    <text x="40" y="34" font-size="10" font-weight="800" text-anchor="middle" fill="#ffffff">${home}</text>
+    <circle cx="260" cy="30" r="18" fill="#151d30" stroke="#06b6d4" stroke-width="3" />
+    <text x="260" y="34" font-size="10" font-weight="800" text-anchor="middle" fill="#ffffff">${target}</text>
+    <circle cx="480" cy="30" r="18" fill="#151d30" stroke="#10b981" stroke-width="3" />
+    <text x="480" y="34" font-size="10" font-weight="800" text-anchor="middle" fill="#ffffff">${land}</text>`;
+}
+
+function renderFlightDiagram(
+  inputs: MissionInputs,
+  results: MissionResults,
+  distUnit: string,
+  c?: DroneMissionBatteryReservePlannerUI['chart']
+): string {
+  const safeRad = convertDistance(results.maxSafeRadiusKm, inputs.unitSystem).toFixed(1);
+  const curDist = convertDistance(inputs.oneWayDistanceKm, inputs.unitSystem).toFixed(1);
+  const launchPad = c ? c.launchPadLabel : 'Launch Pad';
+  const surveyHover = c ? c.surveyHoverLabel : 'Survey Hover';
+  const safeRadius = c ? c.safeRadiusLabel : 'Safe Radius';
+
+  return `<g transform="translate(40, 95)">
+      <line x1="40" y1="30" x2="480" y2="30" stroke="var(--n-border, #334155)" stroke-width="3" stroke-dasharray="6,4" />
+      <line x1="40" y1="30" x2="260" y2="30" stroke="url(#outboundGrad)" stroke-width="5" stroke-linecap="round" />
+      <line x1="260" y1="30" x2="480" y2="30" stroke="url(#returnGrad)" stroke-width="5" stroke-linecap="round" />
+      ${renderDiagramNodes(c)}
+      <text x="40" y="65" font-size="11" font-weight="600" text-anchor="middle" fill="var(--n-text-primary, #f8fafc)">${launchPad}</text>
+      <text x="40" y="78" font-size="10" text-anchor="middle" fill="var(--n-text-secondary, #94a3b8)">0.0 ${distUnit}</text>
+      <text x="260" y="65" font-size="11" font-weight="600" text-anchor="middle" fill="var(--n-text-primary, #f8fafc)">${surveyHover}</text>
+      <text x="260" y="78" font-size="10" text-anchor="middle" fill="#06b6d4">${inputs.targetHoverTimeMin} min @ ${curDist} ${distUnit}</text>
+      <text x="480" y="65" font-size="11" font-weight="600" text-anchor="middle" fill="var(--n-text-primary, #f8fafc)">${safeRadius}</text>
+      <text x="480" y="78" font-size="10" text-anchor="middle" fill="#10b981">${safeRad} ${distUnit}</text>
+    </g>`;
+}
+
+function renderEnergyLegend(r: MissionResults, c?: DroneMissionBatteryReservePlannerUI['chart']): string {
+  const o = c ? c.outboundSegment : 'Outbound';
+  const t = c ? c.targetSegment : 'Hover';
+  const ret = c ? c.returnSegment : 'Return';
+  const res = c ? c.reserveSegment : 'Reserve';
+
+  return `<g transform="translate(0, 48)">
+      <rect x="0" y="0" width="8" height="8" rx="2" fill="#3b82f6" /><text x="12" y="8" font-size="9" font-weight="600" fill="var(--n-text-primary, #f8fafc)">${o} (${r.outboundEnergyWh.toFixed(1)}Wh)</text>
+      <rect x="130" y="0" width="8" height="8" rx="2" fill="#06b6d4" /><text x="142" y="8" font-size="9" font-weight="600" fill="var(--n-text-primary, #f8fafc)">${t} (${r.targetHoverEnergyWh.toFixed(1)}Wh)</text>
+      <rect x="240" y="0" width="8" height="8" rx="2" fill="#8b5cf6" /><text x="252" y="8" font-size="9" font-weight="600" fill="var(--n-text-primary, #f8fafc)">${ret} (${r.returnEnergyWh.toFixed(1)}Wh)</text>
+      <rect x="360" y="0" width="8" height="8" rx="2" fill="#f59e0b" /><text x="372" y="8" font-size="9" font-weight="600" fill="var(--n-text-primary, #f8fafc)">${res} (${r.reserveEnergyWh.toFixed(1)}Wh)</text>
+    </g>`;
+}
+
+function renderEnergyAllocation(results: MissionResults, c?: DroneMissionBatteryReservePlannerUI['chart']): string {
+  const tot = Math.max(1, results.totalEnergyWh);
+  const outW = Math.max(2, ((results.outboundEnergyWh / tot)) * 520);
+  const hovW = Math.max(2, ((results.targetHoverEnergyWh / tot)) * 520);
+  const retW = Math.max(2, ((results.returnEnergyWh / tot)) * 520);
+  const resW = Math.max(2, ((results.reserveEnergyWh / tot)) * 520);
+  const title = c ? c.batteryProfileTitle : 'NON-LINEAR ENERGY ALLOCATION PROFILE';
+
+  return `<g transform="translate(40, 205)">
+      <text x="0" y="0" font-size="11" font-weight="700" fill="var(--n-text-secondary, #94a3b8)" letter-spacing="0.04em">${title}</text>
+      <rect x="0" y="10" width="520" height="24" rx="8" fill="#151d30" stroke="var(--n-border, #1e293b)" />
+      <rect x="2" y="12" width="${Math.min(516, outW)}" height="20" rx="4" fill="url(#outboundGrad)" />
+      <rect x="${2 + outW}" y="12" width="${Math.min(516, hovW)}" height="20" rx="4" fill="url(#hoverGrad)" />
+      <rect x="${2 + outW + hovW}" y="12" width="${Math.min(516, retW)}" height="20" rx="4" fill="url(#returnGrad)" />
+      <rect x="${518 - resW}" y="12" width="${Math.min(516, resW)}" height="20" rx="4" fill="url(#reserveGrad)" />
+      ${renderEnergyLegend(results, c)}
+    </g>`;
+}
+
+export function renderTelemetrySvg(inputs: MissionInputs, results: MissionResults, uiContent?: DroneMissionBatteryReservePlannerUI): string {
+  const distUnit = inputs.unitSystem === 'imperial' ? 'mi' : 'km';
+  const speedUnit = inputs.unitSystem === 'imperial' ? 'mph' : 'km/h';
+  const c = uiContent?.chart;
+
+  return `<svg viewBox="0 0 600 290" class="mission-telemetry-svg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient id="outboundGrad" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#3b82f6" /><stop offset="100%" stop-color="#2563eb" /></linearGradient>
+        <linearGradient id="hoverGrad" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#06b6d4" /><stop offset="100%" stop-color="#0891b2" /></linearGradient>
+        <linearGradient id="returnGrad" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#8b5cf6" /><stop offset="100%" stop-color="#7c3aed" /></linearGradient>
+        <linearGradient id="reserveGrad" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#f59e0b" /><stop offset="100%" stop-color="#d97706" /></linearGradient>
+      </defs>
+      <rect x="10" y="10" width="580" height="270" rx="16" fill="var(--n-surface-subtle, #0a0f1d)" stroke="var(--n-border, #1e293b)" stroke-width="1.5" />
+      ${renderWindBanner(inputs, speedUnit, c)}
+      ${renderFlightDiagram(inputs, results, distUnit, c)}
+      ${renderEnergyAllocation(results, c)}
+    </svg>`;
+}