@jjlmoya/utils-drones 1.20.0 → 1.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-drones",
-    "version": "1.20.0",
+    "version": "1.22.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -28,7 +28,7 @@
         "check": "astro check",
         "type-check": "astro check",
         "test": "vitest run",
-        "preversion": "npm run lint && npm run test",
+        "preversion": "npm run lint && npm run test && npm run build",
         "postversion": "git push && git push --tags",
         "patch": "npm version patch",
         "minor": "npm version minor",

package/src/category/index.ts

@@ -1,12 +1,21 @@
 import type { DronesCategoryEntry } from '../types';
-import { droneFlightTime } from '../tool/drone-flight-time/index';
-import { antennaLengthCalculator } from '../tool/antenna-length-calculator/index';
-import { gpsCoordinatesConverter } from '../tool/gps-coordinates-converter/index';
-import { dronePowerAnalyzer } from '../tool/drone-power-analyzer/index';
+import { droneFlightTime } from '../tool/drone-flight-time/entry';
+import { antennaLengthCalculator } from '../tool/antenna-length-calculator/entry';
+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';
 
 export const dronesCategory: DronesCategoryEntry = {
   icon: 'mdi:drone',
-  tools: [droneFlightTime, antennaLengthCalculator, gpsCoordinatesConverter, dronePowerAnalyzer],
+  tools: [
+    droneFlightTime,
+    antennaLengthCalculator,
+    gpsCoordinatesConverter,
+    dronePowerAnalyzer,
+    gsdFlightPlanner,
+    droneBatteryCRatingCalculator,
+  ],
   i18n: {
     es: () => import('./i18n/es').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),
@@ -25,4 +34,3 @@ export const dronesCategory: DronesCategoryEntry = {
     id: () => import('./i18n/id').then((m) => m.content),
   },
 };
-

package/src/category/seo.astro

