@welldot/render 0.1.0 → 0.2.3

package/dist/index.js

@@ -1,5 +1,146 @@
 // src/configs/render.configs.ts
 import { easeCubic } from "d3";
+
+// src/utils/format.utils.ts
+import { formatNumber } from "@welldot/utils";
+var MM_TO_INCHES = 0.0393701;
+var M_TO_FT = 3.28084;
+function formatLength(m, units, locale) {
+  return units === "ft" ? formatNumber(m * M_TO_FT, { maximumFractionDigits: 1, locale }) : formatNumber(m, { maximumFractionDigits: 2, locale });
+}
+function formatDiameter(mm, units, locale) {
+  return units === "inches" ? formatNumber(mm * MM_TO_INCHES, { maximumFractionDigits: 2, locale }) : formatNumber(mm, { maximumFractionDigits: 2, locale });
+}
+function getLengthUnit(units) {
+  return units === "ft" ? "ft" : "m";
+}
+function getDiameterUnit(units, locale) {
+  if (units !== "inches") return "mm";
+  return locale === "en" ? "in." : '"';
+}
+function resolveRenderLabel(value, locale) {
+  if (typeof value === "string") return value;
+  return locale === "en" && value.en ? value.en : value.pt;
+}
+
+// src/configs/render.configs.ts
+var RENDER_LABELS = {
+  constructionLabels: {
+    wellCasePrefix: { pt: "Revest.", en: "Casing" },
+    wellScreenPrefix: { pt: "Filtro", en: "Screen" },
+    wellScreenSlotPrefix: { pt: "Ranhura:", en: "Slot:" }
+  },
+  legend: {
+    title: { pt: "LEGENDA", en: "LEGEND" },
+    labels: {
+      fractureSingle: { pt: "Fratura simples", en: "Single fracture" },
+      fractureSwarm: { pt: "Enxame de fraturas", en: "Fracture swarm" },
+      fractureWater: { pt: "Entrada d'\xE1gua", en: "Water intake" },
+      caveDry: { pt: "Caverna seca", en: "Dry cave" },
+      caveWet: { pt: "Caverna c/ \xE1gua", en: "Wet cave" },
+      boreHole: { pt: "Perfura\xE7\xE3o", en: "Borehole" },
+      surfaceCase: { pt: "Tubo guia", en: "Surface casing" },
+      holeFillGravel: { pt: "Pr\xE9-filtro", en: "Gravel pack" },
+      holeFillSeal: { pt: "Veda\xE7\xE3o", en: "Seal" },
+      wellCase: { pt: "Revestimento", en: "Casing" },
+      wellScreen: { pt: "Filtro", en: "Screen" },
+      reduction: { pt: "Redu\xE7\xE3o", en: "Reduction" },
+      cementPad: { pt: "Laje de cimento", en: "Cement pad" },
+      conflict: { pt: "Conflito", en: "Conflict" }
+    }
+  },
+  tooltipLabels: {
+    common: {
+      from: { pt: "De", en: "From" },
+      to: { pt: "at\xE9", en: "to" },
+      description: { pt: "Descri\xE7\xE3o:", en: "Description:" },
+      diameter: { pt: "Di\xE2metro:", en: "Diameter:" },
+      type: { pt: "Tipo:", en: "Type:" }
+    },
+    geology: {
+      title: { pt: "Litologia", en: "Lithology" },
+      geologicUnit: { pt: "Unidade geol\xF3gica:", en: "Geologic unit:" },
+      aquiferUnit: { pt: "Unidade aqu\xEDfera:", en: "Aquifer unit:" }
+    },
+    hole: { title: { pt: "FURO", en: "BOREHOLE" } },
+    surfaceCase: { title: { pt: "TUBO DE BOCA", en: "SURFACE CASING" } },
+    holeFill: { title: { pt: "ESP. ANULAR", en: "ANNULAR SPACE" } },
+    wellCase: { title: { pt: "REVESTIMENTO", en: "CASING" } },
+    wellScreen: {
+      title: { pt: "FILTROS", en: "SCREENS" },
+      slot: { pt: "Ranhura:", en: "Slot:" }
+    },
+    reduction: { title: { pt: "REDU\xC7\xC3O", en: "REDUCTION" } },
+    conflict: { title: { pt: "CONFLITO", en: "CONFLICT" } },
+    fracture: {
+      title: { pt: "FRATURA", en: "FRACTURE" },
+      titleSwarm: { pt: "ENXAME DE FRATURAS", en: "FRACTURE SWARM" },
+      depth: { pt: "Profundidade:", en: "Depth:" },
+      waterIntake: { pt: "Entrada d'\xE1gua:", en: "Water intake:" },
+      dip: { pt: "Mergulho:", en: "Dip:" },
+      azimuth: { pt: "Azimute:", en: "Azimuth:" }
+    },
+    cementPad: {
+      title: { pt: "LAJE DE PROTE\xC7\xC3O", en: "PROTECTION SLAB" },
+      thickness: { pt: "Espessura:", en: "Thickness:" },
+      width: { pt: "Largura:", en: "Width:" },
+      length: { pt: "Comprimento:", en: "Length:" }
+    },
+    cave: {
+      title: { pt: "CAVERNA", en: "CAVE" },
+      waterIntake: { pt: "Entrada d'\xE1gua", en: "Water intake" }
+    }
+  },
+  typeLabels: {
+    fracture: { pt: "fratura", en: "fracture" },
+    fractureWater: { pt: "fratura aberta", en: "open fracture" },
+    cave: { pt: "caverna", en: "cave" },
+    caveWater: { pt: "caverna \xFAmida", en: "wet cave" }
+  }
+};
+function resolveGroup(group, locale) {
+  const result = {};
+  for (const key in group) {
+    result[key] = resolveRenderLabel(group[key], locale);
+  }
+  return result;
+}
+function resolveTooltipLabels(locale) {
+  const t = RENDER_LABELS.tooltipLabels;
+  return {
+    common: resolveGroup(t.common, locale),
+    geology: resolveGroup(t.geology, locale),
+    hole: resolveGroup(t.hole, locale),
+    surfaceCase: resolveGroup(t.surfaceCase, locale),
+    holeFill: resolveGroup(t.holeFill, locale),
+    wellCase: resolveGroup(t.wellCase, locale),
+    wellScreen: resolveGroup(t.wellScreen, locale),
+    reduction: resolveGroup(t.reduction, locale),
+    conflict: resolveGroup(t.conflict, locale),
+    fracture: resolveGroup(t.fracture, locale),
+    cementPad: resolveGroup(t.cementPad, locale),
+    cave: resolveGroup(t.cave, locale)
+  };
+}
+function applyRenderLocale(config, locale) {
+  return {
+    ...config,
+    constructionLabels: {
+      ...config.constructionLabels,
+      labels: resolveGroup(RENDER_LABELS.constructionLabels, locale)
+    },
+    legend: {
+      ...config.legend,
+      title: resolveRenderLabel(RENDER_LABELS.legend.title, locale),
+      labels: resolveGroup(RENDER_LABELS.legend.labels, locale)
+    },
+    tooltipLabels: resolveTooltipLabels(locale),
+    labels: {
+      ...config.labels,
+      typeLabels: resolveGroup(RENDER_LABELS.typeLabels, locale)
+    }
+  };
+}
 var DEFAULT_WELL_THEME = {
   lithology: { stroke: "#101010", strokeWidth: 1 },
   lithologyTexture: { size: 150, strokeWidth: 0.8, stroke: "#303030" },
@@ -34,6 +175,7 @@ var DEFAULT_WELL_THEME = {
   holeFill: { stroke: "#303030", strokeWidth: 2 },
   wellCase: { fill: "#ffffff", stroke: "#303030", strokeWidth: 2 },
   wellScreen: { stroke: "#303030", strokeWidth: 2 },
+  reduction: { fill: "#ffffff", stroke: "#303030", strokeWidth: 2 },
   conflict: { stroke: "#e52117", strokeWidth: 4 },
   unitLabels: {
     geologicFill: "#f0f0f0",
@@ -97,6 +239,8 @@ var STATIC_RENDER_CONFIG = {
   zoom: true,
   pan: true,
   zoomLevel: 1,
+  maxZoomScale: 150,
+  minZoomScale: 0,
   animation: { duration: 600, ease: easeCubic },
   geologic: { xLeft: 20, xRightInset: 300 },
   layout: {
@@ -127,9 +271,10 @@ var STATIC_RENDER_CONFIG = {
     cementPad: { widthMultiplier: 0.9, thicknessMultiplier: 1.3 },
     surfaceCase: { diameterPaddingRatio: 0.1 }
   },
+  tooltipLabels: resolveTooltipLabels("pt"),
   labels: {
     active: true,
-    typeLabels: { fracture: "fratura", cave: "caverna" },
+    typeLabels: resolveGroup(RENDER_LABELS.typeLabels, "pt"),
     depthTipHeight: 11,
     depthTipPadX: 2,
     descriptionXOffset: 20,
@@ -194,6 +339,7 @@ var STATIC_RENDER_CONFIG = {
       holeFillSeal: "Veda\xE7\xE3o",
       wellCase: "Revestimento",
       wellScreen: "Filtro",
+      reduction: "Redu\xE7\xE3o",
       cementPad: "Laje de cimento",
       conflict: "Conflito"
     }
@@ -204,6 +350,8 @@ var INTERACTIVE_RENDER_CONFIG = {
   zoom: true,
   pan: true,
   zoomLevel: 1,
+  maxZoomScale: 150,
+  minZoomScale: 0,
   animation: { duration: 600, ease: easeCubic },
   geologic: { xLeft: 6, xRightInset: 56 },
   layout: {
@@ -234,9 +382,10 @@ var INTERACTIVE_RENDER_CONFIG = {
     cementPad: { widthMultiplier: 0.9, thicknessMultiplier: 1.3 },
     surfaceCase: { diameterPaddingRatio: 0.1 }
   },
+  tooltipLabels: resolveTooltipLabels("pt"),
   labels: {
     active: false,
-    typeLabels: { fracture: "fratura", cave: "caverna" },
+    typeLabels: resolveGroup(RENDER_LABELS.typeLabels, "pt"),
     depthTipHeight: 11,
     depthTipPadX: 2,
     descriptionXOffset: 78,
@@ -298,6 +447,7 @@ var INTERACTIVE_RENDER_CONFIG = {
       holeFillSeal: "Veda\xE7\xE3o",
       wellCase: "Revestimento",
       wellScreen: "Filtro",
+      reduction: "Redu\xE7\xE3o",
       cementPad: "Laje de cimento",
       conflict: "Conflito"
     }
@@ -307,12 +457,12 @@ var INTERACTIVE_RENDER_CONFIG = {
 
 // src/utils/fgdcTextures.ts
 async function importFgdcTextures() {
-  const fgdcTextures = await import("./fgdcTextures-5IIUV7QV.js");
+  const fgdcTextures = await import("./fgdcTextures-P5DTFNPT.js");
   return fgdcTextures.default;
 }
 
 // src/Renderer.ts
-import * as d3module3 from "d3";
+import * as d3module2 from "d3";
 import d3tip2 from "d3-tip";
 import { defu as defu2 } from "defu";
 
@@ -380,23 +530,11 @@ function createWellTextures(cfg) {
 import {
   isWellEmpty
 } from "@welldot/core";
-import { getProfileLastItemsDepths } from "@welldot/utils";
-
-// src/utils/format.utils.ts
-var MM_TO_INCHES = 0.0393701;
-var M_TO_FT = 3.28084;
-function formatLength(m, units) {
-  return units === "ft" ? (m * M_TO_FT).toFixed(1) : String(m);
-}
-function formatDiameter(mm, units) {
-  return units === "inches" ? (mm * MM_TO_INCHES).toFixed(2) : String(mm);
-}
-function getLengthUnit(units) {
-  return units === "ft" ? "ft" : "m";
-}
-function getDiameterUnit(units) {
-  return units === "inches" ? '"' : "mm";
-}
+import {
+  formatNumber as formatNumber3,
+  getProfileDiamValues as getProfileDiamValues4,
+  getProfileLastItemsDepths
+} from "@welldot/utils";
 
 // src/configs/render.classnames.ts
 var DEFAULT_COMPONENTS_CLASS_NAMES = {
@@ -454,6 +592,10 @@ var DEFAULT_COMPONENTS_CLASS_NAMES = {
     group: "well-screen",
     rect: "well-screen-rect"
   },
+  reduction: {
+    group: "reduction",
+    item: "reduction-poly"
+  },
   conflict: {
     group: "conflict",
     rect: "conflict-rect"
@@ -496,6 +638,9 @@ var DEFAULT_COMPONENTS_CLASS_NAMES = {
 import textures2 from "textures";
 
 // src/utils/d3.utils.ts
+function mergeEnter(enter, update) {
+  return enter.merge(update);
+}
 function withTransition(selection, transition) {
   return selection.transition(transition);
 }
@@ -513,18 +658,6 @@ var getYAxisFunctions = (yScale, clamp) => {
     getYPos: ({ from }) => yScale(Math.max(from, clampFrom))
   };
 };
-function hashStr(s) {
-  let h = 5381;
-  for (let i = 0; i < s.length; i++) {
-    h = Math.imul(h, 33) ^ s.charCodeAt(i);
-  }
-  return (h >>> 0).toString(36);
-}
-function stableLayerKey(d) {
-  const { from: _f, to: _t, ...rest } = d;
-  const sortedKeys = Object.keys(rest).sort();
-  return hashStr(JSON.stringify(rest, sortedKeys));
-}
 function filterByDepth(depthFrom, depthTo) {
   return (l) => !(l.to <= depthFrom || l.from >= depthTo);
 }
@@ -572,93 +705,102 @@ var makeSeededPrng = (seed, scramble = 6271) => {
 };
 
 // src/utils/tooltips.utils.ts
-import * as d3module from "d3";
 import d3tip from "d3-tip";
 import sanitizeHtml from "sanitize-html";
-var d3 = Object.assign(d3module, { tip: d3tip });
+import { formatNumber as formatNumber2 } from "@welldot/utils";
 var esc = (v) => sanitizeHtml(String(v ?? ""), { allowedTags: [], allowedAttributes: {} });
 var _tooltipCache = /* @__PURE__ */ new WeakMap();
-var populateTooltips = (svg, customClasses, units, tooltipConfig) => {
+var populateTooltips = (svg, customClasses, units, tooltipConfig, labels, locale) => {
   const svgEl = typeof svg.node === "function" ? svg.node() : null;
-  if (svgEl && _tooltipCache.has(svgEl)) {
-    return _tooltipCache.get(svgEl);
+  const signature = JSON.stringify({ units, tooltipConfig, labels, locale });
+  const cached = svgEl ? _tooltipCache.get(svgEl) : void 0;
+  if (cached && cached.signature === signature) {
+    return cached.tooltips;
   }
   const tipsText = {
     geology: (_, d) => `
-        <span class="${customClasses.tooltip.title}">Litologia</span>
-        <span class="${customClasses.tooltip.primaryInfo}">De ${esc(formatLength(d.from, units.length))} ${esc(units.length)} at\xE9 ${esc(formatLength(d.to, units.length))} ${esc(units.length)}</span>
-        <span class="${customClasses.tooltip.secondaryInfo}"><strong>Descri\xE7\xE3o:</strong> ${esc(d.description)}</span>
-        ${d.geologic_unit ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>Unidade geol\xF3gica:</strong> ${esc(d.geologic_unit)}</span>` : ""}
-        ${d.aquifer_unit ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>Unidade aqu\xEDfera:</strong> ${esc(d.aquifer_unit)}</span>` : ""}
+        <span class="${customClasses.tooltip.title}">${labels.geology.title}</span>
+        <span class="${customClasses.tooltip.primaryInfo}">${labels.common.from} ${esc(formatLength(d.from, units.length, locale))} ${esc(getLengthUnit(units.length))} ${labels.common.to} ${esc(formatLength(d.to, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>
+        <span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.description}</strong> ${esc(d.description)}</span>
+        ${d.geologic_unit ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.geology.geologicUnit}</strong> ${esc(d.geologic_unit)}</span>` : ""}
+        ${d.aquifer_unit ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.geology.aquiferUnit}</strong> ${esc(d.aquifer_unit)}</span>` : ""}
       `,
     hole: (_, d) => `
-        <span class="${customClasses.tooltip.title}">FURO</span>
-        <span class="${customClasses.tooltip.primaryInfo}">De ${esc(formatLength(d.from, units.length))} ${esc(units.length)} at\xE9 ${esc(formatLength(d.to, units.length))} ${esc(units.length)}</span>
-        <span class="${customClasses.tooltip.secondaryInfo}"><strong>Di\xE2metro:</strong>${esc(formatDiameter(d.diameter, units.diameter))} ${esc(units.diameter)}</span>
+        <span class="${customClasses.tooltip.title}">${labels.hole.title}</span>
+        <span class="${customClasses.tooltip.primaryInfo}">${labels.common.from} ${esc(formatLength(d.from, units.length, locale))} ${esc(getLengthUnit(units.length))} ${labels.common.to} ${esc(formatLength(d.to, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>
+        <span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.diameter}</strong>${esc(formatDiameter(d.diameter, units.diameter, locale))} ${esc(getDiameterUnit(units.diameter, locale))}</span>
         `,
     surfaceCase: (_, d) => `
-            <span class="${customClasses.tooltip.title}">TUBO DE BOCA</span>
-            <span class="${customClasses.tooltip.primaryInfo}">De ${esc(formatLength(d.from, units.length))} ${esc(units.length)} at\xE9 ${esc(formatLength(d.to, units.length))} ${esc(units.length)}</span>
-            <span class="${customClasses.tooltip.secondaryInfo}"><strong>Di\xE2metro:</strong>${esc(formatDiameter(d.diameter, units.diameter))} ${esc(units.diameter)}</span>
+            <span class="${customClasses.tooltip.title}">${labels.surfaceCase.title}</span>
+            <span class="${customClasses.tooltip.primaryInfo}">${labels.common.from} ${esc(formatLength(d.from, units.length, locale))} ${esc(getLengthUnit(units.length))} ${labels.common.to} ${esc(formatLength(d.to, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>
+            <span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.diameter}</strong>${esc(formatDiameter(d.diameter, units.diameter, locale))} ${esc(getDiameterUnit(units.diameter, locale))}</span>
           `,
     holeFill: (_, d) => `
-          <span class="${customClasses.tooltip.title}">ESP. ANULAR</span>
-          <span class="${customClasses.tooltip.primaryInfo}">De ${esc(formatLength(d.from, units.length))} ${esc(units.length)} at\xE9 ${esc(formatLength(d.to, units.length))} ${esc(units.length)}</span>
-          <span class="${customClasses.tooltip.secondaryInfo}"><strong>Di\xE2metro:</strong>${esc(formatDiameter(d.diameter, units.diameter))} ${esc(units.diameter)}</span>
+          <span class="${customClasses.tooltip.title}">${labels.holeFill.title}</span>
+          <span class="${customClasses.tooltip.primaryInfo}">${labels.common.from} ${esc(formatLength(d.from, units.length, locale))} ${esc(getLengthUnit(units.length))} ${labels.common.to} ${esc(formatLength(d.to, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>
+          <span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.diameter}</strong>${esc(formatDiameter(d.diameter, units.diameter, locale))} ${esc(getDiameterUnit(units.diameter, locale))}</span>
           <span class="${customClasses.tooltip.secondaryInfo}">
-            <strong>Descri\xE7\xE3o:</strong> ${esc(d.description)}
+            <strong>${labels.common.description}</strong> ${esc(d.description)}
           </span>
           `,
     wellCase: (_, d) => `
-          <span class="${customClasses.tooltip.title}">REVESTIMENTO</span>
-              <span class="${customClasses.tooltip.primaryInfo}">De ${esc(formatLength(d.from, units.length))} ${esc(units.length)} at\xE9 ${esc(formatLength(d.to, units.length))} ${esc(units.length)}</span>
+          <span class="${customClasses.tooltip.title}">${labels.wellCase.title}</span>
+              <span class="${customClasses.tooltip.primaryInfo}">${labels.common.from} ${esc(formatLength(d.from, units.length, locale))} ${esc(getLengthUnit(units.length))} ${labels.common.to} ${esc(formatLength(d.to, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>
               <span class="${customClasses.tooltip.secondaryInfo}">
-                <strong>Di\xE2metro:</strong> ${esc(formatDiameter(d.diameter, units.diameter))} ${esc(units.diameter)}
+                <strong>${labels.common.diameter}</strong> ${esc(formatDiameter(d.diameter, units.diameter, locale))} ${esc(getDiameterUnit(units.diameter, locale))}
               </span>
-              <span class="${customClasses.tooltip.secondaryInfo}"><strong>Tipo:</strong> ${esc(d.type)}</span>
+              <span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.type}</strong> ${esc(d.type)}</span>
           `,
     wellScreen: (_, d) => `
-          <span class="${customClasses.tooltip.title}">FILTROS</span>
-              <span class="${customClasses.tooltip.primaryInfo}">De ${esc(formatLength(d.from, units.length))} ${esc(units.length)} at\xE9 ${esc(formatLength(d.to, units.length))} ${esc(units.length)}</span>
+          <span class="${customClasses.tooltip.title}">${labels.wellScreen.title}</span>
+              <span class="${customClasses.tooltip.primaryInfo}">${labels.common.from} ${esc(formatLength(d.from, units.length, locale))} ${esc(getLengthUnit(units.length))} ${labels.common.to} ${esc(formatLength(d.to, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>
               <span class="${customClasses.tooltip.secondaryInfo}">
-                <strong>Di\xE2metro:</strong> ${esc(formatDiameter(d.diameter, units.diameter))} ${esc(units.diameter)}</span>
-              <span class="${customClasses.tooltip.secondaryInfo}"><strong>Tipo:</strong> ${esc(d.type)}</span>
+                <strong>${labels.common.diameter}</strong> ${esc(formatDiameter(d.diameter, units.diameter, locale))} ${esc(getDiameterUnit(units.diameter, locale))}</span>
+              <span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.type}</strong> ${esc(d.type)}</span>
               <span class="${customClasses.tooltip.secondaryInfo}">
-                <strong>Ranhura:</strong> ${esc(d.screen_slot_mm)} mm
+                <strong>${labels.wellScreen.slot}</strong> ${esc(formatNumber2(d.screen_slot, { maximumFractionDigits: 2, locale }))} mm
               </span>
           `,
+    reduction: (_, d) => `
+          <span class="${customClasses.tooltip.title}">${labels.reduction.title}</span>
+              <span class="${customClasses.tooltip.primaryInfo}">${labels.common.from} ${esc(formatLength(d.from, units.length, locale))} ${esc(getLengthUnit(units.length))} ${labels.common.to} ${esc(formatLength(d.to, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>
+              <span class="${customClasses.tooltip.secondaryInfo}">
+                <strong>${labels.common.diameter}</strong> ${esc(formatDiameter(d.diam_from, units.diameter, locale))} \u2192 ${esc(formatDiameter(d.diam_to, units.diameter, locale))} ${esc(getDiameterUnit(units.diameter, locale))}
+              </span>
+              <span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.type}</strong> ${esc(d.type)}</span>
+          `,
     conflict: (_, d) => `
-          <span class="${customClasses.tooltip.title}">CONFLITO</span>
-          <span class="${customClasses.tooltip.primaryInfo}">De ${esc(formatLength(d.from, units.length))} ${esc(units.length)} at\xE9 ${esc(formatLength(d.to, units.length))} ${esc(units.length)}</span>
+          <span class="${customClasses.tooltip.title}">${labels.conflict.title}</span>
+          <span class="${customClasses.tooltip.primaryInfo}">${labels.common.from} ${esc(formatLength(d.from, units.length, locale))} ${esc(getLengthUnit(units.length))} ${labels.common.to} ${esc(formatLength(d.to, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>
         `,
     fracture: (_, d) => {
-      const title = d.swarm ? "ENXAME DE FRATURAS" : "FRATURA";
+      const title = d.swarm ? labels.fracture.titleSwarm : labels.fracture.title;
       return `
           <span class="${customClasses.tooltip.title}">${title}</span>
-          <span class="${customClasses.tooltip.primaryInfo}"><strong>Profundidade:</strong> ${esc(formatLength(d.depth, units.length))} ${esc(units.length)}</span>
-          ${d.water_intake ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>Entrada d'\xE1gua:</strong> ${esc(formatLength(d.depth, units.length))} ${esc(units.length)}</span>` : ""}
-          <span class="${customClasses.tooltip.secondaryInfo}"><strong>Mergulho:</strong> ${esc(d.dip)}\xB0</span>
-          <span class="${customClasses.tooltip.secondaryInfo}"><strong>Azimute:</strong> ${esc(d.azimuth)}\xB0</span>
-          ${d.description ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>Descri\xE7\xE3o:</strong> ${esc(d.description)}</span>` : ""}
+          <span class="${customClasses.tooltip.primaryInfo}"><strong>${labels.fracture.depth}</strong> ${esc(formatLength(d.depth, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>
+          ${d.water_intake ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.fracture.waterIntake}</strong> ${esc(formatLength(d.depth, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>` : ""}
+          <span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.fracture.dip}</strong> ${esc(d.dip)}\xB0</span>
+          <span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.fracture.azimuth}</strong> ${esc(d.azimuth)}\xB0</span>
+          ${d.description ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.description}</strong> ${esc(d.description)}</span>` : ""}
         `;
     },
     cementPad: (_, d) => `
-          <span class="${customClasses.tooltip.title}">LAJE DE PROTE\xC7\xC3O</span>
+          <span class="${customClasses.tooltip.title}">${labels.cementPad.title}</span>
           <span class="${customClasses.tooltip.primaryInfo}">${esc(d.type)}</span>
-          <span class="${customClasses.tooltip.secondaryInfo}"><strong>Espessura:</strong>
-          ${esc(formatLength(d.thickness, units.length))} ${esc(units.length)}</span>
+          <span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.cementPad.thickness}</strong>
+          ${esc(formatLength(d.thickness, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>
           <span class="${customClasses.tooltip.secondaryInfo}">
-            <strong>Largura:</strong> ${esc(formatLength(d.width, units.length))} ${esc(units.length)}
+            <strong>${labels.cementPad.width}</strong> ${esc(formatLength(d.width, units.length, locale))} ${esc(getLengthUnit(units.length))}
           </span>
           <span class="${customClasses.tooltip.secondaryInfo}">
-            <strong>Comprimento:</strong> ${esc(formatLength(d.length, units.length))} ${esc(units.length)}
+            <strong>${labels.cementPad.length}</strong> ${esc(formatLength(d.length, units.length, locale))} ${esc(getLengthUnit(units.length))}
           </span>
         `,
     cave: (_, d) => `
-          <span class="${customClasses.tooltip.title}">CAVERNA</span>
-          <span class="${customClasses.tooltip.primaryInfo}">De ${esc(formatLength(d.from, units.length))} ${esc(units.length)} at\xE9 ${esc(formatLength(d.to, units.length))} ${esc(units.length)}</span>
-          ${d.water_intake ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>Entrada d'\xE1gua</strong></span>` : ""}
-          ${d.description ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>Descri\xE7\xE3o:</strong> ${esc(d.description)}</span>` : ""}
+          <span class="${customClasses.tooltip.title}">${labels.cave.title}</span>
+          <span class="${customClasses.tooltip.primaryInfo}">${labels.common.from} ${esc(formatLength(d.from, units.length, locale))} ${esc(getLengthUnit(units.length))} ${labels.common.to} ${esc(formatLength(d.to, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>
+          ${d.water_intake ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.cave.waterIntake}</strong></span>` : ""}
+          ${d.description ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.description}</strong> ${esc(d.description)}</span>` : ""}
         `
   };
   const noop = { show: () => {
@@ -671,13 +813,13 @@ var populateTooltips = (svg, customClasses, units, tooltipConfig) => {
       tooltips[tipTextKey] = noop;
       return;
     }
-    tooltips[tipTextKey] = d3.tip().attr("class", customClasses.tooltip.root).direction("e").html(tipsText[tipTextKey]);
+    tooltips[tipTextKey] = d3tip().attr("class", customClasses.tooltip.root).direction("e").html(tipsText[tipTextKey]);
     svg.call(
       tooltips[tipTextKey]
     );
   });
   svgEl?.setAttribute("data-tooltips-init", "true");
-  if (svgEl) _tooltipCache.set(svgEl, tooltips);
+  if (svgEl) _tooltipCache.set(svgEl, { signature, tooltips });
   return tooltips;
 };
 
@@ -693,7 +835,9 @@ var preloadFgdcTextures = () => {
   return _fgdcTexturesPromise;
 };
 var getLithologicalFillList = (data, opts) => {
-  const uniqueTextureCodes = [...new Set(data.map((d) => d.fgdc_texture))];
+  const textureKey = (d) => String(d.texture.code);
+  const isFgdc = (d) => !d.texture.vocabulary || d.texture.vocabulary === "fgdc";
+  const uniqueTextureCodes = [...new Set(data.filter(isFgdc).map(textureKey))];
   const texturesLoaded = Object.fromEntries(
     uniqueTextureCodes.filter((code) => {
       const path = _fgdcTextures[code];
@@ -702,10 +846,11 @@ var getLithologicalFillList = (data, opts) => {
   );
   return Object.fromEntries(
     data.map((d) => {
-      const pathData = texturesLoaded[d.fgdc_texture];
-      if (!pathData) return [`${d.fgdc_texture}.${d.from}`, d.color];
+      const key = textureKey(d);
+      const pathData = isFgdc(d) ? texturesLoaded[key] : void 0;
+      if (!pathData) return [`${key}.${d.from}`, d.color];
       return [
-        `${d.fgdc_texture}.${d.from}`,
+        `${key}.${d.from}`,
         textures2.paths().d(() => pathData).size(opts.size).strokeWidth(opts.strokeWidth).stroke(opts.stroke).background(d.color)
       ];
     })
@@ -714,7 +859,7 @@ var getLithologicalFillList = (data, opts) => {
 var getLithologyFill = (geologyData, svg, opts) => {
   const lithologicalFill = getLithologicalFillList(geologyData, opts);
   return (d) => {
-    const fill = lithologicalFill[`${d.fgdc_texture}.${d.from}`];
+    const fill = lithologicalFill[`${String(d.texture.code)}.${d.from}`];
     if (!fill.url) return fill;
     svg.call(fill);
     return fill.url();
@@ -777,7 +922,7 @@ function drawAnnotationLabels(ctx, data) {
   ctx.groups.lithologyLabelsGroup.selectAll("*").remove();
   if (active.has("lithology") && show.has("depth")) {
     data.lithology.filter((d) => d.to <= ctx.depthTo).forEach((d) => {
-      const text = `${d.to}`;
+      const text = `${formatLength(d.to, ctx.units.length, ctx.locale)}${getLengthUnit(ctx.units.length)}`;
       const approxW = text.length * (st.fontSize * 0.52) + s.depthTipPadX * 2;
       const y = ctx.yScale(d.to) - s.depthTipHeight / 2;
       const tipG = ctx.groups.lithologyLabelsGroup.append("g").attr("class", ctx.classes.labels.lithology.depth);
@@ -793,20 +938,20 @@ function drawAnnotationLabels(ctx, data) {
         baseY: ctx.yScale(Math.max(d.from, ctx.depthFrom)),
         originX: ctx.geoXRight,
         originY: ctx.yScale(Math.max(d.from, ctx.depthFrom)),
-        header: `${d.from}\u2013${d.to} m`,
+        header: `${formatLength(d.from, ctx.units.length, ctx.locale)}\u2013${formatLength(d.to, ctx.units.length, ctx.locale)}${getLengthUnit(ctx.units.length)}`,
         description: d.description || ""
       });
     });
   }
   if (active.has("fractures")) {
     data.fractures.filter((d) => d.depth >= ctx.depthFrom && d.depth < ctx.depthTo).forEach((d) => {
-      const typeLabel = d.water_intake ? "fratura aberta" : "fratura";
+      const typeLabel = d.water_intake ? ctx.renderConfig.labels.typeLabels?.fractureWater ?? "fratura aberta" : ctx.renderConfig.labels.typeLabels?.fracture ?? "fratura";
       items.push({
         sortDepth: d.depth,
         baseY: ctx.yScale(d.depth),
         originX: ctx.pocoCenterX,
         originY: ctx.yScale(d.depth),
-        header: `${d.depth} m \xB7 ${typeLabel}`,
+        header: `${formatLength(d.depth, ctx.units.length, ctx.locale)}${getLengthUnit(ctx.units.length)} \xB7 ${typeLabel}`,
         description: d.description || ""
       });
     });
@@ -814,13 +959,13 @@ function drawAnnotationLabels(ctx, data) {
   if (active.has("caves")) {
     data.caves.filter((d) => d.from < ctx.depthTo).forEach((d) => {
       const midDepth = (d.from + d.to) / 2;
-      const typeLabel = d.water_intake ? "caverna \xFAmida" : "caverna";
+      const typeLabel = d.water_intake ? ctx.renderConfig.labels.typeLabels?.caveWater ?? "caverna \xFAmida" : ctx.renderConfig.labels.typeLabels?.cave ?? "caverna";
       items.push({
         sortDepth: d.from,
         baseY: ctx.yScale(Math.max(d.from, ctx.depthFrom)),
         originX: ctx.geoXRight,
         originY: ctx.yScale(Math.max(midDepth, ctx.depthFrom)),
-        header: `${d.from}\u2013${d.to} m \xB7 ${typeLabel}`,
+        header: `${formatLength(d.from, ctx.units.length, ctx.locale)}\u2013${formatLength(d.to, ctx.units.length, ctx.locale)}${getLengthUnit(ctx.units.length)} \xB7 ${typeLabel}`,
         description: d.description || ""
       });
     });
@@ -866,6 +1011,19 @@ function drawAnnotationLabels(ctx, data) {
   }
 }
 
+// src/renderers/caves.renderer.ts
+import * as d3 from "d3";
+
+// src/utils/key.utils.ts
+var makeIntervalKey = (type) => (d, _i) => {
+  const { key, from, to } = d;
+  return key ? `${key}` : `${type}:${from}:${to}`;
+};
+var makePointKey = (type) => (d, i) => {
+  const { key, depth } = d;
+  return key ? `${key}` : `${type}:${depth}:${i}`;
+};
+
 // src/renderers/caves.renderer.ts
 function drawCaves(ctx, data) {
   if (!data.length) return;
@@ -882,9 +1040,14 @@ function drawCaves(ctx, data) {
     classes,
     tooltips
   } = ctx;
-  cavesGroup.selectAll(`g.${classes.caves.item}`).remove();
   const rc = renderConfig.caves;
-  data.forEach((cave) => {
+  const groups = cavesGroup.selectAll(`g.${classes.caves.item}`).data(data, makeIntervalKey("cave"));
+  groups.exit().transition(ctx.transition).style("opacity", 0).remove();
+  const entered = groups.enter().append("g").attr("class", classes.caves.item).style("cursor", "pointer").on("mouseover", tooltips.cave.show).on("mouseout", tooltips.cave.hide).style("opacity", 0);
+  const merged = mergeEnter(entered, groups);
+  merged.each(function(cave) {
+    const g = d3.select(this);
+    g.selectAll("*").remove();
     const seedTop = cave.from * 100 + cave.to;
     const seedBot = cave.to * 100 + cave.from + 999;
     const rngTop = makeSeededPrng(seedTop);
@@ -911,12 +1074,12 @@ function drawCaves(ctx, data) {
     const botReversed = botCut ? `L ${geoXLeft.toFixed(1)},${yBot.toFixed(1)}` : ptsToSmoothPath([...botPts].reverse(), { omitMoveTo: true });
     const closedPath = `${topPath} L ${geoXRight.toFixed(1)},${yBot.toFixed(1)}${botReversed} L ${geoXLeft.toFixed(1)},${yTop.toFixed(1)} Z`;
     const caveTexture = cave.water_intake ? textures3.cave_wet : textures3.cave_dry;
-    const g = cavesGroup.append("g").attr("class", classes.caves.item).datum(cave).style("cursor", "pointer").on("mouseover", tooltips.cave.show).on("mouseout", tooltips.cave.hide);
     const caveStroke = cave.water_intake ? theme.cave.wetStroke : theme.cave.dryStroke;
     g.append("path").attr("class", classes.caves.fill).attr("d", closedPath).attr("fill", caveTexture.url()).attr("fill-opacity", theme.cave.fillOpacity).attr("stroke", "none");
     g.append("path").attr("class", classes.caves.contact).attr("d", topPath).attr("fill", "none").attr("stroke", caveStroke).attr("stroke-width", theme.cave.contactStrokeWidth).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
     g.append("path").attr("class", classes.caves.contact).attr("d", botPath).attr("fill", "none").attr("stroke", caveStroke).attr("stroke-width", theme.cave.contactStrokeWidth).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
   });
+  merged.transition(ctx.transition).style("opacity", 1);
 }
 
 // src/renderers/construction-labels.renderer.ts
@@ -927,8 +1090,8 @@ function drawConstructionLabels(ctx, data) {
   ctx.groups.constructionLabelsGroup.selectAll("*").remove();
   const clc = ctx.renderConfig.constructionLabels;
   const clct = ctx.theme.constructionLabels;
-  const fmtD = (mm) => formatDiameter(mm, ctx.units.diameter);
-  const dUnit = getDiameterUnit(ctx.units.diameter);
+  const fmtD = (mm) => formatDiameter(mm, ctx.units.diameter, ctx.locale);
+  const dUnit = getDiameterUnit(ctx.units.diameter, ctx.locale);
   const maxXValues = getProfileDiamValues(ctx.constructionData);
   const xScale = d32.scaleLinear().domain([0, d32.max(maxXValues) || 0]).range([0, ctx.POCO_WIDTH]);
   const occupied = [];
@@ -990,7 +1153,7 @@ function drawConstructionLabels(ctx, data) {
   }).forEach(
     (d) => placeLabel(
       d,
-      `${clc.labels.wellScreenPrefix} ${fmtD(d.diameter)}${dUnit} ${d.type} ${clc.labels.wellScreenSlotPrefix} ${fmtD(d.screen_slot_mm)}${dUnit}`
+      `${clc.labels.wellScreenPrefix} ${fmtD(d.diameter)}${dUnit} ${d.type} ${clc.labels.wellScreenSlotPrefix} ${fmtD(d.screen_slot)}${dUnit}`
     )
   );
 }
@@ -1007,9 +1170,10 @@ function drawConstructive(ctx, data) {
   const maxXValueConstruction = d33.max(maxXValues) || 0;
   const xScale = d33.scaleLinear().domain([0, maxXValueConstruction]).range([0, ctx.POCO_WIDTH]);
   const rcc = ctx.renderConfig.construction;
+  const yPos = getYPos;
   ctx.groups.constructionGroup.selectAll(`.${ctx.classes.cementPad.item}`).remove();
   if (data.cement_pad && data.cement_pad.thickness && ctx.depthFrom === 0) {
-    const cementPad = ctx.groups.cementPadGroup.selectAll("rect").data([data.cement_pad]);
+    const cementPad = ctx.groups.cementPadGroup.selectAll("rect").data([data.cement_pad], () => "cement_pad");
     cementPad.exit().remove();
     const newCementPad = cementPad.enter().append("rect").attr("class", ctx.classes.cementPad.item).attr(
       "x",
@@ -1024,36 +1188,19 @@ function drawConstructive(ctx, data) {
     }).attr("fill", ctx.textures.pad.url()).attr("stroke", ctx.theme.cementPad.stroke).attr("stroke-width", ctx.theme.cementPad.strokeWidth);
     newCementPad.on("mouseover", ctx.tooltips.cementPad.show).on("mouseout", ctx.tooltips.cementPad.hide);
   }
-  const hole = ctx.groups.holeGroup.selectAll(`.${ctx.classes.boreHole.rect}`).data(data.bore_hole, stableLayerKey);
+  const hole = ctx.groups.holeGroup.selectAll(`.${ctx.classes.boreHole.rect}`).data(data.bore_hole, makeIntervalKey("bore_hole"));
   hole.exit().transition(ctx.transition).attr("height", 0).remove();
-  const newHole = hole.enter().append("rect").attr("class", ctx.classes.boreHole.rect).attr("fill", ctx.theme.boreHole.fill).attr("stroke", ctx.theme.boreHole.stroke).attr("stroke-width", ctx.theme.boreHole.strokeWidth).attr("stroke-dasharray", ctx.theme.boreHole.strokeDasharray).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter)).attr("y", getYPos).attr("height", getHeight).attr("opacity", 0).on("mouseover", ctx.tooltips.hole.show).on("mouseout", ctx.tooltips.hole.hide);
-  withTransition(newHole, ctx.transition).attr(
-    "opacity",
-    ctx.theme.boreHole.opacity
-  );
-  hole.attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
-  withTransition(hole, ctx.transition).attr("y", getYPos).attr("height", getHeight);
-  const surfaceCaseGs = ctx.groups.surfaceCaseGroup.selectAll(`g.${ctx.classes.surfaceCase.rect}`).data(data.surface_case, stableLayerKey);
+  const newHole = hole.enter().append("rect").attr("class", ctx.classes.boreHole.rect).attr("fill", ctx.theme.boreHole.fill).attr("stroke", ctx.theme.boreHole.stroke).attr("opacity", ctx.theme.boreHole.opacity).attr("stroke-width", ctx.theme.boreHole.strokeWidth).attr("stroke-dasharray", ctx.theme.boreHole.strokeDasharray).on("mouseover", ctx.tooltips.hole.show).on("mouseout", ctx.tooltips.hole.hide).attr("y", yPos).attr("height", 0);
+  const mergedHole = mergeEnter(newHole, hole).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
+  withTransition(mergedHole, ctx.transition).attr("y", getYPos).attr("height", getHeight);
+  const surfaceCaseGs = ctx.groups.surfaceCaseGroup.selectAll(`g.${ctx.classes.surfaceCase.rect}`).data(data.surface_case, makeIntervalKey("surface_case"));
   surfaceCaseGs.exit().transition(ctx.transition).style("opacity", 0).remove();
-  const newSC = surfaceCaseGs.enter().append("g").attr("class", ctx.classes.surfaceCase.rect).style("opacity", 0).on("mouseover", ctx.tooltips.surfaceCase.show).on("mouseout", ctx.tooltips.surfaceCase.hide);
-  newSC.append("rect").attr("class", "surface-case-fill").attr("stroke", "none");
+  const newSC = surfaceCaseGs.enter().append("g").attr("class", ctx.classes.surfaceCase.rect).on("mouseover", ctx.tooltips.surfaceCase.show).on("mouseout", ctx.tooltips.surfaceCase.hide);
+  newSC.append("rect").attr("class", "surface-case-fill").attr("stroke", "none").attr("y", yPos).attr("height", 0);
   newSC.append("line").attr("class", "surface-case-side").attr("stroke", ctx.theme.surfaceCase.stroke).attr("stroke-width", ctx.theme.surfaceCase.strokeWidth);
   newSC.append("line").attr("class", "surface-case-side").attr("stroke", ctx.theme.surfaceCase.stroke).attr("stroke-width", ctx.theme.surfaceCase.strokeWidth);
-  newSC.each((d, i, nodes) => {
-    const x = (ctx.POCO_CENTER - xScale(
-      d.diameter + d.diameter * rcc.surfaceCase.diameterPaddingRatio
-    )) / 2;
-    const w = xScale(
-      d.diameter + d.diameter * rcc.surfaceCase.diameterPaddingRatio
-    );
-    const g = d33.select(nodes[i]);
-    g.select(".surface-case-fill").attr("x", x).attr("width", w).attr("fill", ctx.textures.surface_case.url()).attr("y", getYPos(d)).attr("height", getHeight(d));
-    const sideNodes = g.selectAll(".surface-case-side").nodes();
-    d33.select(sideNodes[0]).attr("x1", x).attr("x2", x).attr("y1", getYPos(d)).attr("y2", getYPos(d) + getHeight(d));
-    d33.select(sideNodes[1]).attr("x1", x + w).attr("x2", x + w).attr("y1", getYPos(d)).attr("y2", getYPos(d) + getHeight(d));
-  });
-  withTransition(newSC, ctx.transition).style("opacity", 1);
-  surfaceCaseGs.each((d, i, nodes) => {
+  const mergedSC = mergeEnter(newSC, surfaceCaseGs);
+  mergedSC.each((d, i, nodes) => {
     const x = (ctx.POCO_CENTER - xScale(
       d.diameter + d.diameter * rcc.surfaceCase.diameterPaddingRatio
     )) / 2;
@@ -1067,47 +1214,61 @@ function drawConstructive(ctx, data) {
     d33.select(sideNodes[1]).attr("x1", x + w).attr("x2", x + w);
   });
   withTransition(
-    surfaceCaseGs.select(".surface-case-fill"),
+    mergedSC.select(".surface-case-fill"),
     ctx.transition
   ).attr("y", (d) => getYPos(d)).attr("height", (d) => getHeight(d));
-  withTransition(
-    surfaceCaseGs.selectAll(".surface-case-side"),
-    ctx.transition
-  ).attr("y1", (d) => getYPos(d)).attr(
+  mergedSC.selectAll(".surface-case-side").attr("y1", (d) => getYPos(d)).attr(
     "y2",
     (d) => getYPos(d) + getHeight(d)
   );
-  const holeFill = ctx.groups.holeFillGroup.selectAll(`.${ctx.classes.holeFill.rect}`).data(data.hole_fill, stableLayerKey);
+  const holeFill = ctx.groups.holeFillGroup.selectAll(`.${ctx.classes.holeFill.rect}`).data(data.hole_fill, makeIntervalKey("hole_fill"));
   holeFill.exit().transition(ctx.transition).attr("height", 0).remove();
-  const newHoleFill = holeFill.enter().append("rect").attr("class", ctx.classes.holeFill.rect).attr("stroke", ctx.theme.holeFill.stroke).attr("stroke-width", ctx.theme.holeFill.strokeWidth).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter)).attr("y", getYPos).attr("height", getHeight).attr("fill", (d) => ctx.textures[d.type].url()).attr("opacity", 0).on("mouseover", ctx.tooltips.holeFill.show).on("mouseout", ctx.tooltips.holeFill.hide);
-  withTransition(newHoleFill, ctx.transition).attr("opacity", 1);
-  holeFill.attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter)).attr("fill", (d) => ctx.textures[d.type].url());
-  withTransition(holeFill, ctx.transition).attr("y", getYPos).attr("height", getHeight);
-  const wellCase = ctx.groups.wellCaseGroup.selectAll(`.${ctx.classes.wellCase.rect}`).data(data.well_case, stableLayerKey);
+  const newHoleFill = holeFill.enter().append("rect").attr("class", ctx.classes.holeFill.rect).attr("stroke", ctx.theme.holeFill.stroke).attr("stroke-width", ctx.theme.holeFill.strokeWidth).on("mouseover", ctx.tooltips.holeFill.show).on("mouseout", ctx.tooltips.holeFill.hide).attr("y", yPos).attr("height", 0);
+  const mergedHoleFill = mergeEnter(newHoleFill, holeFill).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
+  withTransition(mergedHoleFill, ctx.transition).attr("y", getYPos).attr("height", getHeight).attr("fill", (d) => ctx.textures[d.type].url());
+  const wellCase = ctx.groups.wellCaseGroup.selectAll(`.${ctx.classes.wellCase.rect}`).data(data.well_case, makeIntervalKey("well_case"));
   wellCase.exit().transition(ctx.transition).attr("height", 0).remove();
-  const newWellCase = wellCase.enter().append("rect").attr("class", ctx.classes.wellCase.rect).attr("fill", ctx.theme.wellCase.fill).attr("stroke", ctx.theme.wellCase.stroke).attr("stroke-width", ctx.theme.wellCase.strokeWidth).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter)).attr("y", getYPos).attr("height", getHeight).attr("opacity", 0).on("mouseover", ctx.tooltips.wellCase.show).on("mouseout", ctx.tooltips.wellCase.hide);
-  withTransition(newWellCase, ctx.transition).attr("opacity", 1);
-  wellCase.attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
-  withTransition(wellCase, ctx.transition).attr("y", getYPos).attr("height", getHeight);
-  const wellScreen = ctx.groups.wellScreenGroup.selectAll(`.${ctx.classes.wellScreen.rect}`).data(data.well_screen, stableLayerKey);
+  const newWellCase = wellCase.enter().append("rect").attr("class", ctx.classes.wellCase.rect).attr("fill", ctx.theme.wellCase.fill).attr("stroke", ctx.theme.wellCase.stroke).attr("stroke-width", ctx.theme.wellCase.strokeWidth).on("mouseover", ctx.tooltips.wellCase.show).on("mouseout", ctx.tooltips.wellCase.hide).attr("y", yPos).attr("height", 0);
+  const mergedWellCase = mergeEnter(newWellCase, wellCase).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
+  withTransition(mergedWellCase, ctx.transition).attr("y", getYPos).attr("height", getHeight);
+  const wellScreen = ctx.groups.wellScreenGroup.selectAll(`.${ctx.classes.wellScreen.rect}`).data(data.well_screen, makeIntervalKey("well_screen"));
   wellScreen.exit().transition(ctx.transition).attr("height", 0).remove();
-  const newWellScreen = wellScreen.enter().append("rect").attr("class", ctx.classes.wellScreen.rect).attr("fill", ctx.textures.well_screen.url()).attr("stroke", ctx.theme.wellScreen.stroke).attr("stroke-width", ctx.theme.wellScreen.strokeWidth).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter)).attr("y", getYPos).attr("height", getHeight).attr("opacity", 0).on("mouseover", ctx.tooltips.wellScreen.show).on("mouseout", ctx.tooltips.wellScreen.hide);
-  withTransition(newWellScreen, ctx.transition).attr("opacity", 1);
-  wellScreen.attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
-  withTransition(wellScreen, ctx.transition).attr("y", getYPos).attr("height", getHeight);
+  const newWellScreen = wellScreen.enter().append("rect").attr("class", ctx.classes.wellScreen.rect).attr("fill", ctx.textures.well_screen.url()).attr("stroke", ctx.theme.wellScreen.stroke).attr("stroke-width", ctx.theme.wellScreen.strokeWidth).on("mouseover", ctx.tooltips.wellScreen.show).on("mouseout", ctx.tooltips.wellScreen.hide).attr("y", yPos).attr("height", 0);
+  const mergedWellScreen = mergeEnter(newWellScreen, wellScreen).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
+  withTransition(mergedWellScreen, ctx.transition).attr("y", getYPos).attr("height", getHeight);
+  const reductionPoints = (d, yTop, yBot) => {
+    const xTopLeft = (ctx.POCO_CENTER - xScale(d.diam_from)) / 2;
+    const xTopRight = (ctx.POCO_CENTER + xScale(d.diam_from)) / 2;
+    const xBotLeft = (ctx.POCO_CENTER - xScale(d.diam_to)) / 2;
+    const xBotRight = (ctx.POCO_CENTER + xScale(d.diam_to)) / 2;
+    return `${xTopLeft},${yTop} ${xTopRight},${yTop} ${xBotRight},${yBot} ${xBotLeft},${yBot}`;
+  };
+  const reduction = ctx.groups.reductionGroup.selectAll(`.${ctx.classes.reduction.item}`).data(data.reduction, makeIntervalKey("reduction"));
+  reduction.exit().transition(ctx.transition).style("opacity", 0).remove();
+  const collapsedPoints = (d) => {
+    const r = d;
+    const y = getYPos(r);
+    return reductionPoints(r, y, y);
+  };
+  const newReduction = reduction.enter().append("polygon").attr("class", ctx.classes.reduction.item).attr("fill", ctx.theme.reduction.fill).attr("stroke", ctx.theme.reduction.stroke).attr("stroke-width", ctx.theme.reduction.strokeWidth).on("mouseover", ctx.tooltips.reduction.show).on("mouseout", ctx.tooltips.reduction.hide).attr("points", collapsedPoints);
+  const mergedReduction = mergeEnter(newReduction, reduction);
+  withTransition(mergedReduction, ctx.transition).attr(
+    "points",
+    (d) => reductionPoints(d, getYPos(d), getYPos(d) + getHeight(d))
+  );
   const conflictAreas = [];
   conflictAreas.push(...getConflictAreas(data.well_case, data.well_screen));
   conflictAreas.push(...getConflictAreas(data.well_screen, data.well_case));
   const mergedConflicts = mergeConflicts(conflictAreas, 1);
-  const conflict = ctx.groups.conflictGroup.selectAll(`.${ctx.classes.conflict.rect}`).data(mergedConflicts, (d) => `${d.from}_${d.to}_${d.diameter}`);
+  const conflict = ctx.groups.conflictGroup.selectAll(`.${ctx.classes.conflict.rect}`).data(mergedConflicts, makeIntervalKey("conflict"));
   conflict.exit().transition(ctx.transition).attr("height", 0).remove();
-  const newConflict = conflict.enter().append("rect").attr("class", ctx.classes.conflict.rect).attr("fill", ctx.textures.conflict.url()).attr("stroke", ctx.theme.conflict.stroke).attr("stroke-width", ctx.theme.conflict.strokeWidth).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter)).attr("y", getYPos).attr("height", getHeight).attr("opacity", 0).on("mouseover", ctx.tooltips.conflict.show).on("mouseout", ctx.tooltips.conflict.hide);
-  withTransition(newConflict, ctx.transition).attr("opacity", 1);
-  conflict.attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
-  withTransition(conflict, ctx.transition).attr("y", getYPos).attr("height", getHeight);
+  const newConflict = conflict.enter().append("rect").attr("class", ctx.classes.conflict.rect).attr("fill", ctx.textures.conflict.url()).attr("stroke", ctx.theme.conflict.stroke).attr("stroke-width", ctx.theme.conflict.strokeWidth).on("mouseover", ctx.tooltips.conflict.show).on("mouseout", ctx.tooltips.conflict.hide).attr("y", ctx.yScale(0)).attr("height", 0);
+  const mergedConflict = mergeEnter(newConflict, conflict).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
+  withTransition(mergedConflict, ctx.transition).attr("y", ctx.yScale(0)).attr("height", getHeight);
 }
 
 // src/renderers/fractures.renderer.ts
+import * as d34 from "d3";
 function wavyLine(rng, steps, baseY, jitter, startInset, endInset) {
   const pts = [];
   for (let i = 0; i < steps; i++) {
@@ -1130,19 +1291,23 @@ function drawFractures(ctx, data) {
     classes,
     tooltips
   } = ctx;
-  fracturesGroup.selectAll(`g.${classes.fractures.item}`).remove();
   const rf = renderConfig.fractures;
   const halfWidth = POCO_WIDTH * rf.widthMultiplier / 2;
   const xa = pocoCenterX - halfWidth;
   const w = halfWidth * 2;
   const normToAbsX = (normX) => xa + normX * w;
-  data.forEach((fracture) => {
+  const groups = fracturesGroup.selectAll(`g.${classes.fractures.item}`).data(data, makePointKey("fracture"));
+  groups.exit().transition(ctx.transition).style("opacity", 0).remove();
+  const entered = groups.enter().append("g").attr("class", classes.fractures.item).on("mouseover", tooltips.fracture.show).on("mouseout", tooltips.fracture.hide).style("cursor", "pointer").style("opacity", 0);
+  const merged = mergeEnter(entered, groups);
+  merged.attr(
+    "transform",
+    (fracture) => `translate(0,${yScale(fracture.depth)}) rotate(${fracture.dip},${pocoCenterX},0)`
+  );
+  merged.each(function(fracture) {
+    const g = d34.select(this);
+    g.selectAll("*").remove();
     const rng = makeSeededPrng(fracture.depth, 7919);
-    const cy = yScale(fracture.depth);
-    const g = fracturesGroup.append("g").attr("class", classes.fractures.item).datum(fracture).attr(
-      "transform",
-      `translate(0,${cy}) rotate(${fracture.dip},${pocoCenterX},0)`
-    ).on("mouseover", tooltips.fracture.show).on("mouseout", tooltips.fracture.hide).style("cursor", "pointer");
     const hitBuffer = fracture.swarm ? rf.hitBuffer.swarm : rf.hitBuffer.single;
     g.append("rect").attr("class", classes.fractures.hitArea).attr("x", xa).attr("y", -hitBuffer).attr("width", w).attr("height", hitBuffer * 2).attr("fill", "transparent").style("pointer-events", "all");
     const fractureStroke = fracture.water_intake ? theme.fracture.wetStroke : theme.fracture.dryStroke;
@@ -1215,10 +1380,11 @@ function drawFractures(ctx, data) {
       }
     }
   });
+  merged.transition(ctx.transition).style("opacity", 1);
 }
 
 // src/renderers/highlights.renderer.ts
-import * as d34 from "d3";
+import * as d35 from "d3";
 import { getProfileDiamValues as getProfileDiamValues3 } from "@welldot/utils";
 function drawHighlightItem(ctx, group, x, y, w, h, label) {
   if (h <= 0 || w <= 0) return;
@@ -1279,7 +1445,7 @@ function drawHighlights(ctx, hl) {
     );
   });
   const maxXVals = getProfileDiamValues3(ctx.constructionData);
-  const xScaleConstr = d34.scaleLinear().domain([0, d34.max(maxXVals) || 0]).range([0, ctx.POCO_WIDTH]);
+  const xScaleConstr = d35.scaleLinear().domain([0, d35.max(maxXVals) || 0]).range([0, ctx.POCO_WIDTH]);
   const constructionConfig = ctx.renderConfig.construction;
   if (hl.cement_pad && ctx.depthFrom === 0 && ctx.constructionData.cement_pad?.thickness) {
     const cp = ctx.constructionData.cement_pad;
@@ -1359,18 +1525,29 @@ function drawHighlights(ctx, hl) {
     stdX,
     stdW
   );
+  drawConstrHighlights(
+    hl.reduction,
+    ctx.constructionData.reduction.map((d) => ({
+      from: d.from,
+      to: d.to,
+      diameter: Math.max(d.diam_from, d.diam_to)
+    })),
+    stdX,
+    stdW
+  );
 }
 
 // src/renderers/legend.renderer.ts
-import * as d3module2 from "d3";
+import * as d3module from "d3";
 import { defu } from "defu";
-var d35 = { ...d3module2 };
+var d36 = { ...d3module };
 function drawWellLegend(selector, profile, options = {}) {
   const fractures = profile.fractures ?? [];
   const caves = profile.caves ?? [];
   const boreHoles = profile.bore_hole ?? [];
   const wellCases = profile.well_case ?? [];
   const wellScreens = profile.well_screen ?? [];
+  const reductions = profile.reduction ?? [];
   const holeFills = profile.hole_fill ?? [];
   const hasSimple = fractures.some((f) => !f.swarm && !f.water_intake);
   const hasSwarm = fractures.some((f) => f.swarm);
@@ -1383,6 +1560,7 @@ function drawWellLegend(selector, profile, options = {}) {
   const hasHoleFillSeal = holeFills.some((h) => h.type === "seal");
   const hasWellCase = wellCases.length > 0;
   const hasWellScreen = wellScreens.length > 0;
+  const hasReduction = reductions.length > 0;
   const hasCementPad = !!profile.cement_pad?.thickness;
   const hasConflict = mergeConflicts(
     [
@@ -1469,13 +1647,19 @@ function drawWellLegend(selector, profile, options = {}) {
       label: cfg.labels.wellScreen,
       subKind: "wellScreen"
     });
+  if (hasReduction)
+    items.push({
+      kind: "construction",
+      label: cfg.labels.reduction,
+      subKind: "reduction"
+    });
   if (hasConflict)
     items.push({
       kind: "construction",
       label: cfg.labels.conflict,
       subKind: "conflict"
     });
-  const svgEl = d35.select(selector);
+  const svgEl = d36.select(selector);
   svgEl.selectAll("*").remove();
   if (items.length === 0) {
     svgEl.attr("width", 0).attr("height", 0);
@@ -1527,6 +1711,15 @@ function drawWellLegend(selector, profile, options = {}) {
       symG.append("rect").attr("class", cls.constructionRect).attr("x", cx).attr("y", rowSymY - rh / 2).attr("width", rw).attr("height", rh).attr("fill", legendTextures.surface_case.url()).attr("stroke", "none");
       symG.append("line").attr("class", cls.constructionRect).attr("x1", cx).attr("x2", cx).attr("y1", rowSymY - rh / 2).attr("y2", rowSymY + rh / 2).attr("stroke", theme.surfaceCase.stroke).attr("stroke-width", 2);
       symG.append("line").attr("class", cls.constructionRect).attr("x1", cx + rw).attr("x2", cx + rw).attr("y1", rowSymY - rh / 2).attr("y2", rowSymY + rh / 2).attr("stroke", theme.surfaceCase.stroke).attr("stroke-width", 2);
+    } else if (item.subKind === "reduction") {
+      const topW = rw * 0.5;
+      const y1 = rowSymY - rh / 2;
+      const y2 = rowSymY + rh / 2;
+      const midX = cx + rw / 2;
+      symG.append("polygon").attr("class", cls.constructionRect).attr(
+        "points",
+        `${midX - topW / 2},${y1} ${midX + topW / 2},${y1} ${cx + rw},${y2} ${cx},${y2}`
+      ).attr("fill", theme.reduction.fill).attr("stroke", theme.reduction.stroke).attr("stroke-width", theme.legend.itemStrokeWidth);
     } else {
       const symMap = {
         boreHole: {
@@ -1584,13 +1777,11 @@ function drawLithology(ctx, data) {
     from: depthFrom,
     to: depthTo
   });
-  const fillFn = getLithologyFill(data, svg, ctx.theme.lithologyTexture);
-  const rects = lithologyGroup.selectAll(`.${classes.lithology.rect}`).data(data, stableLayerKey);
+  const rects = lithologyGroup.selectAll(`.${classes.lithology.rect}`).data(data, makeIntervalKey("lithology"));
   rects.exit().transition(transition).attr("height", 0).remove();
-  const newLayers = rects.enter().append("rect").attr("class", classes.lithology.rect).attr("x", geoXLeft).attr("width", geoXRight - geoXLeft).attr("stroke", theme.lithology.stroke).attr("stroke-width", theme.lithology.strokeWidth).attr("y", getYPos).attr("height", getHeight).attr("fill", fillFn).attr("opacity", 0).on("mouseover", tooltips.geology.show).on("mouseout", tooltips.geology.hide);
-  withTransition(newLayers, transition).attr("opacity", 1);
-  rects.attr("fill", fillFn);
-  withTransition(rects, transition).attr("y", getYPos).attr("height", getHeight);
+  const newLayers = rects.enter().append("rect").attr("class", classes.lithology.rect).attr("x", geoXLeft).attr("width", geoXRight - geoXLeft).attr("stroke", theme.lithology.stroke).attr("stroke-width", theme.lithology.strokeWidth).on("mouseover", tooltips.geology.show).on("mouseout", tooltips.geology.hide).attr("y", getYPos).attr("height", 0);
+  const merged = mergeEnter(newLayers, rects);
+  withTransition(merged, transition).attr("y", getYPos).attr("height", getHeight).attr("fill", getLithologyFill(data, svg, ctx.theme.lithologyTexture));
 }
 
 // src/renderers/unit-labels.renderer.ts
@@ -1677,20 +1868,26 @@ function buildSvgStyleBlock(theme) {
     `.wp-annotation-label{font-size:${s(labels.fontSize)}px}`,
     `.wp-annotation-header{font-weight:${s(labels.headerFontWeight ?? 600)};font-family:${s(labels.headerFont)};font-size:${s(labels.fontSize)}px;color:${s(labels.color)}}`,
     `.wp-annotation-body{font-weight:${s(labels.bodyFontWeight ?? 400)};font-family:${s(labels.bodyFont ?? "sans-serif")};font-size:${s(labels.fontSize)}px;color:${s(labels.bodyColor)}}`,
-    `.wp-depth-tip-text{font-family:${s(labels.bodyFont ?? "sans-serif")};font-size:${s(labels.fontSize)}px;color:${s(labels.color)}}`
+    `.wp-depth-tip-text{font-family:${s(labels.bodyFont ?? "sans-serif")};font-size:${s(labels.fontSize)}px;color:${s(labels.color)}}`,
+    `.wp-tooltip{position:absolute;z-index:1000;display:flex;flex-direction:column;gap:2px;max-width:240px;padding:8px 10px;border-radius:6px;background:${s(labels.annotationBg)};border:1px solid ${s(labels.annotationBorderColor ?? "rgba(0,0,0,0.08)")};box-shadow:0 4px 12px rgba(0,0,0,0.15);font-family:${s(labels.bodyFont ?? "sans-serif")};line-height:1.45}`,
+    `.wp-tooltip-title{font-family:${s(labels.headerFont)};font-weight:${s(labels.headerFontWeight ?? 600)};font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:${s(labels.color)}}`,
+    `.wp-tooltip-primary{font-weight:${s(labels.headerFontWeight ?? 600)};font-size:12px;color:${s(labels.color)}}`,
+    `.wp-tooltip-secondary{font-size:11px;color:${s(labels.bodyColor)}}`
   ].join("");
 }
 
 // src/Renderer.ts
-var d36 = Object.assign(d3module3, { tip: d3tip2 });
+var d37 = { ...d3module2, tip: d3tip2 };
 var WellRenderer = class {
   /**
    * @param svgs - One entry per SVG panel; multi-entry for split-panel layouts.
    * @param options.classNames - Override default BEM CSS class names.
    * @param options.units - Active measurement units (`length` and `diameter`).
+   * @param options.locale - Locale for renderer-drawn text (diameter symbol, and any `RenderConfig` fields resolved via `applyRenderLocale`). Defaults to `'pt'`, matching the package's historical output.
    * @param options.renderConfig - Rendering behaviour (zoom, pan, animation, layout). Defaults to `INTERACTIVE_RENDER_CONFIG`.
    * @param options.theme - Visual theme overrides. Merged on top of `DEFAULT_WELL_THEME`.
    * @param options.onError - Called when a draw error occurs (e.g., a renderer throws). Falls back to `console.error` if omitted.
+   * @param options.onZoom - Called with the current zoom scale (`1` = initial/fit) whenever the user zooms or pans, and whenever `zoomBy`/`resetZoom` are called. No-op if `renderConfig.zoom`/`pan` are both disabled.
    */
   constructor(svgs, options = {}) {
     this.svgInstances = [];
@@ -1703,6 +1900,7 @@ var WellRenderer = class {
       length: "m",
       diameter: "mm"
     };
+    this.locale = "pt";
     if (svgs.length === 0) {
       console.warn(
         "[WellRenderer] No SVG instances provided. The renderer will be a no-op."
@@ -1711,6 +1909,7 @@ var WellRenderer = class {
     }
     this.svgInstances = svgs;
     if (options.onError) this.onError = options.onError;
+    if (options.onZoom) this.onZoom = options.onZoom;
     if (options.classNames) {
       this.classes = defu2(
         options.classNames,
@@ -1720,6 +1919,9 @@ var WellRenderer = class {
     if (options.units) {
       this.units = { ...this.units, ...options.units };
     }
+    if (options.locale) {
+      this.locale = options.locale;
+    }
     if (options.renderConfig) {
       this.renderConfig = defu2(
         options.renderConfig,
@@ -1735,7 +1937,7 @@ var WellRenderer = class {
     const { selector, height, width, margins } = inst;
     const svgWidth = width + margins.left + margins.right;
     const svgHeight = height + margins.top + margins.bottom;
-    const svg = d36.select(selector);
+    const svg = d37.select(selector);
     svg.selectAll("*").remove();
     svg.attr("height", svgHeight).attr("width", svgWidth);
     const defs = svg.append("defs");
@@ -1755,14 +1957,15 @@ var WellRenderer = class {
     );
     const fracturesGroup = poco.append("g").attr("class", this.classes.fractures.group).attr("transform", `translate(${margins.left}, ${margins.top})`).attr("clip-path", `url(#${clipId})`);
     fracturesGroup.append("g").attr("class", this.classes.highlights.fracturesGroup);
-    construction.append("g").attr("class", this.classes.constructionLabels.group);
     construction.append("g").attr("class", this.classes.cementPad.group);
     construction.append("g").attr("class", this.classes.boreHole.group);
     construction.append("g").attr("class", this.classes.surfaceCase.group);
     construction.append("g").attr("class", this.classes.holeFill.group);
     construction.append("g").attr("class", this.classes.wellCase.group);
     construction.append("g").attr("class", this.classes.wellScreen.group);
+    construction.append("g").attr("class", this.classes.reduction.group);
     construction.append("g").attr("class", this.classes.conflict.group);
+    construction.append("g").attr("class", this.classes.constructionLabels.group);
     construction.append("g").attr("class", this.classes.highlights.constructionGroup);
     Object.values(this.textures).forEach((texture) => svg.call(texture));
     return { svg, height, width, margins, clipId, clipRectId };
@@ -1776,6 +1979,36 @@ var WellRenderer = class {
       textures: this.renderConfig.textures
     });
   }
+  /**
+   * Multiplies the current zoom scale by `factor` (e.g. `1.25` to zoom in,
+   * `1 / 1.25` to zoom out) on every panel. No-op if both `renderConfig.zoom`
+   * and `renderConfig.pan` are disabled (no zoom behavior was attached).
+   */
+  zoomBy(factor) {
+    for (const state of this.instanceStates) {
+      if (!state.zoomNode) continue;
+      asSvgElement(state.svg).transition().call(state.zoomNode.scaleBy, factor);
+    }
+  }
+  /**
+   * Resets zoom/pan on every panel back to `renderConfig.zoomLevel`
+   * (defaults to `1`, i.e. the initial fit-to-container view).
+   */
+  resetZoom() {
+    const target = d37.zoomIdentity.scale(this.renderConfig.zoomLevel ?? 1);
+    for (const state of this.instanceStates) {
+      if (!state.zoomNode) continue;
+      asSvgElement(state.svg).transition().call(state.zoomNode.transform, target);
+    }
+  }
+  /**
+   * Current zoom scale factor of the first panel (`1` = initial/fit).
+   * Returns `1` if zoom/pan is disabled or `prepareSvg()` hasn't run yet.
+   */
+  getZoomScale() {
+    const node = this.instanceStates[0]?.svg.node();
+    return node ? d37.zoomTransform(node).k : 1;
+  }
   /**
    * Initialises the SVG DOM structure and preloads FGDC textures.
    * Must be called once before the first `draw()`.
@@ -1790,14 +2023,23 @@ var WellRenderer = class {
    * Renders the well profile into all configured SVG panels.
    * @param profile - The well data to render.
    * @param options.units - Override the instance-level measurement units for this render.
+   * @param options.locale - Override the instance-level locale for this render.
    * @param options.highlights - Highlight overlays to display on top of the profile.
    */
   draw(profile, options = {}) {
     if (isWellEmpty(profile)) return;
+    if (profile.version !== 2) {
+      console.warn(
+        `[WellRenderer] Received a .well file with version ${profile.version ?? "unknown"}. Only v2 is supported. Normalize with deserializeWell() from @welldot/core before rendering.`
+      );
+    }
     this.units = { ...this.units, ...options.units };
+    if (options.locale) {
+      this.locale = options.locale;
+    }
     const highlights = options.highlights ?? {};
     const maxValues = getProfileLastItemsDepths(profile);
-    const maxYValues = d36.max(maxValues) || 0;
+    const maxYValues = d37.max(maxValues) || 0;
     if (this.instanceStates.length === 1) {
       this.drawLogToInstance(
         this.instanceStates[0],
@@ -1809,7 +2051,7 @@ var WellRenderer = class {
       return;
     }
     const totalHeight = this.instanceStates.reduce((s, st) => s + st.height, 0) || 1;
-    const yScaleGlobal = d36.scaleLinear().domain([0, maxYValues]).range([0, totalHeight]);
+    const yScaleGlobal = d37.scaleLinear().domain([0, maxYValues]).range([0, totalHeight]);
     let currentDepth = 0;
     for (const state of this.instanceStates) {
       const maxSvgDepth = yScaleGlobal.invert(
@@ -1841,6 +2083,7 @@ var WellRenderer = class {
     const holeFillGroup = svg.select(`.${this.classes.holeFill.group}`);
     const wellCaseGroup = svg.select(`.${this.classes.wellCase.group}`);
     const wellScreenGroup = svg.select(`.${this.classes.wellScreen.group}`);
+    const reductionGroup = svg.select(`.${this.classes.reduction.group}`);
     const conflictGroup = svg.select(`.${this.classes.conflict.group}`);
     const constructionLabelsGroup = svg.select(
       `.${this.classes.constructionLabels.group}`
@@ -1861,12 +2104,14 @@ var WellRenderer = class {
     const POCO_WIDTH = svgWidth * pocoWidthRatio;
     const POCO_CENTER = svgWidth * pocoCenterRatio;
     const { duration, ease } = this.renderConfig.animation;
-    const transition = d36.transition().duration(duration).ease(ease);
+    const transition = d37.transition().duration(duration).ease(ease);
     const tooltips = populateTooltips(
       svg,
       this.classes,
       this.units,
-      this.renderConfig.tooltips
+      this.renderConfig.tooltips,
+      this.renderConfig.tooltipLabels,
+      this.locale
     );
     const { xLeft: geoXLeft, xRightInset: geoXRightInset } = this.renderConfig.geologic;
     const geoXRight = svgWidth - geoXRightInset;
@@ -1887,11 +2132,14 @@ var WellRenderer = class {
       fractures: profile.fractures
     };
     const contentHeight = svgHeight - state.margins.top - state.margins.bottom;
-    const yScaleLocal = d36.scaleLinear().domain([depthFrom, depthTo]).range([0, contentHeight]);
+    const yScaleLocal = d37.scaleLinear().domain([depthFrom, depthTo]).range([0, contentHeight]);
     const depthFactor = this.units.length === "ft" ? 3.28084 : 1;
-    const yScaleAxis = d36.scaleLinear().domain([depthFrom * depthFactor, depthTo * depthFactor]).range([0, contentHeight]);
-    const yAxis = d36.axisLeft(yScaleAxis).tickFormat(
-      (d) => `${d}${getLengthUnit(this.units.length)}`
+    const yScaleAxis = d37.scaleLinear().domain([depthFrom * depthFactor, depthTo * depthFactor]).range([0, contentHeight]);
+    const yAxis = d37.axisLeft(yScaleAxis).tickFormat(
+      (d) => `${formatNumber3(Number(d), {
+        maximumFractionDigits: this.units.length === "ft" ? 1 : 2,
+        locale: this.locale
+      })}${getLengthUnit(this.units.length)}`
     );
     const gY = svg.select(`.${this.classes.yAxis}`).call(yAxis);
     gY.select(".domain").attr("stroke", this.theme.labels.color).attr("fill", "none");
@@ -1928,6 +2176,7 @@ var WellRenderer = class {
       holeFillGroup,
       wellCaseGroup,
       wellScreenGroup,
+      reductionGroup,
       conflictGroup,
       highlightsGeologicGroup,
       highlightsConstructionGroup,
@@ -1953,6 +2202,7 @@ var WellRenderer = class {
       classes: this.classes,
       textures: this.textures,
       units: this.units,
+      locale: this.locale,
       constructionData,
       groups
     };
@@ -1983,12 +2233,24 @@ var WellRenderer = class {
       surfaceCaseGroup.selectAll(`g.${this.classes.surfaceCase.rect}`).each((d, i, nodes) => {
         if (!d) return;
         const sc = d;
-        const g = d36.select(nodes[i]);
+        const g = d37.select(nodes[i]);
         const y = transform.applyY(spanY(sc));
         const h = transform.k * spanH(sc);
         g.select(".surface-case-fill").attr("y", y).attr("height", h);
         g.selectAll(".surface-case-side").attr("y1", y).attr("y2", y + h);
       });
+      const maxXValsReduction = getProfileDiamValues4(constructionData);
+      const xScaleReduction = d37.scaleLinear().domain([0, d37.max(maxXValsReduction) || 0]).range([0, POCO_WIDTH]);
+      reductionGroup.selectAll(`polygon.${this.classes.reduction.item}`).attr("points", (d) => {
+        const r = d;
+        const yTop = transform.applyY(spanY(r));
+        const yBot = yTop + transform.k * spanH(r);
+        const xTopLeft = (POCO_CENTER - xScaleReduction(r.diam_from)) / 2;
+        const xTopRight = (POCO_CENTER + xScaleReduction(r.diam_from)) / 2;
+        const xBotLeft = (POCO_CENTER - xScaleReduction(r.diam_to)) / 2;
+        const xBotRight = (POCO_CENTER + xScaleReduction(r.diam_to)) / 2;
+        return `${xTopLeft},${yTop} ${xTopRight},${yTop} ${xBotRight},${yBot} ${xBotLeft},${yBot}`;
+      });
       fracturesGroup.selectAll(`g.${this.classes.fractures.item}`).attr("transform", (d) => {
         if (!d) return null;
         const f = d;
@@ -2010,6 +2272,7 @@ var WellRenderer = class {
         well_screen: constructionData.well_screen.filter(inDepth)
       });
       drawHighlights(zoomedCtx, highlights);
+      this.onZoom?.(transform.k);
     };
     const drawProfile = () => {
       drawLithology(ctx, profile.lithology?.filter(inDepth) ?? []);
@@ -2049,17 +2312,23 @@ var WellRenderer = class {
     }
     const { zoom: zoomEnabled, pan: panEnabled } = this.renderConfig;
     if (zoomEnabled || panEnabled) {
-      const zoomNode = d36.zoom();
+      const zoomNode = d37.zoom();
       if (zoomEnabled || panEnabled) zoomNode.on("zoom", zooming);
-      if (!zoomEnabled) zoomNode.scaleExtent([1, 1]);
+      zoomNode.scaleExtent(
+        zoomEnabled ? [
+          this.renderConfig.minZoomScale ?? 0,
+          this.renderConfig.maxZoomScale ?? Infinity
+        ] : [1, 1]
+      );
       if (!panEnabled)
         zoomNode.filter((e) => e.type === "wheel" || e.type === "dblclick");
       asSvgElement(svg).call(zoomNode);
+      state.zoomNode = zoomNode;
       const initialZoom = this.renderConfig.zoomLevel ?? 1;
       if (initialZoom !== 1) {
         asSvgElement(svg).call(
           zoomNode.transform,
-          d36.zoomIdentity.scale(initialZoom)
+          d37.zoomIdentity.scale(initialZoom)
         );
       }
     }
@@ -2068,13 +2337,16 @@ var WellRenderer = class {
 export {
   DEFAULT_WELL_THEME,
   INTERACTIVE_RENDER_CONFIG,
+  RENDER_LABELS,
   STATIC_RENDER_CONFIG,
   WellRenderer,
+  applyRenderLocale,
   drawWellLegend,
   formatDiameter,
   formatLength,
   getDiameterUnit,
   getLengthUnit,
-  importFgdcTextures
+  importFgdcTextures,
+  resolveRenderLabel
 };
 //# sourceMappingURL=index.js.map