@jjlmoya/utils-nautical 1.18.0 → 1.19.0

package/src/tool/anchorScope/component.astro

@@ -0,0 +1,219 @@
+---
+import type { AnchorScopeUI } from './ui';
+import './anchorScope.css';
+
+interface Props {
+  ui: AnchorScopeUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<section id="anchor-scope-calculator" class="asc-calculator" data-i18n={JSON.stringify(ui)}>
+  <div class="asc-main-card">
+    <div class="asc-sidebar">
+      <div class="asc-sidebar-top">
+        <span class="asc-sidebar-title">{ui.parametersTitle}</span>
+        <div class="asc-unit-toggle">
+          <button type="button" class="asc-unit-btn asc-unit-active" data-unit="metric">{ui.unitM}</button>
+          <button type="button" class="asc-unit-btn" data-unit="imperial">{ui.unitFt}</button>
+        </div>
+      </div>
+
+      <div class="asc-presets-bar">
+        <button type="button" class="asc-preset-chip" data-preset="calm">{ui.presetProtected}</button>
+        <button type="button" class="asc-preset-chip asc-preset-active" data-preset="moderate">{ui.presetOpen}</button>
+        <button type="button" class="asc-preset-chip" data-preset="storm">{ui.presetStorm}</button>
+      </div>
+
+      <div class="asc-inputs-group">
+        <div class="asc-input-row">
+          <div class="asc-input-block">
+            <label for="sc-depth">{ui.waterDepthLabel}</label>
+            <div class="asc-unit-field">
+              <input type="number" id="sc-depth" class="sc-num-input" min="0.5" step="0.5" />
+              <span class="asc-field-unit">{ui.unitM}</span>
+            </div>
+          </div>
+          <div class="asc-input-block">
+            <label for="sc-bow">{ui.bowHeightLabel}</label>
+            <div class="asc-unit-field">
+              <input type="number" id="sc-bow" class="sc-num-input" min="0" step="0.1" />
+              <span class="asc-field-unit">{ui.unitM}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="asc-input-row">
+          <div class="asc-input-block">
+            <label for="sc-tide">{ui.tideRangeLabel}</label>
+            <div class="asc-unit-field">
+              <input type="number" id="sc-tide" class="sc-num-input" min="0" step="0.1" />
+              <span class="asc-field-unit">{ui.unitM}</span>
+            </div>
+          </div>
+          <div class="asc-input-block">
+            <label for="sc-boat-length">{ui.boatLengthLabel}</label>
+            <div class="asc-unit-field">
+              <input type="number" id="sc-boat-length" class="sc-num-input" min="1" step="0.5" />
+              <span class="asc-field-unit">{ui.unitM}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="asc-input-block">
+          <label>{ui.rodeTypeLabel}</label>
+          <div class="asc-custom-select" id="sc-rode-type-select" data-id="sc-rode-type" data-value="all-chain">
+            <button type="button" class="asc-select-trigger" aria-haspopup="listbox" aria-expanded="false">
+              <span class="asc-select-label">{ui.allChainOption}</span>
+              <svg class="asc-select-chevron" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+              </svg>
+            </button>
+            <div class="asc-select-dropdown" role="listbox">
+              <div class="asc-option asc-option-active" data-val="all-chain" role="option">{ui.allChainOption}</div>
+              <div class="asc-option" data-val="rope-chain" role="option">{ui.ropeChainOption}</div>
+              <div class="asc-option" data-val="all-rope" role="option">{ui.allRopeOption}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="asc-input-block">
+          <label>{ui.windConditionLabel}</label>
+          <div class="asc-custom-select" id="sc-wind-select" data-id="sc-wind" data-value="moderate">
+            <button type="button" class="asc-select-trigger" aria-haspopup="listbox" aria-expanded="false">
+              <span class="asc-select-label">{ui.moderateWindOption}</span>
+              <svg class="asc-select-chevron" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+              </svg>
+            </button>
+            <div class="asc-select-dropdown" role="listbox">
+              <div class="asc-option" data-val="calm" role="option">{ui.calmWindOption}</div>
+              <div class="asc-option asc-option-active" data-val="moderate" role="option">{ui.moderateWindOption}</div>
+              <div class="asc-option" data-val="strong" role="option">{ui.strongWindOption}</div>
+              <div class="asc-option" data-val="storm" role="option">{ui.stormWindOption}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="asc-input-block">
+          <label>{ui.seabedTypeLabel}</label>
+          <div class="asc-custom-select" id="sc-seabed-select" data-id="sc-seabed" data-value="sand">
+            <button type="button" class="asc-select-trigger" aria-haspopup="listbox" aria-expanded="false">
+              <span class="asc-select-label">{ui.sandOption}</span>
+              <svg class="asc-select-chevron" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+              </svg>
+            </button>
+            <div class="asc-select-dropdown" role="listbox">
+              <div class="asc-option asc-option-active" data-val="sand" role="option">{ui.sandOption}</div>
+              <div class="asc-option" data-val="mud" role="option">{ui.mudOption}</div>
+              <div class="asc-option" data-val="clay" role="option">{ui.clayOption}</div>
+              <div class="asc-option" data-val="gravel" role="option">{ui.gravelOption}</div>
+              <div class="asc-option" data-val="rock" role="option">{ui.rockOption}</div>
+              <div class="asc-option" data-val="weed" role="option">{ui.weedOption}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <button type="button" id="sc-reset-btn" class="asc-reset-btn">{ui.resetButton}</button>
+    </div>
+
+    <div class="asc-content">
+      <div class="asc-metrics-grid">
+        <div class="asc-metric-card asc-metric-highlight">
+          <span class="asc-metric-lbl">{ui.recommendedRodeLabel}</span>
+          <span class="asc-metric-val" id="sc-rode-length-val">-</span>
+        </div>
+        <div class="asc-metric-card">
+          <span class="asc-metric-lbl">{ui.scopeRatioLabel}</span>
+          <span class="asc-metric-val" id="sc-scope-val">-</span>
+        </div>
+        <div class="asc-metric-card">
+          <span class="asc-metric-lbl">{ui.swingRadiusLabel}</span>
+          <span class="asc-metric-val" id="sc-swing-radius-val">-</span>
+        </div>
+        <div class="asc-metric-card">
+          <span class="asc-metric-lbl">{ui.totalDepthLabel}</span>
+          <span class="asc-metric-val" id="sc-total-depth-val">-</span>
+        </div>
+        <div class="asc-metric-card">
+          <span class="asc-metric-lbl">{ui.minSafeRodeLabel}</span>
+          <span class="asc-metric-val" id="sc-min-rode-val">-</span>
+        </div>
+        <div class="asc-metric-card">
+          <span class="asc-metric-lbl">{ui.heavyWeatherRodeLabel}</span>
+          <span class="asc-metric-val" id="sc-storm-rode-val">-</span>
+        </div>
+      </div>
+
+      <div class="asc-status-banner">
+        <div class="asc-status-tag" id="sc-status-badge">OPTIMAL</div>
+        <div class="asc-status-info">
+          <span class="asc-status-headline" id="sc-status-title"></span>
+          <span class="asc-status-subline" id="sc-status-desc"></span>
+        </div>
+      </div>
+
+      <div class="asc-visual-stage">
+        <svg id="sc-anchor-svg" class="asc-diagram-svg" viewBox="0 0 600 240">
+          <defs>
+            <linearGradient id="asc-water-grad" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="#0284c7" stop-opacity="0.35" />
+              <stop offset="100%" stop-color="#0c4a6e" stop-opacity="0.95" />
+            </linearGradient>
+            <linearGradient id="asc-seabed-grad" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="#475569" />
+              <stop offset="100%" stop-color="#1e293b" />
+            </linearGradient>
+          </defs>
+
+          <rect id="sc-tide-water" x="0" y="55" width="600" height="25" fill="#38bdf8" fill-opacity="0.25" />
+          <line x1="0" y1="80" x2="600" y2="80" stroke="#38bdf8" stroke-dasharray="6,4" stroke-width="1.5" />
+          <rect x="0" y="80" width="600" height="135" fill="url(#asc-water-grad)" />
+
+          <path d="M 0 215 Q 200 210 400 218 T 600 215 L 600 240 L 0 240 Z" fill="url(#asc-seabed-grad)" />
+
+          <line x1="550" y1="55" x2="550" y2="215" stroke="#94a3b8" stroke-dasharray="3,3" stroke-width="1.2" />
+          <text x="540" y="140" fill="#94a3b8" font-size="11" font-weight="700" text-anchor="end" id="sc-svg-depth-text">9.0m</text>
+
+          <path id="sc-catenary-line" d="M 485 75 Q 300 200 120 215 L 75 215" fill="none" stroke="#f59e0b" stroke-width="4" stroke-linecap="round" />
+
+          <g id="sc-anchor-group" transform="translate(60, 202)">
+            <circle cx="15" cy="8" r="4" fill="#f8fafc" />
+            <path d="M 15 8 L 15 24 M 5 18 Q 15 30 25 18" fill="none" stroke="#f8fafc" stroke-width="3" stroke-linecap="round" />
+            <path d="M 0 24 Q 15 18 30 24" fill="none" stroke="#64748b" stroke-width="2" />
+          </g>
+
+          <g id="sc-boat-group" transform="translate(425, 48)">
+            <path d="M 15 32 L 75 32 L 88 18 L 0 18 Z" fill="#f8fafc" />
+            <rect x="25" y="8" width="28" height="11" rx="2" fill="#0284c7" />
+            <line x1="45" y1="8" x2="45" y2="0" stroke="#f8fafc" stroke-width="2" />
+            <circle cx="85" cy="20" r="3.5" fill="#f59e0b" />
+          </g>
+        </svg>
+      </div>
+
+      <div class="asc-advice-row">
+        <div class="asc-advice-card">
+          <span class="asc-advice-tag">{ui.seabedTag}</span>
+          <p class="asc-advice-text" id="sc-seabed-advice"></p>
+        </div>
+        <div class="asc-advice-card">
+          <span class="asc-advice-tag">{ui.catenaryTag}</span>
+          <p class="asc-advice-text" id="sc-catenary-advice"></p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<script>
+  import { AnchorScopeController } from './controller';
+
+  const root = document.getElementById('anchor-scope-calculator');
+  if (root) {
+    new AnchorScopeController(root);
+  }
+</script>

package/src/tool/anchorScope/constants.ts

@@ -0,0 +1,51 @@
+import type { RodeType, WindCondition, SeabedType, AnchorInputs } from './types';
+
+export const BASE_SCOPE_RATIOS: Record<RodeType, Record<WindCondition, number>> = {
+  'all-chain': {
+    calm: 4,
+    moderate: 5,
+    strong: 7,
+    storm: 8,
+  },
+  'rope-chain': {
+    calm: 5,
+    moderate: 7,
+    strong: 8,
+    storm: 10,
+  },
+  'all-rope': {
+    calm: 7,
+    moderate: 8,
+    strong: 10,
+    storm: 12,
+  },
+};
+
+export const SEABED_MODIFIERS: Record<SeabedType, number> = {
+  sand: 1.0,
+  mud: 1.1,
+  clay: 1.0,
+  gravel: 1.25,
+  rock: 1.5,
+  weed: 1.4,
+};
+
+export const MIN_SAFE_SCOPE_RATIOS: Record<RodeType, number> = {
+  'all-chain': 4,
+  'rope-chain': 6,
+  'all-rope': 7,
+};
+
+export const DEFAULT_INPUTS: AnchorInputs = {
+  waterDepth: 6,
+  bowHeight: 1.5,
+  tideRange: 1.5,
+  boatLength: 10,
+  rodeType: 'all-chain',
+  windCondition: 'moderate',
+  seabedType: 'sand',
+  unitSystem: 'metric',
+};
+
+export const FEET_TO_METERS = 0.3048;
+export const METERS_TO_FEET = 3.28084;

package/src/tool/anchorScope/controller.ts

@@ -0,0 +1,251 @@
+import type { AnchorInputs, UnitSystem, RodeType, WindCondition, SeabedType } from './types';
+import type { AnchorScopeUI } from './ui';
+import { DEFAULT_INPUTS, FEET_TO_METERS, METERS_TO_FEET } from './constants';
+import { computeAnchorCalculations } from './logic';
+import { evaluateAnchorSecurity } from './evaluator';
+import { loadAnchorInputs, saveAnchorInputs } from './storage';
+import { getPresetInputs } from './presets';
+import {
+  updateMetricDisplay,
+  updateStatusBanner,
+  updateAdviceCards,
+  renderVisualProfile,
+} from './dom-views';
+
+export class AnchorScopeController {
+  private inputs: AnchorInputs;
+  private ui: AnchorScopeUI;
+  private root: HTMLElement;
+
+  constructor(root: HTMLElement) {
+    this.root = root;
+    this.ui = this.parseUiData();
+    this.inputs = loadAnchorInputs();
+    this.initElements();
+    this.attachEvents();
+    this.recalculate();
+  }
+
+  private parseUiData(): AnchorScopeUI {
+    try {
+      const dataStr = this.root.getAttribute('data-i18n') ?? '{}';
+      return JSON.parse(dataStr) as AnchorScopeUI;
+    } catch {
+      return {} as AnchorScopeUI;
+    }
+  }
+
+  private initElements(): void {
+    this.setInputValue('#sc-depth', this.getDisplayValue(this.inputs.waterDepth));
+    this.setInputValue('#sc-bow', this.getDisplayValue(this.inputs.bowHeight));
+    this.setInputValue('#sc-tide', this.getDisplayValue(this.inputs.tideRange));
+    this.setInputValue('#sc-boat-length', this.getDisplayValue(this.inputs.boatLength));
+    this.setCustomSelectValue('#sc-rode-type-select', this.inputs.rodeType);
+    this.setCustomSelectValue('#sc-wind-select', this.inputs.windCondition);
+    this.setCustomSelectValue('#sc-seabed-select', this.inputs.seabedType);
+    this.updateUnitButtons();
+  }
+
+  private attachEvents(): void {
+    this.root.querySelectorAll<HTMLInputElement>('.sc-num-input').forEach((input) => {
+      input.addEventListener('input', () => this.handleNumericInput());
+    });
+    this.attachCustomSelectEvents();
+    this.root.querySelectorAll<HTMLButtonElement>('.asc-preset-chip').forEach((chip) => {
+      chip.addEventListener('click', () => this.applyPreset(chip.getAttribute('data-preset')));
+    });
+    this.root.querySelectorAll<HTMLButtonElement>('.asc-unit-btn, .sc-unit-btn').forEach((btn) => {
+      btn.addEventListener('click', (e) => this.handleUnitSwitch(e));
+    });
+    const resetBtn = this.root.querySelector<HTMLButtonElement>('#sc-reset-btn');
+    if (resetBtn) {
+      resetBtn.addEventListener('click', () => this.handleReset());
+    }
+  }
+
+  private applyPreset(preset: string | null): void {
+    this.inputs = getPresetInputs(preset, this.inputs);
+    this.updateActivePresetChip(preset);
+    this.initElements();
+    saveAnchorInputs(this.inputs);
+    this.recalculate();
+  }
+
+  private updateActivePresetChip(preset: string | null): void {
+    this.root.querySelectorAll<HTMLButtonElement>('.asc-preset-chip').forEach((chip) => {
+      const isActive = chip.getAttribute('data-preset') === preset;
+      chip.classList.toggle('asc-preset-active', isActive);
+    });
+  }
+
+  private attachCustomSelectEvents(): void {
+    this.root.querySelectorAll<HTMLElement>('.asc-custom-select').forEach((sel) => {
+      const trigger = sel.querySelector<HTMLButtonElement>('.asc-select-trigger');
+      trigger?.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.toggleCustomSelect(sel);
+      });
+      sel.querySelectorAll<HTMLElement>('.asc-option').forEach((opt) => {
+        opt.addEventListener('click', (e) => {
+          e.stopPropagation();
+          this.handleOptionSelect(sel, opt);
+        });
+      });
+    });
+    document.addEventListener('click', () => this.closeAllCustomSelects());
+  }
+
+  private toggleCustomSelect(sel: HTMLElement): void {
+    const wasOpen = sel.classList.contains('asc-select-open');
+    this.closeAllCustomSelects();
+    if (!wasOpen) {
+      sel.classList.add('asc-select-open');
+    }
+  }
+
+  private closeAllCustomSelects(): void {
+    this.root.querySelectorAll<HTMLElement>('.asc-custom-select').forEach((s) => {
+      s.classList.remove('asc-select-open');
+    });
+  }
+
+  private handleOptionSelect(sel: HTMLElement, opt: HTMLElement): void {
+    const val = opt.getAttribute('data-val') ?? '';
+    const id = sel.getAttribute('data-id') ?? '';
+    this.setCustomSelectValue(`#${sel.id}`, val);
+    sel.classList.remove('asc-select-open');
+    this.applySelectValue(id, val);
+  }
+
+  private applySelectValue(id: string, val: string): void {
+    if (id === 'sc-rode-type') {
+      this.inputs.rodeType = val as RodeType;
+    } else if (id === 'sc-wind') {
+      this.inputs.windCondition = val as WindCondition;
+    } else if (id === 'sc-seabed') {
+      this.inputs.seabedType = val as SeabedType;
+    }
+    saveAnchorInputs(this.inputs);
+    this.recalculate();
+  }
+
+  private handleNumericInput(): void {
+    this.inputs.waterDepth = this.getStoredValue('#sc-depth');
+    this.inputs.bowHeight = this.getStoredValue('#sc-bow');
+    this.inputs.tideRange = this.getStoredValue('#sc-tide');
+    this.inputs.boatLength = this.getStoredValue('#sc-boat-length');
+    saveAnchorInputs(this.inputs);
+    this.recalculate();
+  }
+
+  private handleUnitSwitch(e: Event): void {
+    const target = e.currentTarget as HTMLButtonElement;
+    const unit = target.getAttribute('data-unit') as UnitSystem;
+    if (unit && unit !== this.inputs.unitSystem) {
+      this.inputs.unitSystem = unit;
+      this.updateUnitButtons();
+      this.initElements();
+      saveAnchorInputs(this.inputs);
+      this.recalculate();
+    }
+  }
+
+  private handleReset(): void {
+    this.inputs = { ...DEFAULT_INPUTS };
+    this.initElements();
+    this.updateActivePresetChip('moderate');
+    saveAnchorInputs(this.inputs);
+    this.recalculate();
+  }
+
+  private recalculate(): void {
+    const result = computeAnchorCalculations(this.inputs);
+    const report = evaluateAnchorSecurity(this.inputs, result);
+    const unitLabel = this.inputs.unitSystem === 'metric' ? this.ui.unitM : this.ui.unitFt;
+    const mult = this.inputs.unitSystem === 'metric' ? 1 : METERS_TO_FEET;
+
+    this.updateMetrics(result, unitLabel, mult);
+    this.updateStatusAndAdvice(report, result);
+    renderVisualProfile(this.root.querySelector<SVGSVGElement>('#sc-anchor-svg'), this.inputs, result);
+  }
+
+  private updateMetrics(result: ReturnType<typeof computeAnchorCalculations>, unit: string, mult: number): void {
+    const format = (v: number) => (v * mult).toFixed(1);
+    updateMetricDisplay(this.root.querySelector('#sc-scope-val'), `${result.effectiveScopeRatio}:1`);
+    updateMetricDisplay(this.root.querySelector('#sc-total-depth-val'), format(result.totalDepth), unit);
+    updateMetricDisplay(this.root.querySelector('#sc-rode-length-val'), format(result.rodeLength), unit);
+    updateMetricDisplay(this.root.querySelector('#sc-swing-radius-val'), format(result.swingRadius), unit);
+    updateMetricDisplay(this.root.querySelector('#sc-min-rode-val'), format(result.minRecommendedRode), unit);
+    updateMetricDisplay(this.root.querySelector('#sc-storm-rode-val'), format(result.heavyWeatherRode), unit);
+  }
+
+  private updateStatusAndAdvice(report: ReturnType<typeof evaluateAnchorSecurity>, result: ReturnType<typeof computeAnchorCalculations>): void {
+    updateStatusBanner(
+      {
+        badge: this.root.querySelector('#sc-status-badge'),
+        title: this.root.querySelector('#sc-status-title'),
+        desc: this.root.querySelector('#sc-status-desc'),
+      },
+      report,
+      result,
+      this.ui,
+    );
+    updateAdviceCards(
+      this.root.querySelector('#sc-seabed-advice'),
+      this.root.querySelector('#sc-catenary-advice'),
+      report,
+      this.ui,
+    );
+  }
+
+  private getDisplayValue(meters: number): string {
+    if (this.inputs.unitSystem === 'imperial') {
+      return (meters * METERS_TO_FEET).toFixed(1);
+    }
+    return meters.toString();
+  }
+
+  private getStoredValue(selector: string): number {
+    const el = this.root.querySelector<HTMLInputElement>(selector);
+    const val = parseFloat(el?.value || '0');
+    if (this.inputs.unitSystem === 'imperial') {
+      return val * FEET_TO_METERS;
+    }
+    return val;
+  }
+
+  private setInputValue(selector: string, val: string): void {
+    const el = this.root.querySelector<HTMLInputElement>(selector);
+    if (el) {
+      el.value = val;
+    }
+  }
+
+  private setCustomSelectValue(selector: string, val: string): void {
+    const sel = this.root.querySelector<HTMLElement>(selector);
+    if (!sel) {
+      return;
+    }
+    sel.setAttribute('data-value', val);
+    const labelEl = sel.querySelector<HTMLElement>('.asc-select-label');
+    sel.querySelectorAll<HTMLElement>('.asc-option').forEach((opt) => {
+      const isSelected = opt.getAttribute('data-val') === val;
+      opt.classList.toggle('asc-option-active', isSelected);
+      if (isSelected && labelEl) {
+        labelEl.textContent = opt.textContent;
+      }
+    });
+  }
+
+  private updateUnitButtons(): void {
+    const unitLabel = this.inputs.unitSystem === 'metric' ? this.ui.unitM : this.ui.unitFt;
+    this.root.querySelectorAll<HTMLButtonElement>('.asc-unit-btn, .sc-unit-btn').forEach((btn) => {
+      const isActive = btn.getAttribute('data-unit') === this.inputs.unitSystem;
+      btn.classList.toggle('asc-unit-active', isActive);
+      btn.classList.toggle('sc-unit-active', isActive);
+    });
+    this.root.querySelectorAll<HTMLElement>('.asc-field-unit').forEach((el) => {
+      el.textContent = unitLabel;
+    });
+  }
+}

