@welldot/render 0.0.1

package/dist/index.js

@@ -0,0 +1,2036 @@
+// src/configs/render.configs.ts
+import { easeCubic } from "d3";
+var DEFAULT_WELL_THEME = {
+  lithology: { stroke: "#101010", strokeWidth: 1 },
+  lithologyTexture: { size: 150, strokeWidth: 0.8, stroke: "#303030" },
+  cave: {
+    dryStroke: "#333333",
+    wetStroke: "#1a6fa8",
+    fillOpacity: 0.6,
+    contactStrokeWidth: 1.2
+  },
+  fracture: {
+    dryStroke: "#000000",
+    wetStroke: "#1a6fa8",
+    swarm: {
+      centralStrokeWidth: 1.2,
+      sideStrokeWidthBase: 0.6,
+      sideStrokeWidthVariance: 0.6
+    },
+    single: {
+      mainStrokeWidth: 1.8,
+      crackStrokeWidth: 0.7
+    }
+  },
+  cementPad: { stroke: "#303030", strokeWidth: 2 },
+  boreHole: {
+    fill: "#ffffff",
+    stroke: "#191919",
+    strokeDasharray: "4, 3",
+    opacity: 0.7,
+    strokeWidth: 1.2
+  },
+  surfaceCase: { stroke: "#000000", strokeWidth: 4 },
+  holeFill: { stroke: "#303030", strokeWidth: 2 },
+  wellCase: { fill: "#ffffff", stroke: "#303030", strokeWidth: 2 },
+  wellScreen: { stroke: "#303030", strokeWidth: 2 },
+  conflict: { stroke: "#e52117", strokeWidth: 4 },
+  unitLabels: {
+    geologicFill: "#f0f0f0",
+    aquiferFill: "#dff0ff",
+    stroke: "#303030",
+    strokeWidth: 0.4,
+    fontSize: 5.5,
+    fontFamily: "sans-serif",
+    fontWeight: 400
+  },
+  constructionLabels: {
+    fontSize: 7.5,
+    labelFill: "#ffffff",
+    labelColor: "#303030",
+    fontFamily: "sans-serif",
+    fontWeight: 400
+  },
+  labels: {
+    dividerStroke: "#888888",
+    dividerStrokeWidth: 0.5,
+    dividerStrokeDasharray: "2, 2",
+    fontSize: 7,
+    color: "#333",
+    headerFont: "monospace",
+    bodyColor: "#555",
+    bodyFont: "sans-serif",
+    scaleFont: "monospace",
+    depthTipFill: "#ffffff",
+    depthTipRadius: 2,
+    annotationBg: "#ffffff",
+    annotationBgOpacity: 0.85,
+    annotationRadius: 2,
+    headerFontWeight: 600,
+    bodyFontWeight: 400
+  },
+  legend: {
+    borderStrokeWidth: 0.8,
+    fractureStrokeWidth: 1.5,
+    fractureSideStrokeWidth: 0.8,
+    itemStrokeWidth: 0.8,
+    fontSize: 7,
+    fontFamily: "sans-serif",
+    titleFontWeight: "bold",
+    labelFontWeight: 400
+  }
+};
+var DEFAULT_HIGHLIGHT_CONFIG = {
+  stroke: "#e52117",
+  strokeWidth: 2,
+  fill: "none",
+  fillOpacity: 0,
+  padding: 2,
+  strokeDasharray: void 0,
+  labelFontSize: 7,
+  labelPadding: 3,
+  labelBackground: "#e52117",
+  labelColor: "#ffffff",
+  labelRadius: 2
+};
+var STATIC_RENDER_CONFIG = {
+  zoom: true,
+  pan: true,
+  zoomLevel: 1,
+  animation: { duration: 600, ease: easeCubic },
+  geologic: { xLeft: 20, xRightInset: 300 },
+  layout: {
+    pocoWidthRatio: 0.21,
+    // construction column occupies 21% of total SVG width
+    pocoCenterRatio: -0.39
+    // construction center x-offset (negative = shift left of SVG centre)
+  },
+  caves: {
+    pathSteps: 40,
+    amplitude: {
+      ratio: 0.12,
+      // cave contact waviness: 12% of the cave band pixel height
+      min: 1,
+      max: 5.5
+    }
+  },
+  fractures: {
+    widthMultiplier: 1.2,
+    hitBuffer: { single: 8, swarm: 15 },
+    swarm: {
+      lineCountBase: 3,
+      lineCountVariance: 11,
+      spread: 18
+    }
+  },
+  construction: {
+    cementPad: { widthMultiplier: 0.9, thicknessMultiplier: 1.3 },
+    surfaceCase: { diameterPaddingRatio: 0.1 }
+  },
+  labels: {
+    active: true,
+    typeLabels: { fracture: "fratura", cave: "caverna" },
+    depthTipHeight: 11,
+    depthTipPadX: 2,
+    descriptionXOffset: 20,
+    descriptionMaxWidth: 250,
+    stackingLineHeight: 10,
+    stackingGap: 0,
+    fractureLabelLeaderGap: 5,
+    lithology: true
+  },
+  unitLabels: {
+    active: true,
+    xOffset: 2,
+    stripWidth: 8,
+    minHeightForText: 8,
+    innerDividerWidth: 1.5,
+    outerEdgeWidth: 0.6
+  },
+  constructionLabels: {
+    active: true,
+    xOffset: -12,
+    labelRadius: 2,
+    labelMaxWidth: 90,
+    labels: {
+      wellCasePrefix: "Revest.",
+      wellScreenPrefix: "Filtro",
+      wellScreenSlotPrefix: "Ranhura:"
+    }
+  },
+  textures: {
+    pad: { background: "#ffffff", stroke: "#303030" },
+    conflict: { stroke: "#E52117" },
+    cave_dry: { size: 8, stroke: "#333333", background: "#ffffff" },
+    cave_wet: { size: 8, stroke: "#1a6fa8", background: "#ffffff" },
+    seal: { background: "#ffffff" },
+    gravel_pack: { background: "#ffffff" },
+    well_screen: { size: 40, strokeWidth: 2, background: "#ffffff" },
+    surface_case: {
+      orientation: ["vertical", "horizontal"],
+      size: 4,
+      strokeWidth: 1,
+      shapeRendering: "crispEdges",
+      stroke: "#303030",
+      background: "#fff"
+    }
+  },
+  legend: {
+    title: "LEGENDA",
+    itemWidth: 110,
+    height: 44,
+    padding: 4,
+    maxWidth: 700,
+    borderRadius: 3,
+    labels: {
+      fractureSingle: "Fratura simples",
+      fractureSwarm: "Enxame de fraturas",
+      fractureWater: "Entrada d'\xE1gua",
+      caveDry: "Caverna seca",
+      caveWet: "Caverna c/ \xE1gua",
+      boreHole: "Perfura\xE7\xE3o",
+      surfaceCase: "Tubo guia",
+      holeFillGravel: "Pr\xE9-filtro",
+      holeFillSeal: "Veda\xE7\xE3o",
+      wellCase: "Revestimento",
+      wellScreen: "Filtro",
+      cementPad: "Laje de cimento",
+      conflict: "Conflito"
+    }
+  },
+  highlights: DEFAULT_HIGHLIGHT_CONFIG
+};
+var INTERACTIVE_RENDER_CONFIG = {
+  zoom: true,
+  pan: true,
+  zoomLevel: 1,
+  animation: { duration: 600, ease: easeCubic },
+  geologic: { xLeft: 6, xRightInset: 56 },
+  layout: {
+    pocoWidthRatio: 0.25,
+    // construction column occupies 25% of total SVG width
+    pocoCenterRatio: 0.11
+    // construction center x-offset (positive = shift right of SVG centre)
+  },
+  caves: {
+    pathSteps: 40,
+    amplitude: {
+      ratio: 0.12,
+      // cave contact waviness: 12% of the cave band pixel height
+      min: 1,
+      max: 5.5
+    }
+  },
+  fractures: {
+    widthMultiplier: 1.2,
+    hitBuffer: { single: 8, swarm: 15 },
+    swarm: {
+      lineCountBase: 3,
+      lineCountVariance: 11,
+      spread: 18
+    }
+  },
+  construction: {
+    cementPad: { widthMultiplier: 0.9, thicknessMultiplier: 1.3 },
+    surfaceCase: { diameterPaddingRatio: 0.1 }
+  },
+  labels: {
+    active: false,
+    typeLabels: { fracture: "fratura", cave: "caverna" },
+    depthTipHeight: 11,
+    depthTipPadX: 2,
+    descriptionXOffset: 78,
+    descriptionMaxWidth: 226,
+    stackingLineHeight: 11,
+    stackingGap: 0
+  },
+  unitLabels: {
+    active: false,
+    xOffset: 0,
+    stripWidth: 8,
+    minHeightForText: 8,
+    innerDividerWidth: 1.5,
+    outerEdgeWidth: 0.6
+  },
+  constructionLabels: {
+    active: false,
+    xOffset: 10,
+    labelRadius: 2,
+    labels: {
+      wellCasePrefix: "Revest.",
+      wellScreenPrefix: "Filtro",
+      wellScreenSlotPrefix: "Ranhura:"
+    }
+  },
+  textures: {
+    pad: { background: "#ffffff", stroke: "#303030" },
+    conflict: { stroke: "#E52117" },
+    cave_dry: { size: 8, stroke: "#333333", background: "#ffffff" },
+    cave_wet: { size: 8, stroke: "#1a6fa8", background: "#ffffff" },
+    seal: { background: "#ffffff" },
+    gravel_pack: { background: "#ffffff" },
+    well_screen: { size: 40, strokeWidth: 2, background: "#ffffff" },
+    surface_case: {
+      orientation: ["vertical", "horizontal"],
+      size: 4,
+      strokeWidth: 1,
+      shapeRendering: "crispEdges",
+      stroke: "#303030",
+      background: "#fff"
+    }
+  },
+  legend: {
+    title: "LEGENDA",
+    itemWidth: 110,
+    height: 44,
+    padding: 4,
+    maxWidth: 700,
+    borderRadius: 3,
+    labels: {
+      fractureSingle: "Fratura simples",
+      fractureSwarm: "Enxame de fraturas",
+      fractureWater: "Entrada d'\xE1gua",
+      caveDry: "Caverna seca",
+      caveWet: "Caverna c/ \xE1gua",
+      boreHole: "Perfura\xE7\xE3o",
+      surfaceCase: "Tubo guia",
+      holeFillGravel: "Pr\xE9-filtro",
+      holeFillSeal: "Veda\xE7\xE3o",
+      wellCase: "Revestimento",
+      wellScreen: "Filtro",
+      cementPad: "Laje de cimento",
+      conflict: "Conflito"
+    }
+  },
+  highlights: DEFAULT_HIGHLIGHT_CONFIG
+};
+
+// src/utils/fgdcTextures.ts
+async function importFgdcTextures() {
+  const fgdcTextures = await import("./fgdcTextures-5IIUV7QV.js");
+  return fgdcTextures.default;
+}
+
+// src/Renderer.ts
+import * as d3module3 from "d3";
+import d3tip2 from "d3-tip";
+import { defu as defu2 } from "defu";
+
+// src/configs/render.textures.ts
+import textures from "textures";
+function createWellTextures(cfg) {
+  const pad = {
+    background: "#ffffff",
+    stroke: "#303030",
+    ...cfg?.pad
+  };
+  const conflict = {
+    stroke: "#E52117",
+    ...cfg?.conflict
+  };
+  const cave_dry = {
+    size: 8,
+    stroke: "#333333",
+    background: "#ffffff",
+    ...cfg?.cave_dry
+  };
+  const cave_wet = {
+    size: 8,
+    stroke: "#1a6fa8",
+    background: "#ffffff",
+    ...cfg?.cave_wet
+  };
+  const seal = {
+    background: "#ffffff",
+    ...cfg?.seal
+  };
+  const gravel_pack = {
+    size: 16,
+    background: "#ffffff",
+    ...cfg?.gravel_pack
+  };
+  const well_screen = {
+    size: 40,
+    strokeWidth: 2,
+    background: "#ffffff",
+    ...cfg?.well_screen
+  };
+  const surface_case = {
+    orientation: ["vertical", "horizontal"],
+    size: 4,
+    strokeWidth: 1,
+    shapeRendering: "crispEdges",
+    stroke: "#303030",
+    background: "#fff",
+    ...cfg?.surface_case
+  };
+  return {
+    pad: textures.lines().heavier(10).thinner(1.5).stroke(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),
+    seal: textures.lines().thicker().background(seal.background),
+    gravel_pack: textures.circles().size(gravel_pack.size).complement().background(gravel_pack.background),
+    well_screen: textures.paths().d((s) => `M ${s / 4} ${s / 4} l ${s / 2} 0 `).size(well_screen.size).strokeWidth(well_screen.strokeWidth).thicker(2).background(well_screen.background),
+    surface_case: textures.lines().orientation(...surface_case.orientation).size(surface_case.size).strokeWidth(surface_case.strokeWidth).shapeRendering(surface_case.shapeRendering).stroke(surface_case.stroke).background(surface_case.background)
+  };
+}
+
+// src/Renderer.ts
+import {
+  isWellEmpty
+} from "@welldot/core";
+import { getProfileLastItemsDepths } from "@welldot/utils";
+
+// src/utils/format.utils.ts
+var MM_TO_INCHES = 0.0393701;
+var M_TO_FT = 3.28084;
+function formatLength(m, units) {
+  return units === "ft" ? (m * M_TO_FT).toFixed(1) : String(m);
+}
+function formatDiameter(mm, units) {
+  return units === "inches" ? (mm * MM_TO_INCHES).toFixed(2) : String(mm);
+}
+function getLengthUnit(units) {
+  return units === "ft" ? "ft" : "m";
+}
+function getDiameterUnit(units) {
+  return units === "inches" ? '"' : "mm";
+}
+
+// src/configs/render.classnames.ts
+var DEFAULT_COMPONENTS_CLASS_NAMES = {
+  tooltip: {
+    root: "wp-tooltip",
+    title: "wp-tooltip-title",
+    primaryInfo: "wp-tooltip-primary",
+    secondaryInfo: "wp-tooltip-secondary"
+  },
+  yAxis: "wp-y-axis",
+  wellGroup: "wp-well-group",
+  geologicGroup: "wp-geologic-group",
+  lithology: {
+    group: "lithology-group",
+    rect: "lithology-rect"
+  },
+  fractures: {
+    group: "fractures-group",
+    item: "fracture-group",
+    hitArea: "fracture-hit",
+    line: "fracture-line",
+    polyline: "fracture-poly"
+  },
+  caves: {
+    group: "caves-group",
+    item: "cave-group",
+    fill: "cave-fill",
+    contact: "cave-contact"
+  },
+  constructionGroup: "construction-group",
+  constructionLabels: {
+    group: "construction-labels-group"
+  },
+  cementPad: {
+    group: "cement-pad",
+    item: "cement-pad-rect"
+  },
+  boreHole: {
+    group: "hole",
+    rect: "bore-hole-rect"
+  },
+  surfaceCase: {
+    group: "surface-case",
+    rect: "surface-case-rect"
+  },
+  holeFill: {
+    group: "hole-fill",
+    rect: "hole-fill-rect"
+  },
+  wellCase: {
+    group: "well-case",
+    rect: "well-case-rect"
+  },
+  wellScreen: {
+    group: "well-screen",
+    rect: "well-screen-rect"
+  },
+  conflict: {
+    group: "conflict",
+    rect: "conflict-rect"
+  },
+  unitLabels: {
+    group: "unit-labels-group",
+    geoRect: "unit-geo-rect",
+    aqRect: "unit-aq-rect",
+    text: "unit-label-text"
+  },
+  labels: {
+    lithology: {
+      group: "lithology-labels-group",
+      depth: "lithology-depth-tip",
+      label: "lithology-label",
+      divider: "lithology-label-divider"
+    }
+  },
+  legend: {
+    border: "wp-legend-border",
+    title: "wp-legend-title",
+    item: "wp-legend-item",
+    label: "wp-legend-label",
+    fracturePoly: "fracture-poly",
+    caveFill: "cave-fill",
+    constructionRect: "construction-rect"
+  },
+  highlights: {
+    geologicGroup: "wp-highlights-geologic",
+    constructionGroup: "wp-highlights-construction",
+    fracturesGroup: "wp-highlights-fractures",
+    item: "wp-highlight-item",
+    rect: "wp-highlight-rect",
+    label: "wp-highlight-label",
+    labelBg: "wp-highlight-label-bg"
+  }
+};
+
+// src/utils/render.utils.ts
+import textures2 from "textures";
+
+// src/utils/d3.utils.ts
+function mergeEnter(enter, update) {
+  return enter.merge(update);
+}
+function withTransition(selection, transition) {
+  return selection.transition(transition);
+}
+function asSvgElement(sel) {
+  return sel;
+}
+var getYAxisFunctions = (yScale, clamp) => {
+  const clampFrom = clamp?.from ?? -Infinity;
+  const clampTo = clamp?.to ?? Infinity;
+  return {
+    getHeight: ({ from, to }) => Math.max(
+      0,
+      yScale(Math.min(to, clampTo)) - yScale(Math.max(from, clampFrom))
+    ),
+    getYPos: ({ from }) => yScale(Math.max(from, clampFrom))
+  };
+};
+function filterByDepth(depthFrom, depthTo) {
+  return (l) => !(l.to <= depthFrom || l.from >= depthTo);
+}
+
+// src/utils/geometry.utils.ts
+var wavyContact = (xLeft, xRight, baseY, amp, steps, rng) => {
+  const pts = [];
+  let offset = 0;
+  for (let i = 0; i < steps; i++) {
+    const t = i / (steps - 1);
+    const x = xLeft + t * (xRight - xLeft);
+    offset += (rng() - 0.5) * amp * 0.6;
+    offset *= 0.75;
+    pts.push([x, baseY + offset]);
+  }
+  return pts;
+};
+var ptsToSmoothPath = (pts, options = {}) => {
+  if (pts.length < 2) return "";
+  const n = pts.length;
+  const tension = 0.35;
+  const segments = [];
+  for (let i = 0; i < n - 1; i++) {
+    const p0 = pts[Math.max(0, i - 1)];
+    const p1 = pts[i];
+    const p2 = pts[i + 1];
+    const p3 = pts[Math.min(n - 1, i + 2)];
+    const cp1x = p1[0] + (p2[0] - p0[0]) * tension;
+    const cp1y = p1[1] + (p2[1] - p0[1]) * tension;
+    const cp2x = p2[0] - (p3[0] - p1[0]) * tension;
+    const cp2y = p2[1] - (p3[1] - p1[1]) * tension;
+    segments.push(
+      `C ${cp1x.toFixed(1)},${cp1y.toFixed(1)} ${cp2x.toFixed(1)},${cp2y.toFixed(1)} ${p2[0].toFixed(1)},${p2[1].toFixed(1)}`
+    );
+  }
+  const body = segments.join(" ");
+  return options.omitMoveTo ? body : `M ${pts[0][0].toFixed(1)},${pts[0][1].toFixed(1)} ${body}`;
+};
+var makeSeededPrng = (seed, scramble = 6271) => {
+  let s = Math.abs(seed * scramble) | 1;
+  return () => {
+    s = s * 16807 % 2147483647;
+    return (s - 1) / 2147483646;
+  };
+};
+
+// src/utils/tooltips.utils.ts
+import * as d3module from "d3";
+import d3tip from "d3-tip";
+import sanitizeHtml from "sanitize-html";
+var d3 = Object.assign(d3module, { tip: d3tip });
+var esc = (v) => sanitizeHtml(String(v ?? ""), { allowedTags: [], allowedAttributes: {} });
+var populateTooltips = (svg, customClasses, units, tooltipConfig) => {
+  const svgEl = typeof svg.node === "function" ? svg.node() : null;
+  if (svgEl?.getAttribute("data-tooltips-init") === "true") {
+    return {};
+  }
+  const tipsText = {
+    geology: (_, d) => `
+        <span class="${customClasses.tooltip.title}">Litologia</span>
+        <span class="${customClasses.tooltip.primaryInfo}">De ${esc(formatLength(d.from, units.length))} ${esc(units.length)} at\xE9 ${esc(formatLength(d.to, units.length))} ${esc(units.length)}</span>
+        <span class="${customClasses.tooltip.secondaryInfo}"><strong>Descri\xE7\xE3o:</strong> ${esc(d.description)}</span>
+        ${d.geologic_unit ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>Unidade geol\xF3gica:</strong> ${esc(d.geologic_unit)}</span>` : ""}
+        ${d.aquifer_unit ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>Unidade aqu\xEDfera:</strong> ${esc(d.aquifer_unit)}</span>` : ""}
+      `,
+    hole: (_, d) => `
+        <span class="${customClasses.tooltip.title}">FURO</span>
+        <span class="${customClasses.tooltip.primaryInfo}">De ${esc(formatLength(d.from, units.length))} ${esc(units.length)} at\xE9 ${esc(formatLength(d.to, units.length))} ${esc(units.length)}</span>
+        <span class="${customClasses.tooltip.secondaryInfo}"><strong>Di\xE2metro:</strong>${esc(formatDiameter(d.diameter, units.diameter))} ${esc(units.diameter)}</span>
+        `,
+    surfaceCase: (_, d) => `
+            <span class="${customClasses.tooltip.title}">TUBO DE BOCA</span>
+            <span class="${customClasses.tooltip.primaryInfo}">De ${esc(formatLength(d.from, units.length))} ${esc(units.length)} at\xE9 ${esc(formatLength(d.to, units.length))} ${esc(units.length)}</span>
+            <span class="${customClasses.tooltip.secondaryInfo}"><strong>Di\xE2metro:</strong>${esc(formatDiameter(d.diameter, units.diameter))} ${esc(units.diameter)}</span>
+          `,
+    holeFill: (_, d) => `
+          <span class="${customClasses.tooltip.title}">ESP. ANULAR</span>
+          <span class="${customClasses.tooltip.primaryInfo}">De ${esc(formatLength(d.from, units.length))} ${esc(units.length)} at\xE9 ${esc(formatLength(d.to, units.length))} ${esc(units.length)}</span>
+          <span class="${customClasses.tooltip.secondaryInfo}"><strong>Di\xE2metro:</strong>${esc(formatDiameter(d.diameter, units.diameter))} ${esc(units.diameter)}</span>
+          <span class="${customClasses.tooltip.secondaryInfo}">
+            <strong>Descri\xE7\xE3o:</strong> ${esc(d.description)}
+          </span>
+          `,
+    wellCase: (_, d) => `
+          <span class="${customClasses.tooltip.title}">REVESTIMENTO</span>
+              <span class="${customClasses.tooltip.primaryInfo}">De ${esc(formatLength(d.from, units.length))} ${esc(units.length)} at\xE9 ${esc(formatLength(d.to, units.length))} ${esc(units.length)}</span>
+              <span class="${customClasses.tooltip.secondaryInfo}">
+                <strong>Di\xE2metro:</strong> ${esc(formatDiameter(d.diameter, units.diameter))} ${esc(units.diameter)}
+              </span>
+              <span class="${customClasses.tooltip.secondaryInfo}"><strong>Tipo:</strong> ${esc(d.type)}</span>
+          `,
+    wellScreen: (_, d) => `
+          <span class="${customClasses.tooltip.title}">FILTROS</span>
+              <span class="${customClasses.tooltip.primaryInfo}">De ${esc(formatLength(d.from, units.length))} ${esc(units.length)} at\xE9 ${esc(formatLength(d.to, units.length))} ${esc(units.length)}</span>
+              <span class="${customClasses.tooltip.secondaryInfo}">
+                <strong>Di\xE2metro:</strong> ${esc(formatDiameter(d.diameter, units.diameter))} ${esc(units.diameter)}</span>
+              <span class="${customClasses.tooltip.secondaryInfo}"><strong>Tipo:</strong> ${esc(d.type)}</span>
+              <span class="${customClasses.tooltip.secondaryInfo}">
+                <strong>Ranhura:</strong> ${esc(d.screen_slot_mm)} mm
+              </span>
+          `,
+    conflict: (_, d) => `
+          <span class="${customClasses.tooltip.title}">CONFLITO</span>
+          <span class="${customClasses.tooltip.primaryInfo}">De ${esc(formatLength(d.from, units.length))} ${esc(units.length)} at\xE9 ${esc(formatLength(d.to, units.length))} ${esc(units.length)}</span>
+        `,
+    fracture: (_, d) => {
+      const title = d.swarm ? "ENXAME DE FRATURAS" : "FRATURA";
+      return `
+          <span class="${customClasses.tooltip.title}">${title}</span>
+          <span class="${customClasses.tooltip.primaryInfo}"><strong>Profundidade:</strong> ${esc(formatLength(d.depth, units.length))} ${esc(units.length)}</span>
+          ${d.water_intake ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>Entrada d'\xE1gua:</strong> ${esc(formatLength(d.depth, units.length))} ${esc(units.length)}</span>` : ""}
+          <span class="${customClasses.tooltip.secondaryInfo}"><strong>Mergulho:</strong> ${esc(d.dip)}\xB0</span>
+          <span class="${customClasses.tooltip.secondaryInfo}"><strong>Azimute:</strong> ${esc(d.azimuth)}\xB0</span>
+          ${d.description ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>Descri\xE7\xE3o:</strong> ${esc(d.description)}</span>` : ""}
+        `;
+    },
+    cementPad: (_, d) => `
+          <span class="${customClasses.tooltip.title}">LAJE DE PROTE\xC7\xC3O</span>
+          <span class="${customClasses.tooltip.primaryInfo}">${esc(d.type)}</span>
+          <span class="${customClasses.tooltip.secondaryInfo}"><strong>Espessura:</strong>
+          ${esc(formatLength(d.thickness, units.length))} ${esc(units.length)}</span>
+          <span class="${customClasses.tooltip.secondaryInfo}">
+            <strong>Largura:</strong> ${esc(formatLength(d.width, units.length))} ${esc(units.length)}
+          </span>
+          <span class="${customClasses.tooltip.secondaryInfo}">
+            <strong>Comprimento:</strong> ${esc(formatLength(d.length, units.length))} ${esc(units.length)}
+          </span>
+        `,
+    cave: (_, d) => `
+          <span class="${customClasses.tooltip.title}">CAVERNA</span>
+          <span class="${customClasses.tooltip.primaryInfo}">De ${esc(formatLength(d.from, units.length))} ${esc(units.length)} at\xE9 ${esc(formatLength(d.to, units.length))} ${esc(units.length)}</span>
+          ${d.water_intake ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>Entrada d'\xE1gua</strong></span>` : ""}
+          ${d.description ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>Descri\xE7\xE3o:</strong> ${esc(d.description)}</span>` : ""}
+        `
+  };
+  const noop = { show: () => {
+  }, hide: () => {
+  } };
+  const tooltips = {};
+  Object.getOwnPropertyNames(tipsText).forEach((tipTextKey) => {
+    const enabled = tooltipConfig === void 0 ? true : tooltipConfig !== false && tooltipConfig.includes(tipTextKey);
+    if (!enabled) {
+      tooltips[tipTextKey] = noop;
+      return;
+    }
+    tooltips[tipTextKey] = d3.tip().attr("class", customClasses.tooltip.root).direction("e").html(tipsText[tipTextKey]);
+    svg.call(
+      tooltips[tipTextKey]
+    );
+  });
+  svgEl?.setAttribute("data-tooltips-init", "true");
+  return tooltips;
+};
+
+// src/utils/render.utils.ts
+var _fgdcTextures = {};
+var _fgdcTexturesPromise = null;
+var preloadFgdcTextures = () => {
+  if (!_fgdcTexturesPromise) {
+    _fgdcTexturesPromise = importFgdcTextures().then((t) => {
+      _fgdcTextures = t;
+    });
+  }
+  return _fgdcTexturesPromise;
+};
+var getLithologicalFillList = (data, opts) => {
+  const uniqueTextureCodes = [...new Set(data.map((d) => d.fgdc_texture))];
+  const texturesLoaded = Object.fromEntries(
+    uniqueTextureCodes.filter((code) => _fgdcTextures[code]).map((code) => [code, _fgdcTextures[code]])
+  );
+  return Object.fromEntries(
+    data.map((d) => [
+      `${d.fgdc_texture}.${d.from}`,
+      textures2.paths().d(() => texturesLoaded[d.fgdc_texture]).size(opts.size).strokeWidth(opts.strokeWidth).stroke(opts.stroke).background(d.color)
+    ])
+  );
+};
+var getLithologyFill = (geologyData, svg, opts) => {
+  const lithologicalFill = getLithologicalFillList(geologyData, opts);
+  return (d) => {
+    const fill = lithologicalFill[`${d.fgdc_texture}.${d.from}`];
+    if (!fill.url) return fill;
+    svg.call(fill);
+    return fill.url();
+  };
+};
+var getConflictAreas = (array1, array2) => array1.flatMap(
+  (item1) => array2.filter((item2) => item2.from < item1.to && item2.to > item1.from).map((item2) => ({
+    from: Math.max(item2.from, item1.from),
+    to: Math.min(item2.to, item1.to),
+    diameter: Math.max(item1.diameter, item2.diameter)
+  }))
+);
+var mergeConflicts = (conflicts, buffer) => {
+  if (conflicts.length === 0) return [];
+  return [...conflicts].sort((a, b) => a.from - b.from).reduce((merged, current) => {
+    const last = merged[merged.length - 1];
+    if (last && current.from <= last.to + buffer) {
+      last.to = Math.max(last.to, current.to);
+      return merged;
+    }
+    merged.push({ ...current });
+    return merged;
+  }, []);
+};
+function wrapText(text, maxChars) {
+  const words = text.split(" ");
+  const lines = [];
+  let line = "";
+  for (const word of words) {
+    const candidate = line ? `${line} ${word}` : word;
+    if (candidate.length > maxChars && line) {
+      lines.push(line);
+      line = word;
+    } else {
+      line = candidate;
+    }
+  }
+  if (line) lines.push(line);
+  return lines.length ? lines : [""];
+}
+
+// src/renderers/annotation-labels.renderer.ts
+function activeLabelsSet(cfg) {
+  if (cfg === false) return /* @__PURE__ */ new Set();
+  if (cfg === true) return /* @__PURE__ */ new Set(["lithology", "fractures", "caves"]);
+  return new Set(cfg);
+}
+function lithologySubSet(cfg) {
+  if (cfg === false) return /* @__PURE__ */ new Set();
+  if (!cfg || cfg === true)
+    return /* @__PURE__ */ new Set(["depth", "description", "dividers"]);
+  return new Set(cfg);
+}
+function drawAnnotationLabels(ctx, data) {
+  if (ctx.renderConfig.labels.active === false) return;
+  const active = activeLabelsSet(ctx.renderConfig.labels.active);
+  const show = lithologySubSet(ctx.renderConfig.labels.lithology);
+  const s = ctx.renderConfig.labels;
+  const st = ctx.theme.labels;
+  ctx.groups.lithologyLabelsGroup.selectAll("*").remove();
+  if (active.has("lithology") && show.has("depth")) {
+    data.lithology.filter((d) => d.to <= ctx.depthTo).forEach((d) => {
+      const text = `${d.to}`;
+      const approxW = text.length * (st.fontSize * 0.52) + s.depthTipPadX * 2;
+      const y = ctx.yScale(d.to) - s.depthTipHeight / 2;
+      const tipG = ctx.groups.lithologyLabelsGroup.append("g").attr("class", ctx.classes.labels.lithology.depth);
+      tipG.append("rect").attr("x", ctx.geoXLeft + 1).attr("y", y).attr("width", approxW).attr("height", s.depthTipHeight).attr("rx", st.depthTipRadius ?? 2).attr("fill", st.depthTipFill ?? "white").attr("stroke", ctx.theme.lithology.stroke).attr("stroke-width", 0.5);
+      tipG.append("text").attr("class", "wp-depth-tip-text").attr("fill", ctx.theme.labels.color).attr("font-family", ctx.theme.labels.bodyFont ?? "sans-serif").attr("x", ctx.geoXLeft + 1 + s.depthTipPadX).attr("y", y + s.depthTipHeight / 2).attr("dominant-baseline", "middle").attr("font-size", st.fontSize).text(text);
+    });
+  }
+  const items = [];
+  if (active.has("lithology")) {
+    data.lithology.filter((d) => d.from < ctx.depthTo).forEach((d) => {
+      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: `${d.from}\u2013${d.to} m`,
+        description: d.description || ""
+      });
+    });
+  }
+  if (active.has("fractures")) {
+    data.fractures.filter((d) => d.depth >= ctx.depthFrom && d.depth < ctx.depthTo).forEach((d) => {
+      const typeLabel = d.water_intake ? "fratura aberta" : "fratura";
+      items.push({
+        sortDepth: d.depth,
+        baseY: ctx.yScale(d.depth),
+        originX: ctx.pocoCenterX,
+        originY: ctx.yScale(d.depth),
+        header: `${d.depth} m \xB7 ${typeLabel}`,
+        description: d.description || ""
+      });
+    });
+  }
+  if (active.has("caves")) {
+    data.caves.filter((d) => d.from < ctx.depthTo).forEach((d) => {
+      const midDepth = (d.from + d.to) / 2;
+      const typeLabel = d.water_intake ? "caverna \xFAmida" : "caverna";
+      items.push({
+        sortDepth: d.from,
+        baseY: ctx.yScale(Math.max(d.from, ctx.depthFrom)),
+        originX: ctx.geoXRight,
+        originY: ctx.yScale(Math.max(midDepth, ctx.depthFrom)),
+        header: `${d.from}\u2013${d.to} m \xB7 ${typeLabel}`,
+        description: d.description || ""
+      });
+    });
+  }
+  items.sort((a, b) => a.sortDepth - b.sortDepth);
+  const labelPositions = [];
+  let currY = 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 yLabel = Math.max(item.baseY, currY + s.stackingGap);
+    currY = yLabel + estH;
+    labelPositions.push({ item, yLabel, estH });
+  });
+  const labelX = ctx.geoXRight + s.descriptionXOffset;
+  if (show.has("dividers") && show.has("description")) {
+    labelPositions.forEach(({ item, yLabel }) => {
+      ctx.groups.lithologyLabelsGroup.append("path").attr("class", ctx.classes.labels.lithology.divider).attr("fill", "none").attr("stroke", ctx.theme.labels.dividerStroke).attr("stroke-width", ctx.theme.labels.dividerStrokeWidth).attr("stroke-dasharray", ctx.theme.labels.dividerStrokeDasharray).attr(
+        "d",
+        `M ${item.originX},${item.originY} L ${ctx.geoXRight + 3},${item.originY} L ${labelX},${yLabel}`
+      );
+    });
+  }
+  if (show.has("description")) {
+    const lineH = s.stackingLineHeight;
+    const bgFill = st.annotationBg ?? "white";
+    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.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);
+        lines.forEach((line, i) => {
+          bodyEl.append("tspan").attr("x", 0).attr("dy", i === 0 ? 0 : lineH).text(line);
+        });
+      }
+    });
+  }
+}
+
+// src/renderers/caves.renderer.ts
+function drawCaves(ctx, data) {
+  if (!data.length) return;
+  const {
+    groups: { cavesGroup },
+    geoXLeft,
+    geoXRight,
+    depthFrom,
+    depthTo,
+    yScale,
+    renderConfig,
+    theme,
+    textures: textures3,
+    classes,
+    tooltips
+  } = ctx;
+  cavesGroup.selectAll(`g.${classes.caves.item}`).remove();
+  const rc = renderConfig.caves;
+  data.forEach((cave) => {
+    const seedTop = cave.from * 100 + cave.to;
+    const seedBot = cave.to * 100 + cave.from + 999;
+    const rngTop = makeSeededPrng(seedTop);
+    const rngBot = makeSeededPrng(seedBot);
+    const yTop = yScale(Math.max(cave.from, depthFrom));
+    const yBot = yScale(Math.min(cave.to, depthTo));
+    const span = yBot - yTop;
+    const amp = Math.max(
+      rc.amplitude.min,
+      Math.min(span * rc.amplitude.ratio, rc.amplitude.max)
+    );
+    const topCut = cave.from < depthFrom;
+    const botCut = cave.to > depthTo;
+    const topPts = topCut ? [
+      [geoXLeft, yTop],
+      [geoXRight, yTop]
+    ] : wavyContact(geoXLeft, geoXRight, yTop, amp, rc.pathSteps, rngTop);
+    const botPts = botCut ? [
+      [geoXLeft, yBot],
+      [geoXRight, yBot]
+    ] : wavyContact(geoXLeft, geoXRight, yBot, amp, rc.pathSteps, rngBot);
+    const topPath = topCut ? `M ${geoXLeft.toFixed(1)},${yTop.toFixed(1)} L ${geoXRight.toFixed(1)},${yTop.toFixed(1)}` : ptsToSmoothPath(topPts);
+    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 g = cavesGroup.append("g").attr("class", classes.caves.item).datum(cave).style("cursor", "pointer").on("mouseover", tooltips.cave.show).on("mouseout", tooltips.cave.hide);
+    const caveStroke = cave.water_intake ? theme.cave.wetStroke : theme.cave.dryStroke;
+    g.append("path").attr("class", classes.caves.fill).attr("d", closedPath).attr("fill", caveTexture.url()).attr("fill-opacity", theme.cave.fillOpacity).attr("stroke", "none");
+    g.append("path").attr("class", classes.caves.contact).attr("d", topPath).attr("fill", "none").attr("stroke", caveStroke).attr("stroke-width", theme.cave.contactStrokeWidth).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+    g.append("path").attr("class", classes.caves.contact).attr("d", botPath).attr("fill", "none").attr("stroke", caveStroke).attr("stroke-width", theme.cave.contactStrokeWidth).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+  });
+}
+
+// src/renderers/construction-labels.renderer.ts
+import * as d32 from "d3";
+import { getProfileDiamValues } from "@welldot/utils";
+function drawConstructionLabels(ctx, data) {
+  if (!ctx.renderConfig.constructionLabels.active) return;
+  ctx.groups.constructionLabelsGroup.selectAll("*").remove();
+  const clc = ctx.renderConfig.constructionLabels;
+  const clct = ctx.theme.constructionLabels;
+  const fmtD = (mm) => formatDiameter(mm, ctx.units.diameter);
+  const dUnit = getDiameterUnit(ctx.units.diameter);
+  const maxXValues = getProfileDiamValues(ctx.constructionData);
+  const xScale = d32.scaleLinear().domain([0, d32.max(maxXValues) || 0]).range([0, ctx.POCO_WIDTH]);
+  const occupied = [];
+  const placeLabel = (d, text) => {
+    const clampedFrom = Math.max(d.from, ctx.depthFrom);
+    const clampedTo = Math.min(d.to, ctx.depthTo);
+    if (clampedFrom >= clampedTo) return;
+    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;
+    let lines;
+    let boxW;
+    if (clc.labelMaxWidth !== void 0) {
+      const maxChars = Math.max(
+        1,
+        Math.floor((clc.labelMaxWidth - 8) / charW)
+      );
+      lines = wrapText(text, maxChars);
+      boxW = clc.labelMaxWidth;
+    } else {
+      lines = [text];
+      boxW = text.length * charW + 8;
+    }
+    const labelH = lines.length * lineH + vertPad;
+    let labelY = 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");
+    lines.forEach((line, i) => {
+      textEl.append("tspan").attr("x", labelRightX - 4).attr("dy", i === 0 ? 0 : lineH).text(line);
+    });
+  };
+  let lastDiam = 0;
+  data.well_case.filter((item) => {
+    if (item.diameter !== lastDiam) {
+      lastDiam = item.diameter;
+      return true;
+    }
+    return false;
+  }).forEach(
+    (d) => placeLabel(
+      d,
+      `${clc.labels.wellCasePrefix} ${fmtD(d.diameter)}${dUnit} ${d.type}`
+    )
+  );
+  lastDiam = 0;
+  data.well_screen.filter((item) => {
+    if (item.diameter !== lastDiam) {
+      lastDiam = item.diameter;
+      return true;
+    }
+    return false;
+  }).forEach(
+    (d) => placeLabel(
+      d,
+      `${clc.labels.wellScreenPrefix} ${fmtD(d.diameter)}${dUnit} ${d.type} ${clc.labels.wellScreenSlotPrefix} ${fmtD(d.screen_slot_mm)}${dUnit}`
+    )
+  );
+}
+
+// src/renderers/construction.renderer.ts
+import * as d33 from "d3";
+import { getProfileDiamValues as getProfileDiamValues2 } from "@welldot/utils";
+function drawConstructive(ctx, data) {
+  const { getHeight, getYPos } = getYAxisFunctions(ctx.yScale, {
+    from: ctx.depthFrom,
+    to: ctx.depthTo
+  });
+  const maxXValues = getProfileDiamValues2(ctx.constructionData);
+  const maxXValueConstruction = d33.max(maxXValues) || 0;
+  const xScale = d33.scaleLinear().domain([0, maxXValueConstruction]).range([0, ctx.POCO_WIDTH]);
+  const rcc = ctx.renderConfig.construction;
+  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]);
+    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);
+  hole.exit().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);
+  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);
+  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");
+  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 g = d33.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();
+    d33.select(sideNodes[0]).attr("x1", x).attr("x2", x);
+    d33.select(sideNodes[1]).attr("x1", x + w).attr("x2", x + w);
+  });
+  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);
+  holeFill.exit().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);
+  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);
+  wellCase.exit().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);
+  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);
+  wellScreen.exit().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);
+  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 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);
+  conflict.exit().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);
+  const mergedConflict = mergeEnter(newConflict, conflict).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
+  withTransition(mergedConflict, ctx.transition).attr("y", ctx.yScale(0)).attr("height", getHeight);
+}
+
+// src/renderers/fractures.renderer.ts
+function wavyLine(rng, steps, baseY, jitter, startInset, endInset) {
+  const pts = [];
+  for (let i = 0; i < steps; i++) {
+    const t = i / (steps - 1);
+    const normX = startInset + t * (1 - startInset - endInset);
+    const yOffset = baseY + (rng() * 2 - 1) * jitter;
+    pts.push([normX, yOffset]);
+  }
+  return pts;
+}
+function drawFractures(ctx, data) {
+  if (!data.length) return;
+  const {
+    groups: { fracturesGroup },
+    POCO_WIDTH,
+    pocoCenterX,
+    yScale,
+    renderConfig,
+    theme,
+    classes,
+    tooltips
+  } = ctx;
+  fracturesGroup.selectAll(`g.${classes.fractures.item}`).remove();
+  const rf = renderConfig.fractures;
+  const halfWidth = POCO_WIDTH * rf.widthMultiplier / 2;
+  const xa = pocoCenterX - halfWidth;
+  const w = halfWidth * 2;
+  const normToAbsX = (normX) => xa + normX * w;
+  data.forEach((fracture) => {
+    const rng = makeSeededPrng(fracture.depth, 7919);
+    const cy = yScale(fracture.depth);
+    const g = fracturesGroup.append("g").attr("class", classes.fractures.item).datum(fracture).attr(
+      "transform",
+      `translate(0,${cy}) rotate(${fracture.dip},${pocoCenterX},0)`
+    ).on("mouseover", tooltips.fracture.show).on("mouseout", tooltips.fracture.hide).style("cursor", "pointer");
+    const hitBuffer = fracture.swarm ? rf.hitBuffer.swarm : rf.hitBuffer.single;
+    g.append("rect").attr("class", classes.fractures.hitArea).attr("x", xa).attr("y", -hitBuffer).attr("width", w).attr("height", hitBuffer * 2).attr("fill", "transparent").style("pointer-events", "all");
+    const fractureStroke = fracture.water_intake ? theme.fracture.wetStroke : theme.fracture.dryStroke;
+    const appendLine = (x1, y1, x2, y2, sw) => g.append("line").attr("class", classes.fractures.line).attr("x1", x1).attr("y1", y1).attr("x2", x2).attr("y2", y2).attr("stroke", fractureStroke).attr("stroke-width", sw).attr("stroke-linecap", "round");
+    const appendPolyline = (pts, sw) => g.append("polyline").attr("class", classes.fractures.polyline).attr(
+      "points",
+      pts.map(([nx, dy]) => `${normToAbsX(nx)},${dy}`).join(" ")
+    ).attr("stroke", fractureStroke).attr("stroke-width", sw).attr("fill", "none").attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+    if (fracture.swarm) {
+      const lineCount = rf.swarm.lineCountBase + Math.round(rng() * rf.swarm.lineCountVariance);
+      const halfSpread = rf.swarm.spread / 2;
+      const bases = Array.from(
+        { length: lineCount },
+        () => (rng() * 2 - 1) * halfSpread
+      ).sort((a, b) => a - b);
+      bases.forEach((base, idx) => {
+        const isCentral = idx === Math.floor(lineCount / 2);
+        const sw = isCentral ? theme.fracture.swarm.centralStrokeWidth : theme.fracture.swarm.sideStrokeWidthBase + rng() * theme.fracture.swarm.sideStrokeWidthVariance;
+        const steps = 6 + Math.round(rng() * 3);
+        const jitter = 0.8 + rng() * 1.2;
+        const insetL = 0.04 + rng() * 0.12;
+        const insetR = 0.04 + rng() * 0.12;
+        appendPolyline(wavyLine(rng, steps, base, jitter, insetL, insetR), sw);
+      });
+      const bridgeCount = 2 + Math.round(rng() * 2);
+      for (let b = 0; b < bridgeCount; b++) {
+        const nx = 0.15 + rng() * 0.7;
+        const pairIdx = Math.floor(rng() * (bases.length - 1));
+        appendLine(
+          normToAbsX(nx),
+          bases[pairIdx],
+          normToAbsX(nx + (rng() - 0.5) * 0.06),
+          bases[pairIdx + 1],
+          0.6
+        );
+      }
+      const primaryBase = bases[Math.floor(lineCount / 2)];
+      for (let wc = 0; wc < 2; wc++) {
+        const nx = 0.2 + rng() * 0.6;
+        const len = 3 + rng() * 3;
+        const dir = rng() > 0.5 ? -1 : 1;
+        appendLine(
+          normToAbsX(nx),
+          primaryBase,
+          normToAbsX(nx + (rng() - 0.5) * 0.04),
+          primaryBase + dir * len,
+          0.8
+        );
+      }
+    } else {
+      const steps = 7 + Math.round(rng() * 3);
+      const insetL = 0.03 + rng() * 0.08;
+      const insetR = 0.03 + rng() * 0.08;
+      appendPolyline(
+        wavyLine(rng, steps, 0, 2, insetL, insetR),
+        theme.fracture.single.mainStrokeWidth
+      );
+      const crackCount = 2 + Math.round(rng() * 2);
+      for (let c = 0; c < crackCount; c++) {
+        const nx = insetL + rng() * (1 - insetL - insetR);
+        const len = 3.5 + rng() * 3.5;
+        const dir = rng() > 0.5 ? 1 : -1;
+        appendLine(
+          normToAbsX(nx),
+          (rng() * 2 - 1) * 1.5,
+          normToAbsX(nx + (rng() - 0.5) * 0.03),
+          dir * len,
+          theme.fracture.single.crackStrokeWidth
+        );
+      }
+    }
+  });
+}
+
+// src/renderers/highlights.renderer.ts
+import * as d34 from "d3";
+import { getProfileDiamValues as getProfileDiamValues3 } from "@welldot/utils";
+function drawHighlightItem(ctx, group, x, y, w, h, label) {
+  if (h <= 0 || w <= 0) return;
+  const hlConfig = ctx.renderConfig.highlights;
+  const pad = hlConfig.padding;
+  const g = group.append("g").attr("class", ctx.classes.highlights.item);
+  g.append("rect").attr("class", ctx.classes.highlights.rect).attr("x", x - pad).attr("y", y - pad).attr("width", w + pad * 2).attr("height", h + pad * 2).attr("fill", hlConfig.fill).attr("fill-opacity", hlConfig.fillOpacity).attr("stroke", hlConfig.stroke).attr("stroke-width", hlConfig.strokeWidth).attr("stroke-dasharray", hlConfig.strokeDasharray ?? null).style("pointer-events", "none");
+  if (label) {
+    const charW = hlConfig.labelFontSize * 0.55;
+    const labelW = label.length * charW + hlConfig.labelPadding * 2;
+    const labelH = hlConfig.labelFontSize + hlConfig.labelPadding * 2;
+    const lx = x - pad;
+    const ly = y - pad - labelH;
+    g.append("rect").attr("class", ctx.classes.highlights.labelBg).attr("x", lx).attr("y", ly).attr("width", labelW).attr("height", labelH).attr("rx", hlConfig.labelRadius).attr("fill", hlConfig.labelBackground).style("pointer-events", "none");
+    g.append("text").attr("class", ctx.classes.highlights.label).attr("x", lx + hlConfig.labelPadding).attr("y", ly + labelH - hlConfig.labelPadding).attr("font-size", hlConfig.labelFontSize).attr("fill", hlConfig.labelColor).attr("font-family", "sans-serif").style("pointer-events", "none").text(label);
+  }
+}
+function drawHighlights(ctx, hl) {
+  ctx.groups.highlightsGeologicGroup.selectAll("*").remove();
+  ctx.groups.highlightsConstructionGroup.selectAll("*").remove();
+  ctx.groups.highlightsFracturesGroup.selectAll("*").remove();
+  const drawGeoHighlights = (items) => {
+    items?.forEach((h) => {
+      if (h.from === void 0 || h.to === void 0) return;
+      const from = Math.max(h.from, ctx.depthFrom);
+      const to = Math.min(h.to, ctx.depthTo);
+      if (from >= to) return;
+      const y = ctx.yScale(from);
+      drawHighlightItem(
+        ctx,
+        ctx.groups.highlightsGeologicGroup,
+        ctx.geoXLeft,
+        y,
+        ctx.geoXRight - ctx.geoXLeft,
+        ctx.yScale(to) - y,
+        h.label
+      );
+    });
+  };
+  drawGeoHighlights(hl.lithology);
+  drawGeoHighlights(hl.caves);
+  const fractureConfig = ctx.renderConfig.fractures;
+  const halfFractureWidth = ctx.POCO_WIDTH * fractureConfig.widthMultiplier / 2;
+  const fracXa = ctx.pocoCenterX - halfFractureWidth;
+  const fracW = halfFractureWidth * 2;
+  hl.fractures?.forEach((h) => {
+    if (h.depth === void 0) return;
+    if (h.depth < ctx.depthFrom || h.depth > ctx.depthTo) return;
+    const cy = ctx.yScale(h.depth);
+    drawHighlightItem(
+      ctx,
+      ctx.groups.highlightsFracturesGroup,
+      fracXa,
+      cy - fractureConfig.hitBuffer.single,
+      fracW,
+      fractureConfig.hitBuffer.single * 2,
+      h.label
+    );
+  });
+  const maxXVals = getProfileDiamValues3(ctx.constructionData);
+  const xScaleConstr = d34.scaleLinear().domain([0, d34.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
+    );
+    const cpW = xScaleConstr(cpPadWidth);
+    const cpH = ctx.yScale(
+      cp.thickness * constructionConfig.cementPad.thicknessMultiplier
+    );
+    drawHighlightItem(
+      ctx,
+      ctx.groups.highlightsConstructionGroup,
+      cpX,
+      cpY,
+      cpW,
+      cpH,
+      hl.cement_pad.label
+    );
+  }
+  const drawConstrHighlights = (items, data, getX, getW) => {
+    items?.forEach((h) => {
+      if (h.from === void 0 || h.to === void 0) return;
+      data.filter(
+        (d) => d.from < h.to && d.to > h.from && (h.diameter === void 0 || d.diameter === h.diameter)
+      ).forEach((d) => {
+        const from = Math.max(h.from, ctx.depthFrom);
+        const to = Math.min(h.to, ctx.depthTo);
+        if (from >= to) return;
+        const y = ctx.yScale(from);
+        drawHighlightItem(
+          ctx,
+          ctx.groups.highlightsConstructionGroup,
+          getX(d),
+          y,
+          getW(d),
+          ctx.yScale(to) - y,
+          h.label
+        );
+      });
+    });
+  };
+  const stdX = (d) => (ctx.POCO_CENTER - xScaleConstr(d.diameter)) / 2;
+  const stdW = (d) => xScaleConstr(d.diameter);
+  const scPaddingRatio = constructionConfig.surfaceCase.diameterPaddingRatio;
+  const scX = (d) => (ctx.POCO_CENTER - xScaleConstr(d.diameter + d.diameter * scPaddingRatio)) / 2;
+  const scW = (d) => xScaleConstr(d.diameter + d.diameter * scPaddingRatio);
+  drawConstrHighlights(
+    hl.bore_hole,
+    ctx.constructionData.bore_hole,
+    stdX,
+    stdW
+  );
+  drawConstrHighlights(
+    hl.surface_case,
+    ctx.constructionData.surface_case,
+    scX,
+    scW
+  );
+  drawConstrHighlights(
+    hl.hole_fill,
+    ctx.constructionData.hole_fill,
+    stdX,
+    stdW
+  );
+  drawConstrHighlights(
+    hl.well_case,
+    ctx.constructionData.well_case,
+    stdX,
+    stdW
+  );
+  drawConstrHighlights(
+    hl.well_screen,
+    ctx.constructionData.well_screen,
+    stdX,
+    stdW
+  );
+}
+
+// src/renderers/legend.renderer.ts
+import * as d3module2 from "d3";
+import { defu } from "defu";
+var d35 = { ...d3module2 };
+function drawWellLegend(selector, profile, options = {}) {
+  const fractures = profile.fractures ?? [];
+  const caves = profile.caves ?? [];
+  const boreHoles = profile.bore_hole ?? [];
+  const wellCases = profile.well_case ?? [];
+  const wellScreens = profile.well_screen ?? [];
+  const holeFills = profile.hole_fill ?? [];
+  const hasSimple = fractures.some((f) => !f.swarm && !f.water_intake);
+  const hasSwarm = fractures.some((f) => f.swarm);
+  const hasWaterFx = fractures.some((f) => f.water_intake);
+  const hasCaveDry = caves.some((c) => !c.water_intake);
+  const hasCaveWet = caves.some((c) => c.water_intake);
+  const hasBoreHole = boreHoles.length > 0;
+  const hasSurfaceCase = (profile.surface_case ?? []).length > 0;
+  const hasHoleFillGravel = holeFills.some((h) => h.type === "gravel_pack");
+  const hasHoleFillSeal = holeFills.some((h) => h.type === "seal");
+  const hasWellCase = wellCases.length > 0;
+  const hasWellScreen = wellScreens.length > 0;
+  const hasCementPad = !!profile.cement_pad?.thickness;
+  const hasConflict = mergeConflicts(
+    [
+      ...getConflictAreas(wellCases, wellScreens),
+      ...getConflictAreas(wellScreens, wellCases)
+    ],
+    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,
+      swarm: false,
+      water_intake: false
+    });
+  if (hasSwarm)
+    items.push({
+      kind: "fracture",
+      label: cfg.labels.fractureSwarm,
+      swarm: true,
+      water_intake: false
+    });
+  if (hasWaterFx)
+    items.push({
+      kind: "fracture",
+      label: cfg.labels.fractureWater,
+      swarm: false,
+      water_intake: true
+    });
+  if (hasCaveDry)
+    items.push({
+      kind: "cave",
+      label: cfg.labels.caveDry,
+      water_intake: false
+    });
+  if (hasCaveWet)
+    items.push({ kind: "cave", label: cfg.labels.caveWet, water_intake: true });
+  if (hasCementPad)
+    items.push({
+      kind: "construction",
+      label: cfg.labels.cementPad,
+      subKind: "cementPad"
+    });
+  if (hasBoreHole)
+    items.push({
+      kind: "construction",
+      label: cfg.labels.boreHole,
+      subKind: "boreHole"
+    });
+  if (hasSurfaceCase)
+    items.push({
+      kind: "construction",
+      label: cfg.labels.surfaceCase,
+      subKind: "surfaceCase"
+    });
+  if (hasHoleFillGravel)
+    items.push({
+      kind: "construction",
+      label: cfg.labels.holeFillGravel,
+      subKind: "holeFillGravel"
+    });
+  if (hasHoleFillSeal)
+    items.push({
+      kind: "construction",
+      label: cfg.labels.holeFillSeal,
+      subKind: "holeFillSeal"
+    });
+  if (hasWellCase)
+    items.push({
+      kind: "construction",
+      label: cfg.labels.wellCase,
+      subKind: "wellCase"
+    });
+  if (hasWellScreen)
+    items.push({
+      kind: "construction",
+      label: cfg.labels.wellScreen,
+      subKind: "wellScreen"
+    });
+  if (hasConflict)
+    items.push({
+      kind: "construction",
+      label: cfg.labels.conflict,
+      subKind: "conflict"
+    });
+  const svgEl = d35.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 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 {
+      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);
+    }
+    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
+function drawLithology(ctx, data) {
+  if (!data.length) return;
+  const {
+    groups: { lithologyGroup },
+    svg,
+    geoXLeft,
+    geoXRight,
+    depthFrom,
+    depthTo,
+    yScale,
+    theme,
+    classes,
+    tooltips,
+    transition
+  } = ctx;
+  const { getHeight, getYPos } = getYAxisFunctions(yScale, {
+    from: depthFrom,
+    to: depthTo
+  });
+  const rects = lithologyGroup.selectAll(`.${classes.lithology.rect}`).data(data);
+  rects.exit().remove();
+  const newLayers = rects.enter().append("rect").attr("class", classes.lithology.rect).attr("x", geoXLeft).attr("width", geoXRight - geoXLeft).attr("stroke", theme.lithology.stroke).attr("stroke-width", theme.lithology.strokeWidth).on("mouseover", tooltips.geology.show).on("mouseout", tooltips.geology.hide);
+  const merged = mergeEnter(newLayers, rects).attr("y", getYPos);
+  withTransition(merged, transition).attr("height", getHeight).attr("fill", getLithologyFill(data, svg, ctx.theme.lithologyTexture));
+}
+
+// src/renderers/unit-labels.renderer.ts
+function drawUnitLabels(ctx, data) {
+  if (!ctx.renderConfig.unitLabels.active || !data.length) return;
+  const {
+    groups: { unitLabelsGroup },
+    depthFrom,
+    depthTo,
+    yScale,
+    renderConfig,
+    theme,
+    classes
+  } = ctx;
+  unitLabelsGroup.selectAll("*").remove();
+  const ru = renderConfig.unitLabels;
+  const rut = theme.unitLabels;
+  const sw = ru.stripWidth;
+  const groupByField = (field) => {
+    const groups = [];
+    for (const layer of data) {
+      const unit = layer[field];
+      if (!unit) continue;
+      const from = Math.max(layer.from, depthFrom);
+      const to = Math.min(layer.to, depthTo);
+      if (from >= to) continue;
+      const last = groups[groups.length - 1];
+      if (last && last.unit === unit) {
+        last.to = to;
+      } else groups.push({ unit, from, to });
+    }
+    return groups;
+  };
+  const hasGeo = data.some((d) => d.geologic_unit);
+  const hasAq = data.some((d) => d.aquifer_unit);
+  const geoX = ru.xOffset;
+  const aqX = hasGeo && hasAq ? ru.xOffset + sw + 1 : ru.xOffset;
+  const drawStrip = (groups, stripX, rectClass, fillColor) => {
+    groups.forEach((group, idx) => {
+      const yTop = yScale(group.from);
+      const yBot = yScale(group.to);
+      const height = yBot - yTop;
+      if (height < 1) return;
+      const isFirst = idx === 0;
+      const isLast = idx === groups.length - 1;
+      unitLabelsGroup.append("rect").attr("class", rectClass).attr("x", stripX).attr("y", yTop).attr("width", sw).attr("height", height).attr("fill", fillColor).attr("stroke", rut.stroke).attr("stroke-width", rut.strokeWidth);
+      const appendEdge = (y, strokeWidth) => unitLabelsGroup.append("line").attr("class", "unit-divider-line").attr("x1", stripX).attr("x2", stripX + sw).attr("y1", y).attr("y2", y).attr("stroke", rut.stroke).attr("stroke-width", strokeWidth);
+      appendEdge(yTop, isFirst ? ru.outerEdgeWidth : ru.innerDividerWidth);
+      appendEdge(yBot, isLast ? ru.outerEdgeWidth : ru.innerDividerWidth);
+      if (height >= ru.minHeightForText) {
+        const maxChars = Math.floor(height / (rut.fontSize * 0.55));
+        const label = group.unit.length > maxChars ? `${group.unit.slice(0, maxChars - 1)}\u2026` : group.unit;
+        unitLabelsGroup.append("text").attr("class", classes.unitLabels.text).attr(
+          "transform",
+          `translate(${(stripX + sw / 2).toFixed(1)},${((yTop + yBot) / 2).toFixed(1)}) rotate(-90)`
+        ).attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("font-size", rut.fontSize).attr("font-family", rut.fontFamily ?? "sans-serif").attr("font-weight", rut.fontWeight ?? 400).attr("fill", rut.stroke).text(label);
+      }
+    });
+  };
+  if (hasGeo)
+    drawStrip(
+      groupByField("geologic_unit"),
+      geoX,
+      classes.unitLabels.geoRect,
+      rut.geologicFill
+    );
+  if (hasAq)
+    drawStrip(
+      groupByField("aquifer_unit"),
+      aqX,
+      classes.unitLabels.aqRect,
+      rut.aquiferFill
+    );
+}
+
+// src/utils/render.styles.ts
+import sanitizeHtml2 from "sanitize-html";
+var sanitizeCssValue = (v) => sanitizeHtml2(String(v ?? ""), { allowedTags: [], allowedAttributes: {} });
+function buildSvgStyleBlock(theme) {
+  const { labels, lithology } = theme;
+  const s = sanitizeCssValue;
+  return [
+    `.wp-lithology-depth-tip{border:0.5px solid ${s(lithology.stroke)};font-size:${s(labels.fontSize)}px;color:${s(labels.color)}}`,
+    `.wp-annotation-label{font-size:${s(labels.fontSize)}px}`,
+    `.wp-annotation-header{font-weight:${s(labels.headerFontWeight ?? 600)};font-family:${s(labels.headerFont)};font-size:${s(labels.fontSize)}px;color:${s(labels.color)}}`,
+    `.wp-annotation-body{font-weight:${s(labels.bodyFontWeight ?? 400)};font-family:${s(labels.bodyFont ?? "sans-serif")};font-size:${s(labels.fontSize)}px;color:${s(labels.bodyColor)}}`,
+    `.wp-depth-tip-text{font-family:${s(labels.bodyFont ?? "sans-serif")};font-size:${s(labels.fontSize)}px;color:${s(labels.color)}}`
+  ].join("");
+}
+
+// src/Renderer.ts
+var d36 = Object.assign(d3module3, { tip: d3tip2 });
+var WellRenderer = class {
+  /**
+   * @param svgs - One entry per SVG panel; multi-entry for split-panel layouts.
+   * @param options.classNames - Override default BEM CSS class names.
+   * @param options.units - Active measurement units (`length` and `diameter`).
+   * @param options.renderConfig - Rendering behaviour (zoom, pan, animation, layout). Defaults to `INTERACTIVE_RENDER_CONFIG`.
+   * @param options.theme - Visual theme overrides. Merged on top of `DEFAULT_WELL_THEME`.
+   * @param options.onError - Called when a draw error occurs (e.g., a renderer throws). Falls back to `console.error` if omitted.
+   */
+  constructor(svgs, options = {}) {
+    this.svgInstances = [];
+    this.instanceStates = [];
+    this.textures = createWellTextures();
+    this.classes = DEFAULT_COMPONENTS_CLASS_NAMES;
+    this.renderConfig = INTERACTIVE_RENDER_CONFIG;
+    this.theme = DEFAULT_WELL_THEME;
+    this.units = {
+      length: "m",
+      diameter: "mm"
+    };
+    if (svgs.length === 0) {
+      console.warn(
+        "[WellRenderer] No SVG instances provided. The renderer will be a no-op."
+      );
+      return;
+    }
+    this.svgInstances = svgs;
+    if (options.onError) this.onError = options.onError;
+    if (options.classNames) {
+      this.classes = defu2(
+        options.classNames,
+        DEFAULT_COMPONENTS_CLASS_NAMES
+      );
+    }
+    if (options.units) {
+      this.units = { ...this.units, ...options.units };
+    }
+    if (options.renderConfig) {
+      this.renderConfig = defu2(
+        options.renderConfig,
+        INTERACTIVE_RENDER_CONFIG
+      );
+    }
+    this.theme = defu2(options.theme ?? {}, DEFAULT_WELL_THEME);
+    this.textures = createWellTextures(this.renderConfig.textures);
+  }
+  initInstanceSvg(inst, index) {
+    const clipId = `fractures-clip-${index}`;
+    const clipRectId = `fractures-clip-rect-${index}`;
+    const { selector, height, width, margins } = inst;
+    const svgWidth = width + margins.left + margins.right;
+    const svgHeight = height + margins.top + margins.bottom;
+    const svg = d36.select(selector);
+    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);
+    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);
+    geologic.append("g").attr("class", this.classes.unitLabels.group);
+    geologic.append("g").attr("class", this.classes.lithology.group);
+    geologic.append("g").attr("class", this.classes.caves.group);
+    geologic.append("g").attr("class", this.classes.labels.lithology.group);
+    geologic.append("g").attr("class", this.classes.highlights.geologicGroup);
+    const construction = poco.append("g").attr("class", this.classes.constructionGroup).attr(
+      "transform",
+      `translate(${margins.left + width / 2}, ${margins.top})`
+    );
+    const fracturesGroup = poco.append("g").attr("class", this.classes.fractures.group).attr("transform", `translate(${margins.left}, ${margins.top})`).attr("clip-path", `url(#${clipId})`);
+    fracturesGroup.append("g").attr("class", this.classes.highlights.fracturesGroup);
+    construction.append("g").attr("class", this.classes.constructionLabels.group);
+    construction.append("g").attr("class", this.classes.cementPad.group);
+    construction.append("g").attr("class", this.classes.boreHole.group);
+    construction.append("g").attr("class", this.classes.surfaceCase.group);
+    construction.append("g").attr("class", this.classes.holeFill.group);
+    construction.append("g").attr("class", this.classes.wellCase.group);
+    construction.append("g").attr("class", this.classes.wellScreen.group);
+    construction.append("g").attr("class", this.classes.conflict.group);
+    construction.append("g").attr("class", this.classes.highlights.constructionGroup);
+    Object.values(this.textures).forEach((texture) => svg.call(texture));
+    return { svg, height, width, margins, clipId, clipRectId };
+  }
+  /** Renders a standalone legend into the element matched by `selector`. */
+  renderLegend(selector, profile) {
+    drawWellLegend(selector, profile, {
+      config: this.renderConfig.legend,
+      theme: this.theme,
+      classNames: this.classes.legend,
+      textures: this.renderConfig.textures
+    });
+  }
+  /**
+   * Initialises the SVG DOM structure and preloads FGDC textures.
+   * Must be called once before the first `draw()`.
+   */
+  async prepareSvg() {
+    await preloadFgdcTextures();
+    this.instanceStates = this.svgInstances.map(
+      (inst, i) => this.initInstanceSvg(inst, i)
+    );
+  }
+  /**
+   * Renders the well profile into all configured SVG panels.
+   * @param profile - The well data to render.
+   * @param options.units - Override the instance-level measurement units for this render.
+   * @param options.highlights - Highlight overlays to display on top of the profile.
+   */
+  draw(profile, options = {}) {
+    if (isWellEmpty(profile)) return;
+    this.units = { ...this.units, ...options.units };
+    const highlights = options.highlights ?? {};
+    const maxValues = getProfileLastItemsDepths(profile);
+    const maxYValues = d36.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 = d36.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;
+    }
+  }
+  drawLogToInstance(state, profile, depthFrom, depthTo, highlights = {}) {
+    const svg = state.svg;
+    const pocoGroup = svg.select(`.${this.classes.wellGroup}`);
+    const lithologyGroup = svg.select(`.${this.classes.lithology.group}`);
+    const fracturesGroup = svg.select(`.${this.classes.fractures.group}`);
+    const cavesGroup = svg.select(`.${this.classes.caves.group}`);
+    const lithologyLabelsGroup = svg.select(
+      `.${this.classes.labels.lithology.group}`
+    );
+    const constructionGroup = svg.select(`.${this.classes.constructionGroup}`);
+    const cementPadGroup = svg.select(`.${this.classes.cementPad.group}`);
+    const holeGroup = svg.select(`.${this.classes.boreHole.group}`);
+    const surfaceCaseGroup = svg.select(`.${this.classes.surfaceCase.group}`);
+    const holeFillGroup = svg.select(`.${this.classes.holeFill.group}`);
+    const wellCaseGroup = svg.select(`.${this.classes.wellCase.group}`);
+    const wellScreenGroup = svg.select(`.${this.classes.wellScreen.group}`);
+    const conflictGroup = svg.select(`.${this.classes.conflict.group}`);
+    const constructionLabelsGroup = svg.select(
+      `.${this.classes.constructionLabels.group}`
+    );
+    const highlightsGeologicGroup = svg.select(
+      `.${this.classes.highlights.geologicGroup}`
+    );
+    const highlightsConstructionGroup = svg.select(
+      `.${this.classes.highlights.constructionGroup}`
+    );
+    const highlightsFracturesGroup = svg.select(
+      `.${this.classes.highlights.fracturesGroup}`
+    );
+    const unitLabelsGroup = svg.select(`.${this.classes.unitLabels.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 = d36.transition().duration(duration).ease(ease);
+    const tooltips = populateTooltips(
+      svg,
+      this.classes,
+      this.units,
+      this.renderConfig.tooltips
+    );
+    const { xLeft: geoXLeft, xRightInset: geoXRightInset } = this.renderConfig.geologic;
+    const geoXRight = svgWidth - geoXRightInset;
+    const pocoCenterX = state.width / 2 + POCO_CENTER / 2;
+    const geologicData = {
+      lithology: profile.lithology,
+      fractures: profile.fractures,
+      caves: profile.caves
+    };
+    const constructionData = {
+      cement_pad: profile.cement_pad,
+      bore_hole: profile.bore_hole,
+      hole_fill: profile.hole_fill,
+      surface_case: profile.surface_case,
+      well_case: profile.well_case,
+      well_screen: profile.well_screen,
+      reduction: profile.reduction,
+      fractures: profile.fractures
+    };
+    const contentHeight = svgHeight - state.margins.top - state.margins.bottom;
+    const yScaleLocal = d36.scaleLinear().domain([depthFrom, depthTo]).range([0, contentHeight]);
+    const depthFactor = this.units.length === "ft" ? 3.28084 : 1;
+    const yScaleAxis = d36.scaleLinear().domain([depthFrom * depthFactor, depthTo * depthFactor]).range([0, contentHeight]);
+    const yAxis = d36.axisLeft(yScaleAxis).tickFormat(
+      (d) => `${d}${getLengthUnit(this.units.length)}`
+    );
+    const gY = svg.select(`.${this.classes.yAxis}`).call(yAxis);
+    gY.select(".domain").attr("stroke", this.theme.labels.color).attr("fill", "none");
+    gY.selectAll(".tick line").attr("stroke", this.theme.labels.color);
+    gY.selectAll(".tick text").attr("fill", this.theme.labels.color).attr("stroke", "none").attr(
+      "font-size",
+      this.theme.labels.scaleFontSize ?? this.theme.labels.fontSize
+    ).attr(
+      "font-family",
+      this.theme.labels.scaleFont ?? this.theme.labels.bodyFont ?? "sans-serif"
+    );
+    const spanY = (d) => {
+      if (d.thickness) return yScaleLocal(0) - yScaleLocal(d.thickness);
+      return yScaleLocal(Math.max(d.from ?? 0, depthFrom));
+    };
+    const spanH = (d) => {
+      if (d.thickness) return yScaleLocal(d.thickness) - yScaleLocal(0);
+      return Math.max(
+        0,
+        yScaleLocal(Math.min(d.to ?? 0, depthTo)) - yScaleLocal(Math.max(d.from ?? 0, depthFrom))
+      );
+    };
+    const groups = {
+      lithologyGroup,
+      unitLabelsGroup,
+      cavesGroup,
+      fracturesGroup,
+      lithologyLabelsGroup,
+      constructionGroup,
+      constructionLabelsGroup,
+      cementPadGroup,
+      holeGroup,
+      surfaceCaseGroup,
+      holeFillGroup,
+      wellCaseGroup,
+      wellScreenGroup,
+      conflictGroup,
+      highlightsGeologicGroup,
+      highlightsConstructionGroup,
+      highlightsFracturesGroup
+    };
+    const ctx = {
+      svg,
+      state,
+      svgWidth,
+      svgHeight,
+      POCO_WIDTH,
+      POCO_CENTER,
+      pocoCenterX,
+      geoXLeft,
+      geoXRight,
+      depthFrom,
+      depthTo,
+      yScale: yScaleLocal,
+      transition,
+      tooltips,
+      renderConfig: this.renderConfig,
+      theme: this.theme,
+      classes: this.classes,
+      textures: this.textures,
+      units: this.units,
+      constructionData,
+      groups
+    };
+    const inDepth = filterByDepth(depthFrom, depthTo);
+    const filteredConstruction = {
+      ...constructionData,
+      bore_hole: constructionData.bore_hole.filter(inDepth),
+      hole_fill: constructionData.hole_fill.filter(inDepth),
+      surface_case: constructionData.surface_case.filter(inDepth),
+      well_case: constructionData.well_case.filter(inDepth),
+      well_screen: constructionData.well_screen.filter(inDepth),
+      reduction: constructionData.reduction?.filter(inDepth) ?? []
+    };
+    const zooming = (e) => {
+      const transform = e.transform;
+      const zoomedCtx = {
+        ...ctx,
+        yScale: transform.rescaleY(yScaleLocal)
+      };
+      gY.call(yAxis.scale(transform.rescaleY(yScaleAxis)));
+      pocoGroup.selectAll("rect").attr("y", (d) => {
+        if (!d) return null;
+        return transform.applyY(spanY(d));
+      }).attr("height", (d) => {
+        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 = d36.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);
+      });
+      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)`;
+      });
+      drawCaves(zoomedCtx, geologicData.caves?.filter(inDepth) ?? []);
+      drawUnitLabels(zoomedCtx, profile.lithology?.filter(inDepth) ?? []);
+      drawAnnotationLabels(zoomedCtx, {
+        lithology: profile.lithology?.filter(inDepth) ?? [],
+        fractures: profile.fractures?.filter(
+          (f) => f.depth >= depthFrom && f.depth < depthTo
+        ) ?? [],
+        caves: profile.caves?.filter(inDepth) ?? []
+      });
+      drawConstructionLabels(zoomedCtx, {
+        well_case: constructionData.well_case.filter(inDepth),
+        well_screen: constructionData.well_screen.filter(inDepth)
+      });
+      drawHighlights(zoomedCtx, highlights);
+    };
+    const drawProfile = () => {
+      drawLithology(ctx, profile.lithology?.filter(inDepth) ?? []);
+      drawUnitLabels(ctx, profile.lithology?.filter(inDepth) ?? []);
+      drawAnnotationLabels(ctx, {
+        lithology: profile.lithology?.filter(inDepth) ?? [],
+        fractures: profile.fractures?.filter(
+          (f) => f.depth >= depthFrom && f.depth < depthTo
+        ) ?? [],
+        caves: profile.caves?.filter(inDepth) ?? []
+      });
+      drawCaves(ctx, profile.caves?.filter(inDepth) ?? []);
+      drawFractures(
+        ctx,
+        profile.fractures?.filter(
+          // exclusive upper bound: depthTo is the start of the next panel
+          (f) => f.depth >= depthFrom && f.depth < depthTo
+        ) ?? []
+      );
+      drawConstructive(ctx, filteredConstruction);
+      drawConstructionLabels(ctx, {
+        well_case: filteredConstruction.well_case,
+        well_screen: filteredConstruction.well_screen
+      });
+      svg.select(`#${state.clipRectId}`).attr("y", 0).attr("height", svgHeight);
+      drawHighlights(ctx, highlights);
+    };
+    try {
+      drawProfile();
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      if (this.onError) {
+        this.onError(error);
+      } else {
+        console.error("[WellRenderer] drawProfile failed:", error);
+      }
+    }
+    const { zoom: zoomEnabled, pan: panEnabled } = this.renderConfig;
+    if (zoomEnabled || panEnabled) {
+      const zoomNode = d36.zoom();
+      if (zoomEnabled || panEnabled) zoomNode.on("zoom", zooming);
+      if (!zoomEnabled) zoomNode.scaleExtent([1, 1]);
+      if (!panEnabled)
+        zoomNode.filter((e) => e.type === "wheel" || e.type === "dblclick");
+      asSvgElement(svg).call(zoomNode);
+      const initialZoom = this.renderConfig.zoomLevel ?? 1;
+      if (initialZoom !== 1) {
+        asSvgElement(svg).call(
+          zoomNode.transform,
+          d36.zoomIdentity.scale(initialZoom)
+        );
+      }
+    }
+  }
+};
+export {
+  DEFAULT_WELL_THEME,
+  INTERACTIVE_RENDER_CONFIG,
+  STATIC_RENDER_CONFIG,
+  WellRenderer,
+  drawWellLegend,
+  formatDiameter,
+  formatLength,
+  getDiameterUnit,
+  getLengthUnit,
+  importFgdcTextures
+};
+//# sourceMappingURL=index.js.map