@jjlmoya/utils-drones 1.22.0 → 1.24.0

package/package.json

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

package/src/category/index.ts

@@ -5,6 +5,7 @@ import { gpsCoordinatesConverter } from '../tool/gps-coordinates-converter/entry
 import { dronePowerAnalyzer } from '../tool/drone-power-analyzer/entry';
 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';
 
 export const dronesCategory: DronesCategoryEntry = {
   icon: 'mdi:drone',
@@ -15,6 +16,7 @@ export const dronesCategory: DronesCategoryEntry = {
     dronePowerAnalyzer,
     gsdFlightPlanner,
     droneBatteryCRatingCalculator,
+    fpvDroneThrustToWeightRatio,
   ],
   i18n: {
     es: () => import('./i18n/es').then((m) => m.content),

package/src/entries.ts

@@ -10,6 +10,8 @@ export { gsdFlightPlanner } from './tool/gsd-flight-planner/entry';
 export type { GsdFlightPlannerUI, GsdFlightPlannerLocaleContent } from './tool/gsd-flight-planner/entry';
 export { droneBatteryCRatingCalculator } from './tool/drone-battery-c-rating-calculator/entry';
 export type { DroneBatteryCRatingCalculatorUI, DroneBatteryCRatingCalculatorLocaleContent } from './tool/drone-battery-c-rating-calculator/entry';
+export { fpvDroneThrustToWeightRatio } from './tool/fpv-drone-thrust-to-weight-ratio/entry';
+export type { FpvDroneThrustToWeightRatioUI, FpvDroneThrustToWeightRatioLocaleContent } from './tool/fpv-drone-thrust-to-weight-ratio/entry';
 export { dronesCategory } from './category';
 
 import { antennaLengthCalculator } from './tool/antenna-length-calculator/entry';
@@ -18,6 +20,7 @@ import { gpsCoordinatesConverter } from './tool/gps-coordinates-converter/entry'
 import { dronePowerAnalyzer } from './tool/drone-power-analyzer/entry';
 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';
 
 export const ALL_ENTRIES = [
   antennaLengthCalculator,
@@ -26,4 +29,5 @@ export const ALL_ENTRIES = [
   dronePowerAnalyzer,
   gsdFlightPlanner,
   droneBatteryCRatingCalculator,
+  fpvDroneThrustToWeightRatio,
 ];

package/src/tests/locale_completeness.test.ts

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

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 6 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(6);
+    it('should have 7 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(7);
     });
 
     it('dronesCategory should be defined', () => {

package/src/tool/drone-battery-c-rating-calculator/bibliography.astro

@@ -1,17 +1,6 @@
 ---
-import { BIBLIOGRAPHY_ITEMS } from './bibliography';
+import { Bibliography as BibliographyComponent } from "@jjlmoya/utils-shared";
+import { bibliography } from "./bibliography";
 ---
 
-<div class="sc-bibliography">
-  <ul>
-    {
-      BIBLIOGRAPHY_ITEMS.map((item) => (
-        <li>
-          <a href={item.url} target="_blank" rel="noopener noreferrer">
-            {item.name}
-          </a>
-        </li>
-      ))
-    }
-  </ul>
-</div>
+<BibliographyComponent links={bibliography} />

package/src/tool/drone-battery-c-rating-calculator/bibliography.ts

@@ -1,6 +1,6 @@
 import type { BibliographyEntry } from '../../types';
 
-export const BIBLIOGRAPHY_ITEMS: BibliographyEntry[] = [
+export const bibliography: BibliographyEntry[] = [
   {
     name: 'Battery University - BU-409: Charging Lithium-ion',
     url: 'http://www.batteryuniversity.com/article/bu-409-charging-lithium-ion/',
@@ -14,3 +14,5 @@ export const BIBLIOGRAPHY_ITEMS: BibliographyEntry[] = [
     url: 'https://betaflight.com/docs/wiki/guides/current/Battery',
   },
 ];
+
+export const BIBLIOGRAPHY_ITEMS = bibliography;

package/src/tool/fpv-drone-thrust-to-weight-ratio/bibliography.astro

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

package/src/tool/fpv-drone-thrust-to-weight-ratio/bibliography.ts

@@ -0,0 +1,18 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Betaflight Firmware Documentation - Multirotor Flight Dynamics and Thrust Tuning',
+    url: 'https://betaflight.com/docs/wiki/tuning/4-3-Tuning-Notes',
+  },
+  {
+    name: 'IEEE Xplore - Dynamic Thrust and Power Modeling of Brushless Multirotor Propellers',
+    url: 'https://ieeexplore.ieee.org/document/7036341/',
+  },
+  {
+    name: 'NASA Technical Reports Server - Aerodynamic Performance of Small Multirotor Propellers in Hover',
+    url: 'https://ntrs.nasa.gov/api/citations/20250009190/downloads/NASA-TM-20250009190.pdf?attachment=true',
+  },
+];
+
+export const BIBLIOGRAPHY_ITEMS = bibliography;

package/src/tool/fpv-drone-thrust-to-weight-ratio/component.astro

@@ -0,0 +1,203 @@
+---
+import type { FpvDroneThrustToWeightRatioUI } from './ui';
+import { calculateTwrMetrics, type DroneTwrInputs } from './logic';
+import { renderTwrSVG } from './dom-views';
+import './fpv-drone-thrust-to-weight-ratio.css';
+
+interface Props {
+  ui: FpvDroneThrustToWeightRatioUI;
+}
+
+const { ui } = Astro.props;
+
+const defaultInputs: DroneTwrInputs = {
+  auwGrams: 680,
+  motorCount: 4,
+  thrustPerMotorGrams: 1950,
+  propellerSizeInches: 5.1,
+  propellerPitchInches: 4.3,
+  bladeCount: 3,
+  throttleStickPercent: 70,
+};
+
+const initialResults = calculateTwrMetrics(defaultInputs);
+const initialSvg = renderTwrSVG(defaultInputs, initialResults, ui);
+---
+
+<div class="sc-fpv-cockpit" id="fpv-drone-thrust-to-weight-ratio-root">
+  <div class="sc-cockpit-sidebar">
+    <div>
+      <div class="sc-cockpit-title">{ui.presetsHeader}</div>
+      <div class="sc-preset-group">
+        <button type="button" class="sc-preset-chip active" data-preset="freestyle5">{ui.freestyle5Preset}</button>
+        <button type="button" class="sc-preset-chip" data-preset="freestyle35">{ui.freestyle35Preset}</button>
+        <button type="button" class="sc-preset-chip" data-preset="whoop1s">{ui.whoop1sPreset}</button>
+        <button type="button" class="sc-preset-chip" data-preset="longrange7">{ui.longrange7Preset}</button>
+        <button type="button" class="sc-preset-chip" data-preset="cinelifter8">{ui.cinelifter8Preset}</button>
+      </div>
+    </div>
+
+    <div>
+      <div class="sc-cockpit-title">{ui.specsHeader}</div>
+      <div class="sc-field-group">
+        <div class="sc-field-header">
+          <label for="input-auw">{ui.auwGramsLabel}</label>
+        </div>
+        <input type="number" id="input-auw" class="sc-input" value="680" min="10" max="15000" step="5" />
+        <input type="range" id="range-auw" class="sc-slider" value="680" min="20" max="2500" step="5" aria-label={ui.auwGramsLabel} />
+      </div>
+
+      <div class="sc-field-group" style="margin-top: 0.8rem;">
+        <label>{ui.motorCountLabel}</label>
+        <div class="sc-custom-select" data-custom-select="motor-count">
+          <div class="sc-select-trigger">
+            <span>4 Motors (Quadcopter)</span>
+            <svg width="12" height="12" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>
+          </div>
+          <div class="sc-select-dropdown">
+            <div class="sc-select-option active" data-value="4">4 Motors (Quadcopter)</div>
+            <div class="sc-select-option" data-value="6">6 Motors (Hexacopter)</div>
+            <div class="sc-select-option" data-value="8">8 Motors (Octocopter / X8)</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="sc-field-group" style="margin-top: 0.8rem;">
+        <div class="sc-field-header">
+          <label for="input-thrust-motor">{ui.thrustPerMotorLabel}</label>
+        </div>
+        <input type="number" id="input-thrust-motor" class="sc-input" value="1950" min="10" max="10000" step="10" />
+        <input type="range" id="range-thrust-motor" class="sc-slider" value="1950" min="50" max="4000" step="25" aria-label={ui.thrustPerMotorLabel} />
+      </div>
+
+      <div class="sc-field-group" style="margin-top: 0.8rem;">
+        <label>{ui.bladeCountLabel}</label>
+        <div class="sc-custom-select" data-custom-select="blade-count">
+          <div class="sc-select-trigger">
+            <span>{ui.blade3Option}</span>
+            <svg width="12" height="12" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>
+          </div>
+          <div class="sc-select-dropdown">
+            <div class="sc-select-option" data-value="2">{ui.blade2Option}</div>
+            <div class="sc-select-option active" data-value="3">{ui.blade3Option}</div>
+            <div class="sc-select-option" data-value="4">{ui.blade4Option}</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="sc-field-group" style="margin-top: 0.8rem;">
+        <div class="sc-field-header">
+          <label for="input-prop-size">{ui.propellerSizeLabel}</label>
+        </div>
+        <input type="number" id="input-prop-size" class="sc-input" value="5.1" min="1" max="15" step="0.1" />
+        <input type="range" id="range-prop-size" class="sc-slider" value="5.1" min="1.5" max="10" step="0.1" aria-label={ui.propellerSizeLabel} />
+      </div>
+
+      <div class="sc-field-group" style="margin-top: 0.8rem;">
+        <div class="sc-field-header">
+          <label for="input-prop-pitch">{ui.propellerPitchLabel}</label>
+        </div>
+        <input type="number" id="input-prop-pitch" class="sc-input" value="4.3" min="1" max="10" step="0.1" />
+        <input type="range" id="range-prop-pitch" class="sc-slider" value="4.3" min="1.5" max="6.5" step="0.1" aria-label={ui.propellerPitchLabel} />
+      </div>
+    </div>
+
+    <div class="sc-throttle-box">
+      <div class="sc-field-header">
+        <label for="range-throttle-stick" class="sc-throttle-label">{ui.throttleStickLabel}</label>
+        <span class="sc-throttle-badge" data-metric="stickPercentBadge">70%</span>
+      </div>
+      <input type="range" id="range-throttle-stick" class="sc-slider sc-throttle-slider" value="70" min="0" max="100" step="1" aria-label={ui.throttleStickLabel} />
+      <div class="sc-snap-group">
+        <button type="button" class="sc-snap-btn" data-snap="idle">{ui.snapIdleLabel}</button>
+        <button type="button" class="sc-snap-btn" data-snap="hover">{ui.snapHoverLabel}</button>
+        <button type="button" class="sc-snap-btn" data-snap="cruise">{ui.snapCruiseLabel}</button>
+        <button type="button" class="sc-snap-btn" data-snap="punch">{ui.snapPunchLabel}</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="sc-cockpit-telemetry">
+    <div class="sc-telemetry-topbar">
+      <div class="sc-cockpit-title" style="margin-bottom: 0;">{ui.telemetryHeader}</div>
+      <div class="sc-safety-badge status-accent" data-metric="agilityBadge">{ui.tierAcroProTitle}</div>
+    </div>
+
+    <div class="sc-hud-wrapper" data-element="svgContainer" set:html={initialSvg}></div>
+
+    <div class="sc-hud-metrics-grid">
+      <div class="sc-hud-card">
+        <div class="sc-hud-label">{ui.twrRatioLabel}</div>
+        <div class="sc-hud-val" data-metric="twrRatio">{initialResults.twrRatio.toFixed(2)} : 1</div>
+      </div>
+      <div class="sc-hud-card">
+        <div class="sc-hud-label">{ui.hoverThrottleLabel}</div>
+        <div class="sc-hud-val" data-metric="hoverThrottle">{initialResults.hoverThrottlePercent.toFixed(1)} %</div>
+      </div>
+      <div class="sc-hud-card highlight-cyan">
+        <div class="sc-hud-label">{ui.currentThrustLabel}</div>
+        <div class="sc-hud-val" data-metric="currentThrust">{initialResults.currentThrustGrams.toLocaleString()} g</div>
+      </div>
+      <div class="sc-hud-card highlight-purple">
+        <div class="sc-hud-label">{ui.instantGForceLabel}</div>
+        <div class="sc-hud-val" data-metric="instantGForce">{initialResults.instantGForce.toFixed(2)} G</div>
+      </div>
+      <div class="sc-hud-card">
+        <div class="sc-hud-label">{ui.zeroToHundredLabel}</div>
+        <div class="sc-hud-val" data-metric="zeroToHundred">{initialResults.zeroToHundredTimeSec.toFixed(2)} s</div>
+      </div>
+      <div class="sc-hud-card">
+        <div class="sc-hud-label">{ui.recommendedCamAngleLabel}</div>
+        <div class="sc-hud-val" data-metric="recommendedCamAngle">{initialResults.recommendedCamAngleDeg}°</div>
+      </div>
+      <div class="sc-hud-card">
+        <div class="sc-hud-label">{ui.windResistanceLabel}</div>
+        <div class="sc-hud-val" data-metric="windResistance">{initialResults.windResistanceKmh} km/h</div>
+      </div>
+      <div class="sc-hud-card">
+        <div class="sc-hud-label">{ui.totalMaxThrustLabel}</div>
+        <div class="sc-hud-val" data-metric="totalMaxThrust">{initialResults.totalMaxThrustGrams.toLocaleString()} g</div>
+      </div>
+    </div>
+
+    <div class="sc-tuning-grid">
+      <div class="sc-tuning-card">
+        <div class="sc-hud-label">{ui.tpaRecommendationLabel}</div>
+        <div class="sc-tuning-val" data-metric="tpaSetting">{initialResults.tuneAdvice.tpaSetting}</div>
+      </div>
+      <div class="sc-tuning-card">
+        <div class="sc-hud-label">{ui.dynamicIdleLabel}</div>
+        <div class="sc-tuning-val" data-metric="dynamicIdleSetting">{initialResults.tuneAdvice.dynamicIdleSetting}</div>
+      </div>
+      <div class="sc-tuning-card">
+        <div class="sc-hud-label">{ui.propwashRiskLabel}</div>
+        <div class="sc-tuning-val" data-metric="propwashRisk">{initialResults.tuneAdvice.propwashRisk}</div>
+      </div>
+    </div>
+
+    <div class="sc-flight-status-card">
+      <h4 data-metric="statusTitle">{ui.tierAcroProTitle}</h4>
+      <p data-metric="statusDesc">{ui.tierAcroProDesc}</p>
+    </div>
+  </div>
+</div>
+
+<script is:inline type="application/json" id="fpv-twr-ui-data" set:html={JSON.stringify(ui)}></script>
+
+<script>
+  import { FpvDroneThrustToWeightRatioController } from './controller';
+
+  function initController() {
+    const root = document.getElementById('fpv-drone-thrust-to-weight-ratio-root');
+    if (!root) return;
+    const uiEl = document.getElementById('fpv-twr-ui-data');
+    const uiData = uiEl ? JSON.parse(uiEl.textContent || '{}') : {};
+    new FpvDroneThrustToWeightRatioController(root, uiData);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initController);
+  } else {
+    initController();
+  }
+</script>

package/src/tool/fpv-drone-thrust-to-weight-ratio/controller.ts

@@ -0,0 +1,240 @@
+import type { DroneTwrInputs } from './logic';
+import { calculateTwrMetrics } from './logic';
+import { evaluateAgilityPresentation } from './evaluator';
+import { updateDOMMetrics, updateDOMSafety, renderTwrSVG, type DOMResultElements } from './dom-views';
+import { loadSavedInputs, saveInputs } from './storage';
+import type { FpvDroneThrustToWeightRatioUI } from './ui';
+
+export interface PresetConfig {
+  auwGrams: number;
+  motorCount: number;
+  thrustPerMotorGrams: number;
+  propellerSizeInches: number;
+  propellerPitchInches: number;
+  bladeCount: number;
+  throttleStickPercent: number;
+}
+
+export const PRESETS: Record<string, PresetConfig> = {
+  whoop1s: { auwGrams: 32, motorCount: 4, thrustPerMotorGrams: 38, propellerSizeInches: 1.6, propellerPitchInches: 1.5, bladeCount: 4, throttleStickPercent: 50 },
+  freestyle35: { auwGrams: 250, motorCount: 4, thrustPerMotorGrams: 750, propellerSizeInches: 3.5, propellerPitchInches: 2.8, bladeCount: 3, throttleStickPercent: 65 },
+  freestyle5: { auwGrams: 680, motorCount: 4, thrustPerMotorGrams: 1950, propellerSizeInches: 5.1, propellerPitchInches: 4.3, bladeCount: 3, throttleStickPercent: 70 },
+  longrange7: { auwGrams: 1150, motorCount: 4, thrustPerMotorGrams: 2400, propellerSizeInches: 7.0, propellerPitchInches: 4.0, bladeCount: 2, throttleStickPercent: 45 },
+  cinelifter8: { auwGrams: 4200, motorCount: 8, thrustPerMotorGrams: 3200, propellerSizeInches: 9.0, propellerPitchInches: 5.0, bladeCount: 3, throttleStickPercent: 55 },
+};
+
+export class FpvDroneThrustToWeightRatioController {
+  private container: HTMLElement;
+  private ui: FpvDroneThrustToWeightRatioUI;
+  private elements!: DOMResultElements;
+  private inputs!: DroneTwrInputs;
+  private activePreset: string | null = 'freestyle5';
+
+  constructor(container: HTMLElement, ui: FpvDroneThrustToWeightRatioUI) {
+    this.container = container;
+    this.ui = ui;
+    this.initElements();
+    this.initInputs();
+    this.bindEvents();
+    this.recalculate();
+  }
+
+  private initElements(): void {
+    this.elements = {
+      twrRatio: this.container.querySelector('[data-metric="twrRatio"]')!,
+      hoverThrottle: this.container.querySelector('[data-metric="hoverThrottle"]')!,
+      currentThrust: this.container.querySelector('[data-metric="currentThrust"]')!,
+      instantGForce: this.container.querySelector('[data-metric="instantGForce"]')!,
+      zeroToHundred: this.container.querySelector('[data-metric="zeroToHundred"]')!,
+      recommendedCamAngle: this.container.querySelector('[data-metric="recommendedCamAngle"]')!,
+      windResistance: this.container.querySelector('[data-metric="windResistance"]')!,
+      totalMaxThrust: this.container.querySelector('[data-metric="totalMaxThrust"]')!,
+      maxPitchAngle: this.container.querySelector('[data-metric="maxPitchAngle"]')!,
+      tpaSetting: this.container.querySelector('[data-metric="tpaSetting"]') || undefined,
+      dynamicIdleSetting: this.container.querySelector('[data-metric="dynamicIdleSetting"]') || undefined,
+      propwashRisk: this.container.querySelector('[data-metric="propwashRisk"]') || undefined,
+      agilityBadge: this.container.querySelector('[data-metric="agilityBadge"]')!,
+      statusTitle: this.container.querySelector('[data-metric="statusTitle"]')!,
+      statusDesc: this.container.querySelector('[data-metric="statusDesc"]')!,
+      svgContainer: this.container.querySelector('[data-element="svgContainer"]')!,
+      stickPercentBadge: this.container.querySelector('[data-metric="stickPercentBadge"]') || undefined,
+    };
+  }
+
+  private initInputs(): void {
+    const saved = loadSavedInputs();
+    this.inputs = Object.assign({}, PRESETS.freestyle5, saved);
+    this.syncInputElements();
+  }
+
+  private parseVal(selector: string): number {
+    const el = this.container.querySelector(selector) as HTMLInputElement;
+    if (!el || !el.value) return 0;
+    const cleanStr = el.value.replace(',', '.');
+    const val = parseFloat(cleanStr);
+    return Number.isFinite(val) ? val : 0;
+  }
+
+  private syncInputElements(): void {
+    this.setInputValue('#input-auw', String(this.inputs.auwGrams));
+    this.setInputValue('#range-auw', String(this.inputs.auwGrams));
+    this.setInputValue('#input-thrust-motor', String(this.inputs.thrustPerMotorGrams));
+    this.setInputValue('#range-thrust-motor', String(this.inputs.thrustPerMotorGrams));
+    this.setInputValue('#input-prop-size', String(this.inputs.propellerSizeInches));
+    this.setInputValue('#range-prop-size', String(this.inputs.propellerSizeInches));
+    this.setInputValue('#input-prop-pitch', String(this.inputs.propellerPitchInches));
+    this.setInputValue('#range-prop-pitch', String(this.inputs.propellerPitchInches));
+    this.setInputValue('#range-throttle-stick', String(this.inputs.throttleStickPercent));
+
+    this.updateCustomSelect('motor-count', String(this.inputs.motorCount));
+    this.updateCustomSelect('blade-count', String(this.inputs.bladeCount));
+    this.updatePresetChips();
+  }
+
+  private setInputValue(selector: string, val: string): void {
+    const el = this.container.querySelector(selector) as HTMLInputElement;
+    if (el) el.value = val;
+  }
+
+  private updatePresetChips(): void {
+    this.container.querySelectorAll('[data-preset]').forEach((btn) => {
+      const key = btn.getAttribute('data-preset');
+      btn.classList.toggle('active', key === this.activePreset);
+    });
+  }
+
+  private updateCustomSelect(name: string, value: string): void {
+    const wrapper = this.container.querySelector(`[data-custom-select="${name}"]`);
+    if (!wrapper) return;
+    const triggerText = wrapper.querySelector('.sc-select-trigger span');
+    const options = wrapper.querySelectorAll('.sc-select-option');
+    options.forEach((opt) => {
+      const isSelected = opt.getAttribute('data-value') === value;
+      opt.classList.toggle('active', isSelected);
+      if (isSelected && triggerText) triggerText.textContent = opt.textContent;
+    });
+  }
+
+  private bindEvents(): void {
+    this.bindNumberAndRangeInputs();
+    this.bindCustomSelects();
+    this.bindPresets();
+    this.bindThrottleStick();
+    this.bindQuickSnapButtons();
+    document.addEventListener('click', () => this.closeAllSelects());
+  }
+
+  private bindNumberAndRangeInputs(): void {
+    this.bindRangeSync('#input-auw', '#range-auw', (v) => { this.inputs.auwGrams = v; });
+    this.bindRangeSync('#input-thrust-motor', '#range-thrust-motor', (v) => { this.inputs.thrustPerMotorGrams = v; });
+    this.bindRangeSync('#input-prop-size', '#range-prop-size', (v) => { this.inputs.propellerSizeInches = v; });
+    this.bindRangeSync('#input-prop-pitch', '#range-prop-pitch', (v) => { this.inputs.propellerPitchInches = v; });
+  }
+
+  private bindThrottleStick(): void {
+    const stick = this.container.querySelector('#range-throttle-stick') as HTMLInputElement;
+    stick?.addEventListener('input', () => {
+      this.inputs.throttleStickPercent = parseFloat(stick.value) || 0;
+      this.recalculate();
+    });
+  }
+
+  private bindQuickSnapButtons(): void {
+    this.container.querySelectorAll('[data-snap]').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const snapType = btn.getAttribute('data-snap');
+        const results = calculateTwrMetrics(this.inputs);
+        if (snapType === 'idle') this.inputs.throttleStickPercent = 0;
+        if (snapType === 'hover') this.inputs.throttleStickPercent = results.hoverThrottlePercent;
+        if (snapType === 'cruise') this.inputs.throttleStickPercent = 50;
+        if (snapType === 'punch') this.inputs.throttleStickPercent = 100;
+        this.setInputValue('#range-throttle-stick', String(this.inputs.throttleStickPercent));
+        this.recalculate();
+      });
+    });
+  }
+
+  private bindCustomSelects(): void {
+    this.container.querySelectorAll('.sc-custom-select').forEach((wrapper) => {
+      const trigger = wrapper.querySelector('.sc-select-trigger');
+      trigger?.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.closeAllSelects(wrapper);
+        wrapper.classList.toggle('open');
+      });
+
+      wrapper.querySelectorAll('.sc-select-option').forEach((opt) => {
+        opt.addEventListener('click', (e) => {
+          e.stopPropagation();
+          this.handleSelectOptionClick(wrapper, opt);
+        });
+      });
+    });
+  }
+
+  private handleSelectOptionClick(wrapper: Element, opt: Element): void {
+    const val = opt.getAttribute('data-value')!;
+    const name = wrapper.getAttribute('data-custom-select')!;
+    if (name === 'motor-count') this.inputs.motorCount = parseInt(val, 10);
+    if (name === 'blade-count') this.inputs.bladeCount = parseInt(val, 10);
+    this.updateCustomSelect(name, val);
+    wrapper.classList.remove('open');
+    this.onInputChanged();
+  }
+
+  private bindPresets(): void {
+    this.container.querySelectorAll('[data-preset]').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const key = btn.getAttribute('data-preset')!;
+        if (PRESETS[key]) {
+          this.activePreset = key;
+          this.inputs = { ...PRESETS[key] };
+          this.syncInputElements();
+          this.recalculate();
+        }
+      });
+    });
+  }
+
+  private onInputChanged(): void {
+    this.activePreset = null;
+    this.updatePresetChips();
+    this.recalculate();
+  }
+
+  private bindRangeSync(textSel: string, rangeSel: string, setter: (val: number) => void): void {
+    const textEl = this.container.querySelector(textSel) as HTMLInputElement;
+    const rangeEl = this.container.querySelector(rangeSel) as HTMLInputElement;
+
+    textEl?.addEventListener('input', () => {
+      const val = this.parseVal(textSel);
+      if (rangeEl) rangeEl.value = String(val);
+      setter(val);
+      this.onInputChanged();
+    });
+
+    rangeEl?.addEventListener('input', () => {
+      const val = parseFloat(rangeEl.value);
+      if (textEl) textEl.value = String(val);
+      setter(val);
+      this.onInputChanged();
+    });
+  }
+
+  private closeAllSelects(except?: Element): void {
+    this.container.querySelectorAll('.sc-custom-select').forEach((w) => {
+      if (w !== except) w.classList.remove('open');
+    });
+  }
+
+  private recalculate(): void {
+    const results = calculateTwrMetrics(this.inputs);
+    const agilityEval = evaluateAgilityPresentation(results.agilityTier, this.ui);
+    updateDOMMetrics(this.elements, results);
+    updateDOMSafety(this.elements, agilityEval);
+    if (this.elements.svgContainer) {
+      this.elements.svgContainer.innerHTML = renderTwrSVG(this.inputs, results, this.ui);
+    }
+    saveInputs(this.inputs);
+  }
+}