@welldot/render 0.3.0 → 0.4.1

package/dist/index.js

@@ -1,7 +1,12 @@
+import {
+  importFgdcTextures
+} from "./chunk-ODRL222Y.js";
+
 // src/configs/render.configs.ts
 import { easeCubic } from "d3";
 
 // src/utils/format.utils.ts
+import { resolveLanguageText } from "@welldot/core";
 import { formatNumber } from "@welldot/utils";
 var MM_TO_INCHES = 0.0393701;
 var M_TO_FT = 3.28084;
@@ -19,8 +24,7 @@ function getDiameterUnit(units, locale) {
   return locale === "en" ? "in." : '"';
 }
 function resolveRenderLabel(value, locale) {
-  if (typeof value === "string") return value;
-  return locale === "en" && value.en ? value.en : value.pt;
+  return resolveLanguageText(value, locale, "pt");
 }
 
 // src/configs/render.configs.ts
@@ -46,6 +50,7 @@ var RENDER_LABELS = {
       wellScreen: { pt: "Filtro", en: "Screen" },
       reduction: { pt: "Redu\xE7\xE3o", en: "Reduction" },
       centralizer: { pt: "Centralizador", en: "Centralizer" },
+      pump: { pt: "Bomba e edutor", en: "Pump and riser" },
       cementPad: { pt: "Laje de cimento", en: "Cement pad" },
       conflict: { pt: "Conflito", en: "Conflict" }
     }
