@jjlmoya/utils-diy 1.31.0 → 1.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-diy",
-    "version": "1.31.0",
+    "version": "1.33.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -36,7 +36,7 @@
         "postinstall": "node scripts/postinstall.mjs",
         "predev": "node scripts/postinstall.mjs",
         "prestart": "node scripts/postinstall.mjs",
-        "prebuild": "node scripts/postinstall.mjs",
+        "prebuild": "node scripts/postinstall.mjs && node scripts/validate-icons.mjs",
         "qa": "npm run lint && npm run test && npm run build",
         "cf:dry-run": "npm run build && wrangler deploy --dry-run",
         "cf:preview": "npm run build && wrangler deploy --config wrangler.staging.jsonc",

package/scripts/validate-icons.mjs

@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+
+import { createRequire } from 'node:module';
+import { readFileSync, readdirSync } from 'node:fs';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+const packageJsonPath = require.resolve('@iconify-json/mdi/package.json');
+const packageRoot = dirname(packageJsonPath);
+const iconSet = JSON.parse(readFileSync(join(packageRoot, 'icons.json'), 'utf8'));
+const availableIcons = new Set([
+  ...Object.keys(iconSet.icons ?? {}),
+  ...Object.keys(iconSet.aliases ?? {}),
+]);
+
+const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const sourceRoot = resolve(repoRoot, 'src');
+const extensions = new Set(['.astro', '.js', '.mjs', '.ts', '.tsx']);
+const iconPattern = /\bmdi:([a-z0-9-]+)\b/g;
+const failures = [];
+let references = 0;
+
+function walk(directory) {
+  const entries = readdirSync(directory, { withFileTypes: true });
+  for (const entry of entries) {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name !== 'node_modules' && entry.name !== 'dist' && entry.name !== 'tests') {
+        walk(path);
+      }
+      continue;
+    }
+    if (!extensions.has(path.slice(path.lastIndexOf('.')))) continue;
+
+    const source = readFileSync(path, 'utf8');
+    for (const match of source.matchAll(iconPattern)) {
+      references += 1;
+      const iconName = match[1];
+      if (availableIcons.has(iconName)) continue;
+
+      const line = source.slice(0, match.index).split('\n').length;
+      failures.push(`${relative(repoRoot, path)}:${line} — mdi:${iconName}`);
+    }
+  }
+}
+
+walk(sourceRoot);
+
+if (failures.length > 0) {
+  console.error('Invalid MDI icons found:');
+  for (const failure of failures) console.error(`- ${failure}`);
+  console.error(`Checked ${references} MDI icon references against @iconify-json/mdi.`);
+  process.exitCode = 1;
+} else {
+  console.log(`MDI icon validation passed: ${references} references checked.`);
+}

package/src/category/index.ts

@@ -14,10 +14,11 @@ import { stairCalculator } from '../tool/stairCalculator/entry';
 import { drillSharpener } from '../tool/drillSharpener/entry';
 import { workshopFractionConverter } from '../tool/workshopFractionConverter/entry';
 import { excavationVolumeCalculator } from '../tool/excavationVolumeCalculator/entry';
+import { ladderAngleReachCalculator } from '../tool/ladderAngleReachCalculator/entry';
 
 export const diyCategory: DiyCategoryEntry = {
   icon: 'mdi:hand',
-  tools: [clayCalculator, epoxyCalculator, balusterCalculator, mortarCalculator, passepartoutCalculator, concreteCalculator, cutOptimizer, voltageDropCalculator, furnitureFit, thermalExpansionCalculator, drillCalculator, stairCalculator, drillSharpener, workshopFractionConverter, excavationVolumeCalculator],
+  tools: [clayCalculator, epoxyCalculator, balusterCalculator, mortarCalculator, passepartoutCalculator, concreteCalculator, cutOptimizer, voltageDropCalculator, furnitureFit, thermalExpansionCalculator, drillCalculator, stairCalculator, drillSharpener, workshopFractionConverter, excavationVolumeCalculator, ladderAngleReachCalculator],
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),

package/src/entries.ts

@@ -21,6 +21,7 @@ export { drywallCalculatorEntry } from './tool/drywallCalculator/entry';
 export type { DrywallCalculatorLocaleContent } from './tool/drywallCalculator/entry';
 export { excavationVolumeCalculator } from './tool/excavationVolumeCalculator/entry';
 export type { ExcavationVolumeCalculatorLocaleContent } from './tool/excavationVolumeCalculator/entry';
+export { ladderAngleReachCalculator } from './tool/ladderAngleReachCalculator/entry';
 export { diyCategory } from './category';
 import { balusterCalculator } from './tool/balusterCalculator/entry';
 import { clayCalculator } from './tool/clayCalculator/entry';
@@ -30,6 +31,7 @@ import { drillCalculator } from './tool/drillCalculator/entry';
 import { drillSharpener } from './tool/drillSharpener/entry';
 import { drywallCalculatorEntry } from './tool/drywallCalculator/entry';
 import { excavationVolumeCalculator } from './tool/excavationVolumeCalculator/entry';
+import { ladderAngleReachCalculator } from './tool/ladderAngleReachCalculator/entry';
 import { epoxyCalculator } from './tool/epoxyCalculator/entry';
 import { furnitureFit } from './tool/furnitureFit/entry';
 import { mortarCalculator } from './tool/mortarCalculator/entry';