@@ -76,7 +76,7 @@ if (!content) return null;
       );
     }
     if (section.type === 'proscons') {
-      return <SEOProsCons title={section.title} items={section.items} proTitle={section.proTitle} conTitle={section.conTitle} />;
+      return <SEOProsCons title={section.title} items={section.items} />;
     }
     if (section.type === 'summary') {
       return <SEOSummary title={section.title} items={section.items} />;

package/src/entries.ts

@@ -8,10 +8,22 @@ export { dronePowerAnalyzer } from './tool/drone-power-analyzer/entry';
 export type { DronePowerAnalyzerUI, DronePowerAnalyzerLocaleContent } from './tool/drone-power-analyzer/entry';
 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 { dronesCategory } from './category';
+
 import { antennaLengthCalculator } from './tool/antenna-length-calculator/entry';
 import { droneFlightTime } from './tool/drone-flight-time/entry';
 import { gpsCoordinatesConverter } from './tool/gps-coordinates-converter/entry';
 import { dronePowerAnalyzer } from './tool/drone-power-analyzer/entry';
 import { gsdFlightPlanner } from './tool/gsd-flight-planner/entry';
-export const ALL_ENTRIES = [antennaLengthCalculator, droneFlightTime, gpsCoordinatesConverter, dronePowerAnalyzer, gsdFlightPlanner];
+import { droneBatteryCRatingCalculator } from './tool/drone-battery-c-rating-calculator/entry';
+
+export const ALL_ENTRIES = [
+  antennaLengthCalculator,
+  droneFlightTime,
+  gpsCoordinatesConverter,
+  dronePowerAnalyzer,
+  gsdFlightPlanner,
+  droneBatteryCRatingCalculator,
+];

package/src/tests/locale_completeness.test.ts

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

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

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

@@ -0,0 +1,17 @@
+---
+import { BIBLIOGRAPHY_ITEMS } 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>

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

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const BIBLIOGRAPHY_ITEMS: BibliographyEntry[] = [
+  {
+    name: 'Battery University - BU-409: Charging Lithium-ion',
+    url: 'http://www.batteryuniversity.com/article/bu-409-charging-lithium-ion/',
+  },
+  {
+    name: 'IEEE Xplore - Internal Resistance and C-Rating Analysis of High Discharge LiPo Cells',
+    url: 'https://ieeexplore.ieee.org/iel7/6287639/10380310/10445151.pdf',
+  },
+  {
+    name: 'Betaflight Firmware Documentation - Battery & Power Management',
+    url: 'https://betaflight.com/docs/wiki/guides/current/Battery',
+  },
+];

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

@@ -0,0 +1,192 @@
+---
+import type { DroneBatteryCRatingCalculatorUI } from './ui';
+import { calculateBatteryMetrics, type BatteryInputs } from './logic';
+import { renderBatterySVG, formatTimeSeconds } from './dom-views';
+import './drone-battery-c-rating-calculator.css';
+
+interface Props {
+  ui: DroneBatteryCRatingCalculatorUI;
+}
+
+const { ui } = Astro.props;
+
+const defaultInputs: BatteryInputs = {
+  capacitymAh: 1300,
+  claimedCRating: 100,
+  cellCount: 6,
+  chemistry: 'lipo',
+  internalResistanceMOm: 4,
+  motorCount: 4,
+  peakMotorCurrentA: 35,
+  auxCurrentA: 1.5,
+};
+
+const initialResults = calculateBatteryMetrics(defaultInputs);
+const initialSvg = renderBatterySVG(defaultInputs, initialResults);
+---
+
+<div class="sc-main-card" id="drone-lipo-c-rating-calculator-root">
+  <div class="sc-sidebar">
+    <div>
+      <div class="sc-section-title">{ui.presetSelectLabel}</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="racing5">{ui.racing5Preset}</button>
+        <button type="button" class="sc-preset-chip" data-preset="cinewhoop">{ui.cinewhoopPreset}</button>
+        <button type="button" class="sc-preset-chip" data-preset="whoop">{ui.whoopPreset}</button>
+        <button type="button" class="sc-preset-chip" data-preset="longrange7">{ui.longRange7Preset}</button>
+      </div>
+    </div>
+
+    <div>
+      <div class="sc-section-title">{ui.lipoSpecsHeader}</div>
+      <div class="sc-field-group">
+        <div class="sc-field-header">
+          <label for="input-capacity">{ui.capacityLabel}</label>
+        </div>
+        <input type="number" id="input-capacity" class="sc-input" value="1300" min="50" max="25000" step="50" />
+        <input type="range" id="range-capacity" class="sc-slider" value="1300" min="300" max="5000" step="50" aria-label={ui.capacityLabel} />
+      </div>
+
+      <div class="sc-field-group" style="margin-top: 0.8rem;">
+        <div class="sc-field-header">
+          <label for="input-claimed-c">{ui.claimedCRatingLabel}</label>
+        </div>
+        <input type="number" id="input-claimed-c" class="sc-input" value="100" min="5" max="200" step="5" />
+        <input type="range" id="range-claimed-c" class="sc-slider" value="100" min="20" max="180" step="5" aria-label={ui.claimedCRatingLabel} />
+      </div>
+
+      <div class="sc-field-group" style="margin-top: 0.8rem;">
+        <label>{ui.cellCountLabel}</label>
+        <div class="sc-custom-select" data-custom-select="cell-count">
+          <div class="sc-select-trigger">
+            <span>6S (22.2V)</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="1">1S (3.7V)</div>
+            <div class="sc-select-option" data-value="2">2S (7.4V)</div>
+            <div class="sc-select-option" data-value="3">3S (11.1V)</div>
+            <div class="sc-select-option" data-value="4">4S (14.8V)</div>
+            <div class="sc-select-option active" data-value="6">6S (22.2V)</div>
+            <div class="sc-select-option" data-value="8">8S (29.6V)</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="sc-field-group" style="margin-top: 0.8rem;">
+        <label>{ui.chemistryLabel}</label>
+        <div class="sc-custom-select" data-custom-select="chemistry">
+          <div class="sc-select-trigger">
+            <span>LiPo (3.7V / 4.2V)</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="lipo">LiPo (3.7V / 4.2V)</div>
+            <div class="sc-select-option" data-value="lihv">LiHV (3.8V / 4.35V)</div>
+            <div class="sc-select-option" data-value="liion">Li-Ion (3.6V / 4.2V)</div>
+            <div class="sc-select-option" data-value="life">LiFePO4 (3.3V / 3.65V)</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="sc-field-group" style="margin-top: 0.8rem;">
+        <div class="sc-field-header">
+          <label for="input-ir">{ui.internalResistanceLabel}</label>
+        </div>
+        <input type="number" id="input-ir" class="sc-input" value="4" min="0.5" max="50" step="0.5" />
+        <input type="range" id="range-ir" class="sc-slider" value="4" min="1" max="25" step="0.5" aria-label={ui.internalResistanceLabel} />
+      </div>
+    </div>
+
+    <div>
+      <div class="sc-section-title">{ui.quadSpecsHeader}</div>
+      <div class="sc-field-group">
+        <label for="input-motor-count">{ui.motorCountLabel}</label>
+        <input type="number" id="input-motor-count" class="sc-input" value="4" min="1" max="8" step="1" />
+      </div>
+
+      <div class="sc-field-group" style="margin-top: 0.8rem;">
+        <div class="sc-field-header">
+          <label for="input-peak-current">{ui.peakMotorCurrentLabel}</label>
+        </div>
+        <input type="number" id="input-peak-current" class="sc-input" value="35" min="1" max="100" step="1" />
+        <input type="range" id="range-peak-current" class="sc-slider" value="35" min="5" max="75" step="1" aria-label={ui.peakMotorCurrentLabel} />
+      </div>
+
+      <div class="sc-field-group" style="margin-top: 0.8rem;">
+        <label for="input-aux-current">{ui.auxCurrentLabel}</label>
+        <input type="number" id="input-aux-current" class="sc-input" value="1.5" min="0" max="10" step="0.1" />
+      </div>
+    </div>
+  </div>
+
+  <div class="sc-display-panel">
+    <div class="sc-header-bar">
+      <div class="sc-section-title" style="margin-bottom: 0;">{ui.resultsHeader}</div>
+      <div class="sc-safety-badge status-optimal" data-metric="safetyBadge">{ui.statusOptimalTitle}</div>
+    </div>
+
+    <div class="sc-svg-wrapper" data-element="svgContainer" set:html={initialSvg}></div>
+
+    <div class="sc-results-grid">
+      <div class="sc-metric-card">
+        <div class="sc-metric-label">{ui.realisticMaxCurrentLabel}</div>
+        <div class="sc-metric-value" data-metric="realisticMaxCurrent">{initialResults.realisticMaxCurrentA.toFixed(1)} A</div>
+      </div>
+      <div class="sc-metric-card">
+        <div class="sc-metric-label">{ui.realisticCRatingLabel}</div>
+        <div class="sc-metric-value" data-metric="realisticCRating">{initialResults.realisticCRating} C</div>
+      </div>
+      <div class="sc-metric-card">
+        <div class="sc-metric-label">{ui.totalPeakDrawLabel}</div>
+        <div class="sc-metric-value" data-metric="totalPeakDraw">{initialResults.totalPeakDrawA.toFixed(1)} A</div>
+      </div>
+      <div class="sc-metric-card">
+        <div class="sc-metric-label">{ui.voltageSagLabel}</div>
+        <div class="sc-metric-value" data-metric="voltageSag">-{initialResults.voltageSagV.toFixed(2)} V</div>
+      </div>
+      <div class="sc-metric-card">
+        <div class="sc-metric-label">{ui.sagNominalVoltageLabel}</div>
+        <div class="sc-metric-value" data-metric="sagNominalVoltage">{initialResults.sagNominalVoltageV.toFixed(1)} V</div>
+      </div>
+      <div class="sc-metric-card">
+        <div class="sc-metric-label">{ui.flightTimeFullThrottleLabel}</div>
+        <div class="sc-metric-value" data-metric="flightTimeFullThrottle">{formatTimeSeconds(initialResults.flightTimeFullThrottleSec)}</div>
+      </div>
+      <div class="sc-metric-card">
+        <div class="sc-metric-label">{ui.flightTimeHoverLabel}</div>
+        <div class="sc-metric-value" data-metric="flightTimeHover">{formatTimeSeconds(initialResults.flightTimeHoverSec)}</div>
+      </div>
+      <div class="sc-metric-card">
+        <div class="sc-metric-label">{ui.claimedMaxCurrentLabel}</div>
+        <div class="sc-metric-value" data-metric="claimedMaxCurrent">{initialResults.claimedMaxCurrentA.toFixed(1)} A</div>
+      </div>
+    </div>
+
+    <div class="sc-status-box">
+      <h4 data-metric="statusTitle">{ui.statusOptimalTitle}</h4>
+      <p data-metric="statusDesc">{ui.statusOptimalDesc}</p>
+    </div>
+  </div>
+</div>
+
+<script is:inline type="application/json" id="lipo-c-rating-ui-data" set:html={JSON.stringify(ui)}></script>
+
+<script>
+  import { DroneBatteryCRatingCalculatorController } from './controller';
+
+  function initController() {
+    const root = document.getElementById('drone-lipo-c-rating-calculator-root');
+    if (!root) return;
+    const uiEl = document.getElementById('lipo-c-rating-ui-data');
+    const uiData = uiEl ? JSON.parse(uiEl.textContent || '{}') : {};
+    new DroneBatteryCRatingCalculatorController(root, uiData);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initController);
+  } else {
+    initController();
+  }
+</script>

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