@@ -69,7 +74,9 @@ var RENDER_LABELS = {
     wellCase: { title: { pt: "REVESTIMENTO", en: "CASING" } },
     wellScreen: {
       title: { pt: "FILTROS", en: "SCREENS" },
-      slot: { pt: "Ranhura:", en: "Slot:" }
+      slot: { pt: "Ranhura:", en: "Slot:" },
+      material: { pt: "Material:", en: "Material:" },
+      slotType: { pt: "Tipo:", en: "Type:" }
     },
     reduction: { title: { pt: "REDU\xC7\xC3O", en: "REDUCTION" } },
     centralizer: {
@@ -77,6 +84,28 @@ var RENDER_LABELS = {
       depth: { pt: "Profundidade:", en: "Depth:" },
       spacing: { pt: "Espa\xE7amento:", en: "Spacing:" }
     },
+    pump: {
+      title: { pt: "BOMBA", en: "PUMP" },
+      intakeDepth: { pt: "Profundidade do crivo:", en: "Intake depth:" },
+      model: { pt: "Modelo:", en: "Model:" },
+      power: { pt: "Pot\xEAncia:", en: "Power:" },
+      riser: { pt: "Edutor:", en: "Riser:" },
+      type_submersible: { pt: "Bomba submersa", en: "Submersible pump" },
+      type_vertical_turbine: {
+        pt: "Bomba de eixo vertical",
+        en: "Vertical turbine pump"
+      },
+      type_jet: { pt: "Bomba injetora", en: "Jet pump" },
+      type_progressive_cavity: {
+        pt: "Bomba helicoidal",
+        en: "Progressive cavity pump"
+      },
+      type_hand_pump: { pt: "Bomba manual", en: "Hand pump" },
+      type_compressor_airlift: {
+        pt: "Compressor (air-lift)",
+        en: "Compressor (air-lift)"
+      }
+    },
     conflict: { title: { pt: "CONFLITO", en: "CONFLICT" } },
     fracture: {
       title: { pt: "FRATURA", en: "FRACTURE" },
@@ -102,6 +131,19 @@ var RENDER_LABELS = {
     fractureWater: { pt: "fratura aberta", en: "open fracture" },
     cave: { pt: "caverna", en: "cave" },
     caveWater: { pt: "caverna \xFAmida", en: "wet cave" }
+  },
+  columnHeaders: {
+    depth: { pt: "PROF.", en: "DEPTH" },
+    lithology: { pt: "LIT.", en: "LITH." },
+    construction: { pt: "CONSTRU\xC7\xC3O", en: "CONSTRUCTION" },
+    description: { pt: "DESCRI\xC7\xC3O GEOL\xD3GICA", en: "GEOLOGICAL DESCRIPTION" }
+  },
+  continuation: { prefix: { pt: "continua\xE7\xE3o", en: "continued" } },
+  overlap: {
+    label: {
+      pt: "{range} repetido da p\xE1g. anterior",
+      en: "{range} repeated from previous page"
+    }
   }
 };
 function resolveGroup(group, locale) {
@@ -123,6 +165,7 @@ function resolveTooltipLabels(locale) {
     wellScreen: resolveGroup(t.wellScreen, locale),
     reduction: resolveGroup(t.reduction, locale),
     centralizer: resolveGroup(t.centralizer, locale),
+    pump: resolveGroup(t.pump, locale),
     conflict: resolveGroup(t.conflict, locale),
     fracture: resolveGroup(t.fracture, locale),
     cementPad: resolveGroup(t.cementPad, locale),
@@ -144,7 +187,19 @@ function applyRenderLocale(config, locale) {
     tooltipLabels: resolveTooltipLabels(locale),
     labels: {
       ...config.labels,
-      typeLabels: resolveGroup(RENDER_LABELS.typeLabels, locale)
+      typeLabels: resolveGroup(RENDER_LABELS.typeLabels, locale),
+      continuation: {
+        ...config.labels.continuation,
+        prefix: resolveRenderLabel(RENDER_LABELS.continuation.prefix, locale)
+      }
+    },
+    columnHeaders: {
+      ...config.columnHeaders,
+      labels: resolveGroup(RENDER_LABELS.columnHeaders, locale)
+    },
+    overlap: {
+      ...config.overlap,
+      label: resolveRenderLabel(RENDER_LABELS.overlap.label, locale)
     }
   };
 }
@@ -170,7 +225,7 @@ var DEFAULT_WELL_THEME = {
       crackStrokeWidth: 0.7
     }
   },
-  cementPad: { stroke: "#303030", strokeWidth: 2 },
+  cementPad: { stroke: "#303030", strokeWidth: 1 },
   boreHole: {
     fill: "#ffffff",
     stroke: "#191919",
@@ -179,11 +234,24 @@ var DEFAULT_WELL_THEME = {
     strokeWidth: 1.2
   },
   surfaceCase: { stroke: "#000000", strokeWidth: 4 },
-  holeFill: { stroke: "#303030", strokeWidth: 2 },
+  holeFill: { stroke: "#303030", strokeWidth: 1.2 },
   wellCase: { fill: "#ffffff", stroke: "#303030", strokeWidth: 2 },
-  wellScreen: { stroke: "#303030", strokeWidth: 2 },
+  wellScreen: {
+    stroke: "#303030",
+    strokeWidth: 2,
+    endStrokeWidth: 0.75,
+    endDasharray: "3, 2"
+  },
   reduction: { fill: "#ffffff", stroke: "#303030", strokeWidth: 2 },
   centralizer: { fill: "none", stroke: "#303030", strokeWidth: 1.4 },
+  pump: {
+    fill: "#5b6b7a",
+    stroke: "#202020",
+    strokeWidth: 1.2,
+    riserFill: "#a3adb7",
+    riserStroke: "#2f3a44",
+    riserStrokeWidth: 1
+  },
   conflict: { stroke: "#e52117", strokeWidth: 4 },
   unitLabels: {
     geologicFill: "#f0f0f0",
@@ -219,6 +287,39 @@ var DEFAULT_WELL_THEME = {
     headerFontWeight: 600,
     bodyFontWeight: 400
   },
+  overview: {
+    stroke: "#303030",
+    strokeWidth: 0.5,
+    emptyFill: "#d9d9d9",
+    windowStroke: "#c0392b",
+    windowStrokeWidth: 1.2
+  },
+  columnHeaders: {
+    fontSize: 6.5,
+    color: "#303030",
+    fontFamily: "sans-serif",
+    fontWeight: 600,
+    ruleStroke: "#101010",
+    ruleStrokeWidth: 1
+  },
+  markers: {
+    fill: "#ffffff",
+    stroke: "#101010",
+    strokeWidth: 0.6,
+    color: "#101010",
+    fontSize: 6,
+    fontFamily: "sans-serif",
+    fontWeight: 600
+  },
+  overlap: {
+    stroke: "#9a9a9a",
+    strokeWidth: 0.6,
+    size: 6,
+    ruleStroke: "#9a9a9a",
+    labelColor: "#555555",
+    fontSize: 6.5,
+    fontFamily: "monospace"
+  },
   legend: {
     borderStrokeWidth: 0.8,
     fractureStrokeWidth: 1.5,
@@ -276,9 +377,17 @@ var STATIC_RENDER_CONFIG = {
     }
   },
   construction: {
-    cementPad: { widthMultiplier: 0.9, thicknessMultiplier: 1.3 },
+    cementPad: { widthRatio: 1.4, height: 6 },
+    casingShoe: { active: true, size: 4 },
+    screenEnds: { active: true },
     surfaceCase: { diameterPaddingRatio: 0.1 },
-    centralizer: { markerHalfHeight: 4 }
+    centralizer: { markerHalfHeight: 4 },
+    pump: {
+      active: true,
+      bodyHeight: 22,
+      bodyWidthRatio: 0.6,
+      riserWidthRatio: 0.3
+    }
   },
   tooltipLabels: resolveTooltipLabels("pt"),
   labels: {
@@ -291,7 +400,11 @@ var STATIC_RENDER_CONFIG = {
     stackingLineHeight: 10,
     stackingGap: 0,
     fractureLabelLeaderGap: 5,
-    lithology: true
+    lithology: true,
+    continuation: {
+      active: false,
+      prefix: resolveRenderLabel(RENDER_LABELS.continuation.prefix, "pt")
+    }
   },
   unitLabels: {
     active: true,
@@ -350,10 +463,21 @@ var STATIC_RENDER_CONFIG = {
       wellScreen: "Filtro",
       reduction: "Redu\xE7\xE3o",
       centralizer: "Centralizador",
+      pump: "Bomba e edutor",
       cementPad: "Laje de cimento",
       conflict: "Conflito"
     }
   },
+  overview: { active: false, x: 4, width: 8, height: 200 },
+  columnHeaders: {
+    active: false,
+    height: 14,
+    labels: resolveGroup(RENDER_LABELS.columnHeaders, "pt")
+  },
+  markers: { lithology: false, fractures: false, radius: 4.5 },
+  overlap: {
+    label: resolveRenderLabel(RENDER_LABELS.overlap.label, "pt")
+  },
   highlights: DEFAULT_HIGHLIGHT_CONFIG
 };
 var INTERACTIVE_RENDER_CONFIG = {
@@ -389,9 +513,17 @@ var INTERACTIVE_RENDER_CONFIG = {
     }
   },
   construction: {
-    cementPad: { widthMultiplier: 0.9, thicknessMultiplier: 1.3 },
+    cementPad: { widthRatio: 1.4, height: 6 },
+    casingShoe: { active: true, size: 4 },
+    screenEnds: { active: true },
     surfaceCase: { diameterPaddingRatio: 0.1 },
-    centralizer: { markerHalfHeight: 4 }
+    centralizer: { markerHalfHeight: 4 },
+    pump: {
+      active: true,
+      bodyHeight: 22,
+      bodyWidthRatio: 0.6,
+      riserWidthRatio: 0.3
+    }
   },
   tooltipLabels: resolveTooltipLabels("pt"),
   labels: {
@@ -402,7 +534,11 @@ var INTERACTIVE_RENDER_CONFIG = {
     descriptionXOffset: 78,
     descriptionMaxWidth: 226,
     stackingLineHeight: 11,
-    stackingGap: 0
+    stackingGap: 0,
+    continuation: {
+      active: false,
+      prefix: resolveRenderLabel(RENDER_LABELS.continuation.prefix, "pt")
+    }
   },
   unitLabels: {
     active: false,
@@ -460,19 +596,24 @@ var INTERACTIVE_RENDER_CONFIG = {
       wellScreen: "Filtro",
       reduction: "Redu\xE7\xE3o",
       centralizer: "Centralizador",
+      pump: "Bomba e edutor",
       cementPad: "Laje de cimento",
       conflict: "Conflito"
     }
   },
+  overview: { active: false, x: 4, width: 8, height: 200 },
+  columnHeaders: {
+    active: false,
+    height: 14,
+    labels: resolveGroup(RENDER_LABELS.columnHeaders, "pt")
+  },
+  markers: { lithology: false, fractures: false, radius: 4.5 },
+  overlap: {
+    label: resolveRenderLabel(RENDER_LABELS.overlap.label, "pt")
+  },
   highlights: DEFAULT_HIGHLIGHT_CONFIG
 };
 
-// src/utils/fgdcTextures.ts
-async function importFgdcTextures() {
-  const fgdcTextures = await import("./fgdcTextures-P5DTFNPT.js");
-  return fgdcTextures.default;
-}
-
 // src/Renderer.ts
 import * as d3module2 from "d3";
 import d3tip2 from "d3-tip";
@@ -480,6 +621,8 @@ import { defu as defu2 } from "defu";
 
 // src/configs/render.textures.ts
 import textures from "textures";
+var dot = (x, y, r) => `M${x - r},${y}a${r},${r} 0 1,0 ${2 * r},0a${r},${r} 0 1,0 ${-2 * r},0Z`;
+var concreteAggregate = (s) => `M${s * 0.08},${s * 0.42}l${s * 0.3},0l${-s * 0.12},${-s * 0.26}ZM${s * 0.55},${s * 0.92}l${s * 0.26},${-s * 0.06}l${-s * 0.16},${-s * 0.2}Z${dot(s * 0.72, s * 0.24, s * 0.06)}${dot(s * 0.22, s * 0.78, s * 0.05)}`;
 function createWellTextures(cfg) {
   const pad = {
     background: "#ffffff",
@@ -527,7 +670,9 @@ function createWellTextures(cfg) {
     ...cfg?.surface_case
   };
   return {
-    pad: textures.lines().heavier(10).thinner(1.5).stroke(pad.stroke).background(pad.background),
+    // Concrete: aggregate (small triangles and dots) on a light ground, so it
+    // reads apart from the seal's diagonals and the gravel pack's circles.
+    pad: textures.paths().d(concreteAggregate).size(6).strokeWidth(0.4).stroke(pad.stroke).fill(pad.stroke).background(pad.background),
     conflict: textures.lines().heavier().stroke(conflict.stroke),
     cave_dry: textures.lines().size(cave_dry.size).orientation("6/8").heavier(0.3).thinner(0.8).background(cave_dry.background).stroke(cave_dry.stroke),
     cave_wet: textures.lines().size(cave_wet.size).orientation("6/8").heavier(0.3).thinner(0.8).background(cave_wet.background).stroke(cave_wet.stroke),
@@ -540,11 +685,12 @@ function createWellTextures(cfg) {
 
 // src/Renderer.ts
 import {
-  isWellEmpty
+  isWellEmpty,
+  parseFormatVersion
 } from "@welldot/core";
 import {
-  formatNumber as formatNumber3,
-  getProfileDiamValues as getProfileDiamValues5,
+  formatNumber as formatNumber4,
+  getCurrentPump as getCurrentPump2,
   getProfileLastItemsDepths
 } from "@welldot/utils";
 
@@ -608,6 +754,10 @@ var DEFAULT_COMPONENTS_CLASS_NAMES = {
     group: "centralizer",
     item: "centralizer-marker"
   },
+  pump: {
+    group: "pump",
+    item: "pump-item"
+  },
   reduction: {
     group: "reduction",
     item: "reduction-poly"
@@ -639,6 +789,26 @@ var DEFAULT_COMPONENTS_CLASS_NAMES = {
     caveFill: "cave-fill",
     constructionRect: "construction-rect"
   },
+  overview: {
+    group: "wp-overview",
+    item: "wp-overview-item",
+    window: "wp-overview-window"
+  },
+  columnHeaders: {
+    group: "wp-column-headers",
+    text: "wp-column-header",
+    rule: "wp-column-headers-rule"
+  },
+  markers: {
+    group: "wp-markers",
+    lithology: "wp-marker-lithology",
+    fracture: "wp-marker-fracture"
+  },
+  overlap: {
+    group: "wp-overlap",
+    band: "wp-overlap-band",
+    label: "wp-overlap-label"
+  },
   highlights: {
     geologicGroup: "wp-highlights-geologic",
     constructionGroup: "wp-highlights-construction",
@@ -653,6 +823,156 @@ var DEFAULT_COMPONENTS_CLASS_NAMES = {
 // src/utils/render.utils.ts
 import textures2 from "textures";
 
+// src/utils/construction.geometry.ts
+var JOINT_EPS = 1e-3;
+function diameterAt(items, depth) {
+  return items.find((i) => depth >= i.from && depth <= i.to)?.diameter;
+}
+function getIntervalEnds(item, string, depthFrom, depthTo) {
+  return {
+    cutTop: item.from < depthFrom - JOINT_EPS,
+    cutBottom: item.to > depthTo + JOINT_EPS,
+    joinedTop: string.some(
+      (o) => o !== item && Math.abs(o.to - item.from) < JOINT_EPS
+    ),
+    joinedBottom: string.some(
+      (o) => o !== item && Math.abs(o.from - item.to) < JOINT_EPS
+    )
+  };
+}
+function pipeWallsPath(xLeft, xRight, yTop, yBottom) {
+  return `M${xLeft},${yTop}V${yBottom}M${xRight},${yTop}V${yBottom}`;
+}
+function shoePath(xLeft, xRight, y, size) {
+  return `M${xLeft},${y - size}L${xLeft},${y}L${xLeft - size},${y}ZM${xRight},${y - size}L${xRight},${y}L${xRight + size},${y}Z`;
+}
+function screenEndPath(xLeft, xRight, y) {
+  return `M${xLeft},${y}H${xRight}`;
+}
+var clampDepth = (s, depth) => Math.min(Math.max(depth, s.depthFrom), s.depthTo);
+var inPanel = (s, depth) => depth >= s.depthFrom - JOINT_EPS && depth <= s.depthTo + JOINT_EPS;
+var shoulders = (s, a, b, y) => `M${s.left(a)},${y}H${s.left(b)}M${s.right(a)},${y}H${s.right(b)}`;
+function boreHoleOutlinePath(item, holes, s) {
+  const yTop = s.y(clampDepth(s, item.from));
+  const yBottom = s.y(clampDepth(s, item.to));
+  let d = pipeWallsPath(
+    s.left(item.diameter),
+    s.right(item.diameter),
+    yTop,
+    yBottom
+  );
+  if (item.from > JOINT_EPS && inPanel(s, item.from)) {
+    const above = holes.find(
+      (o) => o !== item && o.from < item.from && o.to >= item.from - JOINT_EPS
+    );
+    if (above && above.diameter < item.diameter)
+      d += shoulders(s, above.diameter, item.diameter, yTop);
+  }
+  if (inPanel(s, item.to)) {
+    const below = holes.find(
+      (o) => o !== item && o.from <= item.to + JOINT_EPS && o.to > item.to
+    );
+    if (!below) {
+      d += `M${s.left(item.diameter)},${yBottom}H${s.right(item.diameter)}`;
+    } else if (below.diameter < item.diameter) {
+      d += shoulders(s, item.diameter, below.diameter, yBottom);
+    }
+  }
+  return d;
+}
+function holeFillOutlinePath(item, pipes, s) {
+  const yTop = s.y(clampDepth(s, item.from));
+  const yBottom = s.y(clampDepth(s, item.to));
+  const xL = s.left(item.diameter);
+  const xR = s.right(item.diameter);
+  let d = pipeWallsPath(xL, xR, yTop, yBottom);
+  const interfaces = [item.from, item.to].filter(
+    (depth) => depth > JOINT_EPS && inPanel(s, depth)
+  );
+  for (const depth of interfaces) {
+    const y = s.y(depth);
+    const pipe = diameterAt(pipes, depth);
+    if (pipe !== void 0 && pipe < item.diameter) {
+      d += `M${xL},${y}H${s.left(pipe)}M${s.right(pipe)},${y}H${xR}`;
+    } else {
+      d += `M${xL},${y}H${xR}`;
+    }
+  }
+  return d;
+}
+function pipeSlices(pipes, from, to) {
+  const cuts = [.../* @__PURE__ */ new Set([from, to, ...pipes.flatMap((p) => [p.from, p.to])])].filter((d) => d >= from && d <= to).sort((a, b) => a - b);
+  const slices = [];
+  for (let i = 1; i < cuts.length; i++) {
+    const a = cuts[i - 1];
+    const b = cuts[i];
+    const mid = (a + b) / 2;
+    const widest = Math.max(
+      0,
+      ...pipes.filter((p) => p.from <= mid && p.to >= mid).map((p) => p.diameter)
+    );
+    if (widest === 0) continue;
+    const last = slices[slices.length - 1];
+    if (last && last.to === a && last.diameter === widest) last.to = b;
+    else slices.push({ from: a, to: b, diameter: widest });
+  }
+  return slices;
+}
+function annulusFillPath(item, pipes, s) {
+  const from = clampDepth(s, item.from);
+  const to = clampDepth(s, item.to);
+  const box = (dia, a, b) => `M${s.left(dia)},${s.y(a)}H${s.right(dia)}V${s.y(b)}H${s.left(dia)}Z`;
+  const inner = pipes.filter((p) => p.diameter < item.diameter);
+  return box(item.diameter, from, to) + pipeSlices(inner, from, to).map((p) => box(p.diameter, p.from, p.to)).join("");
+}
+function getPadDiameters(data, surfaceCasePaddingRatio) {
+  const surfaceCase = diameterAt(data.surface_case, 0);
+  const paddedSurfaceCase = surfaceCase === void 0 ? void 0 : surfaceCase * (1 + surfaceCasePaddingRatio);
+  const casing = diameterAt([...data.well_case, ...data.well_screen], 0);
+  const hole = diameterAt(data.bore_hole, 0);
+  const opening = casing ?? paddedSurfaceCase ?? hole ?? 0;
+  const outer = Math.max(
+    opening,
+    paddedSurfaceCase ?? 0,
+    hole ?? 0,
+    diameterAt(data.hole_fill, 0) ?? 0
+  );
+  return { opening, outer };
+}
+function getCementPadGeometry(pocoWidth, pocoCenter, surfaceY, config, openingWidth = 0, outerWidth = openingWidth) {
+  const h = config.height;
+  const opening = Math.max(0, openingWidth);
+  const width = Math.max(
+    pocoWidth * config.widthRatio,
+    opening + 3 * h,
+    outerWidth + 2 * h
+  );
+  const xLeft = (pocoCenter - width) / 2;
+  const xRight = xLeft + width;
+  const oLeft = (pocoCenter - opening) / 2;
+  const oRight = oLeft + opening;
+  const yTop = surfaceY - h;
+  const a = h * 0.3;
+  const breakLine = (x, y0, y1, dir) => `L${x + dir * a},${y0 + (y1 - y0) * 0.4}L${x - dir * a},${y0 + (y1 - y0) * 0.6}L${x},${y1}`;
+  const bbox = { x: xLeft, y: yTop, width, height: h };
+  if (opening === 0) {
+    return {
+      bbox,
+      slabs: [
+        `M${xLeft},${yTop}H${xRight}${breakLine(xRight, yTop, surfaceY, 1)}H${xLeft}${breakLine(xLeft, surfaceY, yTop, -1)}Z`,
+        ""
+      ]
+    };
+  }
+  return {
+    bbox,
+    slabs: [
+      `M${oLeft},${yTop}H${xLeft}${breakLine(xLeft, yTop, surfaceY, -1)}H${oLeft}Z`,
+      `M${oRight},${yTop}H${xRight}${breakLine(xRight, yTop, surfaceY, 1)}H${oRight}Z`
+    ]
+  };
+}
+
 // src/utils/d3.utils.ts
 function mergeEnter(enter, update) {
   return enter.merge(update);
@@ -723,6 +1043,14 @@ var makeSeededPrng = (seed, scramble = 6271) => {
 // src/utils/tooltips.utils.ts
 import d3tip from "d3-tip";
 import sanitizeHtml from "sanitize-html";
+import {
+  CEMENT_PAD_TYPES,
+  CENTRALIZER_TYPES,
+  CONSTRUCTION_MATERIALS,
+  SCREEN_SLOT_TYPES,
+  getVocabLabel,
+  powerFromCanonical
+} from "@welldot/core";
 import { formatNumber as formatNumber2 } from "@welldot/utils";
 var esc = (v) => sanitizeHtml(String(v ?? ""), { allowedTags: [], allowedAttributes: {} });
 var _tooltipCache = /* @__PURE__ */ new WeakMap();
@@ -733,6 +1061,7 @@ var populateTooltips = (svg, customClasses, units, tooltipConfig, labels, locale
   if (cached && cached.signature === signature) {
     return cached.tooltips;
   }
+  const material = (value) => getVocabLabel(CONSTRUCTION_MATERIALS, value, locale);
   const tipsText = {
     geology: (_, d) => `
         <span class="${customClasses.tooltip.title}">${labels.geology.title}</span>
@@ -765,14 +1094,15 @@ var populateTooltips = (svg, customClasses, units, tooltipConfig, labels, locale
               <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>${labels.common.type}</strong> ${esc(d.type)}</span>
+              <span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.type}</strong> ${esc(material(d.type))}</span>
           `,
     wellScreen: (_, d) => `
           <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>${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>${labels.wellScreen.material}</strong> ${esc(material(d.type))}</span>
+              ${d.slot_type ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.wellScreen.slotType}</strong> ${esc(getVocabLabel(SCREEN_SLOT_TYPES, d.slot_type, locale))}</span>` : ""}
               <span class="${customClasses.tooltip.secondaryInfo}">
                 <strong>${labels.wellScreen.slot}</strong> ${esc(formatNumber2(d.screen_slot, { maximumFractionDigits: 2, locale }))} mm
               </span>
@@ -783,17 +1113,29 @@ var populateTooltips = (svg, customClasses, units, tooltipConfig, labels, locale
               <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>
+              <span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.type}</strong> ${esc(material(d.type))}</span>
           `,
     centralizer: (_, d) => `
           <span class="${customClasses.tooltip.title}">${labels.centralizer.title}</span>
           <span class="${customClasses.tooltip.primaryInfo}"><strong>${labels.centralizer.depth}</strong> ${esc(formatLength(d.depth, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>
           ${d.from !== d.to ? `<span class="${customClasses.tooltip.secondaryInfo}">${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.spacing ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.centralizer.spacing}</strong> ${esc(formatLength(d.spacing, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>` : ""}
-          <span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.type}</strong> ${esc(d.type)}</span>
+          <span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.type}</strong> ${esc(getVocabLabel(CENTRALIZER_TYPES, d.type, locale))}</span>
           ${d.diameter ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.diameter}</strong> ${esc(formatDiameter(d.diameter, units.diameter, locale))} ${esc(getDiameterUnit(units.diameter, locale))}</span>` : ""}
           ${d.description ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.description}</strong> ${esc(d.description)}</span>` : ""}
         `,
+    pump: (_, d) => {
+      const typeLabel = labels.pump[`type_${d.type}`] ?? d.type;
+      const model = [d.manufacturer, d.model].filter(Boolean).join(" ");
+      return `
+          <span class="${customClasses.tooltip.title}">${labels.pump.title}</span>
+          <span class="${customClasses.tooltip.primaryInfo}">${esc(typeLabel)}</span>
+          ${d.intake_depth !== void 0 ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.pump.intakeDepth}</strong> ${esc(formatLength(d.intake_depth, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>` : ""}
+          ${model ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.pump.model}</strong> ${esc(model)}</span>` : ""}
+          ${d.rated_power !== void 0 ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.pump.power}</strong> ${esc(formatNumber2(powerFromCanonical(d.rated_power, units.power ?? "kW"), { maximumFractionDigits: 2, locale }))} ${esc(units.power ?? "kW")}</span>` : ""}
+          ${d.riser_diameter !== void 0 ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.pump.riser}</strong> ${esc(formatDiameter(d.riser_diameter, units.diameter, locale))} ${esc(getDiameterUnit(units.diameter, locale))}${d.riser_material ? ` \xB7 ${esc(material(d.riser_material))}` : ""}</span>` : ""}
+        `;
+    },
     conflict: (_, d) => `
           <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>
@@ -804,14 +1146,14 @@ var populateTooltips = (svg, customClasses, units, tooltipConfig, labels, locale
           <span class="${customClasses.tooltip.title}">${title}</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>
+          ${typeof d.dip === "number" ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.fracture.dip}</strong> ${esc(d.dip)}\xB0</span>` : ""}
+          ${typeof d.azimuth === "number" ? `<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}">${labels.cementPad.title}</span>
-          <span class="${customClasses.tooltip.primaryInfo}">${esc(d.type)}</span>
+          <span class="${customClasses.tooltip.primaryInfo}">${esc(getVocabLabel(CEMENT_PAD_TYPES, d.type, locale))}</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}">
@@ -849,6 +1191,17 @@ var populateTooltips = (svg, customClasses, units, tooltipConfig, labels, locale
 };
 
 // src/utils/render.utils.ts
+var fractureDip = (dip) => typeof dip === "number" && Number.isFinite(dip) ? dip : 0;
+function getCementPadRect(pocoWidth, pocoCenter, surfaceY, config, openingWidth = 0, outerWidth = openingWidth) {
+  return getCementPadGeometry(
+    pocoWidth,
+    pocoCenter,
+    surfaceY,
+    config,
+    openingWidth,
+    outerWidth
+  ).bbox;
+}
 var _fgdcTextures = {};
 var _fgdcTexturesPromise = null;
 var preloadFgdcTextures = () => {
@@ -957,14 +1310,23 @@ function drawAnnotationLabels(ctx, data) {
   }
   const items = [];
   if (active.has("lithology")) {
+    const continuation = s.continuation;
     data.lithology.filter((d) => d.from < ctx.depthTo).forEach((d) => {
+      const range = `${formatLength(d.from, ctx.units.length, ctx.locale)}\u2013${formatLength(d.to, ctx.units.length, ctx.locale)}${getLengthUnit(ctx.units.length)}`;
+      const continues = continuation?.active && d.from < ctx.depthFrom;
       items.push({
         sortDepth: d.from,
         baseY: ctx.yScale(Math.max(d.from, ctx.depthFrom)),
         originX: ctx.geoXRight,
         originY: ctx.yScale(Math.max(d.from, ctx.depthFrom)),
-        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 || ""
+        header: continues ? `\u2191 ${continuation.prefix} \xB7 ${range}` : range,
+        description: continues ? "" : d.description || "",
+        ...show.has("units") ? {
+          unit: d.geologic_unit || void 0,
+          aquifer: continues ? void 0 : d.aquifer_unit || void 0
+        } : {},
+        ...show.has("swatch") && !continues ? { swatch: d } : {},
+        ...show.has("rules") ? { rule: continues ? "dashed" : "solid" } : {}
       });
     });
   }
@@ -977,7 +1339,8 @@ function drawAnnotationLabels(ctx, data) {
         originX: ctx.pocoCenterX,
         originY: ctx.yScale(d.depth),
         header: `${formatLength(d.depth, ctx.units.length, ctx.locale)}${getLengthUnit(ctx.units.length)} \xB7 ${typeLabel}`,
-        description: d.description || ""
+        description: d.description || "",
+        ...show.has("rules") ? { rule: "dashed" } : {}
       });
     });
   }
@@ -997,14 +1360,15 @@ function drawAnnotationLabels(ctx, data) {
   }
   items.sort((a, b) => a.sortDepth - b.sortDepth);
   const labelPositions = [];
-  let currY = 0;
+  let currY = ctx.repeatedTo != null ? s.stackingLineHeight + 2 : 0;
   const charsPerLine = Math.max(
     1,
     Math.floor(s.descriptionMaxWidth / (st.fontSize * 0.6))
   );
   items.forEach((item) => {
-    const descLines = Math.ceil((item.description.length || 1) / charsPerLine);
-    const estH = (1 + descLines) * s.stackingLineHeight + 4;
+    const descLines = show.has("units") ? item.description ? wrapText(item.description, charsPerLine).length : 0 : Math.ceil((item.description.length || 1) / charsPerLine);
+    const extraLines = (item.unit ? 1 : 0) + (item.aquifer ? 1 : 0);
+    const estH = (1 + descLines + extraLines) * s.stackingLineHeight + 4;
     const yLabel = Math.max(item.baseY, currY + s.stackingGap);
     currY = yLabel + estH;
     labelPositions.push({ item, yLabel, estH });
@@ -1021,16 +1385,41 @@ function drawAnnotationLabels(ctx, data) {
   if (show.has("description")) {
     const lineH = s.stackingLineHeight;
     const bgFill = st.annotationBg ?? "white";
+    const swatchFill = labelPositions.some((p) => p.item.swatch) ? getLithologyFill(data.lithology, ctx.svg, ctx.theme.lithologyTexture) : null;
     labelPositions.forEach(({ item, yLabel, estH }) => {
       const labelG = ctx.groups.lithologyLabelsGroup.append("g").attr("class", ctx.classes.labels.lithology.label).attr("transform", `translate(${labelX},${yLabel})`);
       labelG.append("rect").attr("x", 0).attr("y", 0).attr("width", s.descriptionMaxWidth).attr("height", estH).attr("rx", st.annotationRadius ?? 2).attr("fill", bgFill).attr("fill-opacity", st.annotationBgOpacity ?? 0.85).attr("stroke", st.annotationBorderColor ?? "none");
-      labelG.append("text").attr("class", "wp-annotation-header").attr("fill", ctx.theme.labels.color).attr("font-weight", st.headerFontWeight ?? 600).attr("font-family", ctx.theme.labels.headerFont).attr("x", 0).attr("y", lineH * 0.85).attr("font-size", st.fontSize).text(item.header);
+      if (item.rule) {
+        labelG.append("line").attr("x1", 0).attr("x2", s.descriptionMaxWidth).attr("y1", 0).attr("y2", 0).attr("stroke", ctx.theme.labels.color).attr(
+          "stroke-width",
+          item.rule === "solid" ? 0.8 : ctx.theme.labels.dividerStrokeWidth
+        ).attr(
+          "stroke-dasharray",
+          item.rule === "solid" ? null : ctx.theme.labels.dividerStrokeDasharray
+        );
+      }
+      let headerX = 0;
+      if (item.swatch && swatchFill) {
+        const size = lineH * 0.75;
+        labelG.append("rect").attr("x", 0).attr("y", lineH * 0.85 - size + 1).attr("width", size).attr("height", size).attr("fill", swatchFill(item.swatch)).attr("stroke", ctx.theme.lithology.stroke).attr("stroke-width", 0.5);
+        headerX = size + 3;
+      }
+      labelG.append("text").attr("class", "wp-annotation-header").attr("fill", ctx.theme.labels.color).attr("font-weight", st.headerFontWeight ?? 600).attr("font-family", ctx.theme.labels.headerFont).attr("x", headerX).attr("y", lineH * 0.85).attr("font-size", st.fontSize).text(item.header);
+      let lineY = lineH * 0.85 + lineH;
+      if (item.unit) {
+        labelG.append("text").attr("class", "wp-annotation-unit").attr("fill", ctx.theme.labels.color).attr("font-weight", st.headerFontWeight ?? 600).attr("font-family", ctx.theme.labels.bodyFont ?? "sans-serif").attr("x", 0).attr("y", lineY).attr("font-size", st.fontSize).text(item.unit);
+        lineY += lineH;
+      }
       if (item.description) {
         const lines = wrapText(item.description, charsPerLine);
-        const bodyEl = labelG.append("text").attr("class", "wp-annotation-body").attr("fill", ctx.theme.labels.bodyColor).attr("font-weight", st.bodyFontWeight ?? 400).attr("font-family", ctx.theme.labels.bodyFont ?? "sans-serif").attr("x", 0).attr("y", lineH * 0.85 + lineH).attr("font-size", st.fontSize);
+        const bodyEl = labelG.append("text").attr("class", "wp-annotation-body").attr("fill", ctx.theme.labels.bodyColor).attr("font-weight", st.bodyFontWeight ?? 400).attr("font-family", ctx.theme.labels.bodyFont ?? "sans-serif").attr("x", 0).attr("y", lineY).attr("font-size", st.fontSize);
         lines.forEach((line, i) => {
           bodyEl.append("tspan").attr("x", 0).attr("dy", i === 0 ? 0 : lineH).text(line);
         });
+        lineY += lines.length * lineH;
+      }
+      if (item.aquifer) {
+        labelG.append("text").attr("class", "wp-annotation-aquifer").attr("fill", ctx.theme.labels.bodyColor).attr("font-style", "italic").attr("font-family", ctx.theme.labels.bodyFont ?? "sans-serif").attr("x", 0).attr("y", lineY).attr("font-size", st.fontSize).text(item.aquifer);
       }
     });
   }
@@ -1051,7 +1440,6 @@ var makePointKey = (type) => (d, i) => {
 
 // src/renderers/caves.renderer.ts
 function drawCaves(ctx, data) {
-  if (!data.length) return;
   const {
     groups: { cavesGroup },
     geoXLeft,
@@ -1061,7 +1449,7 @@ function drawCaves(ctx, data) {
     yScale,
     renderConfig,
     theme,
-    textures: textures3,
+    textures: textures4,
     classes,
     tooltips
   } = ctx;
@@ -1098,7 +1486,7 @@ function drawCaves(ctx, data) {
     const botPath = botCut ? `M ${geoXLeft.toFixed(1)},${yBot.toFixed(1)} L ${geoXRight.toFixed(1)},${yBot.toFixed(1)}` : ptsToSmoothPath(botPts);
     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 caveTexture = cave.water_intake ? textures4.cave_wet : textures4.cave_dry;
     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");
@@ -1110,9 +1498,6 @@ function drawCaves(ctx, data) {
 // src/renderers/centralizers.renderer.ts
 import * as d32 from "d3";
 import { getCentralizerDepths, getProfileDiamValues } from "@welldot/utils";
-function diameterAt(items, depth) {
-  return items.find((i) => depth >= i.from && depth <= i.to)?.diameter;
-}
 function drawCentralizers(ctx, data) {
   const group = ctx.groups.centralizerGroup;
   const cls = ctx.classes.centralizer;
@@ -1149,8 +1534,108 @@ function drawCentralizers(ctx, data) {
   });
 }
 
+// src/utils/layout.utils.ts
+function getProfileTopDepth(profile) {
+  return Math.min(
+    0,
+    ...[
+      ...profile.surface_case ?? [],
+      ...profile.well_case ?? [],
+      ...profile.well_screen ?? []
+    ].map((i) => i.from).filter(Number.isFinite)
+  );
+}
+function resolvePanelWindows(panels, totalDepth, topDepth = 0) {
+  if (panels.length > 0 && panels.every((p) => p.depthRange)) {
+    return panels.map((p) => [p.depthRange[0], p.depthRange[1]]);
+  }
+  if (panels.length === 1) return [[topDepth, totalDepth]];
+  const totalHeight = panels.reduce((s, p) => s + p.height, 0) || 1;
+  const metersPerPx = (totalDepth - topDepth) / totalHeight;
+  let current = topDepth;
+  return panels.map((p) => {
+    const from = current;
+    current = from + p.height * metersPerPx;
+    return [from, current];
+  });
+}
+function getColumnHeaderPositions(geometry) {
+  const { marginLeft, geoXLeft, geoXRight, pocoCenterX, descriptionX } = geometry;
+  return {
+    depth: marginLeft - 2,
+    lithology: marginLeft + (geoXLeft + geoXRight) / 2,
+    construction: marginLeft + pocoCenterX,
+    ...descriptionX != null ? { description: marginLeft + descriptionX } : {}
+  };
+}
+function getLithologyMarkers(lithology, depthFrom, depthTo) {
+  const markers = [];
+  lithology.forEach((layer, i) => {
+    const from = Math.max(layer.from, depthFrom);
+    const to = Math.min(layer.to, depthTo);
+    if (to > from) markers.push({ index: i + 1, from, to });
+  });
+  return markers;
+}
+function getFractureMarkers(fractures, depthFrom, depthTo) {
+  const markers = [];
+  fractures.forEach((f, i) => {
+    if (f.depth >= depthFrom && f.depth < depthTo) {
+      markers.push({ label: `F${i + 1}`, depth: f.depth });
+    }
+  });
+  return markers;
+}
+function getOverviewGeometry(totalDepth, height, depthFrom, depthTo) {
+  const ratio = totalDepth > 0 ? height / totalDepth : 0;
+  const y = (depth) => Math.min(height, Math.max(0, depth * ratio));
+  return {
+    y,
+    window: { y: y(depthFrom), height: Math.max(1, y(depthTo) - y(depthFrom)) }
+  };
+}
+function formatOverlapLabel(template, range) {
+  return template.replace("{range}", range);
+}
+
+// src/renderers/column-headers.renderer.ts
+function hasDescriptionColumn(ctx) {
+  const { active, lithology } = ctx.renderConfig.labels;
+  if (active === false) return false;
+  if (Array.isArray(active) && !active.includes("lithology")) return false;
+  if (lithology === false) return false;
+  return !Array.isArray(lithology) || lithology.includes("description");
+}
+function drawColumnHeaders(ctx) {
+  const group = ctx.groups.columnHeadersGroup;
+  group.selectAll("*").remove();
+  const cfg = ctx.renderConfig.columnHeaders;
+  if (!cfg.active) return;
+  const theme = ctx.theme.columnHeaders;
+  const { margins } = ctx.state;
+  const positions = getColumnHeaderPositions({
+    marginLeft: margins.left,
+    geoXLeft: ctx.geoXLeft,
+    geoXRight: ctx.geoXRight,
+    pocoCenterX: ctx.pocoCenterX,
+    descriptionX: hasDescriptionColumn(ctx) ? ctx.geoXRight + ctx.renderConfig.labels.descriptionXOffset : void 0
+  });
+  const ruleY = margins.top - 2 - ctx.renderConfig.construction.cementPad.height;
+  const textY = ruleY - 4;
+  const addText = (x, text, anchor) => group.append("text").attr("class", ctx.classes.columnHeaders.text).attr("x", x).attr("y", textY).attr("text-anchor", anchor).attr("font-size", theme.fontSize).attr("font-family", theme.fontFamily ?? "sans-serif").attr("font-weight", theme.fontWeight ?? 600).attr("fill", theme.color).text(text);
+  addText(positions.depth, cfg.labels.depth, "end");
+  addText(positions.lithology, cfg.labels.lithology, "middle");
+  addText(positions.construction, cfg.labels.construction, "middle");
+  if (positions.description != null) {
+    addText(positions.description, cfg.labels.description, "start");
+  }
+  const overview = ctx.renderConfig.overview;
+  group.append("line").attr("class", ctx.classes.columnHeaders.rule).attr("x1", overview.active ? overview.x : 0).attr("x2", ctx.svgWidth).attr("y1", ruleY).attr("y2", ruleY).attr("stroke", theme.ruleStroke).attr("stroke-width", theme.ruleStrokeWidth);
+}
+
 // src/renderers/construction-labels.renderer.ts
 import * as d33 from "d3";
+import { CONSTRUCTION_MATERIALS as CONSTRUCTION_MATERIALS2, getVocabLabel as getVocabLabel2 } from "@welldot/core";
 import { getProfileDiamValues as getProfileDiamValues2 } from "@welldot/utils";
 function drawConstructionLabels(ctx, data) {
   if (!ctx.renderConfig.constructionLabels.active) return;
@@ -1159,16 +1644,18 @@ function drawConstructionLabels(ctx, data) {
   const clct = ctx.theme.constructionLabels;
   const fmtD = (mm) => formatDiameter(mm, ctx.units.diameter, ctx.locale);
   const dUnit = getDiameterUnit(ctx.units.diameter, ctx.locale);
+  const material = (value) => getVocabLabel2(CONSTRUCTION_MATERIALS2, value, ctx.locale);
   const maxXValues = getProfileDiamValues2(ctx.constructionData);
   const xScale = d33.scaleLinear().domain([0, d33.max(maxXValues) || 0]).range([0, ctx.POCO_WIDTH]);
   const occupied = [];
-  const placeLabel = (d, text) => {
+  const onRight = clc.side === "right";
+  const continuation = ctx.renderConfig.labels.continuation;
+  const placeLabel = (d, label) => {
     const clampedFrom = Math.max(d.from, ctx.depthFrom);
     const clampedTo = Math.min(d.to, ctx.depthTo);
     if (clampedFrom >= clampedTo) return;
+    const text = continuation?.active && d.from < ctx.depthFrom ? `\u2191 ${label}` : label;
     const midY = ctx.yScale((clampedFrom + clampedTo) / 2);
-    const leftEdgeX = (ctx.POCO_CENTER - xScale(d.diameter)) / 2;
-    const labelRightX = leftEdgeX - clc.xOffset;
     const charW = clct.fontSize * 0.52;
     const lineH = clct.fontSize * 1.35;
     const vertPad = 6;
@@ -1185,16 +1672,17 @@ function drawConstructionLabels(ctx, data) {
       lines = [text];
       boxW = text.length * charW + 8;
     }
+    const labelRightX = onRight ? (ctx.POCO_CENTER + ctx.POCO_WIDTH) / 2 + clc.xOffset + boxW : (ctx.POCO_CENTER - xScale(d.diameter)) / 2 - clc.xOffset;
     const labelH = lines.length * lineH + vertPad;
-    let labelY = midY - labelH / 2;
+    let labelY = onRight ? ctx.yScale(clampedFrom) + 1 : midY - labelH / 2;
     for (const pos of occupied) {
       if (labelY < pos.bot && labelY + labelH > pos.top) labelY = pos.bot + 2;
     }
     occupied.push({ top: labelY, bot: labelY + labelH });
     ctx.groups.constructionLabelsGroup.append("rect").attr("x", labelRightX - boxW).attr("y", labelY).attr("width", boxW).attr("height", labelH).attr("rx", clc.labelRadius).attr("fill", clct.labelFill ?? "white").attr("stroke", clct.labelColor ?? "#303030").attr("stroke-width", 0.5);
-    const textEl = ctx.groups.constructionLabelsGroup.append("text").attr("x", labelRightX - 4).attr("y", labelY + lineH * 0.85).attr("font-size", clct.fontSize).attr("font-family", clct.fontFamily ?? "sans-serif").attr("font-weight", clct.fontWeight ?? 400).attr("text-anchor", "end").attr("fill", clct.labelColor ?? "#303030");
+    const textEl = ctx.groups.constructionLabelsGroup.append("text").attr("x", onRight ? labelRightX - boxW + 4 : labelRightX - 4).attr("y", labelY + lineH * 0.85).attr("font-size", clct.fontSize).attr("font-family", clct.fontFamily ?? "sans-serif").attr("font-weight", clct.fontWeight ?? 400).attr("text-anchor", onRight ? "start" : "end").attr("fill", clct.labelColor ?? "#303030");
     lines.forEach((line, i) => {
-      textEl.append("tspan").attr("x", labelRightX - 4).attr("dy", i === 0 ? 0 : lineH).text(line);
+      textEl.append("tspan").attr("x", onRight ? labelRightX - boxW + 4 : labelRightX - 4).attr("dy", i === 0 ? 0 : lineH).text(line);
     });
   };
   let lastDiam = 0;
@@ -1207,7 +1695,7 @@ function drawConstructionLabels(ctx, data) {
   }).forEach(
     (d) => placeLabel(
       d,
-      `${clc.labels.wellCasePrefix} ${fmtD(d.diameter)}${dUnit} ${d.type}`
+      `${clc.labels.wellCasePrefix} ${fmtD(d.diameter)}${dUnit} ${material(d.type)}`
     )
   );
   lastDiam = 0;
@@ -1220,7 +1708,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)}${dUnit}`
+      `${clc.labels.wellScreenPrefix} ${fmtD(d.diameter)}${dUnit} ${material(d.type)} ${clc.labels.wellScreenSlotPrefix} ${fmtD(d.screen_slot)}${dUnit}`
     )
   );
 }
@@ -1228,110 +1716,307 @@ function drawConstructionLabels(ctx, data) {
 // src/renderers/construction.renderer.ts
 import * as d34 from "d3";
 import { getProfileDiamValues as getProfileDiamValues3 } from "@welldot/utils";
+var entering = /* @__PURE__ */ new WeakSet();
+function constructionXScale(ctx) {
+  const max6 = d34.max(getProfileDiamValues3(ctx.constructionData)) || 0;
+  return d34.scaleLinear().domain([0, max6]).range([0, ctx.POCO_WIDTH]);
+}
+function outlineScales(ctx) {
+  const x = constructionXScale(ctx);
+  return {
+    y: ctx.yScale,
+    left: (d) => (ctx.POCO_CENTER - x(d)) / 2,
+    right: (d) => (ctx.POCO_CENTER + x(d)) / 2,
+    depthFrom: ctx.depthFrom,
+    depthTo: ctx.depthTo
+  };
+}
+var surfaceCaseDiameter = (ctx, diameter) => diameter * (1 + ctx.renderConfig.construction.surfaceCase.diameterPaddingRatio);
+function joinIntervalLayer(ctx, group, cls, data, key, tooltip, { shoe = false, pathFill = false, ends = false } = {}) {
+  const sel = group.selectAll(`g.${cls}`).data(data, makeIntervalKey(key));
+  sel.exit().transition(ctx.transition).style("opacity", 0).remove();
+  const top = (d) => ctx.yScale(Math.max(d.from, ctx.depthFrom));
+  const entered = sel.enter().append("g").attr("class", cls).each((_d, i, nodes) => entering.add(nodes[i])).on("mouseover", tooltip.show).on("mouseout", tooltip.hide);
+  if (pathFill)
+    entered.append("path").attr("class", `${cls}-fill`).attr("stroke", "none").attr("fill-rule", "evenodd").attr("d", "");
+  else
+    entered.append("rect").attr("class", `${cls}-fill`).attr("stroke", "none").attr("y", top).attr("height", 0);
+  entered.append("path").attr("class", `${cls}-outline`).attr("fill", "none").attr("d", "");
+  if (shoe)
+    entered.append("path").attr("class", `${cls}-shoe`).attr("stroke-linejoin", "round").attr("d", "");
+  if (ends)
+    entered.append("path").attr("class", `${cls}-ends`).attr("fill", "none").attr("d", "");
+  return entered.merge(sel);
+}
+function drawCementPad(ctx, pad) {
+  const cls = ctx.classes.cementPad.item;
+  const visible = !!pad?.thickness && ctx.depthFrom <= 0 && ctx.depthTo > 0;
+  const sel = ctx.groups.cementPadGroup.selectAll(`g.${cls}`).data(visible ? [pad] : [], () => "cement_pad");
+  sel.exit().remove();
+  if (!visible) return;
+  const entered = sel.enter().append("g").attr("class", cls).on("mouseover", ctx.tooltips.cementPad.show).on("mouseout", ctx.tooltips.cementPad.hide);
+  entered.append("path").attr("class", `${cls}-slab`);
+  entered.append("path").attr("class", `${cls}-slab`);
+  const x = constructionXScale(ctx);
+  const { opening, outer } = getPadDiameters(
+    ctx.constructionData,
+    ctx.renderConfig.construction.surfaceCase.diameterPaddingRatio
+  );
+  const { slabs } = getCementPadGeometry(
+    ctx.POCO_WIDTH,
+    ctx.POCO_CENTER,
+    ctx.yScale(0),
+    ctx.renderConfig.construction.cementPad,
+    x(opening),
+    x(outer)
+  );
+  entered.merge(sel).selectAll("path").attr("d", (_d, i) => slabs[i] ?? "").attr("fill", ctx.textures.pad.url()).attr("stroke", ctx.theme.cementPad.stroke).attr("stroke-width", ctx.theme.cementPad.strokeWidth).attr("stroke-linejoin", "round");
+}
+function layoutConstruction(ctx, animate = false) {
+  const c = ctx.classes;
+  const scales = outlineScales(ctx);
+  const data = ctx.constructionData;
+  const motion = (sel) => animate ? withTransition(sel, ctx.transition) : sel;
+  const yTop = (d) => ctx.yScale(Math.max(d.from, ctx.depthFrom));
+  const yBottom = (d) => ctx.yScale(Math.min(d.to, ctx.depthTo));
+  const collapsed = (d) => ({
+    ...scales,
+    y: () => yTop(d)
+  });
+  const shapeParts = (items, part, attr, shape) => {
+    const parts = items.select(part);
+    if (animate)
+      parts.filter(function() {
+        return entering.has(this.parentNode);
+      }).attr(attr, (d) => shape(d, collapsed(d)));
+    motion(parts).attr(attr, (d) => shape(d, scales));
+  };
+  const layoutLayer = (group, cls, diameter, outline, {
+    shoe: shoe2,
+    ends,
+    fill
+  } = {}) => {
+    const items = group.selectAll(`g.${cls}`);
+    shapeParts(items, `.${cls}-outline`, "d", outline);
+    if (shoe2) shapeParts(items, `.${cls}-shoe`, "d", shoe2);
+    if (ends) shapeParts(items, `.${cls}-ends`, "d", ends);
+    if (fill) {
+      shapeParts(items, `.${cls}-fill`, "d", fill);
+      return;
+    }
+    motion(
+      items.select(`.${cls}-fill`).attr("x", (d) => scales.left(diameter(d))).attr(
+        "width",
+        (d) => scales.right(diameter(d)) - scales.left(diameter(d))
+      )
+    ).attr("y", yTop).attr("height", (d) => Math.max(0, yBottom(d) - yTop(d)));
+  };
+  const walls = (d, s, dia = d.diameter) => pipeWallsPath(
+    s.left(dia),
+    s.right(dia),
+    s.y(Math.max(d.from, s.depthFrom)),
+    s.y(Math.min(d.to, s.depthTo))
+  );
+  layoutLayer(
+    ctx.groups.holeGroup,
+    c.boreHole.rect,
+    (d) => d.diameter,
+    (d, s) => boreHoleOutlinePath(d, data.bore_hole, s)
+  );
+  const pipes = [...data.well_case, ...data.well_screen];
+  const insideSurface = [...data.bore_hole, ...data.hole_fill, ...pipes];
+  const scDiameter = (d) => surfaceCaseDiameter(ctx, d.diameter);
+  layoutLayer(
+    ctx.groups.surfaceCaseGroup,
+    c.surfaceCase.rect,
+    scDiameter,
+    (d, s) => walls(d, s, scDiameter(d)),
+    // Only the ring outside the hole: the texture never shows under the casing.
+    {
+      fill: (d, s) => annulusFillPath({ ...d, diameter: scDiameter(d) }, insideSurface, s)
+    }
+  );
+  layoutLayer(
+    ctx.groups.holeFillGroup,
+    c.holeFill.rect,
+    (d) => d.diameter,
+    (d, s) => holeFillOutlinePath(d, pipes, s),
+    { fill: (d, s) => annulusFillPath(d, pipes, s) }
+  );
+  const string = [...pipes, ...data.reduction ?? []];
+  const shoeCfg = ctx.renderConfig.construction.casingShoe;
+  const endsCfg = ctx.renderConfig.construction.screenEnds;
+  const room = (d, depth, size) => {
+    const hole = diameterAt(data.bore_hole, depth);
+    const annulus = hole !== void 0 && hole > d.diameter ? scales.left(d.diameter) - scales.left(hole) - 1 : size;
+    return Math.max(2, Math.min(size, annulus));
+  };
+  const shoe = (d, s) => {
+    const ends = getIntervalEnds(d, string, ctx.depthFrom, ctx.depthTo);
+    if (!shoeCfg.active || ends.cutBottom || ends.joinedBottom) return "";
+    return shoePath(
+      s.left(d.diameter),
+      s.right(d.diameter),
+      s.y(Math.min(d.to, s.depthTo)),
+      room(d, d.to, shoeCfg.size)
+    );
+  };
+  const screenEnds = (d, s) => {
+    if (!endsCfg.active) return "";
+    const ends = getIntervalEnds(d, string, ctx.depthFrom, ctx.depthTo);
+    const mark = (depth) => screenEndPath(s.left(d.diameter), s.right(d.diameter), s.y(depth));
+    return (ends.cutTop ? "" : mark(d.from)) + (ends.cutBottom ? "" : mark(d.to));
+  };
+  layoutLayer(
+    ctx.groups.wellCaseGroup,
+    c.wellCase.rect,
+    (d) => d.diameter,
+    walls,
+    { shoe }
+  );
+  layoutLayer(
+    ctx.groups.wellScreenGroup,
+    c.wellScreen.rect,
+    (d) => d.diameter,
+    walls,
+    { shoe, ends: screenEnds }
+  );
+  const reductions = ctx.groups.reductionGroup.selectAll(`g.${c.reduction.item}`);
+  const corners = (d, s) => {
+    const t = s.y(Math.max(d.from, s.depthFrom));
+    const b = s.y(Math.min(d.to, s.depthTo));
+    return {
+      tl: `${s.left(d.diam_from)},${t}`,
+      tr: `${s.right(d.diam_from)},${t}`,
+      bl: `${s.left(d.diam_to)},${b}`,
+      br: `${s.right(d.diam_to)},${b}`
+    };
+  };
+  shapeParts(reductions, `.${c.reduction.item}-fill`, "points", (d, s) => {
+    const p = corners(d, s);
+    return `${p.tl} ${p.tr} ${p.br} ${p.bl}`;
+  });
+  shapeParts(reductions, `.${c.reduction.item}-outline`, "d", (d, s) => {
+    const p = corners(d, s);
+    return `M${p.tl}L${p.bl}M${p.tr}L${p.br}`;
+  });
+  if (animate) {
+    for (const group of [
+      ctx.groups.holeGroup,
+      ctx.groups.surfaceCaseGroup,
+      ctx.groups.holeFillGroup,
+      ctx.groups.wellCaseGroup,
+      ctx.groups.wellScreenGroup,
+      ctx.groups.reductionGroup
+    ])
+      group.selectAll("g").each(function() {
+        entering.delete(this);
+      });
+  }
+}
 function drawConstructive(ctx, data) {
   const { getHeight, getYPos } = getYAxisFunctions(ctx.yScale, {
     from: ctx.depthFrom,
     to: ctx.depthTo
   });
-  const maxXValues = getProfileDiamValues3(ctx.constructionData);
-  const maxXValueConstruction = d34.max(maxXValues) || 0;
-  const xScale = d34.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], () => "cement_pad");
-    cementPad.exit().remove();
-    const newCementPad = cementPad.enter().append("rect").attr("class", ctx.classes.cementPad.item).attr(
-      "x",
-      (d) => (ctx.POCO_CENTER - xScale(d.width * rcc.cementPad.widthMultiplier * 1e3 / 2)) / 2
-    ).attr("y", (d) => {
-      return ctx.yScale(0) - ctx.yScale(d.thickness * rcc.cementPad.thicknessMultiplier);
-    }).attr(
-      "width",
-      (d) => xScale(d.width * rcc.cementPad.widthMultiplier * 1e3 / 2)
-    ).attr("height", (d) => {
-      return ctx.yScale(d.thickness * rcc.cementPad.thicknessMultiplier);
-    }).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, 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("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).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);
-  const mergedSC = mergeEnter(newSC, surfaceCaseGs);
-  mergedSC.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 c = ctx.classes;
+  const theme = ctx.theme;
+  drawCementPad(ctx, data.cement_pad);
+  joinIntervalLayer(
+    ctx,
+    ctx.groups.holeGroup,
+    c.boreHole.rect,
+    data.bore_hole,
+    "bore_hole",
+    ctx.tooltips.hole
+  ).attr("opacity", theme.boreHole.opacity).call((g) => {
+    g.select(`.${c.boreHole.rect}-fill`).attr("fill", theme.boreHole.fill);
+    g.select(`.${c.boreHole.rect}-outline`).attr("stroke", theme.boreHole.stroke).attr("stroke-width", theme.boreHole.strokeWidth).attr("stroke-dasharray", theme.boreHole.strokeDasharray);
+  });
+  joinIntervalLayer(
+    ctx,
+    ctx.groups.surfaceCaseGroup,
+    c.surfaceCase.rect,
+    data.surface_case,
+    "surface_case",
+    ctx.tooltips.surfaceCase,
+    { pathFill: true }
+  ).call((g) => {
+    g.select(`.${c.surfaceCase.rect}-fill`).attr(
+      "fill",
+      ctx.textures.surface_case.url()
     );
-    const g = d34.select(nodes[i]);
-    g.select(".surface-case-fill").attr("x", x).attr("width", w).attr("fill", ctx.textures.surface_case.url());
-    const sideNodes = g.selectAll(".surface-case-side").nodes();
-    d34.select(sideNodes[0]).attr("x1", x).attr("x2", x);
-    d34.select(sideNodes[1]).attr("x1", x + w).attr("x2", x + w);
+    g.select(`.${c.surfaceCase.rect}-outline`).attr("stroke", theme.surfaceCase.stroke).attr("stroke-width", theme.surfaceCase.strokeWidth);
   });
-  withTransition(
-    mergedSC.select(".surface-case-fill"),
-    ctx.transition
-  ).attr("y", (d) => getYPos(d)).attr("height", (d) => getHeight(d));
-  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, 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).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).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).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"));
+  joinIntervalLayer(
+    ctx,
+    ctx.groups.holeFillGroup,
+    c.holeFill.rect,
+    data.hole_fill,
+    "hole_fill",
+    ctx.tooltips.holeFill,
+    { pathFill: true }
+  ).call((g) => {
+    g.select(`.${c.holeFill.rect}-fill`).attr(
+      "fill",
+      (d) => ctx.textures[d.type].url()
+    );
+    g.select(`.${c.holeFill.rect}-outline`).attr("stroke", theme.holeFill.stroke).attr("stroke-width", theme.holeFill.strokeWidth);
+  });
+  for (const [group, cls, items, key, tooltip, fill, stroke] of [
+    [
+      ctx.groups.wellCaseGroup,
+      c.wellCase.rect,
+      data.well_case,
+      "well_case",
+      ctx.tooltips.wellCase,
+      theme.wellCase.fill,
+      theme.wellCase
+    ],
+    [
+      ctx.groups.wellScreenGroup,
+      c.wellScreen.rect,
+      data.well_screen,
+      "well_screen",
+      ctx.tooltips.wellScreen,
+      ctx.textures.well_screen.url(),
+      theme.wellScreen
+    ]
+  ]) {
+    joinIntervalLayer(ctx, group, cls, items, key, tooltip, {
+      shoe: true,
+      ends: cls === c.wellScreen.rect
+    }).call((g) => {
+      g.select(`.${cls}-fill`).attr("fill", fill);
+      g.select(`.${cls}-outline`).attr("stroke", stroke.stroke).attr("stroke-width", stroke.strokeWidth);
+      g.select(`.${cls}-shoe`).attr("fill", stroke.stroke).attr("stroke", stroke.stroke).attr("stroke-width", 0.5);
+      g.select(`.${cls}-ends`).attr("stroke", stroke.stroke).attr("stroke-width", theme.wellScreen.endStrokeWidth).attr("stroke-dasharray", theme.wellScreen.endDasharray);
+    });
+  }
+  const reduction = ctx.groups.reductionGroup.selectAll(`g.${c.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 newReduction = reduction.enter().append("g").attr("class", c.reduction.item).each((_d, i, nodes) => entering.add(nodes[i])).on("mouseover", ctx.tooltips.reduction.show).on("mouseout", ctx.tooltips.reduction.hide);
+  newReduction.append("polygon").attr("class", `${c.reduction.item}-fill`).attr("stroke", "none");
+  newReduction.append("path").attr("class", `${c.reduction.item}-outline`).attr("fill", "none");
+  newReduction.merge(reduction).call((g) => {
+    g.select(`.${c.reduction.item}-fill`).attr("fill", theme.reduction.fill);
+    g.select(`.${c.reduction.item}-outline`).attr("stroke", theme.reduction.stroke).attr("stroke-width", theme.reduction.strokeWidth);
+  });
+  const mergedConflicts = mergeConflicts(
+    [
+      ...getConflictAreas(data.well_case, data.well_screen),
+      ...getConflictAreas(data.well_screen, data.well_case)
+    ],
+    1
   );
-  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, makeIntervalKey("conflict"));
+  const xScale = constructionXScale(ctx);
+  const yPos = getYPos;
+  const conflict = ctx.groups.conflictGroup.selectAll(`.${c.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).on("mouseover", ctx.tooltips.conflict.show).on("mouseout", ctx.tooltips.conflict.hide).attr("y", ctx.yScale(0)).attr("height", 0);
+  const newConflict = conflict.enter().append("rect").attr("class", c.conflict.rect).attr("fill", ctx.textures.conflict.url()).attr("stroke", theme.conflict.stroke).attr("stroke-width", theme.conflict.strokeWidth).on("mouseover", ctx.tooltips.conflict.show).on("mouseout", ctx.tooltips.conflict.hide).attr("y", yPos).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);
+  withTransition(mergedConflict, ctx.transition).attr("y", getYPos).attr("height", getHeight);
+  layoutConstruction(ctx, true);
 }
 
 // src/renderers/fractures.renderer.ts
@@ -1347,7 +2032,6 @@ function wavyLine(rng, steps, baseY, jitter, startInset, endInset) {
   return pts;
 }
 function drawFractures(ctx, data) {
-  if (!data.length) return;
   const {
     groups: { fracturesGroup },
     POCO_WIDTH,
@@ -1369,7 +2053,7 @@ function drawFractures(ctx, data) {
   const merged = mergeEnter(entered, groups);
   merged.attr(
     "transform",
-    (fracture) => `translate(0,${yScale(fracture.depth)}) rotate(${fracture.dip},${pocoCenterX},0)`
+    (fracture) => `translate(0,${yScale(fracture.depth)}) rotate(${fractureDip(fracture.dip)},${pocoCenterX},0)`
   );
   merged.each(function(fracture) {
     const g = d35.select(this);
@@ -1514,24 +2198,26 @@ function drawHighlights(ctx, hl) {
   const maxXVals = getProfileDiamValues4(ctx.constructionData);
   const xScaleConstr = d36.scaleLinear().domain([0, d36.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;
-    const cpPadWidth = cp.width * constructionConfig.cementPad.widthMultiplier * 1e3 / 2;
-    const cpX = (ctx.POCO_CENTER - xScaleConstr(cpPadWidth)) / 2;
-    const cpY = ctx.yScale(0) - ctx.yScale(
-      cp.thickness * constructionConfig.cementPad.thicknessMultiplier
+  if (hl.cement_pad && ctx.depthFrom <= 0 && ctx.depthTo > 0 && ctx.constructionData.cement_pad?.thickness) {
+    const { opening, outer } = getPadDiameters(
+      ctx.constructionData,
+      constructionConfig.surfaceCase.diameterPaddingRatio
     );
-    const cpW = xScaleConstr(cpPadWidth);
-    const cpH = ctx.yScale(
-      cp.thickness * constructionConfig.cementPad.thicknessMultiplier
+    const pad = getCementPadRect(
+      ctx.POCO_WIDTH,
+      ctx.POCO_CENTER,
+      ctx.yScale(0),
+      constructionConfig.cementPad,
+      xScaleConstr(opening),
+      xScaleConstr(outer)
     );
     drawHighlightItem(
       ctx,
       ctx.groups.highlightsConstructionGroup,
-      cpX,
-      cpY,
-      cpW,
-      cpH,
+      pad.x,
+      pad.y,
+      pad.width,
+      pad.height,
       hl.cement_pad.label
     );
   }
@@ -1607,8 +2293,12 @@ function drawHighlights(ctx, hl) {
 // src/renderers/legend.renderer.ts
 import * as d3module from "d3";
 import { defu } from "defu";
+import { getCurrentPump } from "@welldot/utils";
 var d37 = { ...d3module };
-function drawWellLegend(selector, profile, options = {}) {
+var SYMBOL_WIDTH = 24;
+var SYMBOL_HEIGHT = 12;
+var SYMBOL_MARGIN = 2;
+function getWellLegendItems(profile, labels = INTERACTIVE_RENDER_CONFIG.legend.labels) {
   const fractures = profile.fractures ?? [];
   const caves = profile.caves ?? [];
   const boreHoles = profile.bore_hole ?? [];
@@ -1629,6 +2319,7 @@ function drawWellLegend(selector, profile, options = {}) {
   const hasWellScreen = wellScreens.length > 0;
   const hasReduction = reductions.length > 0;
   const hasCentralizer = (profile.centralizers ?? []).length > 0;
+  const hasPump = getCurrentPump(profile)?.intake_depth !== void 0;
   const hasCementPad = !!profile.cement_pad?.thickness;
   const hasConflict = mergeConflicts(
     [
@@ -1637,222 +2328,314 @@ function drawWellLegend(selector, profile, options = {}) {
     ],
     1
   ).length > 0;
-  const cfg = defu(
-    options.config ?? {},
-    INTERACTIVE_RENDER_CONFIG.legend
-  );
-  const theme = defu(options.theme ?? {}, DEFAULT_WELL_THEME);
-  const cls = options.classNames ? { ...DEFAULT_COMPONENTS_CLASS_NAMES.legend, ...options.classNames } : DEFAULT_COMPONENTS_CLASS_NAMES.legend;
   const items = [];
   if (hasSimple)
     items.push({
       kind: "fracture",
-      label: cfg.labels.fractureSingle,
+      key: "fractureSingle",
+      label: labels.fractureSingle,
       swarm: false,
       water_intake: false
     });
   if (hasSwarm)
     items.push({
       kind: "fracture",
-      label: cfg.labels.fractureSwarm,
+      key: "fractureSwarm",
+      label: labels.fractureSwarm,
       swarm: true,
       water_intake: false
     });
   if (hasWaterFx)
     items.push({
       kind: "fracture",
-      label: cfg.labels.fractureWater,
+      key: "fractureWater",
+      label: labels.fractureWater,
       swarm: false,
       water_intake: true
     });
   if (hasCaveDry)
     items.push({
       kind: "cave",
-      label: cfg.labels.caveDry,
+      key: "caveDry",
+      label: labels.caveDry,
       water_intake: false
     });
   if (hasCaveWet)
-    items.push({ kind: "cave", label: cfg.labels.caveWet, water_intake: true });
+    items.push({
+      kind: "cave",
+      key: "caveWet",
+      label: labels.caveWet,
+      water_intake: true
+    });
   if (hasCementPad)
     items.push({
       kind: "construction",
-      label: cfg.labels.cementPad,
+      key: "cementPad",
+      label: labels.cementPad,
       subKind: "cementPad"
     });
   if (hasBoreHole)
     items.push({
       kind: "construction",
-      label: cfg.labels.boreHole,
+      key: "boreHole",
+      label: labels.boreHole,
       subKind: "boreHole"
     });
   if (hasSurfaceCase)
     items.push({
       kind: "construction",
-      label: cfg.labels.surfaceCase,
+      key: "surfaceCase",
+      label: labels.surfaceCase,
       subKind: "surfaceCase"
     });
   if (hasHoleFillGravel)
     items.push({
       kind: "construction",
-      label: cfg.labels.holeFillGravel,
+      key: "holeFillGravel",
+      label: labels.holeFillGravel,
       subKind: "holeFillGravel"
     });
   if (hasHoleFillSeal)
     items.push({
       kind: "construction",
-      label: cfg.labels.holeFillSeal,
+      key: "holeFillSeal",
+      label: labels.holeFillSeal,
       subKind: "holeFillSeal"
     });
   if (hasWellCase)
     items.push({
       kind: "construction",
-      label: cfg.labels.wellCase,
+      key: "wellCase",
+      label: labels.wellCase,
       subKind: "wellCase"
     });
   if (hasWellScreen)
     items.push({
       kind: "construction",
-      label: cfg.labels.wellScreen,
+      key: "wellScreen",
+      label: labels.wellScreen,
       subKind: "wellScreen"
     });
   if (hasReduction)
     items.push({
       kind: "construction",
-      label: cfg.labels.reduction,
+      key: "reduction",
+      label: labels.reduction,
       subKind: "reduction"
     });
   if (hasCentralizer)
     items.push({
       kind: "construction",
-      label: cfg.labels.centralizer,
+      key: "centralizer",
+      label: labels.centralizer,
       subKind: "centralizer"
     });
+  if (hasPump)
+    items.push({
+      kind: "construction",
+      key: "pump",
+      label: labels.pump,
+      subKind: "pump"
+    });
   if (hasConflict)
     items.push({
       kind: "construction",
-      label: cfg.labels.conflict,
+      key: "conflict",
+      label: labels.conflict,
       subKind: "conflict"
     });
+  return items;
+}
+function drawLegendSymbol(symG, item, cx, rowSymY, { theme, cls, textures: legendTextures }) {
+  const RC = "round";
+  const rw = SYMBOL_WIDTH;
+  const rh = SYMBOL_HEIGHT;
+  if (item.kind === "fracture") {
+    const color = item.water_intake ? theme.fracture.wetStroke : theme.fracture.dryStroke;
+    if (item.swarm) {
+      [-4, 0, 4].forEach((offset) => {
+        symG.append("polyline").attr("class", cls.fracturePoly).attr(
+          "points",
+          `${cx},${rowSymY + offset} ${cx + 6},${rowSymY + offset - 1} ${cx + 12},${rowSymY + offset + 1} ${cx + 18},${rowSymY + offset - 0.5} ${cx + 24},${rowSymY + offset}`
+        ).attr("stroke", color).attr(
+          "stroke-width",
+          offset !== 0 ? theme.legend.fractureSideStrokeWidth : theme.legend.fractureStrokeWidth
+        ).attr("fill", "none").attr("stroke-linecap", RC).attr("stroke-linejoin", RC);
+      });
+    } else {
+      symG.append("polyline").attr("class", cls.fracturePoly).attr(
+        "points",
+        `${cx},${rowSymY} ${cx + 5},${rowSymY - 1.5} ${cx + 11},${rowSymY + 1} ${cx + 17},${rowSymY - 0.5} ${cx + 24},${rowSymY}`
+      ).attr("stroke", color).attr("stroke-width", theme.legend.fractureStrokeWidth).attr("fill", "none").attr("stroke-linecap", RC).attr("stroke-linejoin", RC);
+    }
+  } else if (item.kind === "cave") {
+    const color = item.water_intake ? theme.cave.wetStroke : theme.cave.dryStroke;
+    const texture = item.water_intake ? legendTextures.cave_wet : legendTextures.cave_dry;
+    symG.append("rect").attr("class", cls.caveFill).attr("x", cx).attr("y", rowSymY - rh / 2).attr("width", rw).attr("height", rh).attr("fill", texture.url()).attr("stroke", color).attr("stroke-width", theme.legend.itemStrokeWidth);
+  } else if (item.subKind === "surfaceCase") {
+    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 === "centralizer") {
+    const pipeW = rw * 0.4;
+    const pipeL = cx + (rw - pipeW) / 2;
+    const pipeR = pipeL + pipeW;
+    const y1 = rowSymY - rh / 2;
+    const y2 = rowSymY + rh / 2;
+    const bowH = rh * 0.3;
+    for (const x of [pipeL, pipeR]) {
+      symG.append("line").attr("class", cls.constructionRect).attr("x1", x).attr("x2", x).attr("y1", y1).attr("y2", y2).attr("stroke", theme.wellCase.stroke).attr("stroke-width", theme.legend.itemStrokeWidth);
+    }
+    for (const [from, to] of [
+      [pipeL, cx],
+      [pipeR, cx + rw]
+    ]) {
+      symG.append("polyline").attr("class", cls.constructionRect).attr(
+        "points",
+        `${from},${rowSymY - bowH} ${to},${rowSymY} ${from},${rowSymY + bowH}`
+      ).attr("fill", theme.centralizer.fill).attr("stroke", theme.centralizer.stroke).attr("stroke-width", theme.centralizer.strokeWidth);
+    }
+  } else if (item.subKind === "pump") {
+    const y1 = rowSymY - rh / 2;
+    const y2 = rowSymY + rh / 2;
+    const midX = cx + rw / 2;
+    const riserHalf = rw * 0.12;
+    const bodyHalf = rw * 0.28;
+    const bodyTop = y1 + rh * 0.4;
+    symG.append("rect").attr("class", cls.constructionRect).attr("x", midX - riserHalf).attr("y", y1).attr("width", 2 * riserHalf).attr("height", bodyTop - y1).attr("fill", theme.pump.riserFill).attr("stroke", "none");
+    symG.append("path").attr("class", cls.constructionRect).attr("d", pipeWallsPath(midX - riserHalf, midX + riserHalf, y1, bodyTop)).attr("fill", "none").attr("stroke", theme.pump.riserStroke).attr("stroke-width", theme.pump.riserStrokeWidth);
+    symG.append("path").attr("class", cls.constructionRect).attr(
+      "d",
+      `M${midX - bodyHalf},${bodyTop}H${midX + bodyHalf}V${y2}H${midX - bodyHalf}Z`
+    ).attr("fill", theme.pump.fill).attr("stroke", theme.pump.stroke).attr("stroke-width", theme.pump.strokeWidth);
+  } 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;
+    const tl = `${midX - topW / 2},${y1}`;
+    const tr = `${midX + topW / 2},${y1}`;
+    symG.append("polygon").attr("class", cls.constructionRect).attr("points", `${tl} ${tr} ${cx + rw},${y2} ${cx},${y2}`).attr("fill", theme.reduction.fill).attr("stroke", "none");
+    symG.append("path").attr("class", cls.constructionRect).attr("d", `M${tl}L${cx},${y2}M${tr}L${cx + rw},${y2}`).attr("fill", "none").attr("stroke", theme.reduction.stroke).attr("stroke-width", theme.legend.itemStrokeWidth);
+  } else if (item.subKind === "wellCase" || item.subKind === "wellScreen" || item.subKind === "boreHole") {
+    const y1 = rowSymY - rh / 2;
+    const y2 = rowSymY + rh / 2;
+    const shoe = 3;
+    const xL = cx + shoe;
+    const xR = cx + rw - shoe;
+    const style = {
+      wellCase: { fill: theme.wellCase.fill, stroke: theme.wellCase.stroke },
+      wellScreen: {
+        fill: legendTextures.well_screen.url(),
+        stroke: theme.wellScreen.stroke
+      },
+      boreHole: { fill: theme.boreHole.fill, stroke: theme.boreHole.stroke }
+    }[item.subKind];
+    symG.append("rect").attr("class", cls.constructionRect).attr("x", xL).attr("y", y1).attr("width", xR - xL).attr("height", rh).attr("fill", style.fill).attr("stroke", "none");
+    const walls = symG.append("path").attr("class", cls.constructionRect).attr(
+      "d",
+      pipeWallsPath(xL, xR, y1, y2) + (item.subKind === "boreHole" ? `M${xL},${y2}H${xR}` : "")
+    ).attr("fill", "none").attr("stroke", style.stroke).attr("stroke-width", theme.legend.itemStrokeWidth);
+    if (item.subKind === "boreHole")
+      walls.attr("stroke-dasharray", theme.boreHole.strokeDasharray);
+    if (item.subKind === "wellCase")
+      symG.append("path").attr("class", cls.constructionRect).attr("d", shoePath(xL, xR, y2, shoe)).attr("fill", style.stroke).attr("stroke", "none");
+    if (item.subKind === "wellScreen")
+      symG.append("path").attr("class", cls.constructionRect).attr(
+        "d",
+        screenEndPath(xL, xR, y1 + 0.5) + screenEndPath(xL, xR, y2 - 0.5)
+      ).attr("fill", "none").attr("stroke", style.stroke).attr("stroke-width", theme.wellScreen.endStrokeWidth).attr("stroke-dasharray", "2, 1.5");
+  } else if (item.subKind === "cementPad") {
+    const h = rh * 0.6;
+    const { slabs } = getCementPadGeometry(
+      rw,
+      2 * cx + rw,
+      rowSymY + h / 2,
+      { widthRatio: 1, height: h },
+      rw * 0.3
+    );
+    for (const d of slabs)
+      symG.append("path").attr("class", cls.constructionRect).attr("d", d).attr("fill", legendTextures.pad.url()).attr("stroke", theme.cementPad.stroke).attr("stroke-width", theme.legend.itemStrokeWidth).attr("stroke-linejoin", RC);
+  } else {
+    const symMap = {
+      holeFillGravel: {
+        fill: legendTextures.gravel_pack.url(),
+        stroke: theme.holeFill.stroke
+      },
+      holeFillSeal: {
+        fill: legendTextures.seal.url(),
+        stroke: theme.holeFill.stroke
+      },
+      conflict: {
+        fill: legendTextures.conflict.url(),
+        stroke: theme.conflict.stroke
+      }
+    };
+    const sym = symMap[item.subKind];
+    const symRect = symG.append("rect").attr("class", cls.constructionRect).attr("x", cx).attr("y", rowSymY - rh / 2).attr("width", rw).attr("height", rh).attr("fill", sym.fill).attr("stroke", sym.stroke).attr("stroke-width", theme.legend.itemStrokeWidth);
+    if (sym.dasharray) symRect.attr("stroke-dasharray", sym.dasharray);
+  }
+}
+function resolveStyle(options) {
+  return {
+    theme: defu(options.theme ?? {}, DEFAULT_WELL_THEME),
+    cls: options.classNames ? { ...DEFAULT_COMPONENTS_CLASS_NAMES.legend, ...options.classNames } : DEFAULT_COMPONENTS_CLASS_NAMES.legend,
+    textures: createWellTextures(options.textures)
+  };
+}
+function drawWellLegendSymbol(selector, item, options = {}) {
+  const style = resolveStyle(options);
+  const svgEl = d37.select(selector);
+  svgEl.selectAll("*").remove();
+  svgEl.attr("width", SYMBOL_WIDTH + SYMBOL_MARGIN * 2).attr("height", SYMBOL_HEIGHT + SYMBOL_MARGIN * 2);
+  Object.values(style.textures).forEach((t) => svgEl.call(t));
+  const symG = svgEl.append("g").attr("class", style.cls.item);
+  drawLegendSymbol(
+    symG,
+    item,
+    SYMBOL_MARGIN,
+    SYMBOL_MARGIN + SYMBOL_HEIGHT / 2,
+    style
+  );
+}
+function drawWellLegend(selector, profile, options = {}) {
+  const cfg = defu(
+    options.config ?? {},
+    INTERACTIVE_RENDER_CONFIG.legend
+  );
+  const items = getWellLegendItems(profile, cfg.labels);
   const svgEl = d37.select(selector);
   svgEl.selectAll("*").remove();
   if (items.length === 0) {
     svgEl.attr("width", 0).attr("height", 0);
     return;
   }
-  const legendTextures = createWellTextures(options.textures);
-  Object.values(legendTextures).forEach((t) => svgEl.call(t));
+  const style = resolveStyle(options);
+  const { theme, cls } = style;
+  Object.values(style.textures).forEach((t) => svgEl.call(t));
   const itemsPerRow = cfg.maxWidth ? Math.max(1, Math.floor((cfg.maxWidth - cfg.padding * 2) / cfg.itemWidth)) : items.length;
   const numRows = Math.ceil(items.length / itemsPerRow);
   const rowWidth = Math.min(items.length, itemsPerRow) * cfg.itemWidth;
   const totalWidth = cfg.padding * 2 + rowWidth;
   const totalHeight = numRows * cfg.height;
   svgEl.attr("width", totalWidth).attr("height", totalHeight);
-  const RC = "round";
   const g = svgEl.append("g").attr("transform", `translate(${cfg.padding}, 2)`);
   g.append("rect").attr("class", cls.border).attr("x", 0).attr("y", 0).attr("width", totalWidth - cfg.padding).attr("height", totalHeight - 4).attr("fill", "white").attr("rx", cfg.borderRadius).attr("stroke-width", theme.legend.borderStrokeWidth);
   g.append("text").attr("class", cls.title).attr("x", 4).attr("y", 11).attr("font-size", theme.legend.fontSize).attr("font-family", theme.legend.fontFamily ?? "sans-serif").attr("font-weight", theme.legend.titleFontWeight ?? "bold").text(`${cfg.title}:`);
-  const rw = 24;
-  const rh = 12;
   items.forEach((item, i) => {
     const col = i % itemsPerRow;
     const row = Math.floor(i / itemsPerRow);
     const rowSymY = row * cfg.height + (cfg.height - 4) / 2;
     const cx = col * cfg.itemWidth;
     const symG = g.append("g").attr("class", cls.item);
-    if (item.kind === "fracture") {
-      const color = item.water_intake ? theme.fracture.wetStroke : theme.fracture.dryStroke;
-      if (item.swarm) {
-        [-4, 0, 4].forEach((offset) => {
-          symG.append("polyline").attr("class", cls.fracturePoly).attr(
-            "points",
-            `${cx},${rowSymY + offset} ${cx + 6},${rowSymY + offset - 1} ${cx + 12},${rowSymY + offset + 1} ${cx + 18},${rowSymY + offset - 0.5} ${cx + 24},${rowSymY + offset}`
-          ).attr("stroke", color).attr(
-            "stroke-width",
-            offset !== 0 ? theme.legend.fractureSideStrokeWidth : theme.legend.fractureStrokeWidth
-          ).attr("fill", "none").attr("stroke-linecap", RC).attr("stroke-linejoin", RC);
-        });
-      } else {
-        symG.append("polyline").attr("class", cls.fracturePoly).attr(
-          "points",
-          `${cx},${rowSymY} ${cx + 5},${rowSymY - 1.5} ${cx + 11},${rowSymY + 1} ${cx + 17},${rowSymY - 0.5} ${cx + 24},${rowSymY}`
-        ).attr("stroke", color).attr("stroke-width", theme.legend.fractureStrokeWidth).attr("fill", "none").attr("stroke-linecap", RC).attr("stroke-linejoin", RC);
-      }
-    } else if (item.kind === "cave") {
-      const color = item.water_intake ? theme.cave.wetStroke : theme.cave.dryStroke;
-      const texture = item.water_intake ? legendTextures.cave_wet : legendTextures.cave_dry;
-      symG.append("rect").attr("class", cls.caveFill).attr("x", cx).attr("y", rowSymY - rh / 2).attr("width", rw).attr("height", rh).attr("fill", texture.url()).attr("stroke", color).attr("stroke-width", theme.legend.itemStrokeWidth);
-    } else if (item.subKind === "surfaceCase") {
-      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 === "centralizer") {
-      const pipeW = rw * 0.4;
-      const pipeL = cx + (rw - pipeW) / 2;
-      const pipeR = pipeL + pipeW;
-      const y1 = rowSymY - rh / 2;
-      const y2 = rowSymY + rh / 2;
-      const bowH = rh * 0.3;
-      for (const x of [pipeL, pipeR]) {
-        symG.append("line").attr("class", cls.constructionRect).attr("x1", x).attr("x2", x).attr("y1", y1).attr("y2", y2).attr("stroke", theme.wellCase.stroke).attr("stroke-width", theme.legend.itemStrokeWidth);
-      }
-      for (const [from, to] of [
-        [pipeL, cx],
-        [pipeR, cx + rw]
-      ]) {
-        symG.append("polyline").attr("class", cls.constructionRect).attr(
-          "points",
-          `${from},${rowSymY - bowH} ${to},${rowSymY} ${from},${rowSymY + bowH}`
-        ).attr("fill", theme.centralizer.fill).attr("stroke", theme.centralizer.stroke).attr("stroke-width", theme.centralizer.strokeWidth);
-      }
-    } 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: {
-          fill: theme.boreHole.fill,
-          stroke: theme.boreHole.stroke,
-          dasharray: theme.boreHole.strokeDasharray
-        },
-        holeFillGravel: {
-          fill: legendTextures.gravel_pack.url(),
-          stroke: theme.holeFill.stroke
-        },
-        holeFillSeal: {
-          fill: legendTextures.seal.url(),
-          stroke: theme.holeFill.stroke
-        },
-        wellCase: { fill: theme.wellCase.fill, stroke: theme.wellCase.stroke },
-        wellScreen: {
-          fill: legendTextures.well_screen.url(),
-          stroke: theme.wellScreen.stroke
-        },
-        cementPad: {
-          fill: legendTextures.pad.url(),
-          stroke: theme.cementPad.stroke
-        },
-        conflict: {
-          fill: legendTextures.conflict.url(),
-          stroke: theme.conflict.stroke
-        }
-      };
-      const sym = symMap[item.subKind];
-      const symRect = symG.append("rect").attr("class", cls.constructionRect).attr("x", cx).attr("y", rowSymY - rh / 2).attr("width", rw).attr("height", rh).attr("fill", sym.fill).attr("stroke", sym.stroke).attr("stroke-width", theme.legend.itemStrokeWidth);
-      if (sym.dasharray) symRect.attr("stroke-dasharray", sym.dasharray);
-    }
+    drawLegendSymbol(symG, item, cx, rowSymY, style);
     g.append("text").attr("class", cls.label).attr("x", cx + 28).attr("y", rowSymY + 3).attr("font-size", theme.legend.fontSize).attr("font-family", theme.legend.fontFamily ?? "sans-serif").attr("font-weight", theme.legend.labelFontWeight ?? 400).text(item.label);
   });
 }
 
 // src/renderers/lithology.renderer.ts
+import * as d38 from "d3";
 function drawLithology(ctx, data) {
-  if (!data.length) return;
   const {
     groups: { lithologyGroup },
     svg,
@@ -1876,10 +2659,219 @@ function drawLithology(ctx, data) {
   const merged = mergeEnter(newLayers, rects);
   withTransition(merged, transition).attr("y", getYPos).attr("height", getHeight).attr("fill", getLithologyFill(data, svg, ctx.theme.lithologyTexture));
 }
+function drawLithologySwatch(selector, layer, options) {
+  const { size, theme } = options;
+  const svg = d38.select(selector);
+  svg.selectAll("*").remove();
+  svg.attr("width", size).attr("height", size);
+  const fill = getLithologyFill([layer], svg, {
+    ...theme.lithologyTexture,
+    // Denser pattern so a few strokes show inside the small square.
+    size: Math.max(12, size * 3)
+  });
+  svg.append("rect").attr("x", 0.5).attr("y", 0.5).attr("width", size - 1).attr("height", size - 1).attr("fill", fill(layer)).attr("stroke", theme.lithology.stroke).attr("stroke-width", 0.5);
+}
+
+// src/renderers/markers.renderer.ts
+function drawMarkers(ctx, data) {
+  const group = ctx.groups.markersGroup;
+  group.selectAll("*").remove();
+  const cfg = ctx.renderConfig.markers;
+  const theme = ctx.theme.markers;
+  const r = cfg.radius;
+  if (cfg.lithology) {
+    const cx = (ctx.geoXLeft + ctx.geoXRight) / 2;
+    getLithologyMarkers(data.lithology, ctx.depthFrom, ctx.depthTo).forEach(
+      (marker) => {
+        const top = ctx.yScale(marker.from);
+        const bottom = ctx.yScale(marker.to);
+        if (bottom - top < r) return;
+        const cy = bottom - top >= 2 * r + 4 ? top + r + 2 : (top + bottom) / 2;
+        const g = group.append("g").attr("class", ctx.classes.markers.lithology);
+        g.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r).attr("fill", theme.fill).attr("stroke", theme.stroke).attr("stroke-width", theme.strokeWidth);
+        g.append("text").attr("x", cx).attr("y", cy).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", theme.fontSize).attr("font-family", theme.fontFamily ?? "sans-serif").attr("font-weight", theme.fontWeight ?? 600).attr("fill", theme.color).text(String(marker.index));
+      }
+    );
+  }
+  if (cfg.fractures) {
+    const x = ctx.pocoCenterX + ctx.POCO_WIDTH * ctx.renderConfig.fractures.widthMultiplier / 2 + 3;
+    getFractureMarkers(data.fractures, ctx.depthFrom, ctx.depthTo).forEach(
+      (marker) => {
+        group.append("text").attr("class", ctx.classes.markers.fracture).attr("x", x).attr("y", ctx.yScale(marker.depth)).attr("dominant-baseline", "central").attr("font-size", theme.fontSize).attr("font-family", theme.fontFamily ?? "sans-serif").attr("font-weight", theme.fontWeight ?? 600).attr("fill", theme.color).text(marker.label);
+      }
+    );
+  }
+}
+
+// src/renderers/overlap.renderer.ts
+import textures3 from "textures";
+import { formatNumber as formatNumber3 } from "@welldot/utils";
+function drawOverlap(ctx) {
+  const group = ctx.groups.overlapGroup;
+  group.selectAll("*").remove();
+  const { repeatedTo, depthFrom } = ctx;
+  if (repeatedTo == null || repeatedTo <= depthFrom) return;
+  const theme = ctx.theme.overlap;
+  const { margins } = ctx.state;
+  const overview = ctx.renderConfig.overview;
+  const showsDescription = hasDescriptionColumn(ctx);
+  const x0 = -margins.left + (overview.active ? overview.x + overview.width + 4 : 0);
+  const x1 = showsDescription ? ctx.geoXRight + ctx.renderConfig.labels.descriptionXOffset - 4 : ctx.svgWidth - margins.left;
+  const y0 = ctx.yScale(depthFrom);
+  const y1 = ctx.yScale(repeatedTo);
+  const hatch = textures3.lines().size(theme.size).strokeWidth(theme.strokeWidth).stroke(theme.stroke);
+  ctx.svg.call(hatch);
+  group.append("rect").attr("class", ctx.classes.overlap.band).attr("x", x0).attr("y", y0).attr("width", Math.max(0, x1 - x0)).attr("height", Math.max(0, y1 - y0)).attr("fill", hatch.url()).style("pointer-events", "none");
+  group.append("line").attr("x1", x0).attr("x2", ctx.svgWidth - margins.left).attr("y1", y1).attr("y2", y1).attr("stroke", theme.ruleStroke).attr("stroke-width", 0.6).attr("stroke-dasharray", "3, 2");
+  const whole = (m) => formatNumber3(ctx.units.length === "ft" ? m * 3.28084 : m, {
+    maximumFractionDigits: 0,
+    locale: ctx.locale
+  });
+  const unit = getLengthUnit(ctx.units.length);
+  const range = `${whole(depthFrom)}\u2013${whole(repeatedTo)} ${unit}`;
+  group.append("text").attr("class", ctx.classes.overlap.label).attr("x", ctx.svgWidth - margins.left - 2).attr("y", y0 + theme.fontSize + 1).attr("text-anchor", "end").attr("font-size", theme.fontSize).attr("font-family", theme.fontFamily ?? "monospace").attr("fill", theme.labelColor).text(formatOverlapLabel(ctx.renderConfig.overlap.label, range));
+}
+
+// src/renderers/overview.renderer.ts
+function drawOverview(ctx, lithology) {
+  const group = ctx.groups.overviewGroup;
+  group.selectAll("*").remove();
+  const cfg = ctx.renderConfig.overview;
+  if (!cfg.active || lithology.length === 0 || ctx.totalDepth <= 0) return;
+  const theme = ctx.theme.overview;
+  const height = Math.min(cfg.height, ctx.state.height);
+  const { y, window } = getOverviewGeometry(
+    ctx.totalDepth,
+    height,
+    ctx.depthFrom,
+    ctx.depthTo
+  );
+  lithology.forEach((layer) => {
+    group.append("rect").attr("class", ctx.classes.overview.item).attr("x", cfg.x).attr("y", y(layer.from)).attr("width", cfg.width).attr("height", Math.max(0, y(layer.to) - y(layer.from))).attr("fill", layer.color || theme.emptyFill);
+  });
+  group.append("rect").attr("x", cfg.x).attr("y", 0).attr("width", cfg.width).attr("height", y(ctx.totalDepth)).attr("fill", "none").attr("stroke", theme.stroke).attr("stroke-width", theme.strokeWidth);
+  group.append("rect").attr("class", ctx.classes.overview.window).attr("x", cfg.x - 2).attr("y", window.y).attr("width", cfg.width + 4).attr("height", window.height).attr("fill", "none").attr("stroke", theme.windowStroke).attr("stroke-width", theme.windowStrokeWidth);
+}
+
+// src/renderers/pump.renderer.ts
+import * as d39 from "d3";
+import { getProfileDiamValues as getProfileDiamValues5 } from "@welldot/utils";
+function getPumpSpans(panelTop, panelBottom, bodyTop, intakeY) {
+  const riserBottom = Math.min(Math.max(panelTop, bodyTop), panelBottom);
+  const top = Math.max(bodyTop, panelTop);
+  const bottom = Math.min(intakeY, panelBottom);
+  return {
+    riserBottom,
+    body: bottom > top ? { top, bottom, cutTop: top > bodyTop, cutBottom: bottom < intakeY } : null
+  };
+}
+var riserBreakAmplitude = (width) => Math.min(2, width / 3);
+function getRiserTop(xLeft, xRight, y, broken) {
+  if (!broken) return { edge: `H${xRight}`, breakLine: "" };
+  const a = riserBreakAmplitude(xRight - xLeft);
+  const w = xRight - xLeft;
+  const zigzag = `L${xLeft + w / 3},${y - a}L${xLeft + 2 * w / 3},${y + a}L${xRight},${y}`;
+  return { edge: zigzag, breakLine: `M${xLeft},${y}${zigzag}` };
+}
+var BODY_MAX_FILL = 0.85;
+var RISER_MAX_FILL = 0.7;
+function getPumpDiameters(intakeD, narrowestD, riserDiameter, cfg) {
+  const maxBody = intakeD * BODY_MAX_FILL;
+  const riser = Math.min(
+    riserDiameter ?? intakeD * cfg.riserWidthRatio,
+    narrowestD * RISER_MAX_FILL,
+    maxBody * RISER_MAX_FILL
+  );
+  const body = Math.min(
+    Math.max(intakeD * cfg.bodyWidthRatio, riser * 1.4),
+    maxBody
+  );
+  return { riser, body };
+}
+function drawPump(ctx, pump) {
+  const group = ctx.groups.pumpGroup;
+  const cls = ctx.classes.pump;
+  const cfg = ctx.renderConfig.construction.pump;
+  const theme = ctx.theme.pump;
+  const intake = pump?.intake_depth;
+  const visible = !!pump && cfg.active && intake !== void 0 && intake > 0 && // the riser crosses this panel when the panel starts above the intake
+  ctx.depthFrom < intake;
+  const data = visible ? [pump] : [];
+  const selection = group.selectAll(`g.${cls.item}`).data(data, (d) => d.id);
+  selection.exit().remove();
+  if (!visible) return;
+  const maxXValue = d39.max(getProfileDiamValues5(ctx.constructionData)) || 0;
+  const xScale = d39.scaleLinear().domain([0, maxXValue]).range([0, ctx.POCO_WIDTH]);
+  const pipes = [
+    ...ctx.constructionData.well_case,
+    ...ctx.constructionData.well_screen
+  ];
+  const casingD = diameterAt(pipes, intake) ?? diameterAt(ctx.constructionData.bore_hole, intake) ?? maxXValue;
+  const narrowestD = Math.min(
+    casingD,
+    ...[...pipes, ...ctx.constructionData.bore_hole].filter((i) => i.from < intake && i.to > 0).map((i) => i.diameter)
+  );
+  const { riser: riserD, body: bodyD } = getPumpDiameters(
+    casingD,
+    narrowestD,
+    pump.riser_diameter,
+    cfg
+  );
+  const riserLeft = (ctx.POCO_CENTER - xScale(riserD)) / 2;
+  const riserRight = (ctx.POCO_CENTER + xScale(riserD)) / 2;
+  const bodyLeft = (ctx.POCO_CENTER - xScale(bodyD)) / 2;
+  const bodyRight = (ctx.POCO_CENTER + xScale(bodyD)) / 2;
+  const yIntake = ctx.yScale(intake);
+  const yBodyTop = yIntake - cfg.bodyHeight;
+  const headDepth = Math.min(
+    0,
+    ...pipes.filter((p) => p.from < 0).map((p) => p.from)
+  );
+  const headInPanel = ctx.depthFrom <= headDepth;
+  const padOnHead = headDepth === 0 && !!ctx.constructionData.cement_pad?.thickness;
+  const yRiserTop = headInPanel ? ctx.yScale(headDepth) - (padOnHead ? ctx.renderConfig.construction.cementPad.height - riserBreakAmplitude(xScale(riserD)) : 0) : ctx.yScale(ctx.depthFrom);
+  const { riserBottom: yRiserBottom, body } = getPumpSpans(
+    yRiserTop,
+    ctx.yScale(ctx.depthTo),
+    yBodyTop,
+    yIntake
+  );
+  const r = Math.min(3, (bodyRight - bodyLeft) / 4);
+  const entered = selection.enter().append("g").attr("class", cls.item).on("mouseover", ctx.tooltips.pump.show).on("mouseout", ctx.tooltips.pump.hide);
+  entered.append("path").attr("class", `${cls.item}-riser-fill`);
+  entered.append("path").attr("class", `${cls.item}-riser`);
+  entered.append("path").attr("class", `${cls.item}-body`);
+  entered.append("path").attr("class", `${cls.item}-intake`);
+  const merged = entered.merge(selection);
+  const top = getRiserTop(riserLeft, riserRight, yRiserTop, headInPanel);
+  merged.select(`.${cls.item}-riser-fill`).attr(
+    "d",
+    yRiserBottom > yRiserTop ? `M${riserLeft},${yRiserTop}${top.edge}V${yRiserBottom}H${riserLeft}Z` : ""
+  ).attr("fill", theme.riserFill).attr("stroke", "none");
+  merged.select(`.${cls.item}-riser`).attr(
+    "d",
+    yRiserBottom > yRiserTop ? `M${riserLeft},${yRiserTop}V${yRiserBottom}M${riserRight},${yRiserTop}V${yRiserBottom}${top.breakLine}` : ""
+  ).attr("stroke-linejoin", "round").attr("fill", "none").attr("stroke", theme.riserStroke).attr("stroke-width", theme.riserStrokeWidth);
+  let bodyPath = "";
+  if (body) {
+    const rt = body.cutTop ? 0 : Math.min(r, (body.bottom - body.top) / 2);
+    const rb = body.cutBottom ? 0 : Math.min(r, (body.bottom - body.top) / 2);
+    const { top: top2, bottom } = body;
+    bodyPath = `M${bodyLeft + rt},${top2}H${bodyRight - rt}Q${bodyRight},${top2} ${bodyRight},${top2 + rt}V${bottom - rb}Q${bodyRight},${bottom} ${bodyRight - rb},${bottom}H${bodyLeft + rb}Q${bodyLeft},${bottom} ${bodyLeft},${bottom - rb}V${top2 + rt}Q${bodyLeft},${top2} ${bodyLeft + rt},${top2}Z`;
+  }
+  merged.select(`.${cls.item}-body`).attr("d", bodyPath).attr("fill", theme.fill).attr("stroke", theme.stroke).attr("stroke-width", theme.strokeWidth);
+  const hatchY = [
+    yIntake - cfg.bodyHeight * 0.3,
+    yIntake - cfg.bodyHeight * 0.15
+  ].filter((y) => body && y > body.top && y < body.bottom);
+  merged.select(`.${cls.item}-intake`).attr(
+    "d",
+    hatchY.map((y) => `M${bodyLeft + 1.5},${y}H${bodyRight - 1.5}`).join("")
+  ).attr("fill", "none").attr("stroke", theme.stroke).attr("stroke-width", 0.8);
+}
 
 // src/renderers/unit-labels.renderer.ts
 function drawUnitLabels(ctx, data) {
-  if (!ctx.renderConfig.unitLabels.active || !data.length) return;
   const {
     groups: { unitLabelsGroup },
     depthFrom,
@@ -1890,6 +2882,7 @@ function drawUnitLabels(ctx, data) {
     classes
   } = ctx;
   unitLabelsGroup.selectAll("*").remove();
+  if (!renderConfig.unitLabels.active || !data.length) return;
   const ru = renderConfig.unitLabels;
   const rut = theme.unitLabels;
   const sw = ru.stripWidth;
@@ -1970,7 +2963,7 @@ function buildSvgStyleBlock(theme) {
 }
 
 // src/Renderer.ts
-var d38 = { ...d3module2, tip: d3tip2 };
+var d310 = { ...d3module2, tip: d3tip2 };
 var WellRenderer = class {
   /**
    * @param svgs - One entry per SVG panel; multi-entry for split-panel layouts.
@@ -2030,12 +3023,14 @@ 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 = d38.select(selector);
+    const svg = d310.select(selector);
     svg.selectAll("*").remove();
     svg.attr("height", svgHeight).attr("width", svgWidth);
     const defs = svg.append("defs");
     defs.append("style").text(buildSvgStyleBlock(this.theme));
     defs.append("clipPath").attr("id", clipId).append("rect").attr("id", clipRectId).attr("x", 0).attr("y", 0).attr("width", 1e5).attr("height", 1e4);
+    svg.append("g").attr("class", this.classes.overview.group).attr("transform", `translate(0, ${margins.top})`);
+    svg.append("g").attr("class", this.classes.columnHeaders.group);
     const poco = svg.append("g").attr("class", this.classes.wellGroup);
     const geologic = poco.append("g").attr("class", this.classes.geologicGroup).attr("transform", `translate(${margins.left}, ${margins.top})`);
     geologic.append("g").attr("class", this.classes.yAxis);
@@ -2050,6 +3045,7 @@ 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);
+    poco.append("g").attr("class", this.classes.markers.group).attr("transform", `translate(${margins.left}, ${margins.top})`);
     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);
@@ -2057,12 +3053,23 @@ var WellRenderer = class {
     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.pump.group);
     construction.append("g").attr("class", this.classes.centralizer.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);
+    poco.append("g").attr("class", this.classes.overlap.group).attr("transform", `translate(${margins.left}, ${margins.top})`);
     Object.values(this.textures).forEach((texture) => svg.call(texture));
-    return { svg, height, width, margins, clipId, clipRectId };
+    return {
+      svg,
+      height,
+      width,
+      margins,
+      clipId,
+      clipRectId,
+      depthRange: inst.depthRange,
+      repeatedTo: inst.repeatedTo
+    };
   }
   /** Renders a standalone legend into the element matched by `selector`. */
   renderLegend(selector, profile) {
@@ -2073,6 +3080,30 @@ var WellRenderer = class {
       textures: this.renderConfig.textures
     });
   }
+  /** Lists the legend entries `profile` needs, labeled from `renderConfig.legend.labels`. */
+  getLegendItems(profile) {
+    return getWellLegendItems(profile, this.renderConfig.legend.labels);
+  }
+  /**
+   * Renders one legend entry's symbol (see {@link getLegendItems}) into its
+   * own SVG matched by `selector`, with the textures it needs defined inside.
+   */
+  renderLegendSymbol(selector, item) {
+    drawWellLegendSymbol(selector, item, {
+      theme: this.theme,
+      classNames: this.classes.legend,
+      textures: this.renderConfig.textures
+    });
+  }
+  /**
+   * Renders one lithology layer's fill as a `size`×`size` square into its
+   * own SVG matched by `selector`, with its texture defined inside (e.g. for
+   * a swatch in a PDF table). Call after `prepareSvg()`, which loads the
+   * FGDC textures.
+   */
+  renderLithologySwatch(selector, layer, size = 10) {
+    drawLithologySwatch(selector, layer, { size, theme: this.theme });
+  }
   /**
    * 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`
@@ -2089,7 +3120,7 @@ var WellRenderer = class {
    * (defaults to `1`, i.e. the initial fit-to-container view).
    */
   resetZoom() {
-    const target = d38.zoomIdentity.scale(this.renderConfig.zoomLevel ?? 1);
+    const target = d310.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);
@@ -2101,7 +3132,46 @@ var WellRenderer = class {
    */
   getZoomScale() {
     const node = this.instanceStates[0]?.svg.node();
-    return node ? d38.zoomTransform(node).k : 1;
+    return node ? d310.zoomTransform(node).k : 1;
+  }
+  /**
+   * Removes everything drawn on every panel (layers, labels, axis,
+   * highlights) and keeps the structure `prepareSvg()` built, so the next
+   * `draw()` needs no new `prepareSvg()`. `draw()` calls it for an empty well.
+   */
+  clear() {
+    const c = this.classes;
+    const layerGroups = [
+      c.overview.group,
+      c.columnHeaders.group,
+      c.yAxis,
+      c.unitLabels.group,
+      c.lithology.group,
+      c.caves.group,
+      c.labels.lithology.group,
+      c.highlights.geologicGroup,
+      c.highlights.constructionGroup,
+      c.highlights.fracturesGroup,
+      c.markers.group,
+      c.cementPad.group,
+      c.boreHole.group,
+      c.surfaceCase.group,
+      c.holeFill.group,
+      c.wellCase.group,
+      c.wellScreen.group,
+      c.reduction.group,
+      c.pump.group,
+      c.centralizer.group,
+      c.conflict.group,
+      c.constructionLabels.group,
+      c.overlap.group
+    ];
+    for (const { svg } of this.instanceStates) {
+      for (const cls of layerGroups) {
+        svg.select(`.${cls}`).selectAll("*").interrupt().remove();
+      }
+      svg.select(`.${c.fractures.group}`).selectAll(`g.${c.fractures.item}`).interrupt().remove();
+    }
   }
   /**
    * Initialises the SVG DOM structure and preloads FGDC textures.
@@ -2114,15 +3184,20 @@ var WellRenderer = class {
     );
   }
   /**
-   * Renders the well profile into all configured SVG panels.
+   * Renders the well profile into all configured SVG panels. Layers the
+   * profile no longer has are removed; an empty well (`isWellEmpty`) clears
+   * the panels (see {@link clear}).
    * @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) {
+    if (isWellEmpty(profile)) {
+      this.clear();
+      return;
+    }
+    if (parseFormatVersion(profile.version)?.major !== 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.`
       );
@@ -2133,35 +3208,18 @@ var WellRenderer = class {
     }
     const highlights = options.highlights ?? {};
     const maxValues = getProfileLastItemsDepths(profile);
-    const maxYValues = d38.max(maxValues) || 0;
-    if (this.instanceStates.length === 1) {
-      this.drawLogToInstance(
-        this.instanceStates[0],
-        profile,
-        0,
-        maxYValues,
-        highlights
-      );
-      return;
-    }
-    const totalHeight = this.instanceStates.reduce((s, st) => s + st.height, 0) || 1;
-    const yScaleGlobal = d38.scaleLinear().domain([0, maxYValues]).range([0, totalHeight]);
-    let currentDepth = 0;
-    for (const state of this.instanceStates) {
-      const maxSvgDepth = yScaleGlobal.invert(
-        yScaleGlobal(currentDepth) + state.height
-      );
-      this.drawLogToInstance(
-        state,
-        profile,
-        currentDepth,
-        maxSvgDepth,
-        highlights
-      );
-      currentDepth = maxSvgDepth;
-    }
+    const maxYValues = d310.max(maxValues) || 0;
+    const windows = resolvePanelWindows(
+      this.instanceStates,
+      maxYValues,
+      getProfileTopDepth(profile)
+    );
+    this.instanceStates.forEach((state, i) => {
+      const [from, to] = windows[i];
+      this.drawLogToInstance(state, profile, from, to, maxYValues, highlights);
+    });
   }
-  drawLogToInstance(state, profile, depthFrom, depthTo, highlights = {}) {
+  drawLogToInstance(state, profile, depthFrom, depthTo, totalDepth, highlights = {}) {
     const svg = state.svg;
     const pocoGroup = svg.select(`.${this.classes.wellGroup}`);
     const lithologyGroup = svg.select(`.${this.classes.lithology.group}`);
@@ -2179,6 +3237,7 @@ var WellRenderer = class {
     const wellScreenGroup = svg.select(`.${this.classes.wellScreen.group}`);
     const reductionGroup = svg.select(`.${this.classes.reduction.group}`);
     const centralizerGroup = svg.select(`.${this.classes.centralizer.group}`);
+    const pumpGroup = svg.select(`.${this.classes.pump.group}`);
     const conflictGroup = svg.select(`.${this.classes.conflict.group}`);
     const constructionLabelsGroup = svg.select(
       `.${this.classes.constructionLabels.group}`
@@ -2193,13 +3252,19 @@ var WellRenderer = class {
       `.${this.classes.highlights.fracturesGroup}`
     );
     const unitLabelsGroup = svg.select(`.${this.classes.unitLabels.group}`);
+    const overviewGroup = svg.select(`.${this.classes.overview.group}`);
+    const columnHeadersGroup = svg.select(
+      `.${this.classes.columnHeaders.group}`
+    );
+    const markersGroup = svg.select(`.${this.classes.markers.group}`);
+    const overlapGroup = svg.select(`.${this.classes.overlap.group}`);
     const svgWidth = state.width + state.margins.left + state.margins.right;
     const svgHeight = state.height + state.margins.top + state.margins.bottom;
     const { pocoWidthRatio, pocoCenterRatio } = this.renderConfig.layout;
     const POCO_WIDTH = svgWidth * pocoWidthRatio;
     const POCO_CENTER = svgWidth * pocoCenterRatio;
     const { duration, ease } = this.renderConfig.animation;
-    const transition = d38.transition().duration(duration).ease(ease);
+    const transition = d310.transition().duration(duration).ease(ease);
     const tooltips = populateTooltips(
       svg,
       this.classes,
@@ -2228,11 +3293,11 @@ var WellRenderer = class {
       fractures: profile.fractures
     };
     const contentHeight = svgHeight - state.margins.top - state.margins.bottom;
-    const yScaleLocal = d38.scaleLinear().domain([depthFrom, depthTo]).range([0, contentHeight]);
+    const yScaleLocal = d310.scaleLinear().domain([depthFrom, depthTo]).range([0, contentHeight]);
     const depthFactor = this.units.length === "ft" ? 3.28084 : 1;
-    const yScaleAxis = d38.scaleLinear().domain([depthFrom * depthFactor, depthTo * depthFactor]).range([0, contentHeight]);
-    const yAxis = d38.axisLeft(yScaleAxis).tickFormat(
-      (d) => `${formatNumber3(Number(d), {
+    const yScaleAxis = d310.scaleLinear().domain([depthFrom * depthFactor, depthTo * depthFactor]).range([0, contentHeight]);
+    const yAxis = d310.axisLeft(yScaleAxis).tickFormat(
+      (d) => `${formatNumber4(Number(d), {
         maximumFractionDigits: this.units.length === "ft" ? 1 : 2,
         locale: this.locale
       })}${getLengthUnit(this.units.length)}`
@@ -2274,10 +3339,15 @@ var WellRenderer = class {
       wellScreenGroup,
       reductionGroup,
       centralizerGroup,
+      pumpGroup,
       conflictGroup,
       highlightsGeologicGroup,
       highlightsConstructionGroup,
-      highlightsFracturesGroup
+      highlightsFracturesGroup,
+      overviewGroup,
+      columnHeadersGroup,
+      markersGroup,
+      overlapGroup
     };
     const ctx = {
       svg,
@@ -2291,6 +3361,8 @@ var WellRenderer = class {
       geoXRight,
       depthFrom,
       depthTo,
+      totalDepth,
+      repeatedTo: state.repeatedTo,
       yScale: yScaleLocal,
       transition,
       tooltips,
@@ -2304,6 +3376,7 @@ var WellRenderer = class {
       groups
     };
     const inDepth = filterByDepth(depthFrom, depthTo);
+    const currentPump = getCurrentPump2(profile);
     const filteredConstruction = {
       ...constructionData,
       bore_hole: constructionData.bore_hole.filter(inDepth),
@@ -2328,33 +3401,14 @@ var WellRenderer = class {
         if (!d) return null;
         return transform.k * spanH(d);
       });
-      surfaceCaseGroup.selectAll(`g.${this.classes.surfaceCase.rect}`).each((d, i, nodes) => {
-        if (!d) return;
-        const sc = d;
-        const g = d38.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 = getProfileDiamValues5(constructionData);
-      const xScaleReduction = d38.scaleLinear().domain([0, d38.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}`;
-      });
+      layoutConstruction(zoomedCtx);
+      drawCementPad(zoomedCtx, constructionData.cement_pad);
       fracturesGroup.selectAll(`g.${this.classes.fractures.item}`).attr("transform", (d) => {
         if (!d) return null;
         const f = d;
         const cx = pocoCenterX;
         const cy = transform.applyY(yScaleLocal(f.depth));
-        return `translate(0,${cy}) rotate(${f.dip},${cx},0)`;
+        return `translate(0,${cy}) rotate(${fractureDip(f.dip)},${cx},0)`;
       });
       drawCaves(zoomedCtx, geologicData.caves?.filter(inDepth) ?? []);
       drawUnitLabels(zoomedCtx, profile.lithology?.filter(inDepth) ?? []);
@@ -2365,11 +3419,17 @@ var WellRenderer = class {
         ) ?? [],
         caves: profile.caves?.filter(inDepth) ?? []
       });
+      drawPump(zoomedCtx, currentPump);
       drawCentralizers(zoomedCtx, filteredConstruction);
       drawConstructionLabels(zoomedCtx, {
         well_case: constructionData.well_case.filter(inDepth),
         well_screen: constructionData.well_screen.filter(inDepth)
       });
+      drawMarkers(zoomedCtx, {
+        lithology: profile.lithology ?? [],
+        fractures: profile.fractures ?? []
+      });
+      drawOverlap(zoomedCtx);
       drawHighlights(zoomedCtx, highlights);
       this.onZoom?.(transform.k);
     };
@@ -2392,11 +3452,19 @@ var WellRenderer = class {
         ) ?? []
       );
       drawConstructive(ctx, filteredConstruction);
+      drawPump(ctx, currentPump);
       drawCentralizers(ctx, filteredConstruction);
       drawConstructionLabels(ctx, {
         well_case: filteredConstruction.well_case,
         well_screen: filteredConstruction.well_screen
       });
+      drawMarkers(ctx, {
+        lithology: profile.lithology ?? [],
+        fractures: profile.fractures ?? []
+      });
+      drawOverview(ctx, profile.lithology ?? []);
+      drawColumnHeaders(ctx);
+      drawOverlap(ctx);
       svg.select(`#${state.clipRectId}`).attr("y", 0).attr("height", svgHeight);
       drawHighlights(ctx, highlights);
     };
@@ -2412,7 +3480,7 @@ var WellRenderer = class {
     }
     const { zoom: zoomEnabled, pan: panEnabled } = this.renderConfig;
     if (zoomEnabled || panEnabled) {
-      const zoomNode = d38.zoom();
+      const zoomNode = d310.zoom();
       if (zoomEnabled || panEnabled) zoomNode.on("zoom", zooming);
       zoomNode.scaleExtent(
         zoomEnabled ? [
@@ -2428,7 +3496,7 @@ var WellRenderer = class {
       if (initialZoom !== 1) {
         asSvgElement(svg).call(
           zoomNode.transform,
-          d38.zoomIdentity.scale(initialZoom)
+          d310.zoomIdentity.scale(initialZoom)
         );
       }
     }
@@ -2442,10 +3510,13 @@ export {
   WellRenderer,
   applyRenderLocale,
   drawWellLegend,
+  drawWellLegendSymbol,
   formatDiameter,
   formatLength,
   getDiameterUnit,
   getLengthUnit,
+  getProfileTopDepth,
+  getWellLegendItems,
   importFgdcTextures,
   resolveRenderLabel
 };