@@ -40,4 +42,4 @@ import { voltageDropCalculator } from './tool/voltageDropCalculator/entry';
 import { workshopFractionConverter } from './tool/workshopFractionConverter/entry';
 import { pythagoreanRightAngleCalculator } from './tool/pythagoreanRightAngleCalculator/entry';
 import { twoStrokeMixtureCalculator } from './tool/twoStrokeMixtureCalculator/entry';
-export const ALL_ENTRIES = [balusterCalculator, clayCalculator, concreteCalculator, cutOptimizer, drillCalculator, drillSharpener, drywallCalculatorEntry, epoxyCalculator, furnitureFit, mortarCalculator, passepartoutCalculator, stairCalculator, thermalExpansionCalculator, voltageDropCalculator, workshopFractionConverter, pythagoreanRightAngleCalculator, twoStrokeMixtureCalculator, excavationVolumeCalculator];
+export const ALL_ENTRIES = [balusterCalculator, clayCalculator, concreteCalculator, cutOptimizer, drillCalculator, drillSharpener, drywallCalculatorEntry, epoxyCalculator, furnitureFit, mortarCalculator, passepartoutCalculator, stairCalculator, thermalExpansionCalculator, voltageDropCalculator, workshopFractionConverter, pythagoreanRightAngleCalculator, twoStrokeMixtureCalculator, excavationVolumeCalculator, ladderAngleReachCalculator];

package/src/layouts/ProductionUtilityPage.astro

@@ -45,6 +45,7 @@ const ui = getCategoryUi(locale);
 </ProductionPage>
 
 <script>
+  import { observeWidgetHeight } from "../mfe/widget-height";
   const isWidget = new URLSearchParams(window.location.search).get("widget") === "true";
   const page = document.querySelector<HTMLElement>(".utility-production");
   const container = document.querySelector<HTMLElement>(".utility-tool-production");
@@ -60,11 +61,10 @@ const ui = getCategoryUi(locale);
   document.querySelector('[data-zoom="reset"]')?.addEventListener("click", () => { zoom = 1; applyZoom(); localStorage.removeItem("gamebob-utility-zoom"); });
   if (isWidget) {
     document.body.classList.add("utility-widget-body");
-    if (page) {
-      page.classList.add("utility-widget-mode");
-    }
+    page?.classList.add("utility-widget-mode");
   }
   applyZoom();
+  if (isWidget && container) observeWidgetHeight(container);
 </script>
 
 <style>
@@ -88,7 +88,7 @@ const ui = getCategoryUi(locale);
     margin-top: 0;
   }
 