@@ -0,0 +1,225 @@
+import type { BatteryInputs, BatteryChemistry } from './logic';
+import { calculateBatteryMetrics } from './logic';
+import { evaluateSafetyPresentation } from './evaluator';
+import { updateDOMMetrics, updateDOMSafety, renderBatterySVG, type DOMResultElements } from './dom-views';
+import { loadSavedInputs, saveInputs } from './storage';
+import type { DroneBatteryCRatingCalculatorUI } from './ui';
+
+export interface PresetConfig {
+  capacitymAh: number;
+  claimedCRating: number;
+  cellCount: number;
+  chemistry: BatteryChemistry;
+  internalResistanceMOm: number;
+  motorCount: number;
+  peakMotorCurrentA: number;
+  auxCurrentA: number;
+}
+
+export const PRESETS: Record<string, PresetConfig> = {
+  whoop: { capacitymAh: 300, claimedCRating: 80, cellCount: 1, chemistry: 'lihv', internalResistanceMOm: 15, motorCount: 4, peakMotorCurrentA: 4, auxCurrentA: 0.5 },
+  freestyle5: { capacitymAh: 1300, claimedCRating: 100, cellCount: 6, chemistry: 'lipo', internalResistanceMOm: 4, motorCount: 4, peakMotorCurrentA: 35, auxCurrentA: 1.5 },
+  cinewhoop: { capacitymAh: 850, claimedCRating: 95, cellCount: 4, chemistry: 'lipo', internalResistanceMOm: 6, motorCount: 4, peakMotorCurrentA: 20, auxCurrentA: 2.0 },
+  longrange7: { capacitymAh: 3000, claimedCRating: 35, cellCount: 6, chemistry: 'liion', internalResistanceMOm: 12, motorCount: 4, peakMotorCurrentA: 22, auxCurrentA: 2.5 },
+  racing5: { capacitymAh: 1400, claimedCRating: 150, cellCount: 6, chemistry: 'lipo', internalResistanceMOm: 2.5, motorCount: 4, peakMotorCurrentA: 55, auxCurrentA: 1.2 },
+};
+
+export class DroneBatteryCRatingCalculatorController {
+  private container: HTMLElement;
+  private ui: DroneBatteryCRatingCalculatorUI;
+  private elements!: DOMResultElements;
+  private inputs!: BatteryInputs;
+  private activePreset: string | null = 'freestyle5';
+
+  constructor(container: HTMLElement, ui: DroneBatteryCRatingCalculatorUI) {
+    this.container = container;
+    this.ui = ui;
+    this.initElements();
+    this.initInputs();
+    this.bindEvents();
+    this.recalculate();
+  }
+
+  private initElements(): void {
+    this.elements = {
+      claimedMaxCurrent: this.container.querySelector('[data-metric="claimedMaxCurrent"]')!,
+      realisticCRating: this.container.querySelector('[data-metric="realisticCRating"]')!,
+      realisticMaxCurrent: this.container.querySelector('[data-metric="realisticMaxCurrent"]')!,
+      totalPeakDraw: this.container.querySelector('[data-metric="totalPeakDraw"]')!,
+      voltageSag: this.container.querySelector('[data-metric="voltageSag"]')!,
+      sagNominalVoltage: this.container.querySelector('[data-metric="sagNominalVoltage"]')!,
+      flightTimeFullThrottle: this.container.querySelector('[data-metric="flightTimeFullThrottle"]')!,
+      flightTimeHover: this.container.querySelector('[data-metric="flightTimeHover"]')!,
+      burstRatingRequired: this.container.querySelector('[data-metric="burstRatingRequired"]')!,
+      safetyBadge: this.container.querySelector('[data-metric="safetyBadge"]')!,
+      statusTitle: this.container.querySelector('[data-metric="statusTitle"]')!,
+      statusDesc: this.container.querySelector('[data-metric="statusDesc"]')!,
+      svgContainer: this.container.querySelector('[data-element="svgContainer"]')!,
+    };
+  }
+
+  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-capacity', String(this.inputs.capacitymAh));
+    this.setInputValue('#range-capacity', String(this.inputs.capacitymAh));
+    this.setInputValue('#input-claimed-c', String(this.inputs.claimedCRating));
+    this.setInputValue('#range-claimed-c', String(this.inputs.claimedCRating));
+    this.setInputValue('#input-ir', String(this.inputs.internalResistanceMOm));
+    this.setInputValue('#range-ir', String(this.inputs.internalResistanceMOm));
+    this.setInputValue('#input-motor-count', String(this.inputs.motorCount));
+    this.setInputValue('#input-peak-current', String(this.inputs.peakMotorCurrentA));
+    this.setInputValue('#range-peak-current', String(this.inputs.peakMotorCurrentA));
+    this.setInputValue('#input-aux-current', String(this.inputs.auxCurrentA));
+
+    this.updateCustomSelect('cell-count', String(this.inputs.cellCount));
+    this.updateCustomSelect('chemistry', this.inputs.chemistry);
+    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();
+    document.addEventListener('click', () => this.closeAllSelects());
+  }
+
+  private bindNumberAndRangeInputs(): void {
+    this.bindRangeSync('#input-capacity', '#range-capacity', (v) => { this.inputs.capacitymAh = v; });
+    this.bindRangeSync('#input-claimed-c', '#range-claimed-c', (v) => { this.inputs.claimedCRating = v; });
+    this.bindRangeSync('#input-ir', '#range-ir', (v) => { this.inputs.internalResistanceMOm = v; });
+    this.bindRangeSync('#input-peak-current', '#range-peak-current', (v) => { this.inputs.peakMotorCurrentA = v; });
+
+    const motorInput = this.container.querySelector('#input-motor-count');
+    motorInput?.addEventListener('input', () => {
+      this.inputs.motorCount = Math.max(1, parseInt((motorInput as HTMLInputElement).value, 10) || 1);
+      this.onInputChanged();
+    });
+
+    const auxInput = this.container.querySelector('#input-aux-current');
+    auxInput?.addEventListener('input', () => {
+      this.inputs.auxCurrentA = this.parseVal('#input-aux-current');
+      this.onInputChanged();
+    });
+  }
+
+  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 === 'cell-count') this.inputs.cellCount = parseInt(val, 10);
+    if (name === 'chemistry') this.inputs.chemistry = val as BatteryChemistry;
+    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 = calculateBatteryMetrics(this.inputs);
+    const safetyEval = evaluateSafetyPresentation(results.safetyStatus, this.ui);
+    updateDOMMetrics(this.elements, results);
+    updateDOMSafety(this.elements, safetyEval);
+    if (this.elements.svgContainer) {
+      this.elements.svgContainer.innerHTML = renderBatterySVG(this.inputs, results);
+    }
+    saveInputs(this.inputs);
+  }
+}