@jjlmoya/utils-aquarium 1.65.0 → 1.67.0

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/aquarium-calcium-alkalinity-dosing-calculator.css

@@ -0,0 +1,611 @@
+.acad-root {
+  --acad-ink: #152c2d;
+  --acad-ink-soft: #254647;
+  --acad-paper: #f7f0e6;
+  --acad-paper-deep: #e9dfd1;
+  --acad-teal: #159da3;
+  --acad-teal-dark: #08727a;
+  --acad-coral: #e87e62;
+  --acad-amber: #e7a64c;
+  --acad-muted: #5b7070;
+  --acad-line: rgba(21, 44, 45, 0.18);
+
+  display: block;
+  color: var(--acad-ink);
+}
+
+.acad-card {
+  min-width: 0;
+  border: 1px solid var(--acad-line);
+  border-radius: 1.4rem;
+  overflow: hidden;
+  box-shadow: 0 1.2rem 2.8rem rgba(15, 35, 36, 0.09);
+}
+
+.acad-workspace {
+  display: grid;
+  grid-template-columns: minmax(0, 1.16fr) minmax(310px, 0.84fr);
+  background: var(--acad-paper);
+}
+
+.acad-result {
+  background: var(--acad-ink);
+  color: var(--acad-paper);
+}
+
+.acad-controls {
+  background: var(--acad-paper);
+  border-left: 1px solid var(--acad-line);
+  padding-bottom: clamp(1.25rem, 3vw, 1.8rem);
+}
+
+.acad-card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: clamp(1.25rem, 3vw, 1.8rem) clamp(1.25rem, 3vw, 1.8rem) 0;
+}
+
+.acad-heading-group {
+  min-width: 0;
+}
+
+.acad-kicker {
+  margin: 0 0 0.45rem;
+  color: var(--acad-amber);
+  font-size: 0.69rem;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+.acad-controls .acad-kicker {
+  color: var(--acad-teal-dark);
+}
+
+.acad-card h2 {
+  margin: 0;
+  font-size: clamp(1.55rem, 3vw, 2.2rem);
+  letter-spacing: -0.04em;
+  line-height: 0.98;
+}
+
+.acad-action {
+  flex: 0 0 auto;
+  max-width: 9.5rem;
+  border: 1px solid rgba(247, 240, 230, 0.28);
+  border-radius: 999px;
+  padding: 0.52rem 0.72rem;
+  color: #f8d59b;
+  font-size: 0.72rem;
+  font-weight: 700;
+  line-height: 1.15;
+  text-align: center;
+}
+
+.acad-dose-visual {
+  position: relative;
+  margin: 1.45rem clamp(1.25rem, 3vw, 1.8rem) 0;
+  padding: 1.15rem;
+  border: 1px solid rgba(247, 240, 230, 0.16);
+  border-radius: 1rem;
+  background: linear-gradient(145deg, #1f4849, #173637);
+}
+
+.acad-dose-visual-head {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  color: #a8cbc7;
+  font-size: 0.67rem;
+  font-weight: 800;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.acad-visual-rule {
+  height: 1px;
+  flex: 1;
+  background: rgba(247, 240, 230, 0.2);
+}
+
+.acad-dose-path {
+  display: grid;
+  grid-template-columns: auto minmax(3rem, 1fr) auto;
+  align-items: center;
+  gap: 0.65rem;
+  margin: 1.45rem 0 1.1rem;
+}
+
+.acad-dose-stop {
+  display: grid;
+  gap: 0.18rem;
+}
+
+.acad-stop-dot {
+  display: block;
+  width: 0.65rem;
+  height: 0.65rem;
+  margin-bottom: 0.12rem;
+  border: 2px solid var(--acad-amber);
+  border-radius: 50%;
+  background: var(--acad-ink);
+  box-shadow: 0 0 0 4px rgba(231, 166, 76, 0.14);
+}
+
+.acad-dose-stop-target .acad-stop-dot {
+  border-color: var(--acad-teal);
+  background: var(--acad-teal);
+  box-shadow: 0 0 0 4px rgba(21, 157, 163, 0.15);
+}
+
+.acad-dose-stop strong {
+  font-size: clamp(1.25rem, 3vw, 1.8rem);
+  letter-spacing: -0.06em;
+  line-height: 1;
+}
+
+.acad-dose-stop small {
+  color: #a8cbc7;
+  font-size: 0.65rem;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.acad-dose-line {
+  position: relative;
+  height: 2px;
+  background: rgba(247, 240, 230, 0.24);
+}
+
+.acad-dose-line-fill {
+  display: block;
+  width: 62%;
+  height: 100%;
+  background: linear-gradient(90deg, var(--acad-amber), var(--acad-coral));
+}
+
+.acad-dose-arrow {
+  position: absolute;
+  top: 50%;
+  right: -0.1rem;
+  color: var(--acad-coral);
+  font-size: 1.2rem;
+  line-height: 1;
+  transform: translateY(-58%);
+}
+
+.acad-dose-chip {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 0.4rem;
+  padding: 0.8rem 0.9rem;
+  border: 1px solid rgba(247, 240, 230, 0.2);
+  border-radius: 0.75rem;
+  background: rgba(8, 114, 122, 0.32);
+}
+
+.acad-dose-chip span {
+  color: #a8cbc7;
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.acad-dose-chip strong {
+  color: #fff0ce;
+  font-size: 1.7rem;
+  letter-spacing: -0.06em;
+  line-height: 1;
+}
+
+.acad-visual-steps {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-top: 1rem;
+  color: #a8cbc7;
+  font-size: 0.62rem;
+  line-height: 1.2;
+}
+
+.acad-visual-steps span {
+  display: grid;
+  gap: 0.2rem;
+}
+.acad-visual-steps span:nth-child(2) {
+  text-align: center;
+}
+.acad-visual-steps span:last-child {
+  text-align: right;
+}
+.acad-visual-steps b {
+  color: var(--acad-coral);
+  font-size: 0.65rem;
+}
+
+.acad-dose-visual.is-reduce .acad-dose-line-fill {
+  width: 62%;
+  background: var(--acad-teal);
+}
+.acad-dose-visual.is-reduce .acad-dose-arrow {
+  color: var(--acad-teal);
+  transform: translateY(-58%) rotate(180deg);
+}
+.acad-dose-visual.is-target .acad-dose-line-fill {
+  width: 100%;
+  background: var(--acad-teal);
+}
+.acad-dose-visual.is-target .acad-dose-arrow {
+  color: var(--acad-teal);
+}
+.acad-dose-visual.is-target .acad-dose-chip {
+  background: rgba(21, 157, 163, 0.22);
+}
+
+.acad-answer {
+  margin: 1.25rem clamp(1.25rem, 3vw, 1.8rem) 0;
+  padding: 1rem 0 1.15rem;
+  border-top: 1px solid rgba(247, 240, 230, 0.16);
+  border-bottom: 1px solid rgba(247, 240, 230, 0.16);
+}
+
+.acad-answer-label {
+  display: block;
+  color: #a8cbc7;
+  font-size: 0.7rem;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.acad-answer strong {
+  display: block;
+  margin: 0.18rem 0;
+  color: #fff0ce;
+  font-size: clamp(2.25rem, 6vw, 4rem);
+  letter-spacing: -0.08em;
+  line-height: 0.95;
+}
+
+.acad-answer p {
+  max-width: 38rem;
+  margin: 0.55rem 0 0;
+  color: #d4e2da;
+  font-size: 0.87rem;
+  line-height: 1.48;
+}
+
+.acad-stat-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.55rem;
+  margin: 1rem clamp(1.25rem, 3vw, 1.8rem) 0;
+}
+
+.acad-stat {
+  min-height: 3.9rem;
+  padding: 0.72rem;
+  border-radius: 0.75rem;
+  background: rgba(247, 240, 230, 0.08);
+}
+
+.acad-stat span {
+  display: block;
+  color: #a8cbc7;
+  font-size: 0.68rem;
+}
+.acad-stat strong {
+  display: block;
+  margin-top: 0.34rem;
+  font-size: 0.93rem;
+}
+.acad-stat-feature {
+  grid-column: 1 / -1;
+  background: rgba(21, 157, 163, 0.25);
+}
+
+.acad-note {
+  margin: 1rem clamp(1.25rem, 3vw, 1.8rem) clamp(1.25rem, 3vw, 1.8rem);
+  color: #b8cfca;
+  font-size: 0.74rem;
+  line-height: 1.5;
+}
+
+.acad-parameter-mark {
+  display: grid;
+  flex: 0 0 auto;
+  place-items: center;
+  width: 4.3rem;
+  height: 4.3rem;
+  border: 1px solid rgba(21, 157, 163, 0.4);
+  border-radius: 50%;
+  background: rgba(21, 157, 163, 0.12);
+  color: var(--acad-teal-dark);
+  text-align: center;
+}
+
+.acad-parameter-mark span {
+  font-size: 1.4rem;
+  font-weight: 900;
+  letter-spacing: -0.06em;
+  line-height: 1;
+}
+.acad-parameter-mark small {
+  max-width: 3.7rem;
+  font-size: 0.53rem;
+  font-weight: 800;
+  line-height: 1.1;
+}
+
+.acad-parameter-picker {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+  margin: 1.45rem clamp(1.25rem, 3vw, 1.8rem) 0;
+  padding: 0.3rem;
+  border: 1px solid var(--acad-line);
+  border-radius: 0.9rem;
+  background: var(--acad-paper-deep);
+}
+
+.acad-parameter-picker button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  min-height: 2.8rem;
+  border: 0;
+  border-radius: 0.65rem;
+  background: transparent;
+  color: var(--acad-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.78rem;
+  font-weight: 800;
+}
+
+.acad-parameter-picker button span {
+  color: var(--acad-teal-dark);
+  font-size: 0.7rem;
+  font-weight: 900;
+  letter-spacing: 0.03em;
+}
+
+.acad-parameter-picker button:hover,
+.acad-parameter-picker button:focus-visible {
+  outline: 2px solid var(--acad-coral);
+  outline-offset: 1px;
+}
+.acad-parameter-picker button.is-active {
+  background: var(--acad-ink);
+  color: var(--acad-paper);
+}
+.acad-parameter-picker button.is-active span {
+  color: var(--acad-amber);
+}
+
+.acad-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.8rem;
+  margin: 1.35rem clamp(1.25rem, 3vw, 1.8rem) 0;
+}
+
+.acad-field {
+  display: grid;
+  gap: 0.38rem;
+}
+.acad-field-strength {
+  grid-column: 1 / -1;
+}
+
+.acad-field span,
+.acad-option-row > div > span {
+  font-size: 0.74rem;
+  font-weight: 800;
+  line-height: 1.25;
+}
+.acad-field small {
+  color: var(--acad-teal-dark);
+  font-size: 0.67rem;
+  font-weight: 800;
+}
+
+.acad-field input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--acad-line);
+  border-radius: 0.68rem;
+  padding: 0.78rem 0.82rem;
+  background: rgba(255, 255, 255, 0.58);
+  color: var(--acad-ink);
+  font: inherit;
+  font-size: 1rem;
+}
+
+.acad-field input:focus-visible {
+  outline: 2px solid var(--acad-coral);
+  outline-offset: 2px;
+}
+
+.acad-help {
+  margin: 0.65rem clamp(1.25rem, 3vw, 1.8rem) 0;
+  color: var(--acad-muted);
+  font-size: 0.73rem;
+  line-height: 1.45;
+}
+
+.acad-option-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.8rem;
+  margin: 1.35rem clamp(1.25rem, 3vw, 1.8rem) 0;
+}
+
+.acad-option-row > div > span {
+  display: block;
+  margin-bottom: 0.4rem;
+  color: var(--acad-muted);
+}
+
+.acad-toggle {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.2rem;
+  width: max-content;
+  max-width: 100%;
+  padding: 0.2rem;
+  border: 1px solid var(--acad-line);
+  border-radius: 99px;
+  background: rgba(255, 255, 255, 0.42);
+}
+
+.acad-toggle button {
+  border: 0;
+  border-radius: 99px;
+  padding: 0.46rem 0.62rem;
+  background: transparent;
+  color: var(--acad-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.7rem;
+  font-weight: 800;
+}
+
+.acad-toggle button:hover,
+.acad-toggle button:focus-visible {
+  color: var(--acad-ink);
+  outline: 2px solid var(--acad-coral);
+  outline-offset: 1px;
+}
+.acad-toggle button.is-active {
+  background: var(--acad-teal);
+  color: #fff;
+}
+
+.acad-controls-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.8rem;
+  margin: 1.4rem clamp(1.25rem, 3vw, 1.8rem) 0;
+}
+
+.acad-reset {
+  border: 1px solid var(--acad-line);
+  border-radius: 99px;
+  padding: 0.62rem 0.82rem;
+  background: transparent;
+  color: var(--acad-ink);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.76rem;
+  font-weight: 800;
+}
+
+.acad-reset:hover,
+.acad-reset:focus-visible {
+  border-color: var(--acad-coral);
+  outline: 2px solid var(--acad-coral);
+  outline-offset: 2px;
+}
+
+.acad-local-badge {
+  color: var(--acad-teal-dark);
+  font-size: 0.68rem;
+  font-weight: 800;
+  text-align: right;
+}
+
+.acad-error {
+  margin: 0.8rem clamp(1.25rem, 3vw, 1.8rem) 0;
+  color: #a53e35;
+  font-size: 0.76rem;
+  font-weight: 700;
+}
+
+@media (max-width: 820px) {
+  .acad-workspace {
+    grid-template-columns: 1fr;
+  }
+  .acad-controls {
+    border-top: 1px solid var(--acad-line);
+    border-left: 0;
+  }
+}
+
+@media (max-width: 480px) {
+  .acad-card-head {
+    flex-direction: column;
+  }
+  .acad-action {
+    max-width: none;
+    text-align: left;
+  }
+  .acad-fields {
+    grid-template-columns: 1fr;
+  }
+  .acad-field-strength {
+    grid-column: auto;
+  }
+  .acad-option-row {
+    grid-template-columns: 1fr;
+  }
+  .acad-dose-visual-head {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.35rem;
+  }
+  .acad-visual-rule {
+    width: 100%;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .acad-root {
+    --acad-ink: #edf2e9;
+    --acad-paper: #1d3434;
+    --acad-paper-deep: #294343;
+    --acad-muted: #c1d3cd;
+    --acad-line: rgba(237, 242, 233, 0.22);
+  }
+  .acad-result {
+    background: #102426;
+    color: #f7f0e6;
+  }
+  .acad-controls {
+    background: #203838;
+  }
+  .acad-controls .acad-kicker,
+  .acad-field small,
+  .acad-parameter-mark,
+  .acad-local-badge {
+    color: #66cbd0;
+  }
+  .acad-field input {
+    background: rgba(0, 0, 0, 0.2);
+    color: var(--acad-ink);
+  }
+  .acad-parameter-picker {
+    background: rgba(0, 0, 0, 0.16);
+  }
+  .acad-parameter-picker button.is-active {
+    background: #edf2e9;
+    color: #152c2d;
+  }
+  .acad-parameter-picker button.is-active span {
+    color: var(--acad-teal-dark);
+  }
+  .acad-toggle {
+    background: rgba(0, 0, 0, 0.18);
+  }
+  .acad-reset {
+    color: var(--acad-ink);
+  }
+}

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/bibliography.astro

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

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/bibliography.ts

@@ -0,0 +1,5 @@
+export const bibliography = [
+  { name: 'NOAA Ocean Service, Ocean acidification and seawater chemistry', url: 'https://oceanservice.noaa.gov/education/tutorial_chemistry/02oceanchemistry.html' },
+  { name: 'USGS Water Science School, Hardness of water', url: 'https://www.usgs.gov/special-topics/water-science-school/science/hardness-water' },
+  { name: 'FAO, Manual de acuicultura en español', url: 'https://www.fao.org/4/x5685s/x5685s00.htm' },
+];

package/src/tool/aquariumCalciumAlkalinityDosingCalculator/component.astro

@@ -0,0 +1,93 @@
+---
+import type { AquariumCalciumAlkalinityDosingCalculatorUI } from './ui';
+import './aquarium-calcium-alkalinity-dosing-calculator.css';
+
+const { ui } = Astro.props as { ui: AquariumCalciumAlkalinityDosingCalculatorUI };
+---
+
+<div id="aquarium-calcium-alkalinity-dosing-calculator" class="acad-root" data-ui={JSON.stringify(ui)}>
+  <section class="acad-card acad-workspace" aria-label={ui.resultTitle}>
+  <section class="acad-result" aria-labelledby="acad-result-title">
+    <header class="acad-card-head">
+      <div class="acad-heading-group">
+        <p class="acad-kicker">{ui.toolKicker}</p>
+        <h2 id="acad-result-title">{ui.resultTitle}</h2>
+      </div>
+      <span class="acad-action" data-output="action">{ui.emptyState}</span>
+    </header>
+
+    <div class="acad-dose-visual" data-output="scene" role="img" aria-label={ui.sceneAdd}>
+      <div class="acad-dose-visual-head">
+        <span>{ui.currentTargetLabel}</span>
+        <span class="acad-visual-rule"></span>
+        <span data-output="dose-label">{ui.doseLabel}</span>
+      </div>
+      <div class="acad-dose-path" aria-hidden="true">
+        <div class="acad-dose-stop">
+          <span class="acad-stop-dot"></span>
+          <strong data-output="current-value">—</strong>
+          <small data-output="value-unit">{ui.unitCalcium}</small>
+        </div>
+        <div class="acad-dose-line"><span class="acad-dose-line-fill"></span><span class="acad-dose-arrow">→</span></div>
+        <div class="acad-dose-stop acad-dose-stop-target">
+          <span class="acad-stop-dot"></span>
+          <strong data-output="target-value">—</strong>
+          <small data-output="value-unit-target">{ui.unitCalcium}</small>
+        </div>
+      </div>
+      <div class="acad-dose-chip"><span data-output="dose-label-chip">{ui.doseLabel}</span><strong data-output="dose-chip">—</strong></div>
+      <div class="acad-visual-steps"><span><b>01</b>{ui.currentLabel}</span><span><b>02</b>{ui.doseLabel}</span><span><b>03</b>{ui.targetLabel}</span></div>
+    </div>
+
+    <div class="acad-answer">
+      <span class="acad-answer-label" data-output="dose-label-answer">{ui.doseLabel}</span>
+      <strong data-output="dose">—</strong>
+      <p data-output="summary">{ui.emptyState}</p>
+    </div>
+
+    <div class="acad-stat-grid" aria-live="polite">
+      <div class="acad-stat acad-stat-feature"><span>{ui.resultActionLabel}</span><strong data-output="action-detail">—</strong></div>
+      <div class="acad-stat"><span>{ui.currentTargetLabel}</span><strong data-output="current-target">—</strong></div>
+      <div class="acad-stat"><span>{ui.differenceLabel}</span><strong data-output="difference">—</strong></div>
+      <div class="acad-stat"><span>{ui.waterChangeLabel}</span><strong data-output="water-change">—</strong></div>
+    </div>
+    <p class="acad-note">{ui.verificationNote}</p>
+  </section>
+
+  <section class="acad-controls" aria-labelledby="acad-configure-title">
+    <header class="acad-card-head">
+      <div class="acad-heading-group">
+        <p class="acad-kicker">{ui.configureTitle}</p>
+        <h2 id="acad-configure-title">{ui.parameterLabel}</h2>
+      </div>
+      <div class="acad-parameter-mark" aria-hidden="true"><span data-output="parameter-short">{ui.calciumShortLabel}</span><small data-output="parameter-unit">{ui.unitCalcium}</small></div>
+    </header>
+
+    <div class="acad-parameter-picker" role="group" aria-label={ui.parameterLabel}>
+      <button type="button" data-parameter-choice="calcium" class="is-active" aria-pressed="true"><span>{ui.calciumShortLabel}</span>{ui.calciumLabel}</button>
+      <button type="button" data-parameter-choice="alkalinity" aria-pressed="false"><span>{ui.alkalinityShortLabel}</span>{ui.alkalinityLabel}</button>
+    </div>
+
+    <div class="acad-fields">
+      <label class="acad-field"><span>{ui.volumeLabel} <small data-output="volume-unit">{ui.litresLabel}</small></span><input data-field="volume" type="number" min="0.1" max="100000" step="0.1" inputmode="decimal" /></label>
+      <label class="acad-field"><span>{ui.currentLabel} <small data-output="value-unit">{ui.unitCalcium}</small></span><input data-field="current" type="number" min="0" max="1000" step="0.1" inputmode="decimal" /></label>
+      <label class="acad-field"><span>{ui.targetLabel} <small data-output="value-unit-target">{ui.unitCalcium}</small></span><input data-field="target" type="number" min="0" max="1000" step="0.1" inputmode="decimal" /></label>
+      <label class="acad-field acad-field-strength"><span>{ui.productStrengthLabel} <small data-output="strength-unit">{ui.unitCalcium} / {ui.millilitresLabel} / 100 L</small></span><input data-field="strength" type="number" min="0.001" max="10000" step="0.1" inputmode="decimal" aria-describedby="acad-strength-help" /></label>
+    </div>
+    <p id="acad-strength-help" class="acad-help">{ui.productStrengthHint}</p>
+
+    <div class="acad-option-row">
+      <div><span>{ui.doseUnitLabel}</span><div class="acad-toggle acad-toggle-small" role="group" aria-label={ui.doseUnitLabel}><button type="button" data-dose-unit-choice="ml" class="is-active" aria-pressed="true">{ui.millilitresLabel}</button><button type="button" data-dose-unit-choice="g" aria-pressed="false">{ui.gramsLabel}</button></div></div>
+      <div><span>{ui.volumeUnitLabel}</span><div class="acad-toggle acad-toggle-small" role="group" aria-label={ui.volumeUnitLabel}><button type="button" data-volume-unit-choice="litres" class="is-active" aria-pressed="true">{ui.litresLabel}</button><button type="button" data-volume-unit-choice="gallons" aria-pressed="false">{ui.gallonsLabel}</button></div></div>
+    </div>
+    <div class="acad-controls-foot"><button class="acad-reset" type="button" data-action="reset">{ui.resetLabel}</button><span class="acad-local-badge">{ui.localOnlyLabel}</span></div>
+    <p class="acad-error" role="alert" data-error hidden>{ui.invalidState}</p>
+  </section>
+  </section>
+</div>
+
+<script>
+  import { startCalciumAlkalinityDosingController } from './controller';
+  const root = document.querySelector<HTMLElement>('#aquarium-calcium-alkalinity-dosing-calculator');
+  if (root?.dataset.ui) startCalciumAlkalinityDosingController({ root, ui: JSON.parse(root.dataset.ui) });
+</script>