-  .utility-production.utility-widget-mode .utility-production-inner > :not(.utility-tool-production) {
+  :global(.utility-production.utility-widget-mode .utility-production-inner > :not(.utility-tool-production)) {
     display: none;
   }
 

package/src/mfe/widget-height.ts

@@ -0,0 +1,14 @@
+export function observeWidgetHeight(container: HTMLElement): void {
+  if (window.parent === window) return;
+
+  const pathSlug = window.location.pathname.split("/").filter(Boolean).pop() ?? "utility";
+  const widgetId = new URLSearchParams(window.location.search).get("id") ?? `jj-widget-${pathSlug}`;
+  const reportHeight = (height: number) => {
+    if (height > 50) {
+      window.parent.postMessage({ jjlmoyaHeight: Math.ceil(height), jjlmoyaId: widgetId }, "*");
+    }
+  };
+  const observer = new ResizeObserver(([entry]) => reportHeight(entry?.contentRect.height ?? 0));
+
+  observer.observe(container);
+}

package/src/tests/locale_completeness.test.ts

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

package/src/tests/tool_validation.test.ts

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

package/src/tool/ladderAngleReachCalculator/bibliography.astro

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

package/src/tool/ladderAngleReachCalculator/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const ladderAngleReachCalculatorBibliography: BibliographyEntry[] = [
+  {
+    name: 'HSE: Safe use of ladders and stepladders',
+    url: 'https://www.hse.gov.uk/work-at-height/ladders/types-of-ladder.htm',
+  },
+  {
+    name: 'OSHA: Ladders, 29 CFR 1926.1053',
+    url: 'https://www.osha.gov/laws-regs/regulations/standardnumber/1926/1926.1053',
+  },
+];

package/src/tool/ladderAngleReachCalculator/component.astro

@@ -0,0 +1,68 @@
+---
+import './ladder-angle-and-reach-calculator.css';
+import type { LadderAngleReachUI } from './ui';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as LadderAngleReachUI;
+---
+
+<div class="la-root" data-la-root data-la-ui={JSON.stringify(t)}>
+  <div class="la-card">
+    <div class="la-intro">
+      <span class="la-intro-mark" aria-hidden="true">2→1</span>
+      <p>{t.intro}</p>
+    </div>
+
+    <section class="la-controls" aria-labelledby="la-solve-title">
+      <div class="la-controls-head">
+        <span class="la-kicker" id="la-solve-title">{t.solveTitle}</span>
+        <div class="la-segmented" role="group" aria-label={t.unitSystemLabel}>
+          <button type="button" class="la-active" data-la-unit="metric" aria-pressed="true">{t.unitMetric}</button>
+          <button type="button" data-la-unit="imperial" aria-pressed="false">{t.unitImperial}</button>
+        </div>
+      </div>
+      <div class="la-modes" role="group" aria-label={t.solveTitle}>
+        <button type="button" class="la-mode la-active" data-la-mode="height-and-length" aria-pressed="true"><strong>{t.modeHeightLength}</strong><span>{t.modeHeightLengthHint}</span></button>
+        <button type="button" class="la-mode" data-la-mode="height-and-base" aria-pressed="false"><strong>{t.modeHeightBase}</strong><span>{t.modeHeightBaseHint}</span></button>
+        <button type="button" class="la-mode" data-la-mode="length-and-base" aria-pressed="false"><strong>{t.modeLengthBase}</strong><span>{t.modeLengthBaseHint}</span></button>
+      </div>
+      <div class="la-fields">
+        <div class="la-field"><label for="la-known-one" data-la-field-one-label>{t.fieldHeight}</label><div class="la-input"><input id="la-known-one" data-la-input="knownOne" type="number" min="0.01" step="0.01" value="3" inputmode="decimal" /><span data-la-length-unit>m</span></div><small data-la-field-one-help>{t.fieldHeightHelp}</small></div>
+        <div class="la-field"><label for="la-known-two" data-la-field-two-label>{t.fieldLength}</label><div class="la-input"><input id="la-known-two" data-la-input="knownTwo" type="number" min="0.01" step="0.01" value="4" inputmode="decimal" /><span data-la-length-unit>m</span></div><small data-la-field-two-help>{t.fieldLengthHelp}</small></div>
+      </div>
+      <p class="la-error" data-la-error role="alert" hidden></p>
+    </section>
+
+    <section class="la-result" aria-labelledby="la-calculated-title">
+      <div class="la-primary">
+        <div><span class="la-kicker" id="la-calculated-title">{t.calculatedTitle}</span><strong><span data-la-derived-label>{t.calculatedBase}</span></strong><em data-la-derived-help>{t.calculatedBaseHelp}</em></div>
+        <strong class="la-derived-value"><span data-la-derived>0.78</span> <small data-la-length-unit>m</small></strong>
+      </div>
+      <div class="la-diagram-head"><span class="la-kicker">{t.diagramTitle}</span><span class="la-status" data-la-angle-status>{t.angleWithinGuide}</span></div>
+      <div class="la-scene" data-la-scene aria-label={t.angleGuide}></div>
+      <div class="la-metrics">
+        <div class="la-metric la-metric-main"><span>{t.angleTitle}</span><strong><span data-la-angle>75.5</span>{t.angleUnit}</strong><em data-la-angle-help>{t.angleWithinGuide}</em></div>
+        <div class="la-metric"><span>{t.reachTitle}</span><strong><span data-la-reach>3.87</span> <small data-la-length-unit>m</small></strong><em>{t.reachHelp}</em></div>
+        <div class="la-metric"><span>{t.targetTitle}</span><strong><span data-la-target>3.00</span> <small data-la-length-unit>m</small></strong><em>{t.targetHelp}</em></div>
+      </div>
+      <div class="la-verdict" data-la-verdict-wrap aria-live="polite"><strong data-la-verdict>{t.verdictReach}</strong><span data-la-verdict-help>{t.verdictReachHelp}</span></div>
+      <div class="la-reference"><span>{t.guideDistanceTitle}</span><strong><span data-la-guide-base>0.78</span> <small data-la-length-unit>m</small></strong><em>{t.guideDistanceHelp}</em></div>
+      <div class="la-reference"><span>{t.requiredLengthTitle}</span><strong><span data-la-required>3.10</span> <small data-la-length-unit>m</small></strong><em>{t.requiredLengthHelp}</em></div>
+    </section>
+
+    <p class="la-warning">{t.warning}</p>
+  </div>
+</div>
+
+<script>
+  import { mountLadderAngleReachCalculator } from './controller';
+  import type { LadderAngleReachUI } from './ui';
+
+  const root = document.querySelector('[data-la-root]');
+  const ui = JSON.parse(root?.getAttribute('data-la-ui') || '{}') as LadderAngleReachUI;
+  if (root) mountLadderAngleReachCalculator(root, ui);
+</script>

package/src/tool/ladderAngleReachCalculator/controller.ts

@@ -0,0 +1,163 @@
+import { calculateLadder, convertLength } from './logic';
+import type { LadderAngleReachUI, LadderInput, LadderOutput, LadderSolveMode, LadderUnitSystem } from './ui';
+
+const initialState: LadderInput = { unitSystem: 'metric', mode: 'height-and-length', knownOne: 3, knownTwo: 4 };
+
+export function mountLadderAngleReachCalculator(root: Element, ui: LadderAngleReachUI): void {
+  const state = { ...initialState };
+  bindModes(root, state, ui);
+  bindUnits(root, state, ui);
+  bindInputs(root, state, ui);
+  updateControls(root, state, ui);
+  render(root, state, ui);
+}
+
+function bindModes(root: Element, state: LadderInput, ui: LadderAngleReachUI): void {
+  root.querySelectorAll('[data-la-mode]').forEach((button) => button.addEventListener('click', () => {
+    const next = (button as HTMLElement).dataset.laMode as LadderSolveMode;
+    if (next === state.mode) return;
+    const current = calculateLadder(state);
+    if (current.valid) Object.assign(state, applyOutputToMode(state, current.output, next));
+    else state.mode = next;
+    updateControls(root, state, ui);
+    render(root, state, ui);
+  }));
+}
+
+function applyOutputToMode(state: LadderInput, output: LadderOutput, mode: LadderSolveMode): LadderInput {
+  if (mode === 'height-and-length') return { ...state, mode, knownOne: output.targetHeight, knownTwo: output.ladderLength };
+  if (mode === 'height-and-base') return { ...state, mode, knownOne: output.targetHeight, knownTwo: output.baseDistance };
+  return { ...state, mode, knownOne: output.ladderLength, knownTwo: output.baseDistance };
+}
+
+function bindUnits(root: Element, state: LadderInput, ui: LadderAngleReachUI): void {
+  root.querySelectorAll('[data-la-unit]').forEach((button) => button.addEventListener('click', () => {
+    const next = (button as HTMLElement).dataset.laUnit as LadderUnitSystem;
+    if (next === state.unitSystem) return;
+    state.knownOne = convertLength(state.knownOne, state.unitSystem, next);
+    state.knownTwo = convertLength(state.knownTwo, state.unitSystem, next);
+    state.unitSystem = next;
+    updateControls(root, state, ui);
+    render(root, state, ui);
+  }));
+}
+
+function bindInputs(root: Element, state: LadderInput, ui: LadderAngleReachUI): void {
+  root.querySelectorAll<HTMLInputElement>('[data-la-input]').forEach((input) => input.addEventListener('input', () => {
+    const key = input.dataset.laInput as 'knownOne' | 'knownTwo';
+    state[key] = Number(input.value);
+    render(root, state, ui);
+  }));
+}
+
+function updateControls(root: Element, state: LadderInput, ui: LadderAngleReachUI): void {
+  root.querySelectorAll('[data-la-mode]').forEach((button) => {
+    const element = button as HTMLElement;
+    const active = element.dataset.laMode === state.mode;
+    element.classList.toggle('la-active', active);
+    element.setAttribute('aria-pressed', String(active));
+  });
+  root.querySelectorAll('[data-la-unit]').forEach((button) => {
+    const element = button as HTMLElement;
+    const active = element.dataset.laUnit === state.unitSystem;
+    element.classList.toggle('la-active', active);
+    element.setAttribute('aria-pressed', String(active));
+  });
+  const labels = getModeLabels(state.mode, ui);
+  setText(root, '[data-la-field-one-label]', labels.one.label);
+  setText(root, '[data-la-field-two-label]', labels.two.label);
+  setText(root, '[data-la-field-one-help]', labels.one.help);
+  setText(root, '[data-la-field-two-help]', labels.two.help);
+  root.querySelectorAll<HTMLInputElement>('[data-la-input]').forEach((input) => {
+    const key = input.dataset.laInput as 'knownOne' | 'knownTwo';
+    input.value = Number.isFinite(state[key]) ? formatNumber(state[key]) : '';
+  });
+  root.querySelectorAll('[data-la-length-unit]').forEach((element) => { element.textContent = state.unitSystem === 'metric' ? ui.unitLengthMetric : ui.unitLengthImperial; });
+}
+
+function getModeLabels(mode: LadderSolveMode, ui: LadderAngleReachUI): { one: { label: string; help: string }; two: { label: string; help: string } } {
+  if (mode === 'height-and-length') return { one: { label: ui.fieldHeight, help: ui.fieldHeightHelp }, two: { label: ui.fieldLength, help: ui.fieldLengthHelp } };
+  if (mode === 'height-and-base') return { one: { label: ui.fieldHeight, help: ui.fieldHeightHelp }, two: { label: ui.fieldBase, help: ui.fieldBaseHelp } };
+  return { one: { label: ui.fieldLength, help: ui.fieldLengthHelp }, two: { label: ui.fieldBase, help: ui.fieldBaseHelp } };
+}
+
+function render(root: Element, state: LadderInput, ui: LadderAngleReachUI): void {
+  const result = calculateLadder(state);
+  const error = root.querySelector<HTMLElement>('[data-la-error]');
+  const resultWrap = root.querySelector('[data-la-verdict-wrap]');
+  if (!error || !resultWrap) return;
+  if (!result.valid) {
+    error.textContent = getErrorCopy(result.error, ui);
+    error.hidden = false;
+    resultWrap.classList.add('la-hidden');
+    return;
+  }
+  error.hidden = true;
+  resultWrap.classList.remove('la-hidden');
+  renderOutput(root, result.output, ui, state.unitSystem);
+}
+
+function getErrorCopy(error: 'positive-values' | 'base-too-far' | 'target-too-high', ui: LadderAngleReachUI): string {
+  if (error === 'base-too-far') return ui.invalidBase;
+  if (error === 'target-too-high') return ui.invalidTarget;
+  return ui.invalidPositive;
+}
+
+function renderOutput(root: Element, output: LadderOutput, ui: LadderAngleReachUI, unitSystem: LadderUnitSystem): void {
+  const calculated = getCalculatedCopy(output.derivedField, ui);
+  setText(root, '[data-la-derived-label]', calculated.label);
+  setText(root, '[data-la-derived-help]', calculated.help);
+  setText(root, '[data-la-derived]', formatNumber(output.derivedValue));
+  setText(root, '[data-la-angle]', formatNumber(output.angle, 1));
+  setText(root, '[data-la-reach]', formatNumber(output.verticalReach));
+  setText(root, '[data-la-target]', formatNumber(output.targetHeight));
+  setText(root, '[data-la-guide-base]', formatNumber(output.guideBaseDistance));
+  setText(root, '[data-la-required]', formatNumber(output.requiredLengthAtGuideAngle));
+  const angleStatus = root.querySelector('[data-la-angle-status]');
+  if (angleStatus) {
+    const angleStatusText = getAngleStatusText(output.angleStatus, ui);
+    angleStatus.textContent = angleStatusText;
+    angleStatus.setAttribute('data-la-status', output.angleStatus);
+    setText(root, '[data-la-angle-help]', angleStatusText);
+  }
+  setText(root, '[data-la-verdict]', output.reachesTarget ? ui.verdictReach : ui.verdictShort);
+  setText(root, '[data-la-verdict-help]', output.reachesTarget ? ui.verdictReachHelp : ui.verdictShortHelp);
+  renderScene(root, output, ui, unitSystem);
+}
+
+function getCalculatedCopy(field: LadderOutput['derivedField'], ui: LadderAngleReachUI): { label: string; help: string } {
+  if (field === 'base-distance') return { label: ui.calculatedBase, help: ui.calculatedBaseHelp };
+  if (field === 'ladder-length') return { label: ui.calculatedLength, help: ui.calculatedLengthHelp };
+  return { label: ui.calculatedHeight, help: ui.calculatedHeightHelp };
+}
+
+function getAngleStatusText(status: LadderOutput['angleStatus'], ui: LadderAngleReachUI): string {
+  if (status === 'too-flat') return ui.angleTooFlat;
+  if (status === 'too-steep') return ui.angleTooSteep;
+  return ui.angleWithinGuide;
+}
+
+function renderScene(root: Element, output: LadderOutput, ui: LadderAngleReachUI, unitSystem: LadderUnitSystem): void {
+  const scene = root.querySelector('[data-la-scene]');
+  if (!scene) return;
+  const scale = Math.min(88, 180 / Math.max(output.baseDistance, output.guideBaseDistance, 1), 210 / Math.max(output.verticalReach, output.targetHeight, 1));
+  const baseX = 138;
+  const groundY = 264;
+  const wallX = baseX + output.baseDistance * scale;
+  const topY = groundY - output.verticalReach * scale;
+  const targetY = groundY - output.targetHeight * scale;
+  const guideBaseX = wallX - output.guideBaseDistance * scale;
+  const angleRad = output.angle * Math.PI / 180;
+  const arcR = 32;
+  const unit = unitSystem === 'metric' ? ui.unitLengthMetric : ui.unitLengthImperial;
+  scene.innerHTML = `<svg class="la-scene-svg" viewBox="0 0 520 320" role="img" aria-label="${ui.angleGuide}"><line class="la-wall" x1="${wallX.toFixed(1)}" y1="34" x2="${wallX.toFixed(1)}" y2="${groundY}"/><line class="la-ground" x1="70" y1="${groundY}" x2="450" y2="${groundY}"/><line class="la-guide" x1="${guideBaseX.toFixed(1)}" y1="${groundY}" x2="${wallX.toFixed(1)}" y2="${targetY.toFixed(1)}"/><line class="la-ladder" x1="${baseX}" y1="${groundY}" x2="${wallX.toFixed(1)}" y2="${topY.toFixed(1)}"/><line class="la-rail" x1="${(baseX + 8).toFixed(1)}" y1="${groundY}" x2="${(wallX + 8).toFixed(1)}" y2="${topY.toFixed(1)}"/><circle class="la-target-dot" cx="${wallX.toFixed(1)}" cy="${targetY.toFixed(1)}" r="5"/><line class="la-target" x1="${(wallX - 28).toFixed(1)}" y1="${targetY.toFixed(1)}" x2="${(wallX + 28).toFixed(1)}" y2="${targetY.toFixed(1)}"/><line class="la-dimension" x1="${(wallX + 24).toFixed(1)}" y1="${targetY.toFixed(1)}" x2="${(wallX + 24).toFixed(1)}" y2="${groundY}"/><line class="la-dimension" x1="${baseX}" y1="${groundY + 24}" x2="${wallX.toFixed(1)}" y2="${groundY + 24}"/><path class="la-arc" d="M ${baseX + arcR} ${groundY} A ${arcR} ${arcR} 0 0 0 ${(baseX + arcR * Math.cos(angleRad)).toFixed(1)} ${(groundY - arcR * Math.sin(angleRad)).toFixed(1)}"/><line class="la-guide" x1="365" y1="94" x2="392" y2="94"/><text class="la-svg-kicker" x="365" y="76">${ui.guideLabel}</text><text class="la-svg-label" x="365" y="116">1 : 4</text><text class="la-svg-label" x="40" y="34">${ui.ladderLabel}</text><text class="la-svg-label" x="${(wallX + 10).toFixed(1)}" y="52">${ui.wallLabel}</text><text class="la-svg-label" x="${(wallX + 34).toFixed(1)}" y="${(targetY - 5).toFixed(1)}">${ui.targetLabel}</text><text class="la-svg-label" x="${((baseX + wallX) / 2).toFixed(1)}" y="${groundY + 45}">${ui.baseLabel}</text><text class="la-svg-label" x="${(baseX + 8).toFixed(1)}" y="${groundY - 8}">${output.angle.toFixed(1)}°</text><text class="la-svg-label" x="${(wallX + 30).toFixed(1)}" y="${((targetY + groundY) / 2).toFixed(1)}">${formatNumber(output.targetHeight)} ${unit}</text></svg>`;
+}
+
+function setText(root: Element, selector: string, text: string): void {
+  const element = root.querySelector(selector);
+  if (element) element.textContent = text;
+}
+
+function formatNumber(value: number, decimals = 2): string {
+  return Number.isFinite(value) ? value.toFixed(decimals) : '';
+}

package/src/tool/ladderAngleReachCalculator/entry.ts

@@ -0,0 +1,24 @@
+import type { DiyToolEntry } from '../../types';
+import type { LadderAngleReachUI } from './ui';
+
+export const ladderAngleReachCalculator: DiyToolEntry<LadderAngleReachUI> = {
+  id: 'ladder-angle-and-reach-calculator',
+  icons: { bg: 'mdi:ladder', fg: 'mdi:angle-acute' },
+  i18n: {
+    en: () => import('./i18n/en').then((m) => m.content),
+    de: () => import('./i18n/de').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),
+  },
+};