package/src/tool/anchorScope/dom-views.ts

@@ -0,0 +1,106 @@
+import type { AnchorCalculationResult, AnchorInputs, CatenaryPoint, RodeType } from './types';
+import type { EvaluationReport } from './evaluator';
+import type { AnchorScopeUI } from './ui';
+import { generateCatenaryCurve } from './logic';
+
+export interface StatusBannerElements {
+  badge: HTMLElement | null;
+  title: HTMLElement | null;
+  desc: HTMLElement | null;
+}
+
+export function updateMetricDisplay(
+  el: HTMLElement | null,
+  value: string | number,
+  unit = '',
+): void {
+  if (!el) {
+    return;
+  }
+  el.textContent = `${value}${unit ? ` ${unit}` : ''}`;
+}
+
+export function updateStatusBanner(
+  elements: StatusBannerElements,
+  report: EvaluationReport,
+  result: AnchorCalculationResult,
+  ui: AnchorScopeUI,
+): void {
+  if (elements.badge) {
+    elements.badge.setAttribute('class', `asc-status-tag sc-status-${result.safetyLevel}`);
+    elements.badge.textContent = result.safetyLevel.toUpperCase();
+  }
+  if (elements.title) {
+    elements.title.textContent = ui[report.statusTitleKey] ?? '';
+  }
+  if (elements.desc) {
+    elements.desc.textContent = ui[report.statusDescKey] ?? '';
+  }
+}
+
+export function updateAdviceCards(
+  seabedCardEl: HTMLElement | null,
+  catenaryCardEl: HTMLElement | null,
+  report: EvaluationReport,
+  ui: AnchorScopeUI,
+): void {
+  if (seabedCardEl) {
+    seabedCardEl.textContent = ui[report.holdingAdviceKey] ?? '';
+  }
+  if (catenaryCardEl) {
+    catenaryCardEl.textContent = ui[report.catenaryEffectKey] ?? '';
+  }
+}
+
+export function buildCatenarySvgPath(start: CatenaryPoint, end: CatenaryPoint, sag: number): string {
+  const seabedTouch = { x: 120, y: 215 };
+  const points = generateCatenaryCurve({ start, end: seabedTouch, sagFactor: sag, pointsCount: 16 });
+  if (points.length === 0) {
+    return '';
+  }
+  let path = `M ${points[0]?.x.toFixed(1)} ${points[0]?.y.toFixed(1)}`;
+  for (let i = 1; i < points.length; i++) {
+    path += ` L ${points[i]?.x.toFixed(1)} ${points[i]?.y.toFixed(1)}`;
+  }
+  path += ` L ${end.x.toFixed(1)} ${end.y.toFixed(1)}`;
+  return path;
+}
+
+function getSagForRode(rode: RodeType): number {
+  if (rode === 'all-chain') {
+    return 38;
+  }
+  if (rode === 'rope-chain') {
+    return 20;
+  }
+  return 6;
+}
+
+export function renderVisualProfile(
+  svgEl: SVGSVGElement | null,
+  inputs: AnchorInputs,
+  result: AnchorCalculationResult,
+): void {
+  if (!svgEl) {
+    return;
+  }
+  const start = { x: 485, y: 75 };
+  const end = { x: 75, y: 215 };
+  const sag = getSagForRode(inputs.rodeType);
+
+  const rodePathEl = svgEl.querySelector<SVGPathElement>('#sc-catenary-line');
+  const depthTextEl = svgEl.querySelector<SVGTextElement>('#sc-svg-depth-text');
+  const tideRectEl = svgEl.querySelector<SVGRectElement>('#sc-tide-water');
+
+  if (rodePathEl) {
+    rodePathEl.setAttribute('d', buildCatenarySvgPath(start, end, sag));
+  }
+  if (depthTextEl) {
+    depthTextEl.textContent = `${result.totalDepth}m`;
+  }
+  if (tideRectEl) {
+    const tideH = Math.min(25, Math.max(5, inputs.tideRange * 6));
+    tideRectEl.setAttribute('height', tideH.toString());
+    tideRectEl.setAttribute('y', (80 - tideH).toString());
+  }
+}

package/src/tool/anchorScope/entry.ts

@@ -0,0 +1,31 @@
+import type { NauticalToolEntry, ToolLocaleContent } from '../../types';
+import type { AnchorScopeUI } from './ui';
+
+export type AnchorScopeLocaleContent = ToolLocaleContent<AnchorScopeUI>;
+
+export const anchorScope: NauticalToolEntry<AnchorScopeUI> = {
+  id: 'anchor-scope',
+  icons: {
+    bg: 'mdi:compass-outline',
+    fg: 'mdi:anchor',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};
+
+export { bibliography } from './bibliography';