package/src/tool/ladderAngleReachCalculator/i18n/de.ts

@@ -0,0 +1,31 @@
+import { createLadderLocale } from '../locale';
+
+export const content = createLadderLocale({
+  language: 'de', slug: 'leiternwinkel-und-reichweiten-rechner', title: 'Leiterwinkel und Reichweitenrechner', description: 'Berechne mit zwei Maßen den Abstand, Winkel und die Reichweite einer Leiter und vergleiche sie mit der 1:4-Aufstellregel.', faqTitle: 'Häufige Fragen', faq: [
+    { question: 'Was berechnet dieser Leiterrechner?', answer: 'Er berechnet aus zwei Werten für Zielhöhe, Leiterlänge und Fußabstand die fehlende geometrische Größe. Zusätzlich zeigt er Winkel, Reichhöhe und die 1:4-Referenz getrennt an.' },
+    { question: 'Warum unterscheiden sich tatsächlicher Abstand und 1:4-Abstand?', answer: 'Sie beantworten unterschiedliche Fragen. Bei 3 m Höhe und 4 m Leiter ergibt das echte Dreieck 2,65 m Abstand und 48,6°. Die 1:4-Referenz für 3 m liegt bei 0,75 m und benötigt mindestens 3,09 m Leiter.' },
+    { question: 'Wie berechne ich eine Leiter für 3 m Höhe?', answer: 'Gib 3 m als Zielhöhe und die verfügbare Leiterlänge ein. Das Ergebnis zeigt die echte Geometrie sowie getrennt den 1:4-Abstand von 0,75 m und die Mindestlänge von etwa 3,09 m.' },
+    { question: 'Welche drei Modi gibt es?', answer: 'Höhe + Leiter prüft den echten Fußabstand, Höhe + Fußabstand berechnet die Leiterlänge und Leiter + Fußabstand berechnet die erreichbare Höhe.' },
+    { question: 'Ist das Ergebnis ein Sicherheitsnachweis?', answer: 'Nein. Es ist nur eine geometrische Prüfung. Beachte Leiterkennzeichnung, Untergrund, Auflage, Last, Zugang und örtliche Vorschriften.' },
+  ],
+  howTo: [
+    { name: 'Zwei Maße auswählen', text: 'Wähle Höhe und Leiter, Höhe und Fußabstand oder Leiter und Fußabstand.' },
+    { name: 'Werte eingeben', text: 'Verwende für beide Felder dasselbe Einheitensystem.' },
+    { name: 'Geometrie prüfen', text: 'Lies Abstand, Winkel und Reichhöhe des eingegebenen Dreiecks ab.' },
+    { name: 'Mit 1:4 vergleichen', text: 'Vergleiche Referenzabstand und Mindestlänge vor der Aufstellung.' },
+  ],
+  seo: [
+    { type: 'title', text: 'Was dieser Leiterrechner beantwortet', level: 2 },
+    { type: 'paragraph', html: 'Nutze ihn, wenn du zwei Maße kennst und entscheiden möchtest, ob eine Leiter eine Höhe erreicht, welchen Fußabstand das echte Dreieck hat oder welche Länge benötigt wird. Die 1:4-Referenz wird nicht mit der tatsächlichen Geometrie verwechselt.' },
+    { type: 'title', text: 'Echte Geometrie deiner Maße', level: 3 },
+    { type: 'paragraph', html: 'Bei <strong>Höhe + Leiter</strong> lautet der echte Fußabstand <code>√(Leiterlänge² − Höhe²)</code>. Bei <strong>Höhe + Fußabstand</strong> wird die Leiterlänge berechnet; bei <strong>Leiter + Fußabstand</strong> die erreichbare Höhe.' },
+    { type: 'title', text: 'Die 1:4-Aufstellreferenz', level: 3 },
+    { type: 'paragraph', html: 'Die 1:4-Regel bedeutet einen Abstand von einer Einheit je vier Einheiten Höhe. Für 3 m sind das 0,75 m; die Mindestlänge dieses Dreiecks beträgt <code>√(3² + 0,75²) = 3,09 m</code>. Eine längere Leiter kann eine andere Reichhöhe und einen anderen Winkel ergeben.' },
+    { type: 'title', text: 'Ergebnis richtig lesen', level: 3 },
+    { type: 'list', items: ['Flacher als 1:4 bedeutet, dass der Fuß weiter vom Auflagepunkt entfernt ist.', 'Steiler als 1:4 bedeutet, dass der Fuß näher am Auflagepunkt steht.', 'Eine längere Leiter kann über die Zielhöhe hinausragen.'] },
+    { type: 'tip', title: 'Geometrie ist kein Sicherheitsnachweis', html: 'Prüfe Leiter, Untergrund, Auflage, Last, Zugang und Herstellerangaben vor der Benutzung.' },
+  ],
+  ui: {
+    unitSystemLabel: 'Einheitensystem', unitMetric: 'Metrisch', unitImperial: 'Imperial', intro: 'Gib zwei Maße ein. Geometrie und 1:4-Referenz bleiben getrennt.', solveTitle: 'Zwei Maße auswählen', modeHeightLength: 'Höhe + Leiter', modeHeightBase: 'Höhe + Fuß', modeLengthBase: 'Leiter + Fuß', modeHeightLengthHint: 'Echten Abstand prüfen', modeHeightBaseHint: 'Leiterlänge berechnen', modeLengthBaseHint: 'Reichhöhe berechnen', fieldHeight: 'Zielhöhe', fieldLength: 'Verfügbare Leiterlänge', fieldBase: 'Fußabstand', fieldHeightHelp: 'Höhe, die erreicht werden soll', fieldLengthHelp: 'Länge der Leiter', fieldBaseHelp: 'Horizontaler Abstand zur Auflage', calculatedTitle: 'Für dich berechnet', calculatedBase: 'Echter Fußabstand', calculatedBaseHelp: 'aus diesen beiden Maßen', calculatedLength: 'Leiterlänge', calculatedLengthHelp: 'für diese Höhe und diesen Abstand', calculatedHeight: 'Erreichbare Höhe', calculatedHeightHelp: 'mit dieser Leiter und diesem Abstand', diagramTitle: 'Geometrie des Ergebnisses', angleTitle: 'Winkel', angleGuide: 'Seitenansicht mit Leiter, Auflage, Zielhöhe und 1:4-Referenz', reachTitle: 'Vertikale Reichhöhe', reachHelp: 'Höhe an der Auflage', targetTitle: 'Zielhöhe', targetHelp: 'gewünschte Höhe', guideDistanceTitle: '1:4-Abstand für die Höhe', guideDistanceHelp: 'Zielhöhe ÷ 4', requiredLengthTitle: 'Mindestlänge bei 1:4', requiredLengthHelp: 'für die Zielhöhe', verdictReach: 'Die Leiter erreicht die Höhe', verdictShort: 'Die Leiter erreicht die Höhe nicht', verdictReachHelp: 'Die vertikale Reichhöhe erreicht oder übertrifft die Zielhöhe.', verdictShortHelp: 'Du brauchst mehr Länge oder eine andere Geometrie.', angleTooFlat: 'Flacher als die Referenz', angleWithinGuide: 'Nahe an der 1:4-Referenz', angleTooSteep: 'Steiler als die Referenz', ladderLabel: 'Leiter', wallLabel: 'Auflage', targetLabel: 'Ziel', baseLabel: 'Fußabstand', groundLabel: 'Boden', guideLabel: '1:4-Referenz', invalidPositive: 'Gib zwei positive Maße ein.', invalidBase: 'Der Fußabstand muss kleiner als die Leiterlänge sein.', invalidTarget: 'Die Zielhöhe muss kleiner als die Leiterlänge sein.', warning: 'Nur Geometrie. Beachte Leiterkennzeichnung und Herstellerangaben.', unitLengthMetric: 'm', unitLengthImperial: 'ft',
+  },
+});

package/src/tool/ladderAngleReachCalculator/i18n/en.ts

@@ -0,0 +1,98 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { LadderAngleReachUI } from '../ui';
+import { ladderAngleReachCalculatorBibliography } from '../bibliography';
+
+const slug = 'ladder-angle-and-reach-calculator';
+const title = 'Ladder Angle and Reach Calculator';
+const description = 'Calculate a ladder\'s actual base distance, angle and reach from two measurements, then compare it with the 1:4 placement guide and minimum ladder length.';
+
+const faq = [
+  {
+    question: 'What does the ladder angle and reach calculator calculate?',
+    answer: 'It turns any two of target height, ladder length and base distance into the missing geometric value. It also reports the resulting angle, whether the ladder reaches the target, and a separate 1:4 reference for the target height.',
+  },
+  {
+    question: 'Why can the actual base differ from the 1:4 base?',
+    answer: 'They answer different questions. With a 3 m target and a 4 m ladder, the exact triangle that touches 3 m has a 2.65 m base and a 48.6° angle. The 1:4 reference for a 3 m target is 0.75 m out and needs a 3.09 m ladder. The calculator keeps those figures separate so a reach check is not mistaken for a placement recommendation.',
+  },
+  {
+    question: 'How do I use the calculator for a 3 m wall height?',
+    answer: 'Enter 3 m as the target height and your available ladder length. The geometric result tells you the base and angle if the ladder top is exactly at 3 m. The 1:4 rows then show 0.75 m as the target-height reference and about 3.09 m as the minimum ladder length at that placement angle.',
+  },
+  {
+    question: 'What are the three calculation modes?',
+    answer: 'Use height plus ladder length to check the actual base, height plus base distance to calculate the ladder length, or ladder length plus base distance to calculate the reachable height.',
+  },
+  {
+    question: 'What does the 1:4 ladder rule mean?',
+    answer: 'For a leaning portable ladder, the foot is placed one unit out for every four units of target height. This is a planning reference, not a complete safety assessment. Check the ladder label, surface, support and local requirements before use.',
+  },
+];
+
+const howTo = [
+  { name: 'Choose the calculation you need', text: 'Pick height + ladder to check an existing setup, height + base to size a ladder, or ladder + base to find its reachable height.' },
+  { name: 'Enter your two measurements', text: 'Use the same unit system for both fields. Switch between metric and imperial if needed.' },
+  { name: 'Read the geometric result', text: 'Use the base, angle and reach to understand the triangle formed by your measurements.' },
+  { name: 'Check the 1:4 reference', text: 'Compare the target-height base and minimum ladder length with the available space and ladder before deciding how to place it.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'en',
+};
+
+export const content: ToolLocaleContent<LadderAngleReachUI> = {
+  slug,
+  title,
+  description,
+  faqTitle: 'Frequently Asked Questions',
+  faq,
+  bibliographyTitle: 'Sources and technical notes',
+  bibliography: ladderAngleReachCalculatorBibliography,
+  howTo,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'What this ladder calculator tells you', level: 2 },
+    { type: 'paragraph', html: 'Use this calculator when you know two measurements and need to make a ladder setup decision. It calculates the missing side of the right triangle, the ladder angle and the vertical reach. It also gives a separate 1:4 reference so you can compare the target-height placement with the geometry created by your actual measurements.' },
+    { type: 'title', text: 'Actual geometry from the measurements you enter', level: 3 },
+    { type: 'paragraph', html: 'Choose <strong>height + ladder</strong> to check an existing ladder against a target height. The actual base is <code>√(ladder length² − target height²)</code>. Choose <strong>height + base</strong> to calculate the required ladder length, or <strong>ladder + base</strong> to calculate the height that setup can reach. The angle and reach are calculated from the same triangle, so the result reflects your measurements rather than silently replacing them with the 1:4 rule.' },
+    { type: 'title', text: '1:4 placement: base distance and minimum ladder length', level: 3 },
+    { type: 'paragraph', html: 'The common 1:4 planning reference places the foot one unit out for every four units of target height. For a 3 m target, that means a 0.75 m reference distance. The minimum ladder length for that target-height geometry is <code>√(3² + 0.75²) = 3.09 m</code>. These values are shown separately from the actual triangle because a longer ladder or a different base distance can change the angle and reach.' },
+    { type: 'title', text: 'How to interpret the result', level: 3 },
+    { type: 'list', items: ['If the actual angle is flatter than the 1:4 guide, the ladder is farther from the support for the height entered.', 'If the actual angle is steeper, the ladder is closer to the support than the guide reference.', 'If the available ladder is longer than the minimum, it may extend above the target; check the required access height and the ladder instructions.'] },
+    { type: 'tip', title: 'Geometry is not a safety certificate', html: 'A reachable height or a 1:4 comparison does not certify the ladder, surface, support, load, access clearance or work method. Inspect the ladder and follow its label, manufacturer instructions and local requirements before use.' },
+  ],
+  ui: {
+    unitSystemLabel: 'Measurement system', unitMetric: 'Metric', unitImperial: 'Imperial',
+    intro: 'Enter two measurements. The geometric result and the 1:4 reference stay separate.',
+    solveTitle: 'Choose two measurements', modeHeightLength: 'Height + ladder', modeHeightBase: 'Height + base', modeLengthBase: 'Ladder + base', modeHeightLengthHint: 'Check the actual base', modeHeightBaseHint: 'Find the ladder length', modeLengthBaseHint: 'Find the reachable height',
+    fieldHeight: 'Target height', fieldLength: 'Available ladder length', fieldBase: 'Base distance from wall', fieldHeightHelp: 'Height you need to reach', fieldLengthHelp: 'Length along the ladder', fieldBaseHelp: 'Horizontal distance on the ground',
+    calculatedTitle: 'Calculated for you', calculatedBase: 'Actual base distance', calculatedBaseHelp: 'from these two measurements', calculatedLength: 'Ladder length', calculatedLengthHelp: 'for this height and base distance', calculatedHeight: 'Reachable height', calculatedHeightHelp: 'from this ladder and base distance',
+    diagramTitle: 'The geometry behind the answer', angleTitle: 'Angle', angleUnit: '°', angleGuide: 'Functional side-view diagram showing ladder, wall, target height, base distance, and the 1:4 guide', reachTitle: 'Vertical reach', reachHelp: 'height at the wall', targetTitle: 'Target height', targetHelp: 'height requested', baseTitle: 'Base distance', baseHelp: 'horizontal ground distance', guideDistanceTitle: '1:4 base for target', guideDistanceHelp: 'target height ÷ 4', requiredLengthTitle: 'Minimum length at 1:4', requiredLengthHelp: 'for the target height',
+    verdictReach: 'The target is reachable', verdictShort: 'The target is higher than this setup', verdictReachHelp: 'The calculated vertical reach meets or exceeds the target height.', verdictShortHelp: 'Choose more ladder length or change the geometry only if the final setup remains suitable.',
+    angleTooFlat: 'Flatter than the guide', angleWithinGuide: 'Near the 1:4 guide', angleTooSteep: 'Steeper than the guide', ladderLabel: 'ladder', wallLabel: 'support', targetLabel: 'target', baseLabel: 'base distance', groundLabel: 'ground', guideLabel: '1:4 guide',
+    invalidPositive: 'Enter two positive measurements.', invalidBase: 'The base distance must be smaller than the ladder length.', invalidTarget: 'The target height must be lower than the ladder length.', warning: 'Geometry only. Follow the ladder label and manufacturer instructions.',
+    unitLengthMetric: 'm', unitLengthImperial: 'ft',
+  },
+};