flexdesk 0.4.7 → 0.5.0

package/dist/{chunk-F5FYDCOA.js → chunk-CNXP3SIN.js}

@@ -1,2373 +1,2373 @@
-import {
-  DataTable,
-  createRafResizeObserver
-} from "./chunk-WMGOJ3I6.js";
-import {
-  ManagedWindow
-} from "./chunk-LH5TSOZW.js";
-
-// src/charts/plotly_wrapper.js
-var _plotlySrc = null;
-function setPlotlySource(src) {
-  if (typeof src === "string" && src) _plotlySrc = src;
-}
-var _plotlyLoadPromise = null;
-var _plotlyPatchesInstalled = false;
-function _installPlotlyPatches() {
-  if (_plotlyPatchesInstalled) return;
-  _plotlyPatchesInstalled = true;
-  const targetDesc = Object.getOwnPropertyDescriptor(Event.prototype, "target");
-  if (targetDesc && targetDesc.get && !targetDesc.set) {
-    const origGetter = targetDesc.get;
-    Object.defineProperty(Event.prototype, "target", {
-      configurable: true,
-      enumerable: true,
-      get() {
-        return this._plotlyTarget ?? origGetter.call(this);
-      },
-      set(v) {
-        this._plotlyTarget = v;
-      }
-    });
-  }
-  const _origGetContext = HTMLCanvasElement.prototype.getContext;
-  HTMLCanvasElement.prototype.getContext = function(type, attrs) {
-    if (type === "2d") {
-      attrs = Object.assign({ willReadFrequently: true }, attrs);
-    }
-    return _origGetContext.call(this, type, attrs);
-  };
-}
-if (typeof HTMLCanvasElement !== "undefined") {
-  _installPlotlyPatches();
-}
-var DARK_THEME_LAYOUT = {
-  paper_bgcolor: "transparent",
-  plot_bgcolor: "transparent",
-  font: {
-    family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
-    size: 11,
-    color: "#cccccc"
-  },
-  margin: { l: 50, r: 20, t: 30, b: 40 },
-  legend: {
-    bgcolor: "rgba(0,0,0,0)",
-    font: { color: "#cccccc" }
-  },
-  xaxis: {
-    gridcolor: "#333333",
-    linecolor: "#444444",
-    tickcolor: "#666666",
-    zerolinecolor: "#444444"
-  },
-  yaxis: {
-    gridcolor: "#333333",
-    linecolor: "#444444",
-    tickcolor: "#666666",
-    zerolinecolor: "#444444"
-  },
-  // Hover tooltip styling for dark theme
-  hoverlabel: {
-    bgcolor: "#1e2228",
-    bordercolor: "#444444",
-    font: {
-      family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
-      size: 12,
-      color: "#e0e0e0"
-    }
-  },
-  // 3D scene defaults
-  scene: {
-    xaxis: {
-      gridcolor: "#333333",
-      linecolor: "#444444",
-      backgroundcolor: "rgba(0,0,0,0)"
-    },
-    yaxis: {
-      gridcolor: "#333333",
-      linecolor: "#444444",
-      backgroundcolor: "rgba(0,0,0,0)"
-    },
-    zaxis: {
-      gridcolor: "#333333",
-      linecolor: "#444444",
-      backgroundcolor: "rgba(0,0,0,0)"
-    },
-    bgcolor: "rgba(0,0,0,0)"
-  }
-};
-var DEFAULT_CONFIG = {
-  responsive: true,
-  displaylogo: false,
-  displayModeBar: false,
-  // Hide modebar completely
-  scrollZoom: true,
-  // Allow zoom with scroll wheel instead
-  toImageButtonOptions: {
-    format: "png",
-    filename: "ecosim_chart",
-    scale: 2
-  }
-};
-async function ensurePlotly() {
-  if (typeof Plotly !== "undefined") {
-    return Plotly;
-  }
-  if (_plotlyLoadPromise) {
-    return _plotlyLoadPromise;
-  }
-  if (!_plotlySrc) {
-    throw new Error(
-      '[twm/charts] Plotly is not loaded and no source is configured. Either load Plotly yourself (a <script> tag that sets window.Plotly), or call setPlotlySource("/path/to/plotly.min.js") before rendering a chart.'
-    );
-  }
-  _plotlyLoadPromise = (async () => {
-    let code;
-    try {
-      const response = await fetch(_plotlySrc, { credentials: "same-origin" });
-      if (!response.ok) throw new Error(`HTTP ${response.status}`);
-      code = await response.text();
-    } catch (err) {
-      return loadThroughMaskedDefine();
-    }
-    return evaluateWithoutAmd(code, _plotlySrc);
-  })();
-  return _plotlyLoadPromise;
-}
-function evaluateWithoutAmd(code, src) {
-  const run = new Function(
-    "define",
-    "module",
-    "exports",
-    `${code}
-//# sourceURL=${src}`
-  );
-  run(void 0, void 0, void 0);
-  if (typeof Plotly === "undefined") {
-    throw new Error(`Plotly.js was evaluated from ${src} but did not define a Plotly global \u2014 the file may not be a Plotly UMD bundle.`);
-  }
-  return Plotly;
-}
-function loadThroughMaskedDefine() {
-  return new Promise((resolve, reject) => {
-    const hadDefine = "define" in window;
-    const savedDefine = window.define;
-    let arrivedDefine;
-    let arrived = false;
-    let guarded = false;
-    const maskAmd = (value) => {
-      if (typeof value !== "function") return void 0;
-      const masked = function define(...args) {
-        return value.apply(this, args);
-      };
-      for (const key of Object.getOwnPropertyNames(value)) {
-        if (key === "amd" || key === "length" || key === "name") continue;
-        try {
-          masked[key] = value[key];
-        } catch {
-        }
-      }
-      masked.amd = void 0;
-      return masked;
-    };
-    try {
-      Object.defineProperty(window, "define", {
-        configurable: true,
-        enumerable: true,
-        get: () => maskAmd(arrived ? arrivedDefine : savedDefine),
-        set: (value) => {
-          arrivedDefine = value;
-          arrived = true;
-        }
-      });
-      guarded = true;
-    } catch {
-      window.define = void 0;
-    }
-    const release = () => {
-      const value = arrived ? arrivedDefine : savedDefine;
-      if (guarded) {
-        delete window.define;
-        guarded = false;
-      }
-      if (arrived || hadDefine) window.define = value;
-    };
-    const script = document.createElement("script");
-    script.src = _plotlySrc;
-    script.async = true;
-    script.onload = () => {
-      release();
-      if (typeof Plotly !== "undefined") {
-        resolve(Plotly);
-      } else {
-        reject(new Error("Plotly.js loaded but Plotly global not found. Something defined an AMD loader while it was loading, so Plotly registered as a module instead of a global."));
-      }
-    };
-    script.onerror = () => {
-      release();
-      reject(new Error(`Failed to load Plotly.js from ${_plotlySrc} \u2014 call setPlotlySource() with the path to your copy.`));
-    };
-    document.head.appendChild(script);
-  });
-}
-async function createChart(container, data, layout = {}, config = {}) {
-  const Plotly2 = await ensurePlotly();
-  const mergedLayout = {
-    ...DARK_THEME_LAYOUT,
-    ...layout
-  };
-  const mergedConfig = {
-    ...DEFAULT_CONFIG,
-    ...config
-  };
-  return Plotly2.newPlot(container, data, mergedLayout, mergedConfig);
-}
-async function updateChart(container, data, layout = {}) {
-  const Plotly2 = await ensurePlotly();
-  const mergedLayout = {
-    ...DARK_THEME_LAYOUT,
-    ...layout
-  };
-  return Plotly2.react(container, data, mergedLayout);
-}
-async function extendTraces(container, update, traceIndices, maxPoints = null) {
-  const Plotly2 = await ensurePlotly();
-  if (maxPoints) {
-    return Plotly2.extendTraces(container, update, traceIndices, maxPoints);
-  }
-  return Plotly2.extendTraces(container, update, traceIndices);
-}
-async function relayout(container, layoutUpdate) {
-  const Plotly2 = await ensurePlotly();
-  return Plotly2.relayout(container, layoutUpdate);
-}
-async function restyle(container, styleUpdate, traceIndices) {
-  const Plotly2 = await ensurePlotly();
-  return Plotly2.restyle(container, styleUpdate, traceIndices);
-}
-async function purge(container) {
-  const Plotly2 = await ensurePlotly();
-  return Plotly2.purge(container);
-}
-function hasPlot(container) {
-  return container && container._fullLayout !== void 0;
-}
-async function resize(container) {
-  const Plotly2 = await ensurePlotly();
-  return Plotly2.Plots.resize(container);
-}
-function hexToRgba(hex, alpha = 1) {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  if (!result) return hex;
-  const r = parseInt(result[1], 16);
-  const g = parseInt(result[2], 16);
-  const b = parseInt(result[3], 16);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
-var COLOR_PALETTE = [
-  "#268bd2",
-  // Solarized Blue
-  "#d33682",
-  // Solarized Magenta
-  "#cb4b16",
-  // Solarized Orange
-  "#2aa198",
-  // Solarized Cyan
-  "#6a5acd",
-  // SlateBlue/Purple
-  "#7a7d80",
-  // Gray
-  "#9fb6cf"
-  // Gray-Blue
-];
-function getSeriesColor(index) {
-  return COLOR_PALETTE[index % COLOR_PALETTE.length];
-}
-async function createChartDeferred(container, traces, layout = {}, config = {}) {
-  const Plotly2 = await ensurePlotly();
-  const mergedLayout = {
-    ...DARK_THEME_LAYOUT,
-    ...layout
-  };
-  const mergedConfig = {
-    ...DEFAULT_CONFIG,
-    ...config
-  };
-  const w = container.offsetWidth;
-  const h = container.offsetHeight;
-  let resizeObserver = null;
-  const cleanup = () => {
-    if (resizeObserver) {
-      resizeObserver.disconnect();
-      resizeObserver = null;
-    }
-  };
-  if (w > 0 && h > 0) {
-    await Plotly2.newPlot(container, traces, mergedLayout, mergedConfig);
-    resizeObserver = createRafResizeObserver(() => {
-      if (hasPlot(container)) {
-        Plotly2.Plots.resize(container).catch(() => {
-        });
-      }
-    });
-    resizeObserver.observe(container);
-    return { element: container, cleanup };
-  }
-  return new Promise((resolve) => {
-    let rendered = false;
-    resizeObserver = createRafResizeObserver((entries) => {
-      for (const entry of entries) {
-        const { width, height } = entry.contentRect;
-        if (width > 0 && height > 0) {
-          if (!rendered) {
-            rendered = true;
-            Plotly2.newPlot(container, traces, mergedLayout, mergedConfig).then(() => {
-              resolve({ element: container, cleanup });
-            }).catch(() => {
-              resolve({ element: container, cleanup });
-            });
-          } else if (hasPlot(container)) {
-            Plotly2.Plots.resize(container).catch(() => {
-            });
-          }
-        }
-      }
-    });
-    resizeObserver.observe(container);
-  });
-}
-
-// src/charts/chart_types.js
-var CHART_TYPES_2D = Object.freeze([
-  { value: "line", label: "Line" },
-  { value: "bar", label: "Bar" },
-  { value: "scatter", label: "Scatter" },
-  { value: "area", label: "Area" },
-  { value: "area-stacked", label: "Area (Stacked %)" },
-  { value: "phase", label: "Phase" },
-  // Categorical part-of-whole. They belong in this list because the list is
-  // what a consumer renders as its chart-type dropdown — but they are NOT
-  // (x[], y[]) charts, and `buildTrace` leaves for them before the switch:
-  // read the early return there before adding a fourth. `indicator` is
-  // deliberately NOT here, because it takes a SCALAR — a dropdown offering it
-  // beside these would offer a rendering of data the chart is not bound to.
-  { value: "pie", label: "Pie" },
-  { value: "donut", label: "Donut" },
-  { value: "funnel", label: "Funnel" }
-]);
-var CHART_TYPES_3D = Object.freeze([
-  { value: "scatter3d", label: "3D Scatter" },
-  { value: "line3d", label: "3D Line" },
-  { value: "surface", label: "3D Surface" }
-]);
-var ALL_CHART_TYPES = Object.freeze([...CHART_TYPES_2D, ...CHART_TYPES_3D]);
-function is3DChart(chartType) {
-  return ["scatter3d", "line3d", "surface"].includes(chartType);
-}
-var LINE_DASH_MAP = {
-  solid: "solid",
-  dashed: "dash",
-  dotted: "dot"
-};
-var INTERPOLATION_MAP = {
-  linear: "linear",
-  step: "hv",
-  // horizontal-vertical step
-  cubic: "spline",
-  // smooth spline
-  auto: "linear"
-};
-function buildTrace(options) {
-  const {
-    chartType = "line",
-    x = [],
-    y = [],
-    z = null,
-    name = "Series",
-    color = null,
-    lineWidth = 2,
-    lineStyle = "solid",
-    interpolation = "linear",
-    yAxisId = "y",
-    showMarkers = false,
-    seriesIndex = 0,
-    stackGroup = null,
-    colors = null
-  } = options;
-  const seriesColor = color || getSeriesColor(seriesIndex);
-  if (chartType === "pie" || chartType === "donut" || chartType === "funnel") {
-    const sliceColors = Array.isArray(colors) && colors.length ? colors : y.map((_, i) => getSeriesColor(i));
-    if (chartType === "funnel") {
-      return {
-        type: "funnel",
-        name,
-        y: x,
-        // stages read down the categorical axis
-        x: y,
-        // ...and the measure runs across
-        marker: { color: sliceColors },
-        textinfo: "value+percent initial"
-      };
-    }
-    return {
-      type: "pie",
-      name,
-      labels: x,
-      values: y,
-      marker: { colors: sliceColors },
-      // Plotly sorts slices descending by default. The caller has
-      // already ordered its rows — a dashboard binding carries its own
-      // `sort` — and a second, invisible reordering here makes the chart
-      // disagree with the table beside it and with the config that
-      // produced both.
-      sort: false,
-      ...chartType === "donut" ? { hole: 0.55 } : {}
-    };
-  }
-  let plotlyType, mode;
-  switch (chartType) {
-    case "line":
-      plotlyType = "scatter";
-      mode = showMarkers ? "lines+markers" : "lines";
-      break;
-    case "scatter":
-      plotlyType = "scatter";
-      mode = "markers";
-      break;
-    case "area":
-    case "area-stacked":
-      plotlyType = "scatter";
-      mode = showMarkers ? "lines+markers" : "lines";
-      break;
-    case "phase":
-      plotlyType = "scatter";
-      mode = "lines+markers";
-      break;
-    case "bar":
-      plotlyType = "bar";
-      mode = void 0;
-      break;
-    case "scatter3d":
-      plotlyType = "scatter3d";
-      mode = "markers";
-      break;
-    case "line3d":
-      plotlyType = "scatter3d";
-      mode = showMarkers ? "lines+markers" : "lines";
-      break;
-    case "surface":
-      plotlyType = "surface";
-      mode = void 0;
-      break;
-    default:
-      plotlyType = "scatter";
-      mode = showMarkers ? "lines+markers" : "lines";
-  }
-  const trace = {
-    type: plotlyType,
-    name,
-    x,
-    y
-  };
-  if (mode) {
-    trace.mode = mode;
-  }
-  if (z && is3DChart(chartType)) {
-    if (chartType === "surface") {
-      const zIs2D = Array.isArray(z) && z.length > 0 && Array.isArray(z[0]);
-      if (zIs2D) {
-        trace.z = z;
-      } else {
-        console.info("[chart_types] Surface chart with 1D z data - using mesh3d with Delaunay triangulation");
-        trace.type = "mesh3d";
-        trace.x = x;
-        trace.y = y;
-        trace.z = z;
-        trace.alphahull = 0;
-        trace.opacity = 0.8;
-        trace.color = seriesColor;
-        trace.flatshading = true;
-        trace.lighting = {
-          ambient: 0.6,
-          diffuse: 0.5,
-          specular: 0.2
-        };
-        return trace;
-      }
-    } else {
-      trace.z = z;
-    }
-  }
-  if (chartType === "phase") {
-    trace.line = {
-      color: seriesColor,
-      width: lineWidth,
-      dash: LINE_DASH_MAP[lineStyle] || "solid"
-    };
-    trace.marker = {
-      color: seriesColor,
-      size: 3
-    };
-    return trace;
-  }
-  if (["line", "area", "area-stacked", "line3d"].includes(chartType)) {
-    trace.line = {
-      color: seriesColor,
-      width: lineWidth,
-      dash: LINE_DASH_MAP[lineStyle] || "solid",
-      shape: INTERPOLATION_MAP[interpolation] || "linear"
-    };
-  }
-  if (["scatter", "scatter3d"].includes(chartType) || showMarkers) {
-    trace.marker = {
-      color: seriesColor,
-      size: chartType === "scatter3d" ? 4 : 6
-    };
-  }
-  if (chartType === "area-stacked") {
-    trace.stackgroup = yAxisId;
-    trace.groupnorm = "fraction";
-    trace.fillcolor = hexToRgba(seriesColor, 0.5);
-    trace.line = { ...trace.line || {}, width: 0.5, color: seriesColor };
-    trace.mode = "lines";
-  } else if (chartType === "area" && !stackGroup) {
-    trace.fill = "tozeroy";
-    trace.fillcolor = hexToRgba(seriesColor, 0.3);
-  } else if (stackGroup) {
-    trace.stackgroup = stackGroup;
-    trace.fillcolor = hexToRgba(seriesColor, 0.5);
-    trace.line = { ...trace.line || {}, width: 0.5, color: seriesColor };
-    trace.mode = "lines";
-  }
-  if (chartType === "bar") {
-    trace.marker = {
-      color: seriesColor
-    };
-  }
-  if (chartType === "surface") {
-    trace.colorscale = "Viridis";
-    trace.showscale = true;
-  }
-  if (!is3DChart(chartType) && yAxisId && yAxisId !== "y") {
-    trace.yaxis = yAxisId;
-  }
-  return trace;
-}
-function buildYAxisLayout(options) {
-  const {
-    axisId = "yaxis",
-    title = "",
-    position = "left",
-    scaleType = "linear",
-    min = null,
-    max = null,
-    step = null,
-    showGrid = true,
-    axisPosition = null
-  } = options;
-  const layout = {
-    title: { text: title },
-    type: scaleType === "log" ? "log" : "linear",
-    side: position,
-    gridcolor: "rgba(255,255,255,0.05)",
-    linecolor: "rgba(255,255,255,0.08)",
-    tickcolor: "rgba(255,255,255,0.3)",
-    zerolinecolor: "rgba(255,255,255,0.06)",
-    showgrid: showGrid,
-    automargin: true
-    // Auto-expand margin for tick labels
-  };
-  if (min !== null && max !== null) {
-    layout.autorange = false;
-    layout.range = [min, max];
-  } else if (min !== null || max !== null) {
-    layout.autorange = true;
-    layout.autorangeoptions = {};
-    if (min !== null) layout.autorangeoptions.minallowed = min;
-    if (max !== null) layout.autorangeoptions.maxallowed = max;
-  }
-  if (step !== null && step > 0) {
-    layout.dtick = step;
-  }
-  if (axisId !== "yaxis") {
-    layout.overlaying = "y";
-    layout.anchor = "free";
-    if (axisPosition !== null) {
-      layout.position = axisPosition;
-    } else {
-      layout.position = position === "left" ? 0 : 1;
-    }
-  }
-  return layout;
-}
-function buildXAxisLayout(options) {
-  const {
-    title = "Time",
-    scaleType = "linear",
-    min = null,
-    max = null
-  } = options;
-  const layout = {
-    title: { text: title },
-    type: scaleType === "log" ? "log" : "linear",
-    gridcolor: "rgba(255,255,255,0.05)",
-    linecolor: "rgba(255,255,255,0.08)",
-    tickcolor: "rgba(255,255,255,0.3)",
-    zerolinecolor: "rgba(255,255,255,0.06)",
-    automargin: true
-  };
-  if (min !== null || max !== null) {
-    layout.range = [min, max];
-  }
-  return layout;
-}
-function build3DSceneLayout(options) {
-  const {
-    xTitle = "X",
-    yTitle = "Y",
-    zTitle = "Z",
-    zScale = "linear",
-    zMin = null,
-    zMax = null,
-    zStep = null
-  } = options;
-  const zaxis = {
-    title: { text: zTitle },
-    type: zScale === "log" ? "log" : "linear",
-    gridcolor: "rgba(255,255,255,0.05)",
-    linecolor: "rgba(255,255,255,0.08)",
-    backgroundcolor: "rgba(0,0,0,0)"
-  };
-  if (zMin !== null || zMax !== null) {
-    zaxis.range = [zMin, zMax];
-  }
-  if (zStep !== null && zStep > 0) {
-    zaxis.dtick = zStep;
-  }
-  return {
-    xaxis: {
-      title: { text: xTitle },
-      gridcolor: "rgba(255,255,255,0.05)",
-      linecolor: "rgba(255,255,255,0.08)",
-      backgroundcolor: "rgba(0,0,0,0)"
-    },
-    yaxis: {
-      title: { text: yTitle },
-      gridcolor: "rgba(255,255,255,0.05)",
-      linecolor: "rgba(255,255,255,0.08)",
-      backgroundcolor: "rgba(0,0,0,0)"
-    },
-    zaxis,
-    bgcolor: "rgba(0,0,0,0)"
-  };
-}
-function buildLegendLayout(position) {
-  if (position === "hidden") {
-    return { showlegend: false };
-  }
-  const baseLayout = {
-    showlegend: true,
-    bgcolor: "rgba(0,0,0,0)",
-    font: { color: "#cccccc" }
-  };
-  switch (position) {
-    case "top":
-      return {
-        ...baseLayout,
-        legend: {
-          ...baseLayout,
-          orientation: "h",
-          y: 1.1,
-          yanchor: "bottom",
-          x: 0.5,
-          xanchor: "center"
-        }
-      };
-    case "bottom":
-      return {
-        ...baseLayout,
-        legend: {
-          ...baseLayout,
-          orientation: "h",
-          y: -0.15,
-          yanchor: "top",
-          x: 0.5,
-          xanchor: "center"
-        }
-      };
-    case "left":
-      return {
-        ...baseLayout,
-        legend: {
-          ...baseLayout,
-          orientation: "v",
-          x: -0.15,
-          xanchor: "right",
-          y: 0.5,
-          yanchor: "middle"
-        }
-      };
-    case "right":
-    default:
-      return {
-        ...baseLayout,
-        legend: {
-          ...baseLayout,
-          orientation: "v",
-          x: 1.02,
-          xanchor: "left",
-          y: 0.5,
-          yanchor: "middle"
-        }
-      };
-  }
-}
-function buildOverlayShapes(opts = {}) {
-  const { referenceLines = [], shadedBands = [], yRefByAxisId = {} } = opts;
-  const shapes = [];
-  const annotations = [];
-  const dashMap = { solid: "solid", dashed: "dash", dotted: "dot", dashdot: "dashdot" };
-  for (const band of shadedBands) {
-    if (band.x0 == null || band.x1 == null) continue;
-    shapes.push({
-      type: "rect",
-      xref: "x",
-      yref: "paper",
-      x0: band.x0,
-      x1: band.x1,
-      y0: 0,
-      y1: 1,
-      fillcolor: band.color || "rgba(255, 200, 0, 0.08)",
-      line: { width: 0 },
-      opacity: band.opacity ?? 1,
-      layer: "below"
-    });
-    if (band.label) {
-      annotations.push({
-        x: (band.x0 + band.x1) / 2,
-        y: band.labelY ?? 1,
-        xref: "x",
-        yref: "paper",
-        text: band.label,
-        showarrow: false,
-        font: { size: 9, color: band.labelColor || "rgba(255,255,255,0.55)" },
-        xanchor: "center",
-        yanchor: "bottom"
-      });
-    }
-  }
-  const firstYRef = Object.values(yRefByAxisId)[0] || "y";
-  for (const ref of referenceLines) {
-    if (ref.value == null || !Number.isFinite(ref.value)) continue;
-    const yRef = ref.yAxisId && yRefByAxisId[ref.yAxisId] || firstYRef;
-    const color = ref.color || "rgba(255, 120, 120, 0.75)";
-    shapes.push({
-      type: "line",
-      xref: "paper",
-      yref: yRef,
-      x0: 0,
-      x1: 1,
-      y0: ref.value,
-      y1: ref.value,
-      line: {
-        color,
-        width: ref.lineWidth ?? 1.5,
-        dash: dashMap[ref.lineStyle || "dashed"] || "dash"
-      },
-      layer: "above"
-    });
-    if (ref.label) {
-      annotations.push({
-        x: ref.labelX ?? 0.015,
-        y: ref.value,
-        xref: "paper",
-        yref: yRef,
-        text: ref.label,
-        showarrow: false,
-        font: { size: 10, color },
-        xanchor: "left",
-        yanchor: "bottom",
-        bgcolor: "rgba(20,22,26,0.6)",
-        borderpad: 2
-      });
-    }
-  }
-  return { shapes, annotations };
-}
-function buildFanBandTraces(options) {
-  const { x, upper, lower, color, opacity = 0.2, name = "" } = options;
-  const lowerTrace = {
-    type: "scatter",
-    x,
-    y: lower,
-    mode: "lines",
-    line: { width: 0 },
-    showlegend: false,
-    hoverinfo: "skip"
-  };
-  const upperTrace = {
-    type: "scatter",
-    x,
-    y: upper,
-    mode: "lines",
-    line: { width: 0 },
-    fill: "tonexty",
-    fillcolor: hexToRgba(color, opacity),
-    name: name || `${(opacity * 100).toFixed(0)}% Band`,
-    showlegend: !!name
-  };
-  return [lowerTrace, upperTrace];
-}
-function buildHistogramTrace(options) {
-  const { x, nbins = 20, color, name = "Distribution" } = options;
-  return {
-    type: "histogram",
-    x,
-    nbinsx: nbins,
-    marker: { color },
-    name
-  };
-}
-function buildBoxTrace(options) {
-  const { y, x = null, color, name = "" } = options;
-  const trace = {
-    type: "box",
-    y,
-    marker: { color },
-    name,
-    boxpoints: false
-    // Don't show individual points
-  };
-  if (x !== null) {
-    trace.x = Array.isArray(x) ? x : [x];
-  }
-  return trace;
-}
-function buildHeatmapTrace(options) {
-  const { z, x = null, y = null, colorscale = "RdBu" } = options;
-  const trace = {
-    type: "heatmap",
-    z,
-    colorscale,
-    showscale: true
-  };
-  if (x) trace.x = x;
-  if (y) trace.y = y;
-  return trace;
-}
-var DELTA_UP = "#859900";
-var DELTA_DOWN = "#dc322f";
-function buildIndicatorTrace(options) {
-  const {
-    value,
-    min = 0,
-    max = null,
-    title = "",
-    steps = null,
-    threshold = null,
-    color = null,
-    seriesIndex = 0,
-    delta = null
-  } = options;
-  const hasGauge = typeof max === "number" && Number.isFinite(max);
-  const deltaSpec = typeof delta === "number" ? { reference: delta } : delta && typeof delta === "object" ? delta : null;
-  const parts = ["number"];
-  if (hasGauge) parts.unshift("gauge");
-  if (deltaSpec) parts.push("delta");
-  const trace = {
-    type: "indicator",
-    mode: parts.join("+"),
-    value
-  };
-  if (title) trace.title = { text: title };
-  if (deltaSpec) {
-    trace.delta = {
-      reference: deltaSpec.reference,
-      relative: deltaSpec.relative === true,
-      increasing: { color: deltaSpec.increasing || DELTA_UP },
-      decreasing: { color: deltaSpec.decreasing || DELTA_DOWN }
-    };
-  }
-  if (hasGauge) {
-    trace.gauge = {
-      axis: { range: [min, max] },
-      bar: { color: color || getSeriesColor(seriesIndex) }
-    };
-    if (Array.isArray(steps) && steps.length) trace.gauge.steps = steps;
-    if (threshold !== null && threshold !== void 0) {
-      const t = typeof threshold === "number" ? { value: threshold } : threshold;
-      trace.gauge.threshold = {
-        line: { color: t.color || DELTA_DOWN, width: t.width ?? 3 },
-        thickness: t.thickness ?? 0.9,
-        value: t.value
-      };
-    }
-  }
-  return trace;
-}
-
-// src/charts/plot_config.js
-var _uid = 0;
-function uid(prefix = "p") {
-  return `${prefix}-${++_uid}-${Date.now().toString(36)}`;
-}
-function applyNanHandling(data, strategy, xData) {
-  const isMissing = (v) => v === null || v === void 0 || typeof v === "number" && !Number.isFinite(v);
-  if (strategy === "zero") return data.map((v) => isMissing(v) ? 0 : v);
-  if (strategy === "hold") {
-    const result = [];
-    let last = null;
-    for (const v of data) {
-      if (isMissing(v)) result.push(last);
-      else {
-        last = v;
-        result.push(v);
-      }
-    }
-    return result;
-  }
-  if (strategy === "interpolate") {
-    const result = [...data];
-    for (let i = 0; i < result.length; i++) {
-      if (!isMissing(result[i])) continue;
-      let left = -1, right = -1;
-      for (let j = i - 1; j >= 0; j--) {
-        if (!isMissing(result[j])) {
-          left = j;
-          break;
-        }
-      }
-      for (let j = i + 1; j < result.length; j++) {
-        if (!isMissing(result[j])) {
-          right = j;
-          break;
-        }
-      }
-      if (left >= 0 && right >= 0 && xData) {
-        const frac = (xData[i] - xData[left]) / (xData[right] - xData[left]);
-        result[i] = result[left] + frac * (result[right] - result[left]);
-      } else if (left >= 0) {
-        result[i] = result[left];
-      } else if (right >= 0) {
-        result[i] = result[right];
-      } else {
-        result[i] = null;
-      }
-    }
-    return result;
-  }
-  return data.map((v) => isMissing(v) ? null : v);
-}
-var PLOT_LAYOUTS = Object.freeze({
-  "1x1": { label: "Single", slots: 1, grid: { columns: "1fr", rows: "1fr" }, areas: [{ slot: 0, gridArea: "1/1/2/2" }] },
-  "1x2": { label: "Side by side", slots: 2, grid: { columns: "1fr 1fr", rows: "1fr" }, areas: [{ slot: 0, gridArea: "1/1/2/2" }, { slot: 1, gridArea: "1/2/2/3" }] },
-  "2x1": { label: "Stacked", slots: 2, grid: { columns: "1fr", rows: "1fr 1fr" }, areas: [{ slot: 0, gridArea: "1/1/2/2" }, { slot: 1, gridArea: "2/1/3/2" }] },
-  "2x2": { label: "2\xD72 Grid", slots: 4, grid: { columns: "1fr 1fr", rows: "1fr 1fr" }, areas: [{ slot: 0, gridArea: "1/1/2/2" }, { slot: 1, gridArea: "1/2/2/3" }, { slot: 2, gridArea: "2/1/3/2" }, { slot: 3, gridArea: "2/2/3/3" }] },
-  "1x3": { label: "Three columns", slots: 3, grid: { columns: "1fr 1fr 1fr", rows: "1fr" }, areas: [{ slot: 0, gridArea: "1/1/2/2" }, { slot: 1, gridArea: "1/2/2/3" }, { slot: 2, gridArea: "1/3/2/4" }] },
-  "wide-top": { label: "1 + 2", slots: 3, grid: { columns: "1fr 1fr", rows: "1fr 1fr" }, areas: [{ slot: 0, gridArea: "1/1/2/3" }, { slot: 1, gridArea: "2/1/3/2" }, { slot: 2, gridArea: "2/2/3/3" }] },
-  "wide-bottom": { label: "2 + 1", slots: 3, grid: { columns: "1fr 1fr", rows: "1fr 1fr" }, areas: [{ slot: 0, gridArea: "1/1/2/2" }, { slot: 1, gridArea: "1/2/2/3" }, { slot: 2, gridArea: "2/1/3/3" }] }
-});
-function makeDefaultSubplot(index) {
-  return {
-    id: uid("sp"),
-    displayName: "",
-    chartType: "line",
-    legendPosition: "hidden",
-    interpolation: "linear",
-    nanHandling: "gap",
-    showDataPoints: false,
-    showHpTrend: false,
-    showHpCycle: false,
-    hpLambda: 1600,
-    xAxis: { useTime: true, variable: "" },
-    zAxis: null,
-    yAxes: [{
-      id: uid("y"),
-      label: "",
-      scale: "linear",
-      position: "left",
-      min: null,
-      max: null,
-      step: null,
-      series: []
-    }]
-  };
-}
-function migrateData(data) {
-  if (data?.layout && Array.isArray(data?.subplots)) {
-    if ("caption" in data && !("description" in data)) {
-      data.description = data.caption;
-      data.caption = "";
-    }
-    return data;
-  }
-  const legacySingle = migrateSingleChart(data);
-  return {
-    layout: "1x1",
-    subplots: [{ id: uid("sp"), ...legacySingle }],
-    caption: "",
-    description: data?.caption ?? data?.description ?? "",
-    doc: data?.doc ?? ""
-  };
-}
-function migrateSingleChart(data) {
-  if (data?.yAxes) {
-    return {
-      displayName: data.displayName ?? "",
-      chartType: data.chartType ?? "line",
-      legendPosition: data.legendPosition ?? "hidden",
-      interpolation: data.interpolation ?? "linear",
-      nanHandling: data.nanHandling ?? "gap",
-      showDataPoints: data.showDataPoints ?? false,
-      yAxes: data.yAxes
-    };
-  }
-  const series = data?.series ?? data?.variables?.map((v, i) => ({
-    variable: v,
-    label: "",
-    color: getSeriesColor(i)
-  })) ?? [];
-  return {
-    displayName: data?.title ?? data?.displayName ?? "",
-    chartType: data?.chartType ?? data?.widgetType ?? "line",
-    legendPosition: data?.legendPosition ?? "hidden",
-    interpolation: data?.interpolation ?? "linear",
-    nanHandling: data?.nanHandling ?? "gap",
-    showDataPoints: data?.showDataPoints ?? false,
-    yAxes: [{
-      id: uid("y"),
-      label: data?.yLabel ?? "",
-      scale: "linear",
-      position: "left",
-      min: null,
-      max: null,
-      series: series.map((s, i) => ({
-        id: s.id ?? uid("s"),
-        variable: s.variable ?? "",
-        label: s.label ?? "",
-        color: s.color ?? getSeriesColor(i),
-        lineWidth: s.lineWidth ?? 2,
-        lineStyle: s.lineStyle ?? "solid",
-        stackGroup: s.stackGroup ?? null,
-        ...s.overlay ? { overlay: s.overlay } : {}
-      }))
-    }]
-  };
-}
-
-// src/charts/plot_popout_window.js
-var PlotPopoutWindow = class {
-  /**
-   * @param {Object} options
-   * @param {string} options.id - Unique window identifier
-   * @param {string} options.title - Window title
-   * @param {Object} options.plotConfig - PlotCell format: { layout, subplots }
-   * @param {Function} options.getResults - Returns { time: number[], series: { [key]: number[] } }
-   * @param {Object} options.services - { eventBus, logger }
-   * @param {Object} [options.host] - A Host (ui/js/host/host.js). Its `dialogs`
-   *        capability backs Export PNG/CSV; absent => Blob download fallback.
-   * @param {Function} [options.onClose] - Called when window closes
-   * @param {Object} [options.actuals] - ETL overlay data { seriesId: { years, values } }
-   * @param {Function} [options.configRenderer] - (container) => void — renders config panel
-   */
-  constructor({
-    id,
-    title,
-    plotConfig,
-    getResults,
-    services,
-    host,
-    onClose,
-    actuals,
-    configRenderer,
-    // The window used to listen for 'simulation:run:completed' and tell
-    // the user to "run simulation first". A chart window does not know
-    // that its data comes from a simulation; the app that opens it does.
-    refreshEvent = "data:changed",
-    emptyMessage = "No data yet.",
-    tableEmptyMessage = "No data yet."
-  }) {
-    this._id = id;
-    this._title = title || "Plot";
-    this._plotConfig = migrateData(plotConfig);
-    this._getResults = getResults;
-    this._services = services;
-    this._host = host || null;
-    this._onClose = onClose ?? (() => {
-    });
-    this._actuals = actuals ?? null;
-    this._configRenderer = configRenderer ?? null;
-    this.refreshEvent = refreshEvent;
-    this.emptyMessage = emptyMessage;
-    this.tableEmptyMessage = tableEmptyMessage;
-    this._window = null;
-    this._contentEl = null;
-    this._chartDivs = [];
-    this._gridEl = null;
-    this._activeTab = "plot";
-    this._eventDisposers = [];
-    this._resizeObserver = null;
-    this._chartCreated = false;
-    this._lastResults = null;
-    this._dataTable = null;
-    this._dataTableContainer = null;
-    this._tableHeaders = [];
-    this._tableRows = [];
-    this._plotTab = null;
-    this._dataTab = null;
-    this._configTab = null;
-    this._plotContent = null;
-    this._dataContent = null;
-    this._configContent = null;
-    this._toolbarActions = null;
-    this._zoomBtn = null;
-    this._panBtn = null;
-    this._hiddenSeries = /* @__PURE__ */ new Set();
-    this._allSeriesInfo = [];
-    this._allSeriesLabels = [];
-    this._seriesToggleBtn = null;
-    this._seriesTogglePanel = null;
-    this._seriesTogglePanelVisible = false;
-    this._lastTogglePanelSignature = null;
-    this._outsideClickHandler = null;
-    this._renderPending = false;
-    this._liveUpdate = true;
-    this._liveBtn = null;
-  }
-  get isVisible() {
-    return this._window?.isVisible ?? false;
-  }
-  async show() {
-    if (this._window?.isVisible) {
-      this._window.bringToFront();
-      return;
-    }
-    await ensurePlotly();
-    this.#createWindow();
-    this.#subscribeEvents();
-    this.#setupResizeObserver();
-    await this.#render();
-  }
-  bringToFront() {
-    this._window?.bringToFront?.();
-  }
-  close() {
-    this._window?.close?.();
-  }
-  /** Update plot config and re-render. */
-  updateConfig(plotConfig) {
-    this._plotConfig = migrateData(plotConfig);
-    this.#buildSubplotGrid();
-    this.#scheduleRender();
-  }
-  /** Update actuals overlay data and re-render. */
-  setActuals(actuals) {
-    this._actuals = actuals;
-    this.#scheduleRender();
-  }
-  // ── Window creation ─────────────────────────────────────────────────
-  #createWindow() {
-    this._contentEl = this.#buildContent();
-    this._window = new ManagedWindow({
-      id: `plot-window-${this._id}`,
-      title: this._title,
-      icon: "monitoring",
-      content: this._contentEl,
-      minWidth: 500,
-      minHeight: 400,
-      defaultWidth: 800,
-      defaultHeight: 600,
-      canMinimize: true,
-      canMaximize: true,
-      canResize: true,
-      canDrag: true,
-      onClose: () => {
-        this.#dispose();
-        this._onClose();
-      }
-    });
-    this._window.show();
-  }
-  #buildContent() {
-    const container = document.createElement("div");
-    container.className = "twm-plot-window-container";
-    const tabHeader = document.createElement("div");
-    tabHeader.className = "twm-code-tabs-header";
-    const tabs = document.createElement("div");
-    tabs.className = "tabs twm-code-tabs";
-    this._plotTab = document.createElement("button");
-    this._plotTab.className = "twm-code-tab active";
-    this._plotTab.type = "button";
-    this._plotTab.textContent = "Plot";
-    this._plotTab.addEventListener("click", () => this.#switchTab("plot"));
-    this._dataTab = document.createElement("button");
-    this._dataTab.className = "twm-code-tab";
-    this._dataTab.type = "button";
-    this._dataTab.textContent = "Data";
-    this._dataTab.addEventListener("click", () => this.#switchTab("data"));
-    tabs.appendChild(this._plotTab);
-    tabs.appendChild(this._dataTab);
-    if (this._configRenderer) {
-      this._configTab = document.createElement("button");
-      this._configTab.className = "twm-code-tab";
-      this._configTab.type = "button";
-      this._configTab.textContent = "Config";
-      this._configTab.addEventListener("click", () => this.#switchTab("config"));
-      tabs.appendChild(this._configTab);
-    }
-    this._toolbarActions = document.createElement("div");
-    this._toolbarActions.className = "twm-plot-window-toolbar";
-    const dragGroup = this.#toolbarGroup();
-    this._zoomBtn = this.#toolbarBtn("search", "Zoom", () => this.#setDragMode("zoom"));
-    this._zoomBtn.classList.add("twm-is-active");
-    this._panBtn = this.#toolbarBtn("pan_tool", "Pan", () => this.#setDragMode("pan"));
-    dragGroup.appendChild(this._zoomBtn);
-    dragGroup.appendChild(this._panBtn);
-    this._toolbarActions.appendChild(dragGroup);
-    const zoomGroup = this.#toolbarGroup();
-    zoomGroup.appendChild(this.#toolbarBtn("zoom_in", "Zoom in", () => this.#zoom(0.5)));
-    zoomGroup.appendChild(this.#toolbarBtn("zoom_out", "Zoom out", () => this.#zoom(2)));
-    zoomGroup.appendChild(this.#toolbarBtn("zoom_out_map", "Autoscale", () => this.#autoscale()));
-    zoomGroup.appendChild(this.#toolbarBtn("home", "Reset axes", () => this.#autoscale()));
-    this._toolbarActions.appendChild(zoomGroup);
-    const spacer = document.createElement("div");
-    spacer.style.flex = "1";
-    this._toolbarActions.appendChild(spacer);
-    const actionsGroup = this.#toolbarGroup();
-    this._liveBtn = this.#toolbarBtn("stream", "Live update \u2014 click to lock", () => this.#toggleLiveUpdate());
-    this._liveBtn.classList.add("twm-is-active");
-    actionsGroup.appendChild(this._liveBtn);
-    const toggleSeriesBtn = this.#toolbarBtn("visibility", "Toggle series visibility", () => this.#toggleSeriesPanel());
-    this._seriesToggleBtn = toggleSeriesBtn;
-    actionsGroup.appendChild(toggleSeriesBtn);
-    actionsGroup.appendChild(this.#toolbarBtn("image", "Download plot as PNG", () => this.#downloadPNG()));
-    actionsGroup.appendChild(this.#toolbarBtn("download", "Download data as CSV", () => this.#downloadCSV()));
-    this._toolbarActions.appendChild(actionsGroup);
-    tabHeader.appendChild(tabs);
-    tabHeader.appendChild(this._toolbarActions);
-    const content = document.createElement("div");
-    content.className = "twm-plot-window-content";
-    this._plotContent = document.createElement("div");
-    this._plotContent.className = "twm-plot-tab-content active";
-    this._plotContent.setAttribute("data-tab", "plot");
-    this._plotContent.style.cssText = "display:flex; flex-direction:column;";
-    this._gridEl = document.createElement("div");
-    this._gridEl.className = "twm-plot-window-chart";
-    this._plotContent.appendChild(this._gridEl);
-    this.#buildSubplotGrid();
-    this._dataContent = document.createElement("div");
-    this._dataContent.className = "twm-plot-tab-content";
-    this._dataContent.setAttribute("data-tab", "data");
-    this._dataContent.style.cssText = "display:none; flex-direction:column;";
-    this._dataTableContainer = document.createElement("div");
-    this._dataTableContainer.style.cssText = "flex:1; min-height:0; display:flex; flex-direction:column;";
-    this._dataContent.appendChild(this._dataTableContainer);
-    content.appendChild(this._plotContent);
-    content.appendChild(this._dataContent);
-    if (this._configRenderer) {
-      this._configContent = document.createElement("div");
-      this._configContent.className = "twm-plot-tab-content";
-      this._configContent.setAttribute("data-tab", "config");
-      this._configContent.style.cssText = "display:none; flex-direction:column; overflow:auto; padding:8px 12px;";
-      this._configRenderer(this._configContent);
-      content.appendChild(this._configContent);
-    }
-    this._seriesTogglePanel = document.createElement("div");
-    this._seriesTogglePanel.className = "twm-plot-series-toggle-panel";
-    this._seriesTogglePanel.style.display = "none";
-    container.appendChild(tabHeader);
-    container.appendChild(content);
-    container.appendChild(this._seriesTogglePanel);
-    return container;
-  }
-  // ── Subplot grid ────────────────────────────────────────────────────
-  #buildSubplotGrid() {
-    if (!this._gridEl) return;
-    for (const div of this._chartDivs) {
-      if (div && window.Plotly) {
-        try {
-          purge(div);
-        } catch (_) {
-        }
-      }
-    }
-    this._gridEl.innerHTML = "";
-    this._chartDivs = [];
-    const tmpl = PLOT_LAYOUTS[this._plotConfig.layout] || PLOT_LAYOUTS["1x1"];
-    this._gridEl.style.display = "grid";
-    this._gridEl.style.gridTemplateColumns = tmpl.grid.columns;
-    this._gridEl.style.gridTemplateRows = tmpl.grid.rows;
-    this._gridEl.style.gap = "4px";
-    this._gridEl.style.height = "100%";
-    this._gridEl.style.width = "100%";
-    for (let i = 0; i < tmpl.slots; i++) {
-      const div = document.createElement("div");
-      div.className = "plot-tile-chart";
-      div.style.gridArea = tmpl.areas[i].gridArea;
-      div.style.minHeight = "0";
-      this._gridEl.appendChild(div);
-      this._chartDivs.push(div);
-    }
-    this._chartCreated = false;
-  }
-  // ── Toolbar helpers ─────────────────────────────────────────────────
-  #toolbarGroup() {
-    const g = document.createElement("div");
-    g.className = "twm-plot-window-toolbar__group";
-    return g;
-  }
-  #toolbarBtn(icon, tooltip, onClick) {
-    const btn = document.createElement("button");
-    btn.className = "twm-btn-icon twm-has-tooltip";
-    btn.type = "button";
-    btn.setAttribute("data-tooltip", tooltip);
-    btn.innerHTML = `<span class="material-symbols-outlined">${icon}</span>`;
-    if (onClick) btn.addEventListener("click", (e) => {
-      e.stopPropagation();
-      onClick();
-    });
-    return btn;
-  }
-  // ── Plotly toolbar actions ───────────────────────────────────────────
-  #setDragMode(mode) {
-    if (!this._chartCreated) return;
-    for (const div of this._chartDivs) {
-      if (div._fullLayout) {
-        window.Plotly.relayout(div, { dragmode: mode }).catch(() => {
-        });
-      }
-    }
-    this._zoomBtn?.classList.toggle("twm-is-active", mode === "zoom");
-    this._panBtn?.classList.toggle("twm-is-active", mode === "pan");
-  }
-  #zoom(factor) {
-    for (const div of this._chartDivs) {
-      if (!div._fullLayout) continue;
-      const xa = div._fullLayout.xaxis;
-      const ya = div._fullLayout.yaxis;
-      if (!xa || !ya) continue;
-      const xr = xa.range;
-      const yr = ya.range;
-      const xMid = (xr[0] + xr[1]) / 2;
-      const yMid = (yr[0] + yr[1]) / 2;
-      const xHalf = (xr[1] - xr[0]) / 2 * factor;
-      const yHalf = (yr[1] - yr[0]) / 2 * factor;
-      window.Plotly.relayout(div, {
-        "xaxis.range": [xMid - xHalf, xMid + xHalf],
-        "yaxis.range": [yMid - yHalf, yMid + yHalf]
-      }).catch(() => {
-      });
-    }
-  }
-  #autoscale() {
-    for (const div of this._chartDivs) {
-      if (!div._fullLayout) continue;
-      window.Plotly.relayout(div, {
-        "xaxis.autorange": true,
-        "yaxis.autorange": true
-      }).catch(() => {
-      });
-    }
-  }
-  #setupResizeObserver() {
-    if (!this._plotContent) return;
-    this._resizeObserver = createRafResizeObserver(() => {
-      if (this._activeTab === "plot" && this._chartCreated && window.Plotly) {
-        for (const div of this._chartDivs) {
-          if (div._fullLayout) {
-            Plotly.Plots.resize(div).catch(() => {
-            });
-          }
-        }
-      }
-    });
-    this._resizeObserver.observe(this._plotContent);
-  }
-  #switchTab(tabName) {
-    this._activeTab = tabName;
-    this._plotTab.classList.toggle("active", tabName === "plot");
-    this._dataTab.classList.toggle("active", tabName === "data");
-    this._configTab?.classList.toggle("active", tabName === "config");
-    if (this._toolbarActions) {
-      this._toolbarActions.style.display = tabName === "plot" ? "" : "none";
-    }
-    this._plotContent.style.display = tabName === "plot" ? "flex" : "none";
-    this._dataContent.style.display = tabName === "data" ? "flex" : "none";
-    if (this._configContent) {
-      this._configContent.style.display = tabName === "config" ? "flex" : "none";
-    }
-    if (tabName === "plot" && this._chartCreated && window.Plotly) {
-      for (const div of this._chartDivs) {
-        if (div._fullLayout) {
-          Plotly.Plots.resize(div).catch(() => {
-          });
-        }
-      }
-    }
-    if (tabName === "data") {
-      this.#renderDataTable();
-    }
-  }
-  // ── Series visibility toggle ────────────────────────────────────────
-  #toggleSeriesPanel() {
-    if (this._seriesTogglePanelVisible) {
-      this.#hideSeriesPanel();
-    } else {
-      this.#showSeriesPanel();
-    }
-  }
-  #showSeriesPanel() {
-    if (!this._seriesTogglePanel || !this._seriesToggleBtn) return;
-    const btnRect = this._seriesToggleBtn.getBoundingClientRect();
-    const containerRect = this._contentEl.getBoundingClientRect();
-    this._seriesTogglePanel.style.top = `${btnRect.bottom - containerRect.top + 4}px`;
-    this._seriesTogglePanel.style.right = `${containerRect.right - btnRect.right}px`;
-    this._seriesTogglePanel.style.display = "";
-    this._seriesTogglePanelVisible = true;
-    this._seriesToggleBtn.classList.add("twm-is-active");
-    this.#rebuildSeriesToggleList();
-    this._outsideClickHandler = (e) => {
-      if (!this._seriesTogglePanel.contains(e.target) && !this._seriesToggleBtn.contains(e.target)) {
-        this.#hideSeriesPanel();
-      }
-    };
-    requestAnimationFrame(() => {
-      document.addEventListener("pointerdown", this._outsideClickHandler, true);
-    });
-  }
-  #hideSeriesPanel() {
-    if (this._seriesTogglePanel) {
-      this._seriesTogglePanel.style.display = "none";
-    }
-    this._seriesTogglePanelVisible = false;
-    this._lastTogglePanelSignature = null;
-    this._seriesToggleBtn?.classList.remove("twm-is-active");
-    if (this._outsideClickHandler) {
-      document.removeEventListener("pointerdown", this._outsideClickHandler, true);
-      this._outsideClickHandler = null;
-    }
-  }
-  #rebuildSeriesToggleList() {
-    const panel = this._seriesTogglePanel;
-    if (!panel) return;
-    panel.innerHTML = "";
-    const header = document.createElement("div");
-    header.className = "twm-plot-series-toggle-panel__header";
-    const title = document.createElement("span");
-    title.className = "twm-plot-series-toggle-panel__title";
-    title.textContent = "Series";
-    header.appendChild(title);
-    const headerActions = document.createElement("div");
-    headerActions.className = "twm-plot-series-toggle-panel__header-actions";
-    const showAllBtn = document.createElement("button");
-    showAllBtn.className = "twm-plot-series-toggle-panel__action";
-    showAllBtn.type = "button";
-    showAllBtn.textContent = "All";
-    showAllBtn.addEventListener("click", () => {
-      this._hiddenSeries.clear();
-      this.#rebuildSeriesToggleList();
-      this.#scheduleRender();
-    });
-    const hideAllBtn = document.createElement("button");
-    hideAllBtn.className = "twm-plot-series-toggle-panel__action";
-    hideAllBtn.type = "button";
-    hideAllBtn.textContent = "None";
-    hideAllBtn.addEventListener("click", () => {
-      for (const label of this._allSeriesLabels) {
-        this._hiddenSeries.add(label);
-      }
-      this.#rebuildSeriesToggleList();
-      this.#scheduleRender();
-    });
-    headerActions.appendChild(showAllBtn);
-    headerActions.appendChild(hideAllBtn);
-    header.appendChild(headerActions);
-    panel.appendChild(header);
-    const modelSeries = this._allSeriesInfo.filter((s) => !s.isOverlay);
-    const overlaySeries = this._allSeriesInfo.filter((s) => s.isOverlay);
-    const buildItem = ({ label, color, lineStyle }) => {
-      const item = document.createElement("label");
-      item.className = "twm-plot-series-toggle-panel__item";
-      const cb = document.createElement("input");
-      cb.type = "checkbox";
-      cb.checked = !this._hiddenSeries.has(label);
-      cb.addEventListener("change", () => {
-        if (cb.checked) this._hiddenSeries.delete(label);
-        else this._hiddenSeries.add(label);
-        this.#scheduleRender();
-      });
-      const dashMap = { solid: "", dashed: "4,2", dotted: "1,2" };
-      const indicator = document.createElement("div");
-      indicator.className = "twm-plot-series-toggle-panel__line-indicator";
-      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-      svg.setAttribute("viewBox", "0 0 28 14");
-      const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-      line.setAttribute("x1", "3");
-      line.setAttribute("y1", "7");
-      line.setAttribute("x2", "25");
-      line.setAttribute("y2", "7");
-      line.setAttribute("stroke", color || "#888");
-      line.setAttribute("stroke-width", "2");
-      line.setAttribute("stroke-linecap", "round");
-      const dash = dashMap[lineStyle] || "";
-      if (dash) line.setAttribute("stroke-dasharray", dash);
-      svg.appendChild(line);
-      indicator.appendChild(svg);
-      const text = document.createElement("span");
-      text.className = "twm-plot-series-toggle-panel__label";
-      text.textContent = label;
-      text.title = label;
-      item.appendChild(cb);
-      item.appendChild(indicator);
-      item.appendChild(text);
-      return item;
-    };
-    const list = document.createElement("div");
-    list.className = "twm-plot-series-toggle-panel__list";
-    const subplotGroups = /* @__PURE__ */ new Map();
-    for (const info of modelSeries) {
-      if (!subplotGroups.has(info.subplotIndex)) {
-        subplotGroups.set(info.subplotIndex, []);
-      }
-      subplotGroups.get(info.subplotIndex).push(info);
-    }
-    const multipleSubplots = subplotGroups.size > 1;
-    for (const [spIdx, seriesList] of subplotGroups) {
-      if (multipleSubplots) {
-        const spName = seriesList[0]?.subplotName || `Subplot ${spIdx + 1}`;
-        const spHeader = document.createElement("div");
-        spHeader.className = "twm-plot-series-toggle-panel__axis-label";
-        spHeader.textContent = spName;
-        list.appendChild(spHeader);
-      }
-      for (const info of seriesList) {
-        list.appendChild(buildItem(info));
-      }
-    }
-    panel.appendChild(list);
-    if (overlaySeries.length > 0) {
-      const ovList = document.createElement("div");
-      ovList.className = "twm-plot-series-toggle-panel__list";
-      const ovHeader = document.createElement("div");
-      ovHeader.className = "twm-plot-series-toggle-panel__axis-label";
-      ovHeader.textContent = "Overlays";
-      ovList.appendChild(ovHeader);
-      for (const info of overlaySeries) {
-        ovList.appendChild(buildItem(info));
-      }
-      panel.appendChild(ovList);
-    }
-  }
-  // ── Event subscriptions ─────────────────────────────────────────────
-  #subscribeEvents() {
-    const { eventBus } = this._services;
-    if (!eventBus) return;
-    this._eventDisposers.push(
-      eventBus.on("streaming:delta", () => {
-        if (this._liveUpdate) this.#scheduleRender();
-      })
-    );
-    this._eventDisposers.push(
-      eventBus.on("streaming:complete", () => {
-        if (this._liveUpdate) this.#scheduleRender();
-      })
-    );
-    this._eventDisposers.push(
-      eventBus.on(this.refreshEvent, () => {
-        if (this._liveUpdate) this.#scheduleRender();
-      })
-    );
-  }
-  #toggleLiveUpdate() {
-    this._liveUpdate = !this._liveUpdate;
-    if (this._liveBtn) {
-      this._liveBtn.classList.toggle("twm-is-active", this._liveUpdate);
-      const icon = this._liveBtn.querySelector(".material-symbols-outlined");
-      if (icon) icon.textContent = this._liveUpdate ? "stream" : "lock";
-      this._liveBtn.title = this._liveUpdate ? "Live update \u2014 click to lock" : "Locked \u2014 click for live update";
-    }
-    if (this._liveUpdate) this.#scheduleRender();
-  }
-  #scheduleRender() {
-    if (this._renderPending) return;
-    this._renderPending = true;
-    requestAnimationFrame(() => {
-      this._renderPending = false;
-      this.#render();
-    });
-  }
-  // ── Rendering ───────────────────────────────────────────────────────
-  async #render() {
-    if (!this._window?.isVisible) return;
-    const results = this._getResults?.();
-    if (!results) return;
-    this._lastResults = results;
-    this.#collectSeriesInfo();
-    this.#renderAllCharts(results);
-    this.#updateTableData(results);
-    if (this._activeTab === "data") {
-      this.#renderDataTable();
-    }
-  }
-  #collectSeriesInfo() {
-    this._allSeriesInfo = [];
-    this._allSeriesLabels = [];
-    const subplots = this._plotConfig.subplots ?? [];
-    for (let spIdx = 0; spIdx < subplots.length; spIdx++) {
-      const sp = subplots[spIdx];
-      for (const axis of sp.yAxes ?? []) {
-        for (const s of axis.series ?? []) {
-          const label = s.label || s.variable || "Series";
-          this._allSeriesInfo.push({
-            label,
-            color: s.color || getSeriesColor(this._allSeriesInfo.length),
-            lineStyle: s.lineStyle || "solid",
-            subplotIndex: spIdx,
-            subplotName: sp.displayName || `Subplot ${spIdx + 1}`
-          });
-          this._allSeriesLabels.push(label);
-          if (s.overlay?.etlKey) {
-            const ovLabel = s.overlay.label || `${label} (actual)`;
-            this._allSeriesInfo.push({
-              label: ovLabel,
-              color: s.overlay.color || s.color || getSeriesColor(this._allSeriesInfo.length),
-              lineStyle: s.overlay.lineStyle || "dashed",
-              subplotIndex: spIdx,
-              subplotName: sp.displayName || `Subplot ${spIdx + 1}`,
-              isOverlay: true
-            });
-            this._allSeriesLabels.push(ovLabel);
-          }
-        }
-      }
-    }
-    for (const label of this._hiddenSeries) {
-      if (!this._allSeriesLabels.includes(label)) {
-        this._hiddenSeries.delete(label);
-      }
-    }
-    if (this._seriesTogglePanelVisible) {
-      const newSig = this._allSeriesInfo.map((s) => `${s.subplotIndex}|${s.label}|${s.lineStyle}`).join("\0");
-      if (newSig !== this._lastTogglePanelSignature) {
-        this._lastTogglePanelSignature = newSig;
-        this.#rebuildSeriesToggleList();
-      }
-    }
-    if (this._seriesToggleBtn) {
-      const icon = this._seriesToggleBtn.querySelector(".material-symbols-outlined");
-      if (icon) {
-        icon.textContent = this._hiddenSeries.size > 0 ? "visibility_off" : "visibility";
-      }
-    }
-  }
-  #renderAllCharts(results) {
-    if (!window.Plotly) return;
-    const subplots = this._plotConfig.subplots ?? [];
-    for (let i = 0; i < this._chartDivs.length; i++) {
-      const chartDiv = this._chartDivs[i];
-      const sp = subplots[i];
-      if (!chartDiv) continue;
-      if (!sp) {
-        chartDiv.innerHTML = '<div class="twm-plot-no-data" style="color:rgba(255,255,255,0.3);text-align:center;padding:16px;">No subplot configured.</div>';
-        continue;
-      }
-      this.#renderSubplotChart(chartDiv, sp, results);
-    }
-  }
-  async #renderSubplotChart(chartDiv, sp, results) {
-    const { time, series } = results;
-    const traces = [];
-    const layoutAxes = {};
-    const yRefByAxisId = {};
-    let axisCount = 0;
-    for (const axis of sp.yAxes ?? []) {
-      axisCount++;
-      const yAxisKey = axisCount === 1 ? "yaxis" : `yaxis${axisCount}`;
-      const yRef = axisCount === 1 ? "y" : `y${axisCount}`;
-      if (axis.id) yRefByAxisId[axis.id] = yRef;
-      layoutAxes[yAxisKey] = buildYAxisLayout({
-        axisId: yAxisKey,
-        title: axis.label || "",
-        position: axis.position || "left",
-        scaleType: axis.scale || "linear",
-        min: axis.min,
-        max: axis.max,
-        showGrid: (sp.yAxes ?? []).length === 1,
-        axisPosition: axisCount > 1 ? axis.position === "right" ? 1 : 0 : null
-      });
-      for (const s of axis.series ?? []) {
-        if (!s.variable) continue;
-        const label = s.label || s.variable;
-        if (this._hiddenSeries.has(label)) continue;
-        let rawY = series?.[s._resultKey ?? s.variable];
-        if (!rawY && s._resultKey) {
-          rawY = series?.[s.variable];
-        }
-        if (!rawY) {
-          const dotIdx = s.variable.indexOf(".");
-          if (dotIdx >= 0) rawY = series?.[s.variable.slice(dotIdx + 1)];
-        }
-        if (!rawY) continue;
-        const y = Array.isArray(rawY) ? applyNanHandling(rawY, sp.nanHandling ?? "gap", time) : rawY;
-        const seriesTime = s._resultTime ?? time;
-        traces.push(buildTrace({
-          chartType: sp.chartType || "line",
-          x: seriesTime,
-          y,
-          name: label,
-          color: s.color,
-          lineWidth: s.lineWidth ?? 2,
-          lineStyle: s.lineStyle ?? "solid",
-          interpolation: sp.interpolation ?? "linear",
-          yAxisId: yRef,
-          showMarkers: sp.showDataPoints ?? false,
-          stackGroup: s.stackGroup ?? null
-        }));
-        if (s.overlay?.etlKey && this._actuals?.[s.id]) {
-          const ovLabel = s.overlay.label || `${label} (actual)`;
-          if (!this._hiddenSeries.has(ovLabel)) {
-            const act = this._actuals[s.id];
-            if (act?.years?.length) {
-              const ov = s.overlay;
-              const dashMap = { dashed: "dash", dotted: "dot", solid: "solid" };
-              traces.push({
-                type: "scatter",
-                mode: ov.mode || "markers+lines",
-                x: act.years,
-                y: act.values,
-                name: ov.label || `${label} (actual)`,
-                yaxis: yRef === "y" ? void 0 : yRef,
-                line: {
-                  color: ov.color || s.color,
-                  width: ov.lineWidth ?? 2,
-                  dash: dashMap[ov.lineStyle] || "dash"
-                },
-                marker: {
-                  color: ov.color || s.color,
-                  size: 4,
-                  symbol: "circle"
-                },
-                showlegend: true
-              });
-            }
-          }
-        }
-      }
-    }
-    if ((sp.showHpTrend || sp.showHpCycle) && window.pywebview?.api?.hp_filter) {
-      const hpLambda = sp.hpLambda ?? 1600;
-      for (const trace of [...traces]) {
-        if (trace.type && trace.type !== "scatter" && trace.type !== "scattergl") continue;
-        try {
-          const hpResult = await window.pywebview.api.hp_filter({
-            data: trace.y,
-            lambda: hpLambda
-          });
-          if (!hpResult?.ok) continue;
-          const { trend, cycle } = hpResult;
-          const origColor = trace.line?.color || trace.marker?.color || getSeriesColor(0);
-          if (sp.showHpTrend && trend) {
-            traces.push({
-              x: trace.x,
-              y: trend,
-              type: "scatter",
-              mode: "lines",
-              name: `${trace.name} (HP Trend)`,
-              yaxis: trace.yaxis || "y",
-              line: { color: origColor, width: 2, dash: "dash" },
-              showlegend: true
-            });
-          }
-          if (sp.showHpCycle && cycle) {
-            traces.push({
-              x: trace.x,
-              y: cycle,
-              type: "scatter",
-              mode: "lines",
-              name: `${trace.name} (HP Cycle)`,
-              yaxis: trace.yaxis || "y",
-              line: { color: origColor, width: 1, dash: "dot" },
-              showlegend: true
-            });
-          }
-        } catch (_) {
-        }
-      }
-    }
-    if (traces.length === 0 && this._hiddenSeries.size === 0) {
-      chartDiv.innerHTML = `<div class="twm-plot-no-data" style="color:rgba(255,255,255,0.3);text-align:center;padding:16px;font-size:11px;">${this.emptyMessage}</div>`;
-      return;
-    }
-    const legendPos = sp.legendPosition === "hidden" ? "top" : sp.legendPosition ?? "top";
-    const legend = buildLegendLayout(legendPos);
-    const xRange = time?.length >= 2 ? [time[0], time[time.length - 1]] : void 0;
-    const { shapes, annotations } = buildOverlayShapes({
-      referenceLines: sp.referenceLines,
-      shadedBands: sp.shadedBands,
-      yRefByAxisId
-    });
-    const layout = {
-      ...layoutAxes,
-      ...shapes.length ? { shapes } : {},
-      ...annotations.length ? { annotations } : {},
-      xaxis: {
-        gridcolor: "rgba(255,255,255,0.05)",
-        linecolor: "rgba(255,255,255,0.08)",
-        tickcolor: "rgba(255,255,255,0.3)",
-        zerolinecolor: "rgba(255,255,255,0.06)",
-        automargin: true,
-        ...xRange ? { range: xRange } : {}
-      },
-      ...legend,
-      paper_bgcolor: "transparent",
-      plot_bgcolor: "transparent",
-      font: { family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif", color: "#cccccc", size: 11 },
-      margin: { t: 10, r: 20, b: 40, l: 50 },
-      hoverlabel: {
-        bgcolor: "#1e2228",
-        bordercolor: "#444444",
-        font: { family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif", color: "#cccccc" }
-      },
-      autosize: true,
-      hovermode: "x unified"
-    };
-    if (!chartDiv.isConnected || chartDiv.offsetWidth === 0) return;
-    try {
-      await Plotly.react(chartDiv, traces, layout, { responsive: true, displayModeBar: false });
-      this._chartCreated = true;
-    } catch (_) {
-    }
-  }
-  // ── Data table ──────────────────────────────────────────────────────
-  #updateTableData(results) {
-    if (!results) {
-      this._tableHeaders = [];
-      this._tableRows = [];
-      return;
-    }
-    const headers = ["Time"];
-    const seriesColumns = [];
-    const { time, series } = results;
-    const subplots = this._plotConfig.subplots ?? [];
-    for (const sp of subplots) {
-      for (const axis of sp.yAxes ?? []) {
-        for (const s of axis.series ?? []) {
-          if (!s.variable) continue;
-          const label = s.label || s.variable;
-          let rawY = series?.[s._resultKey ?? s.variable];
-          if (!rawY && s._resultKey) {
-            rawY = series?.[s.variable];
-          }
-          if (!rawY) {
-            const dotIdx = s.variable.indexOf(".");
-            if (dotIdx >= 0) rawY = series?.[s.variable.slice(dotIdx + 1)];
-          }
-          if (!rawY) continue;
-          headers.push(label);
-          seriesColumns.push(rawY);
-        }
-      }
-    }
-    const rows = [];
-    for (let i = 0; i < time.length; i++) {
-      const row = [time[i]];
-      for (const col of seriesColumns) {
-        row.push(Array.isArray(col) ? col[i] : null);
-      }
-      rows.push(row);
-    }
-    this._tableHeaders = headers;
-    this._tableRows = rows;
-  }
-  #renderDataTable() {
-    if (!this._dataTableContainer) return;
-    if (!this._dataTable) {
-      this._dataTable = new DataTable(this._dataTableContainer, {
-        headers: this._tableHeaders,
-        rows: this._tableRows,
-        pageSize: 100,
-        pagination: true,
-        selectable: true,
-        copyable: true,
-        sortable: true,
-        filterable: true,
-        readonly: false,
-        emptyMessage: this.tableEmptyMessage,
-        services: this._services,
-        host: this._host
-      });
-      this._dataTable.render();
-    } else {
-      this._dataTable.setData({
-        headers: this._tableHeaders,
-        rows: this._tableRows
-      });
-    }
-  }
-  // ── Downloads ────────────────────────────────────────────────────────
-  async #downloadCSV() {
-    if (this._tableRows.length === 0) {
-      this.#notify("Download", "No data available to download.", "warn");
-      return;
-    }
-    const filename = `${this._title.replace(/[^a-z0-9]/gi, "_")}_data.csv`;
-    const lines = [this._tableHeaders.join(",")];
-    for (const row of this._tableRows) {
-      lines.push(row.map((val) => this.#csvEscape(val)).join(","));
-    }
-    const csv = lines.join("\n");
-    const dialogs = this._host?.dialogs;
-    let result = null;
-    if (dialogs) {
-      try {
-        result = await dialogs.saveFile({ data: csv, filename, kind: "csv" });
-      } catch (err) {
-        console.error("[PlotPopoutWindow] CSV download failed:", err);
-        this.#notify("Download", "Failed to save file", "error");
-        return;
-      }
-    }
-    if (result) {
-      if (result.ok) {
-        this.#notify("Download", `Saved ${this._tableRows.length} rows to ${result.path}`, "success");
-      } else if (!result.cancelled) {
-        this.#notify("Download", result.error || "Failed to save file", "error");
-      }
-      return;
-    }
-    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = filename;
-    link.click();
-    URL.revokeObjectURL(url);
-    this.#notify("Download", "Download started", "info");
-  }
-  #csvEscape(value) {
-    if (value == null) return "";
-    const str = String(value);
-    if (str.includes(",") || str.includes('"') || str.includes("\n")) {
-      return `"${str.replace(/"/g, '""')}"`;
-    }
-    return str;
-  }
-  async #downloadPNG() {
-    const targetDiv = this._chartDivs.length === 1 ? this._chartDivs[0] : this._chartDivs[0];
-    if (!targetDiv || !window.Plotly || !this._chartCreated) {
-      this.#notify("Download", "Plot not ready", "warn");
-      return;
-    }
-    const filename = `${this._title.replace(/[^a-z0-9]/gi, "_")}.png`;
-    try {
-      const pngDataUrl = await window.Plotly.toImage(targetDiv, {
-        format: "png",
-        width: 1920,
-        height: 1080,
-        scale: 2
-      });
-      const dialogs = this._host?.dialogs;
-      const result = dialogs ? await dialogs.saveFile({ data: pngDataUrl.split(",")[1], filename, kind: "png" }) : null;
-      if (result) {
-        if (result.ok) {
-          this.#notify("Download", `Plot saved to ${result.path}`, "success");
-        } else if (!result.cancelled) {
-          this.#notify("Download", result.error || "Failed to save image", "error");
-        }
-      } else {
-        const link = document.createElement("a");
-        link.href = pngDataUrl;
-        link.download = filename;
-        link.click();
-        this.#notify("Download", "PNG download started", "info");
-      }
-    } catch (err) {
-      this._services.logger?.warn?.("[PlotPopoutWindow] PNG download failed", err);
-      this.#notify("Download", "Failed to generate PNG", "error");
-    }
-  }
-  // ── Utilities ───────────────────────────────────────────────────────
-  #notify(title, message, severity = "info") {
-    this._services.eventBus?.emit?.("toast:show", {
-      title,
-      message,
-      type: severity
-    });
-  }
-  // ── Cleanup ─────────────────────────────────────────────────────────
-  #dispose() {
-    if (this._dataTable) {
-      this._dataTable.dispose();
-      this._dataTable = null;
-    }
-    this.#hideSeriesPanel();
-    if (this._resizeObserver) {
-      this._resizeObserver.disconnect();
-      this._resizeObserver = null;
-    }
-    for (const disposer of this._eventDisposers) {
-      try {
-        disposer?.dispose?.();
-      } catch (_) {
-      }
-    }
-    this._eventDisposers = [];
-    for (const div of this._chartDivs) {
-      if (div && window.Plotly) {
-        try {
-          purge(div);
-        } catch (_) {
-        }
-      }
-    }
-    this._window = null;
-    this._contentEl = null;
-    this._gridEl = null;
-    this._chartDivs = [];
-    this._plotTab = null;
-    this._dataTab = null;
-    this._plotContent = null;
-    this._dataContent = null;
-    this._dataTableContainer = null;
-    this._toolbarActions = null;
-    this._zoomBtn = null;
-    this._panBtn = null;
-    this._seriesToggleBtn = null;
-    this._seriesTogglePanel = null;
-    this._lastTogglePanelSignature = null;
-    this._hiddenSeries = null;
-    this._allSeriesInfo = null;
-    this._allSeriesLabels = null;
-    this._chartCreated = false;
-    this._lastResults = null;
-  }
-};
-var _openWindows = /* @__PURE__ */ new Map();
-async function openPlotPopoutWindow(options) {
-  const { id } = options;
-  let win = _openWindows.get(id);
-  if (win?.isVisible) {
-    win.bringToFront();
-    return win;
-  }
-  win = new PlotPopoutWindow({
-    ...options,
-    onClose: () => _openWindows.delete(id)
-  });
-  _openWindows.set(id, win);
-  await win.show();
-  return win;
-}
-async function openRawTracesWindow({ id, title, traces, layout, frames, tableHeaders, tableRows, services, host }) {
-  const existing = _openWindows.get(id);
-  if (existing?.isVisible) {
-    existing.bringToFront();
-    return existing;
-  }
-  await ensurePlotly();
-  let chartDiv = null;
-  let chartCreated = false;
-  let resizeObserver = null;
-  let dataTable = null;
-  let managedWindow = null;
-  const container = document.createElement("div");
-  container.className = "twm-plot-window-container";
-  const tabHeader = document.createElement("div");
-  tabHeader.className = "twm-code-tabs-header";
-  const tabs = document.createElement("div");
-  tabs.className = "tabs twm-code-tabs";
-  const plotTab = document.createElement("button");
-  plotTab.className = "twm-code-tab active";
-  plotTab.type = "button";
-  plotTab.textContent = "Plot";
-  const dataTab = document.createElement("button");
-  dataTab.className = "twm-code-tab";
-  dataTab.type = "button";
-  dataTab.textContent = "Data";
-  tabs.appendChild(plotTab);
-  tabs.appendChild(dataTab);
-  const toolbar = document.createElement("div");
-  toolbar.className = "twm-plot-window-toolbar";
-  const spacer = document.createElement("div");
-  spacer.style.flex = "1";
-  toolbar.appendChild(spacer);
-  const actionsGroup = document.createElement("div");
-  actionsGroup.className = "twm-plot-window-toolbar__group";
-  const mkBtn = (icon, tooltip, onClick) => {
-    const btn = document.createElement("button");
-    btn.className = "twm-btn-icon twm-has-tooltip";
-    btn.type = "button";
-    btn.setAttribute("data-tooltip", tooltip);
-    btn.innerHTML = `<span class="material-symbols-outlined">${icon}</span>`;
-    btn.addEventListener("click", (e) => {
-      e.stopPropagation();
-      onClick();
-    });
-    return btn;
-  };
-  actionsGroup.appendChild(mkBtn("image", "Download plot as PNG", downloadPNG));
-  actionsGroup.appendChild(mkBtn("download", "Download data as CSV", downloadCSV));
-  toolbar.appendChild(actionsGroup);
-  tabHeader.appendChild(tabs);
-  tabHeader.appendChild(toolbar);
-  const content = document.createElement("div");
-  content.className = "twm-plot-window-content";
-  const plotContent = document.createElement("div");
-  plotContent.className = "twm-plot-tab-content active";
-  plotContent.setAttribute("data-tab", "plot");
-  plotContent.style.cssText = "display:flex; flex-direction:column;";
-  chartDiv = document.createElement("div");
-  chartDiv.className = "twm-plot-window-chart";
-  plotContent.appendChild(chartDiv);
-  const dataContent = document.createElement("div");
-  dataContent.className = "twm-plot-tab-content";
-  dataContent.setAttribute("data-tab", "data");
-  dataContent.style.cssText = "display:none; flex-direction:column;";
-  const dataTableContainer = document.createElement("div");
-  dataTableContainer.style.cssText = "flex:1; min-height:0; display:flex; flex-direction:column;";
-  dataContent.appendChild(dataTableContainer);
-  content.appendChild(plotContent);
-  content.appendChild(dataContent);
-  container.appendChild(tabHeader);
-  container.appendChild(content);
-  plotTab.addEventListener("click", () => {
-    plotTab.classList.add("active");
-    dataTab.classList.remove("active");
-    toolbar.style.display = "";
-    plotContent.style.display = "flex";
-    dataContent.style.display = "none";
-    if (chartCreated && window.Plotly && chartDiv) {
-      try {
-        window.Plotly.Plots.resize(chartDiv);
-      } catch (_) {
-      }
-    }
-  });
-  dataTab.addEventListener("click", () => {
-    dataTab.classList.add("active");
-    plotTab.classList.remove("active");
-    toolbar.style.display = "none";
-    plotContent.style.display = "none";
-    dataContent.style.display = "flex";
-    if (!dataTable && tableHeaders?.length) {
-      dataTable = new DataTable(dataTableContainer, {
-        headers: tableHeaders,
-        rows: tableRows || [],
-        pagination: true,
-        pageSize: 100,
-        selectable: true,
-        copyable: true,
-        sortable: true,
-        filterable: true,
-        readonly: true,
-        emptyMessage: "No data available",
-        services,
-        host
-      });
-      dataTable.render();
-    }
-  });
-  function dispose() {
-    if (resizeObserver) {
-      resizeObserver.disconnect();
-      resizeObserver = null;
-    }
-    if (dataTable) {
-      dataTable.dispose();
-      dataTable = null;
-    }
-    if (chartDiv && window.Plotly) {
-      try {
-        purge(chartDiv);
-      } catch (_) {
-      }
-    }
-    chartDiv = null;
-    chartCreated = false;
-    managedWindow = null;
-    _openWindows.delete(id);
-  }
-  managedWindow = new ManagedWindow({
-    id: `raw-plot-${id}`,
-    title: title || "Chart",
-    icon: "monitoring",
-    content: container,
-    minWidth: 500,
-    minHeight: 400,
-    defaultWidth: 800,
-    defaultHeight: 600,
-    canMinimize: true,
-    canMaximize: true,
-    canResize: true,
-    canDrag: true,
-    onClose: dispose
-  });
-  const handle = {
-    get isVisible() {
-      return managedWindow?.isVisible ?? false;
-    },
-    bringToFront() {
-      managedWindow?.bringToFront?.();
-    },
-    close() {
-      managedWindow?.close?.();
-    }
-  };
-  _openWindows.set(id, handle);
-  managedWindow.show();
-  const defaultMargin = { l: 60, r: 30, t: 40, b: 60 };
-  const plotLayout = {
-    paper_bgcolor: "transparent",
-    plot_bgcolor: "transparent",
-    font: { family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif", color: "#cccccc", size: 11 },
-    hoverlabel: {
-      bgcolor: "#1e2228",
-      bordercolor: "#444444",
-      font: { family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif", color: "#cccccc" }
-    },
-    autosize: true,
-    hovermode: "x unified",
-    ...layout,
-    margin: { ...defaultMargin, ...layout?.margin || {} }
-  };
-  await window.Plotly.newPlot(chartDiv, traces, plotLayout, {
-    responsive: true,
-    displayModeBar: true,
-    displaylogo: false,
-    modeBarButtonsToRemove: ["lasso2d", "select2d", "toImage"]
-  });
-  if (Array.isArray(frames) && frames.length) {
-    try {
-      await window.Plotly.addFrames(chartDiv, frames);
-    } catch (err) {
-      console.warn("[openRawTracesWindow] addFrames failed:", err);
-    }
-  }
-  chartCreated = true;
-  resizeObserver = createRafResizeObserver(() => {
-    if (chartDiv && chartCreated && window.Plotly) {
-      try {
-        window.Plotly.Plots.resize(chartDiv);
-      } catch (_) {
-      }
-    }
-  });
-  resizeObserver.observe(plotContent);
-  function notify(ntitle, message, severity = "info") {
-    services?.eventBus?.emit?.("toast:show", { title: ntitle, message, type: severity });
-  }
-  async function downloadPNG() {
-    if (!chartDiv || !chartCreated || !window.Plotly) {
-      notify("Download", "Plot not ready", "warn");
-      return;
-    }
-    const filename = `${(title || "chart").replace(/[^a-z0-9]/gi, "_")}.png`;
-    try {
-      const dataUrl = await window.Plotly.toImage(chartDiv, {
-        format: "png",
-        width: 1920,
-        height: 1080,
-        scale: 2
-      });
-      const dialogs = host?.dialogs;
-      const result = dialogs ? await dialogs.saveFile({ data: dataUrl.split(",")[1], filename, kind: "png" }) : null;
-      if (result) {
-        if (result.ok) notify("Download", `Plot saved to ${result.path}`, "success");
-        else if (!result.cancelled) notify("Download", result.error || "Failed to save image", "error");
-      } else {
-        const link = document.createElement("a");
-        link.href = dataUrl;
-        link.download = filename;
-        link.click();
-        notify("Download", "PNG download started", "info");
-      }
-    } catch (err) {
-      console.error("[openRawTracesWindow] PNG download failed:", err);
-      notify("Download", "Failed to generate PNG", "error");
-    }
-  }
-  async function downloadCSV() {
-    if (!tableRows?.length) {
-      notify("Download", "No data available to download", "warn");
-      return;
-    }
-    const filename = `${(title || "data").replace(/[^a-z0-9]/gi, "_")}_data.csv`;
-    const csvEscape = (val) => {
-      if (val == null) return "";
-      const str = String(val);
-      return str.includes(",") || str.includes('"') || str.includes("\n") ? `"${str.replace(/"/g, '""')}"` : str;
-    };
-    const lines = [(tableHeaders || []).join(",")];
-    for (const row of tableRows) lines.push(row.map(csvEscape).join(","));
-    const csv = lines.join("\n");
-    const dialogs = host?.dialogs;
-    let result = null;
-    if (dialogs) {
-      try {
-        result = await dialogs.saveFile({ data: csv, filename, kind: "csv" });
-      } catch (err) {
-        console.error("[openRawTracesWindow] CSV download failed:", err);
-        notify("Download", "Failed to save file", "error");
-        return;
-      }
-    }
-    if (result) {
-      if (result.ok) notify("Download", `Saved ${tableRows.length} rows to ${result.path}`, "success");
-      else if (!result.cancelled) notify("Download", result.error || "Failed to save file", "error");
-    } else {
-      const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = filename;
-      link.click();
-      URL.revokeObjectURL(url);
-      notify("Download", "Download started", "info");
-    }
-  }
-  return handle;
-}
-
-export {
-  setPlotlySource,
-  DARK_THEME_LAYOUT,
-  DEFAULT_CONFIG,
-  ensurePlotly,
-  createChart,
-  updateChart,
-  extendTraces,
-  relayout,
-  restyle,
-  purge,
-  hasPlot,
-  resize,
-  hexToRgba,
-  COLOR_PALETTE,
-  getSeriesColor,
-  createChartDeferred,
-  CHART_TYPES_2D,
-  CHART_TYPES_3D,
-  ALL_CHART_TYPES,
-  is3DChart,
-  buildTrace,
-  buildYAxisLayout,
-  buildXAxisLayout,
-  build3DSceneLayout,
-  buildLegendLayout,
-  buildOverlayShapes,
-  buildFanBandTraces,
-  buildHistogramTrace,
-  buildBoxTrace,
-  buildHeatmapTrace,
-  buildIndicatorTrace,
-  uid,
-  applyNanHandling,
-  PLOT_LAYOUTS,
-  makeDefaultSubplot,
-  migrateData,
-  migrateSingleChart,
-  PlotPopoutWindow,
-  openPlotPopoutWindow,
-  openRawTracesWindow
-};
-//# sourceMappingURL=chunk-F5FYDCOA.js.map
+import {
+  DataTable,
+  createRafResizeObserver
+} from "./chunk-KH2GJTKR.js";
+import {
+  ManagedWindow
+} from "./chunk-6JSOVNID.js";
+
+// src/charts/plotly_wrapper.js
+var _plotlySrc = null;
+function setPlotlySource(src) {
+  if (typeof src === "string" && src) _plotlySrc = src;
+}
+var _plotlyLoadPromise = null;
+var _plotlyPatchesInstalled = false;
+function _installPlotlyPatches() {
+  if (_plotlyPatchesInstalled) return;
+  _plotlyPatchesInstalled = true;
+  const targetDesc = Object.getOwnPropertyDescriptor(Event.prototype, "target");
+  if (targetDesc && targetDesc.get && !targetDesc.set) {
+    const origGetter = targetDesc.get;
+    Object.defineProperty(Event.prototype, "target", {
+      configurable: true,
+      enumerable: true,
+      get() {
+        return this._plotlyTarget ?? origGetter.call(this);
+      },
+      set(v) {
+        this._plotlyTarget = v;
+      }
+    });
+  }
+  const _origGetContext = HTMLCanvasElement.prototype.getContext;
+  HTMLCanvasElement.prototype.getContext = function(type, attrs) {
+    if (type === "2d") {
+      attrs = Object.assign({ willReadFrequently: true }, attrs);
+    }
+    return _origGetContext.call(this, type, attrs);
+  };
+}
+if (typeof HTMLCanvasElement !== "undefined") {
+  _installPlotlyPatches();
+}
+var DARK_THEME_LAYOUT = {
+  paper_bgcolor: "transparent",
+  plot_bgcolor: "transparent",
+  font: {
+    family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+    size: 11,
+    color: "#cccccc"
+  },
+  margin: { l: 50, r: 20, t: 30, b: 40 },
+  legend: {
+    bgcolor: "rgba(0,0,0,0)",
+    font: { color: "#cccccc" }
+  },
+  xaxis: {
+    gridcolor: "#333333",
+    linecolor: "#444444",
+    tickcolor: "#666666",
+    zerolinecolor: "#444444"
+  },
+  yaxis: {
+    gridcolor: "#333333",
+    linecolor: "#444444",
+    tickcolor: "#666666",
+    zerolinecolor: "#444444"
+  },
+  // Hover tooltip styling for dark theme
+  hoverlabel: {
+    bgcolor: "#1e2228",
+    bordercolor: "#444444",
+    font: {
+      family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
+      size: 12,
+      color: "#e0e0e0"
+    }
+  },
+  // 3D scene defaults
+  scene: {
+    xaxis: {
+      gridcolor: "#333333",
+      linecolor: "#444444",
+      backgroundcolor: "rgba(0,0,0,0)"
+    },
+    yaxis: {
+      gridcolor: "#333333",
+      linecolor: "#444444",
+      backgroundcolor: "rgba(0,0,0,0)"
+    },
+    zaxis: {
+      gridcolor: "#333333",
+      linecolor: "#444444",
+      backgroundcolor: "rgba(0,0,0,0)"
+    },
+    bgcolor: "rgba(0,0,0,0)"
+  }
+};
+var DEFAULT_CONFIG = {
+  responsive: true,
+  displaylogo: false,
+  displayModeBar: false,
+  // Hide modebar completely
+  scrollZoom: true,
+  // Allow zoom with scroll wheel instead
+  toImageButtonOptions: {
+    format: "png",
+    filename: "ecosim_chart",
+    scale: 2
+  }
+};
+async function ensurePlotly() {
+  if (typeof Plotly !== "undefined") {
+    return Plotly;
+  }
+  if (_plotlyLoadPromise) {
+    return _plotlyLoadPromise;
+  }
+  if (!_plotlySrc) {
+    throw new Error(
+      '[twm/charts] Plotly is not loaded and no source is configured. Either load Plotly yourself (a <script> tag that sets window.Plotly), or call setPlotlySource("/path/to/plotly.min.js") before rendering a chart.'
+    );
+  }
+  _plotlyLoadPromise = (async () => {
+    let code;
+    try {
+      const response = await fetch(_plotlySrc, { credentials: "same-origin" });
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      code = await response.text();
+    } catch (err) {
+      return loadThroughMaskedDefine();
+    }
+    return evaluateWithoutAmd(code, _plotlySrc);
+  })();
+  return _plotlyLoadPromise;
+}
+function evaluateWithoutAmd(code, src) {
+  const run = new Function(
+    "define",
+    "module",
+    "exports",
+    `${code}
+//# sourceURL=${src}`
+  );
+  run(void 0, void 0, void 0);
+  if (typeof Plotly === "undefined") {
+    throw new Error(`Plotly.js was evaluated from ${src} but did not define a Plotly global \u2014 the file may not be a Plotly UMD bundle.`);
+  }
+  return Plotly;
+}
+function loadThroughMaskedDefine() {
+  return new Promise((resolve, reject) => {
+    const hadDefine = "define" in window;
+    const savedDefine = window.define;
+    let arrivedDefine;
+    let arrived = false;
+    let guarded = false;
+    const maskAmd = (value) => {
+      if (typeof value !== "function") return void 0;
+      const masked = function define(...args) {
+        return value.apply(this, args);
+      };
+      for (const key of Object.getOwnPropertyNames(value)) {
+        if (key === "amd" || key === "length" || key === "name") continue;
+        try {
+          masked[key] = value[key];
+        } catch {
+        }
+      }
+      masked.amd = void 0;
+      return masked;
+    };
+    try {
+      Object.defineProperty(window, "define", {
+        configurable: true,
+        enumerable: true,
+        get: () => maskAmd(arrived ? arrivedDefine : savedDefine),
+        set: (value) => {
+          arrivedDefine = value;
+          arrived = true;
+        }
+      });
+      guarded = true;
+    } catch {
+      window.define = void 0;
+    }
+    const release = () => {
+      const value = arrived ? arrivedDefine : savedDefine;
+      if (guarded) {
+        delete window.define;
+        guarded = false;
+      }
+      if (arrived || hadDefine) window.define = value;
+    };
+    const script = document.createElement("script");
+    script.src = _plotlySrc;
+    script.async = true;
+    script.onload = () => {
+      release();
+      if (typeof Plotly !== "undefined") {
+        resolve(Plotly);
+      } else {
+        reject(new Error("Plotly.js loaded but Plotly global not found. Something defined an AMD loader while it was loading, so Plotly registered as a module instead of a global."));
+      }
+    };
+    script.onerror = () => {
+      release();
+      reject(new Error(`Failed to load Plotly.js from ${_plotlySrc} \u2014 call setPlotlySource() with the path to your copy.`));
+    };
+    document.head.appendChild(script);
+  });
+}
+async function createChart(container, data, layout = {}, config = {}) {
+  const Plotly2 = await ensurePlotly();
+  const mergedLayout = {
+    ...DARK_THEME_LAYOUT,
+    ...layout
+  };
+  const mergedConfig = {
+    ...DEFAULT_CONFIG,
+    ...config
+  };
+  return Plotly2.newPlot(container, data, mergedLayout, mergedConfig);
+}
+async function updateChart(container, data, layout = {}) {
+  const Plotly2 = await ensurePlotly();
+  const mergedLayout = {
+    ...DARK_THEME_LAYOUT,
+    ...layout
+  };
+  return Plotly2.react(container, data, mergedLayout);
+}
+async function extendTraces(container, update, traceIndices, maxPoints = null) {
+  const Plotly2 = await ensurePlotly();
+  if (maxPoints) {
+    return Plotly2.extendTraces(container, update, traceIndices, maxPoints);
+  }
+  return Plotly2.extendTraces(container, update, traceIndices);
+}
+async function relayout(container, layoutUpdate) {
+  const Plotly2 = await ensurePlotly();
+  return Plotly2.relayout(container, layoutUpdate);
+}
+async function restyle(container, styleUpdate, traceIndices) {
+  const Plotly2 = await ensurePlotly();
+  return Plotly2.restyle(container, styleUpdate, traceIndices);
+}
+async function purge(container) {
+  const Plotly2 = await ensurePlotly();
+  return Plotly2.purge(container);
+}
+function hasPlot(container) {
+  return container && container._fullLayout !== void 0;
+}
+async function resize(container) {
+  const Plotly2 = await ensurePlotly();
+  return Plotly2.Plots.resize(container);
+}
+function hexToRgba(hex, alpha = 1) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return hex;
+  const r = parseInt(result[1], 16);
+  const g = parseInt(result[2], 16);
+  const b = parseInt(result[3], 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+var COLOR_PALETTE = [
+  "#268bd2",
+  // Solarized Blue
+  "#d33682",
+  // Solarized Magenta
+  "#cb4b16",
+  // Solarized Orange
+  "#2aa198",
+  // Solarized Cyan
+  "#6a5acd",
+  // SlateBlue/Purple
+  "#7a7d80",
+  // Gray
+  "#9fb6cf"
+  // Gray-Blue
+];
+function getSeriesColor(index) {
+  return COLOR_PALETTE[index % COLOR_PALETTE.length];
+}
+async function createChartDeferred(container, traces, layout = {}, config = {}) {
+  const Plotly2 = await ensurePlotly();
+  const mergedLayout = {
+    ...DARK_THEME_LAYOUT,
+    ...layout
+  };
+  const mergedConfig = {
+    ...DEFAULT_CONFIG,
+    ...config
+  };
+  const w = container.offsetWidth;
+  const h = container.offsetHeight;
+  let resizeObserver = null;
+  const cleanup = () => {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+  };
+  if (w > 0 && h > 0) {
+    await Plotly2.newPlot(container, traces, mergedLayout, mergedConfig);
+    resizeObserver = createRafResizeObserver(() => {
+      if (hasPlot(container)) {
+        Plotly2.Plots.resize(container).catch(() => {
+        });
+      }
+    });
+    resizeObserver.observe(container);
+    return { element: container, cleanup };
+  }
+  return new Promise((resolve) => {
+    let rendered = false;
+    resizeObserver = createRafResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        if (width > 0 && height > 0) {
+          if (!rendered) {
+            rendered = true;
+            Plotly2.newPlot(container, traces, mergedLayout, mergedConfig).then(() => {
+              resolve({ element: container, cleanup });
+            }).catch(() => {
+              resolve({ element: container, cleanup });
+            });
+          } else if (hasPlot(container)) {
+            Plotly2.Plots.resize(container).catch(() => {
+            });
+          }
+        }
+      }
+    });
+    resizeObserver.observe(container);
+  });
+}
+
+// src/charts/chart_types.js
+var CHART_TYPES_2D = Object.freeze([
+  { value: "line", label: "Line" },
+  { value: "bar", label: "Bar" },
+  { value: "scatter", label: "Scatter" },
+  { value: "area", label: "Area" },
+  { value: "area-stacked", label: "Area (Stacked %)" },
+  { value: "phase", label: "Phase" },
+  // Categorical part-of-whole. They belong in this list because the list is
+  // what a consumer renders as its chart-type dropdown — but they are NOT
+  // (x[], y[]) charts, and `buildTrace` leaves for them before the switch:
+  // read the early return there before adding a fourth. `indicator` is
+  // deliberately NOT here, because it takes a SCALAR — a dropdown offering it
+  // beside these would offer a rendering of data the chart is not bound to.
+  { value: "pie", label: "Pie" },
+  { value: "donut", label: "Donut" },
+  { value: "funnel", label: "Funnel" }
+]);
+var CHART_TYPES_3D = Object.freeze([
+  { value: "scatter3d", label: "3D Scatter" },
+  { value: "line3d", label: "3D Line" },
+  { value: "surface", label: "3D Surface" }
+]);
+var ALL_CHART_TYPES = Object.freeze([...CHART_TYPES_2D, ...CHART_TYPES_3D]);
+function is3DChart(chartType) {
+  return ["scatter3d", "line3d", "surface"].includes(chartType);
+}
+var LINE_DASH_MAP = {
+  solid: "solid",
+  dashed: "dash",
+  dotted: "dot"
+};
+var INTERPOLATION_MAP = {
+  linear: "linear",
+  step: "hv",
+  // horizontal-vertical step
+  cubic: "spline",
+  // smooth spline
+  auto: "linear"
+};
+function buildTrace(options) {
+  const {
+    chartType = "line",
+    x = [],
+    y = [],
+    z = null,
+    name = "Series",
+    color = null,
+    lineWidth = 2,
+    lineStyle = "solid",
+    interpolation = "linear",
+    yAxisId = "y",
+    showMarkers = false,
+    seriesIndex = 0,
+    stackGroup = null,
+    colors = null
+  } = options;
+  const seriesColor = color || getSeriesColor(seriesIndex);
+  if (chartType === "pie" || chartType === "donut" || chartType === "funnel") {
+    const sliceColors = Array.isArray(colors) && colors.length ? colors : y.map((_, i) => getSeriesColor(i));
+    if (chartType === "funnel") {
+      return {
+        type: "funnel",
+        name,
+        y: x,
+        // stages read down the categorical axis
+        x: y,
+        // ...and the measure runs across
+        marker: { color: sliceColors },
+        textinfo: "value+percent initial"
+      };
+    }
+    return {
+      type: "pie",
+      name,
+      labels: x,
+      values: y,
+      marker: { colors: sliceColors },
+      // Plotly sorts slices descending by default. The caller has
+      // already ordered its rows — a dashboard binding carries its own
+      // `sort` — and a second, invisible reordering here makes the chart
+      // disagree with the table beside it and with the config that
+      // produced both.
+      sort: false,
+      ...chartType === "donut" ? { hole: 0.55 } : {}
+    };
+  }
+  let plotlyType, mode;
+  switch (chartType) {
+    case "line":
+      plotlyType = "scatter";
+      mode = showMarkers ? "lines+markers" : "lines";
+      break;
+    case "scatter":
+      plotlyType = "scatter";
+      mode = "markers";
+      break;
+    case "area":
+    case "area-stacked":
+      plotlyType = "scatter";
+      mode = showMarkers ? "lines+markers" : "lines";
+      break;
+    case "phase":
+      plotlyType = "scatter";
+      mode = "lines+markers";
+      break;
+    case "bar":
+      plotlyType = "bar";
+      mode = void 0;
+      break;
+    case "scatter3d":
+      plotlyType = "scatter3d";
+      mode = "markers";
+      break;
+    case "line3d":
+      plotlyType = "scatter3d";
+      mode = showMarkers ? "lines+markers" : "lines";
+      break;
+    case "surface":
+      plotlyType = "surface";
+      mode = void 0;
+      break;
+    default:
+      plotlyType = "scatter";
+      mode = showMarkers ? "lines+markers" : "lines";
+  }
+  const trace = {
+    type: plotlyType,
+    name,
+    x,
+    y
+  };
+  if (mode) {
+    trace.mode = mode;
+  }
+  if (z && is3DChart(chartType)) {
+    if (chartType === "surface") {
+      const zIs2D = Array.isArray(z) && z.length > 0 && Array.isArray(z[0]);
+      if (zIs2D) {
+        trace.z = z;
+      } else {
+        console.info("[chart_types] Surface chart with 1D z data - using mesh3d with Delaunay triangulation");
+        trace.type = "mesh3d";
+        trace.x = x;
+        trace.y = y;
+        trace.z = z;
+        trace.alphahull = 0;
+        trace.opacity = 0.8;
+        trace.color = seriesColor;
+        trace.flatshading = true;
+        trace.lighting = {
+          ambient: 0.6,
+          diffuse: 0.5,
+          specular: 0.2
+        };
+        return trace;
+      }
+    } else {
+      trace.z = z;
+    }
+  }
+  if (chartType === "phase") {
+    trace.line = {
+      color: seriesColor,
+      width: lineWidth,
+      dash: LINE_DASH_MAP[lineStyle] || "solid"
+    };
+    trace.marker = {
+      color: seriesColor,
+      size: 3
+    };
+    return trace;
+  }
+  if (["line", "area", "area-stacked", "line3d"].includes(chartType)) {
+    trace.line = {
+      color: seriesColor,
+      width: lineWidth,
+      dash: LINE_DASH_MAP[lineStyle] || "solid",
+      shape: INTERPOLATION_MAP[interpolation] || "linear"
+    };
+  }
+  if (["scatter", "scatter3d"].includes(chartType) || showMarkers) {
+    trace.marker = {
+      color: seriesColor,
+      size: chartType === "scatter3d" ? 4 : 6
+    };
+  }
+  if (chartType === "area-stacked") {
+    trace.stackgroup = yAxisId;
+    trace.groupnorm = "fraction";
+    trace.fillcolor = hexToRgba(seriesColor, 0.5);
+    trace.line = { ...trace.line || {}, width: 0.5, color: seriesColor };
+    trace.mode = "lines";
+  } else if (chartType === "area" && !stackGroup) {
+    trace.fill = "tozeroy";
+    trace.fillcolor = hexToRgba(seriesColor, 0.3);
+  } else if (stackGroup) {
+    trace.stackgroup = stackGroup;
+    trace.fillcolor = hexToRgba(seriesColor, 0.5);
+    trace.line = { ...trace.line || {}, width: 0.5, color: seriesColor };
+    trace.mode = "lines";
+  }
+  if (chartType === "bar") {
+    trace.marker = {
+      color: seriesColor
+    };
+  }
+  if (chartType === "surface") {
+    trace.colorscale = "Viridis";
+    trace.showscale = true;
+  }
+  if (!is3DChart(chartType) && yAxisId && yAxisId !== "y") {
+    trace.yaxis = yAxisId;
+  }
+  return trace;
+}
+function buildYAxisLayout(options) {
+  const {
+    axisId = "yaxis",
+    title = "",
+    position = "left",
+    scaleType = "linear",
+    min = null,
+    max = null,
+    step = null,
+    showGrid = true,
+    axisPosition = null
+  } = options;
+  const layout = {
+    title: { text: title },
+    type: scaleType === "log" ? "log" : "linear",
+    side: position,
+    gridcolor: "rgba(255,255,255,0.05)",
+    linecolor: "rgba(255,255,255,0.08)",
+    tickcolor: "rgba(255,255,255,0.3)",
+    zerolinecolor: "rgba(255,255,255,0.06)",
+    showgrid: showGrid,
+    automargin: true
+    // Auto-expand margin for tick labels
+  };
+  if (min !== null && max !== null) {
+    layout.autorange = false;
+    layout.range = [min, max];
+  } else if (min !== null || max !== null) {
+    layout.autorange = true;
+    layout.autorangeoptions = {};
+    if (min !== null) layout.autorangeoptions.minallowed = min;
+    if (max !== null) layout.autorangeoptions.maxallowed = max;
+  }
+  if (step !== null && step > 0) {
+    layout.dtick = step;
+  }
+  if (axisId !== "yaxis") {
+    layout.overlaying = "y";
+    layout.anchor = "free";
+    if (axisPosition !== null) {
+      layout.position = axisPosition;
+    } else {
+      layout.position = position === "left" ? 0 : 1;
+    }
+  }
+  return layout;
+}
+function buildXAxisLayout(options) {
+  const {
+    title = "Time",
+    scaleType = "linear",
+    min = null,
+    max = null
+  } = options;
+  const layout = {
+    title: { text: title },
+    type: scaleType === "log" ? "log" : "linear",
+    gridcolor: "rgba(255,255,255,0.05)",
+    linecolor: "rgba(255,255,255,0.08)",
+    tickcolor: "rgba(255,255,255,0.3)",
+    zerolinecolor: "rgba(255,255,255,0.06)",
+    automargin: true
+  };
+  if (min !== null || max !== null) {
+    layout.range = [min, max];
+  }
+  return layout;
+}
+function build3DSceneLayout(options) {
+  const {
+    xTitle = "X",
+    yTitle = "Y",
+    zTitle = "Z",
+    zScale = "linear",
+    zMin = null,
+    zMax = null,
+    zStep = null
+  } = options;
+  const zaxis = {
+    title: { text: zTitle },
+    type: zScale === "log" ? "log" : "linear",
+    gridcolor: "rgba(255,255,255,0.05)",
+    linecolor: "rgba(255,255,255,0.08)",
+    backgroundcolor: "rgba(0,0,0,0)"
+  };
+  if (zMin !== null || zMax !== null) {
+    zaxis.range = [zMin, zMax];
+  }
+  if (zStep !== null && zStep > 0) {
+    zaxis.dtick = zStep;
+  }
+  return {
+    xaxis: {
+      title: { text: xTitle },
+      gridcolor: "rgba(255,255,255,0.05)",
+      linecolor: "rgba(255,255,255,0.08)",
+      backgroundcolor: "rgba(0,0,0,0)"
+    },
+    yaxis: {
+      title: { text: yTitle },
+      gridcolor: "rgba(255,255,255,0.05)",
+      linecolor: "rgba(255,255,255,0.08)",
+      backgroundcolor: "rgba(0,0,0,0)"
+    },
+    zaxis,
+    bgcolor: "rgba(0,0,0,0)"
+  };
+}
+function buildLegendLayout(position) {
+  if (position === "hidden") {
+    return { showlegend: false };
+  }
+  const baseLayout = {
+    showlegend: true,
+    bgcolor: "rgba(0,0,0,0)",
+    font: { color: "#cccccc" }
+  };
+  switch (position) {
+    case "top":
+      return {
+        ...baseLayout,
+        legend: {
+          ...baseLayout,
+          orientation: "h",
+          y: 1.1,
+          yanchor: "bottom",
+          x: 0.5,
+          xanchor: "center"
+        }
+      };
+    case "bottom":
+      return {
+        ...baseLayout,
+        legend: {
+          ...baseLayout,
+          orientation: "h",
+          y: -0.15,
+          yanchor: "top",
+          x: 0.5,
+          xanchor: "center"
+        }
+      };
+    case "left":
+      return {
+        ...baseLayout,
+        legend: {
+          ...baseLayout,
+          orientation: "v",
+          x: -0.15,
+          xanchor: "right",
+          y: 0.5,
+          yanchor: "middle"
+        }
+      };
+    case "right":
+    default:
+      return {
+        ...baseLayout,
+        legend: {
+          ...baseLayout,
+          orientation: "v",
+          x: 1.02,
+          xanchor: "left",
+          y: 0.5,
+          yanchor: "middle"
+        }
+      };
+  }
+}
+function buildOverlayShapes(opts = {}) {
+  const { referenceLines = [], shadedBands = [], yRefByAxisId = {} } = opts;
+  const shapes = [];
+  const annotations = [];
+  const dashMap = { solid: "solid", dashed: "dash", dotted: "dot", dashdot: "dashdot" };
+  for (const band of shadedBands) {
+    if (band.x0 == null || band.x1 == null) continue;
+    shapes.push({
+      type: "rect",
+      xref: "x",
+      yref: "paper",
+      x0: band.x0,
+      x1: band.x1,
+      y0: 0,
+      y1: 1,
+      fillcolor: band.color || "rgba(255, 200, 0, 0.08)",
+      line: { width: 0 },
+      opacity: band.opacity ?? 1,
+      layer: "below"
+    });
+    if (band.label) {
+      annotations.push({
+        x: (band.x0 + band.x1) / 2,
+        y: band.labelY ?? 1,
+        xref: "x",
+        yref: "paper",
+        text: band.label,
+        showarrow: false,
+        font: { size: 9, color: band.labelColor || "rgba(255,255,255,0.55)" },
+        xanchor: "center",
+        yanchor: "bottom"
+      });
+    }
+  }
+  const firstYRef = Object.values(yRefByAxisId)[0] || "y";
+  for (const ref of referenceLines) {
+    if (ref.value == null || !Number.isFinite(ref.value)) continue;
+    const yRef = ref.yAxisId && yRefByAxisId[ref.yAxisId] || firstYRef;
+    const color = ref.color || "rgba(255, 120, 120, 0.75)";
+    shapes.push({
+      type: "line",
+      xref: "paper",
+      yref: yRef,
+      x0: 0,
+      x1: 1,
+      y0: ref.value,
+      y1: ref.value,
+      line: {
+        color,
+        width: ref.lineWidth ?? 1.5,
+        dash: dashMap[ref.lineStyle || "dashed"] || "dash"
+      },
+      layer: "above"
+    });
+    if (ref.label) {
+      annotations.push({
+        x: ref.labelX ?? 0.015,
+        y: ref.value,
+        xref: "paper",
+        yref: yRef,
+        text: ref.label,
+        showarrow: false,
+        font: { size: 10, color },
+        xanchor: "left",
+        yanchor: "bottom",
+        bgcolor: "rgba(20,22,26,0.6)",
+        borderpad: 2
+      });
+    }
+  }
+  return { shapes, annotations };
+}
+function buildFanBandTraces(options) {
+  const { x, upper, lower, color, opacity = 0.2, name = "" } = options;
+  const lowerTrace = {
+    type: "scatter",
+    x,
+    y: lower,
+    mode: "lines",
+    line: { width: 0 },
+    showlegend: false,
+    hoverinfo: "skip"
+  };
+  const upperTrace = {
+    type: "scatter",
+    x,
+    y: upper,
+    mode: "lines",
+    line: { width: 0 },
+    fill: "tonexty",
+    fillcolor: hexToRgba(color, opacity),
+    name: name || `${(opacity * 100).toFixed(0)}% Band`,
+    showlegend: !!name
+  };
+  return [lowerTrace, upperTrace];
+}
+function buildHistogramTrace(options) {
+  const { x, nbins = 20, color, name = "Distribution" } = options;
+  return {
+    type: "histogram",
+    x,
+    nbinsx: nbins,
+    marker: { color },
+    name
+  };
+}
+function buildBoxTrace(options) {
+  const { y, x = null, color, name = "" } = options;
+  const trace = {
+    type: "box",
+    y,
+    marker: { color },
+    name,
+    boxpoints: false
+    // Don't show individual points
+  };
+  if (x !== null) {
+    trace.x = Array.isArray(x) ? x : [x];
+  }
+  return trace;
+}
+function buildHeatmapTrace(options) {
+  const { z, x = null, y = null, colorscale = "RdBu" } = options;
+  const trace = {
+    type: "heatmap",
+    z,
+    colorscale,
+    showscale: true
+  };
+  if (x) trace.x = x;
+  if (y) trace.y = y;
+  return trace;
+}
+var DELTA_UP = "#859900";
+var DELTA_DOWN = "#dc322f";
+function buildIndicatorTrace(options) {
+  const {
+    value,
+    min = 0,
+    max = null,
+    title = "",
+    steps = null,
+    threshold = null,
+    color = null,
+    seriesIndex = 0,
+    delta = null
+  } = options;
+  const hasGauge = typeof max === "number" && Number.isFinite(max);
+  const deltaSpec = typeof delta === "number" ? { reference: delta } : delta && typeof delta === "object" ? delta : null;
+  const parts = ["number"];
+  if (hasGauge) parts.unshift("gauge");
+  if (deltaSpec) parts.push("delta");
+  const trace = {
+    type: "indicator",
+    mode: parts.join("+"),
+    value
+  };
+  if (title) trace.title = { text: title };
+  if (deltaSpec) {
+    trace.delta = {
+      reference: deltaSpec.reference,
+      relative: deltaSpec.relative === true,
+      increasing: { color: deltaSpec.increasing || DELTA_UP },
+      decreasing: { color: deltaSpec.decreasing || DELTA_DOWN }
+    };
+  }
+  if (hasGauge) {
+    trace.gauge = {
+      axis: { range: [min, max] },
+      bar: { color: color || getSeriesColor(seriesIndex) }
+    };
+    if (Array.isArray(steps) && steps.length) trace.gauge.steps = steps;
+    if (threshold !== null && threshold !== void 0) {
+      const t = typeof threshold === "number" ? { value: threshold } : threshold;
+      trace.gauge.threshold = {
+        line: { color: t.color || DELTA_DOWN, width: t.width ?? 3 },
+        thickness: t.thickness ?? 0.9,
+        value: t.value
+      };
+    }
+  }
+  return trace;
+}
+
+// src/charts/plot_config.js
+var _uid = 0;
+function uid(prefix = "p") {
+  return `${prefix}-${++_uid}-${Date.now().toString(36)}`;
+}
+function applyNanHandling(data, strategy, xData) {
+  const isMissing = (v) => v === null || v === void 0 || typeof v === "number" && !Number.isFinite(v);
+  if (strategy === "zero") return data.map((v) => isMissing(v) ? 0 : v);
+  if (strategy === "hold") {
+    const result = [];
+    let last = null;
+    for (const v of data) {
+      if (isMissing(v)) result.push(last);
+      else {
+        last = v;
+        result.push(v);
+      }
+    }
+    return result;
+  }
+  if (strategy === "interpolate") {
+    const result = [...data];
+    for (let i = 0; i < result.length; i++) {
+      if (!isMissing(result[i])) continue;
+      let left = -1, right = -1;
+      for (let j = i - 1; j >= 0; j--) {
+        if (!isMissing(result[j])) {
+          left = j;
+          break;
+        }
+      }
+      for (let j = i + 1; j < result.length; j++) {
+        if (!isMissing(result[j])) {
+          right = j;
+          break;
+        }
+      }
+      if (left >= 0 && right >= 0 && xData) {
+        const frac = (xData[i] - xData[left]) / (xData[right] - xData[left]);
+        result[i] = result[left] + frac * (result[right] - result[left]);
+      } else if (left >= 0) {
+        result[i] = result[left];
+      } else if (right >= 0) {
+        result[i] = result[right];
+      } else {
+        result[i] = null;
+      }
+    }
+    return result;
+  }
+  return data.map((v) => isMissing(v) ? null : v);
+}
+var PLOT_LAYOUTS = Object.freeze({
+  "1x1": { label: "Single", slots: 1, grid: { columns: "1fr", rows: "1fr" }, areas: [{ slot: 0, gridArea: "1/1/2/2" }] },
+  "1x2": { label: "Side by side", slots: 2, grid: { columns: "1fr 1fr", rows: "1fr" }, areas: [{ slot: 0, gridArea: "1/1/2/2" }, { slot: 1, gridArea: "1/2/2/3" }] },
+  "2x1": { label: "Stacked", slots: 2, grid: { columns: "1fr", rows: "1fr 1fr" }, areas: [{ slot: 0, gridArea: "1/1/2/2" }, { slot: 1, gridArea: "2/1/3/2" }] },
+  "2x2": { label: "2\xD72 Grid", slots: 4, grid: { columns: "1fr 1fr", rows: "1fr 1fr" }, areas: [{ slot: 0, gridArea: "1/1/2/2" }, { slot: 1, gridArea: "1/2/2/3" }, { slot: 2, gridArea: "2/1/3/2" }, { slot: 3, gridArea: "2/2/3/3" }] },
+  "1x3": { label: "Three columns", slots: 3, grid: { columns: "1fr 1fr 1fr", rows: "1fr" }, areas: [{ slot: 0, gridArea: "1/1/2/2" }, { slot: 1, gridArea: "1/2/2/3" }, { slot: 2, gridArea: "1/3/2/4" }] },
+  "wide-top": { label: "1 + 2", slots: 3, grid: { columns: "1fr 1fr", rows: "1fr 1fr" }, areas: [{ slot: 0, gridArea: "1/1/2/3" }, { slot: 1, gridArea: "2/1/3/2" }, { slot: 2, gridArea: "2/2/3/3" }] },
+  "wide-bottom": { label: "2 + 1", slots: 3, grid: { columns: "1fr 1fr", rows: "1fr 1fr" }, areas: [{ slot: 0, gridArea: "1/1/2/2" }, { slot: 1, gridArea: "1/2/2/3" }, { slot: 2, gridArea: "2/1/3/3" }] }
+});
+function makeDefaultSubplot(index) {
+  return {
+    id: uid("sp"),
+    displayName: "",
+    chartType: "line",
+    legendPosition: "hidden",
+    interpolation: "linear",
+    nanHandling: "gap",
+    showDataPoints: false,
+    showHpTrend: false,
+    showHpCycle: false,
+    hpLambda: 1600,
+    xAxis: { useTime: true, variable: "" },
+    zAxis: null,
+    yAxes: [{
+      id: uid("y"),
+      label: "",
+      scale: "linear",
+      position: "left",
+      min: null,
+      max: null,
+      step: null,
+      series: []
+    }]
+  };
+}
+function migrateData(data) {
+  if (data?.layout && Array.isArray(data?.subplots)) {
+    if ("caption" in data && !("description" in data)) {
+      data.description = data.caption;
+      data.caption = "";
+    }
+    return data;
+  }
+  const legacySingle = migrateSingleChart(data);
+  return {
+    layout: "1x1",
+    subplots: [{ id: uid("sp"), ...legacySingle }],
+    caption: "",
+    description: data?.caption ?? data?.description ?? "",
+    doc: data?.doc ?? ""
+  };
+}
+function migrateSingleChart(data) {
+  if (data?.yAxes) {
+    return {
+      displayName: data.displayName ?? "",
+      chartType: data.chartType ?? "line",
+      legendPosition: data.legendPosition ?? "hidden",
+      interpolation: data.interpolation ?? "linear",
+      nanHandling: data.nanHandling ?? "gap",
+      showDataPoints: data.showDataPoints ?? false,
+      yAxes: data.yAxes
+    };
+  }
+  const series = data?.series ?? data?.variables?.map((v, i) => ({
+    variable: v,
+    label: "",
+    color: getSeriesColor(i)
+  })) ?? [];
+  return {
+    displayName: data?.title ?? data?.displayName ?? "",
+    chartType: data?.chartType ?? data?.widgetType ?? "line",
+    legendPosition: data?.legendPosition ?? "hidden",
+    interpolation: data?.interpolation ?? "linear",
+    nanHandling: data?.nanHandling ?? "gap",
+    showDataPoints: data?.showDataPoints ?? false,
+    yAxes: [{
+      id: uid("y"),
+      label: data?.yLabel ?? "",
+      scale: "linear",
+      position: "left",
+      min: null,
+      max: null,
+      series: series.map((s, i) => ({
+        id: s.id ?? uid("s"),
+        variable: s.variable ?? "",
+        label: s.label ?? "",
+        color: s.color ?? getSeriesColor(i),
+        lineWidth: s.lineWidth ?? 2,
+        lineStyle: s.lineStyle ?? "solid",
+        stackGroup: s.stackGroup ?? null,
+        ...s.overlay ? { overlay: s.overlay } : {}
+      }))
+    }]
+  };
+}
+
+// src/charts/plot_popout_window.js
+var PlotPopoutWindow = class {
+  /**
+   * @param {Object} options
+   * @param {string} options.id - Unique window identifier
+   * @param {string} options.title - Window title
+   * @param {Object} options.plotConfig - PlotCell format: { layout, subplots }
+   * @param {Function} options.getResults - Returns { time: number[], series: { [key]: number[] } }
+   * @param {Object} options.services - { eventBus, logger }
+   * @param {Object} [options.host] - A Host (ui/js/host/host.js). Its `dialogs`
+   *        capability backs Export PNG/CSV; absent => Blob download fallback.
+   * @param {Function} [options.onClose] - Called when window closes
+   * @param {Object} [options.actuals] - ETL overlay data { seriesId: { years, values } }
+   * @param {Function} [options.configRenderer] - (container) => void — renders config panel
+   */
+  constructor({
+    id,
+    title,
+    plotConfig,
+    getResults,
+    services,
+    host,
+    onClose,
+    actuals,
+    configRenderer,
+    // The window used to listen for 'simulation:run:completed' and tell
+    // the user to "run simulation first". A chart window does not know
+    // that its data comes from a simulation; the app that opens it does.
+    refreshEvent = "data:changed",
+    emptyMessage = "No data yet.",
+    tableEmptyMessage = "No data yet."
+  }) {
+    this._id = id;
+    this._title = title || "Plot";
+    this._plotConfig = migrateData(plotConfig);
+    this._getResults = getResults;
+    this._services = services;
+    this._host = host || null;
+    this._onClose = onClose ?? (() => {
+    });
+    this._actuals = actuals ?? null;
+    this._configRenderer = configRenderer ?? null;
+    this.refreshEvent = refreshEvent;
+    this.emptyMessage = emptyMessage;
+    this.tableEmptyMessage = tableEmptyMessage;
+    this._window = null;
+    this._contentEl = null;
+    this._chartDivs = [];
+    this._gridEl = null;
+    this._activeTab = "plot";
+    this._eventDisposers = [];
+    this._resizeObserver = null;
+    this._chartCreated = false;
+    this._lastResults = null;
+    this._dataTable = null;
+    this._dataTableContainer = null;
+    this._tableHeaders = [];
+    this._tableRows = [];
+    this._plotTab = null;
+    this._dataTab = null;
+    this._configTab = null;
+    this._plotContent = null;
+    this._dataContent = null;
+    this._configContent = null;
+    this._toolbarActions = null;
+    this._zoomBtn = null;
+    this._panBtn = null;
+    this._hiddenSeries = /* @__PURE__ */ new Set();
+    this._allSeriesInfo = [];
+    this._allSeriesLabels = [];
+    this._seriesToggleBtn = null;
+    this._seriesTogglePanel = null;
+    this._seriesTogglePanelVisible = false;
+    this._lastTogglePanelSignature = null;
+    this._outsideClickHandler = null;
+    this._renderPending = false;
+    this._liveUpdate = true;
+    this._liveBtn = null;
+  }
+  get isVisible() {
+    return this._window?.isVisible ?? false;
+  }
+  async show() {
+    if (this._window?.isVisible) {
+      this._window.bringToFront();
+      return;
+    }
+    await ensurePlotly();
+    this.#createWindow();
+    this.#subscribeEvents();
+    this.#setupResizeObserver();
+    await this.#render();
+  }
+  bringToFront() {
+    this._window?.bringToFront?.();
+  }
+  close() {
+    this._window?.close?.();
+  }
+  /** Update plot config and re-render. */
+  updateConfig(plotConfig) {
+    this._plotConfig = migrateData(plotConfig);
+    this.#buildSubplotGrid();
+    this.#scheduleRender();
+  }
+  /** Update actuals overlay data and re-render. */
+  setActuals(actuals) {
+    this._actuals = actuals;
+    this.#scheduleRender();
+  }
+  // ── Window creation ─────────────────────────────────────────────────
+  #createWindow() {
+    this._contentEl = this.#buildContent();
+    this._window = new ManagedWindow({
+      id: `plot-window-${this._id}`,
+      title: this._title,
+      icon: "monitoring",
+      content: this._contentEl,
+      minWidth: 500,
+      minHeight: 400,
+      defaultWidth: 800,
+      defaultHeight: 600,
+      canMinimize: true,
+      canMaximize: true,
+      canResize: true,
+      canDrag: true,
+      onClose: () => {
+        this.#dispose();
+        this._onClose();
+      }
+    });
+    this._window.show();
+  }
+  #buildContent() {
+    const container = document.createElement("div");
+    container.className = "twm-plot-window-container";
+    const tabHeader = document.createElement("div");
+    tabHeader.className = "twm-code-tabs-header";
+    const tabs = document.createElement("div");
+    tabs.className = "tabs twm-code-tabs";
+    this._plotTab = document.createElement("button");
+    this._plotTab.className = "twm-code-tab active";
+    this._plotTab.type = "button";
+    this._plotTab.textContent = "Plot";
+    this._plotTab.addEventListener("click", () => this.#switchTab("plot"));
+    this._dataTab = document.createElement("button");
+    this._dataTab.className = "twm-code-tab";
+    this._dataTab.type = "button";
+    this._dataTab.textContent = "Data";
+    this._dataTab.addEventListener("click", () => this.#switchTab("data"));
+    tabs.appendChild(this._plotTab);
+    tabs.appendChild(this._dataTab);
+    if (this._configRenderer) {
+      this._configTab = document.createElement("button");
+      this._configTab.className = "twm-code-tab";
+      this._configTab.type = "button";
+      this._configTab.textContent = "Config";
+      this._configTab.addEventListener("click", () => this.#switchTab("config"));
+      tabs.appendChild(this._configTab);
+    }
+    this._toolbarActions = document.createElement("div");
+    this._toolbarActions.className = "twm-plot-window-toolbar";
+    const dragGroup = this.#toolbarGroup();
+    this._zoomBtn = this.#toolbarBtn("search", "Zoom", () => this.#setDragMode("zoom"));
+    this._zoomBtn.classList.add("twm-is-active");
+    this._panBtn = this.#toolbarBtn("pan_tool", "Pan", () => this.#setDragMode("pan"));
+    dragGroup.appendChild(this._zoomBtn);
+    dragGroup.appendChild(this._panBtn);
+    this._toolbarActions.appendChild(dragGroup);
+    const zoomGroup = this.#toolbarGroup();
+    zoomGroup.appendChild(this.#toolbarBtn("zoom_in", "Zoom in", () => this.#zoom(0.5)));
+    zoomGroup.appendChild(this.#toolbarBtn("zoom_out", "Zoom out", () => this.#zoom(2)));
+    zoomGroup.appendChild(this.#toolbarBtn("zoom_out_map", "Autoscale", () => this.#autoscale()));
+    zoomGroup.appendChild(this.#toolbarBtn("home", "Reset axes", () => this.#autoscale()));
+    this._toolbarActions.appendChild(zoomGroup);
+    const spacer = document.createElement("div");
+    spacer.style.flex = "1";
+    this._toolbarActions.appendChild(spacer);
+    const actionsGroup = this.#toolbarGroup();
+    this._liveBtn = this.#toolbarBtn("stream", "Live update \u2014 click to lock", () => this.#toggleLiveUpdate());
+    this._liveBtn.classList.add("twm-is-active");
+    actionsGroup.appendChild(this._liveBtn);
+    const toggleSeriesBtn = this.#toolbarBtn("visibility", "Toggle series visibility", () => this.#toggleSeriesPanel());
+    this._seriesToggleBtn = toggleSeriesBtn;
+    actionsGroup.appendChild(toggleSeriesBtn);
+    actionsGroup.appendChild(this.#toolbarBtn("image", "Download plot as PNG", () => this.#downloadPNG()));
+    actionsGroup.appendChild(this.#toolbarBtn("download", "Download data as CSV", () => this.#downloadCSV()));
+    this._toolbarActions.appendChild(actionsGroup);
+    tabHeader.appendChild(tabs);
+    tabHeader.appendChild(this._toolbarActions);
+    const content = document.createElement("div");
+    content.className = "twm-plot-window-content";
+    this._plotContent = document.createElement("div");
+    this._plotContent.className = "twm-plot-tab-content active";
+    this._plotContent.setAttribute("data-tab", "plot");
+    this._plotContent.style.cssText = "display:flex; flex-direction:column;";
+    this._gridEl = document.createElement("div");
+    this._gridEl.className = "twm-plot-window-chart";
+    this._plotContent.appendChild(this._gridEl);
+    this.#buildSubplotGrid();
+    this._dataContent = document.createElement("div");
+    this._dataContent.className = "twm-plot-tab-content";
+    this._dataContent.setAttribute("data-tab", "data");
+    this._dataContent.style.cssText = "display:none; flex-direction:column;";
+    this._dataTableContainer = document.createElement("div");
+    this._dataTableContainer.style.cssText = "flex:1; min-height:0; display:flex; flex-direction:column;";
+    this._dataContent.appendChild(this._dataTableContainer);
+    content.appendChild(this._plotContent);
+    content.appendChild(this._dataContent);
+    if (this._configRenderer) {
+      this._configContent = document.createElement("div");
+      this._configContent.className = "twm-plot-tab-content";
+      this._configContent.setAttribute("data-tab", "config");
+      this._configContent.style.cssText = "display:none; flex-direction:column; overflow:auto; padding:8px 12px;";
+      this._configRenderer(this._configContent);
+      content.appendChild(this._configContent);
+    }
+    this._seriesTogglePanel = document.createElement("div");
+    this._seriesTogglePanel.className = "twm-plot-series-toggle-panel";
+    this._seriesTogglePanel.style.display = "none";
+    container.appendChild(tabHeader);
+    container.appendChild(content);
+    container.appendChild(this._seriesTogglePanel);
+    return container;
+  }
+  // ── Subplot grid ────────────────────────────────────────────────────
+  #buildSubplotGrid() {
+    if (!this._gridEl) return;
+    for (const div of this._chartDivs) {
+      if (div && window.Plotly) {
+        try {
+          purge(div);
+        } catch (_) {
+        }
+      }
+    }
+    this._gridEl.innerHTML = "";
+    this._chartDivs = [];
+    const tmpl = PLOT_LAYOUTS[this._plotConfig.layout] || PLOT_LAYOUTS["1x1"];
+    this._gridEl.style.display = "grid";
+    this._gridEl.style.gridTemplateColumns = tmpl.grid.columns;
+    this._gridEl.style.gridTemplateRows = tmpl.grid.rows;
+    this._gridEl.style.gap = "4px";
+    this._gridEl.style.height = "100%";
+    this._gridEl.style.width = "100%";
+    for (let i = 0; i < tmpl.slots; i++) {
+      const div = document.createElement("div");
+      div.className = "plot-tile-chart";
+      div.style.gridArea = tmpl.areas[i].gridArea;
+      div.style.minHeight = "0";
+      this._gridEl.appendChild(div);
+      this._chartDivs.push(div);
+    }
+    this._chartCreated = false;
+  }
+  // ── Toolbar helpers ─────────────────────────────────────────────────
+  #toolbarGroup() {
+    const g = document.createElement("div");
+    g.className = "twm-plot-window-toolbar__group";
+    return g;
+  }
+  #toolbarBtn(icon, tooltip, onClick) {
+    const btn = document.createElement("button");
+    btn.className = "twm-btn-icon twm-has-tooltip";
+    btn.type = "button";
+    btn.setAttribute("data-tooltip", tooltip);
+    btn.innerHTML = `<span class="material-symbols-outlined">${icon}</span>`;
+    if (onClick) btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      onClick();
+    });
+    return btn;
+  }
+  // ── Plotly toolbar actions ───────────────────────────────────────────
+  #setDragMode(mode) {
+    if (!this._chartCreated) return;
+    for (const div of this._chartDivs) {
+      if (div._fullLayout) {
+        window.Plotly.relayout(div, { dragmode: mode }).catch(() => {
+        });
+      }
+    }
+    this._zoomBtn?.classList.toggle("twm-is-active", mode === "zoom");
+    this._panBtn?.classList.toggle("twm-is-active", mode === "pan");
+  }
+  #zoom(factor) {
+    for (const div of this._chartDivs) {
+      if (!div._fullLayout) continue;
+      const xa = div._fullLayout.xaxis;
+      const ya = div._fullLayout.yaxis;
+      if (!xa || !ya) continue;
+      const xr = xa.range;
+      const yr = ya.range;
+      const xMid = (xr[0] + xr[1]) / 2;
+      const yMid = (yr[0] + yr[1]) / 2;
+      const xHalf = (xr[1] - xr[0]) / 2 * factor;
+      const yHalf = (yr[1] - yr[0]) / 2 * factor;
+      window.Plotly.relayout(div, {
+        "xaxis.range": [xMid - xHalf, xMid + xHalf],
+        "yaxis.range": [yMid - yHalf, yMid + yHalf]
+      }).catch(() => {
+      });
+    }
+  }
+  #autoscale() {
+    for (const div of this._chartDivs) {
+      if (!div._fullLayout) continue;
+      window.Plotly.relayout(div, {
+        "xaxis.autorange": true,
+        "yaxis.autorange": true
+      }).catch(() => {
+      });
+    }
+  }
+  #setupResizeObserver() {
+    if (!this._plotContent) return;
+    this._resizeObserver = createRafResizeObserver(() => {
+      if (this._activeTab === "plot" && this._chartCreated && window.Plotly) {
+        for (const div of this._chartDivs) {
+          if (div._fullLayout) {
+            Plotly.Plots.resize(div).catch(() => {
+            });
+          }
+        }
+      }
+    });
+    this._resizeObserver.observe(this._plotContent);
+  }
+  #switchTab(tabName) {
+    this._activeTab = tabName;
+    this._plotTab.classList.toggle("active", tabName === "plot");
+    this._dataTab.classList.toggle("active", tabName === "data");
+    this._configTab?.classList.toggle("active", tabName === "config");
+    if (this._toolbarActions) {
+      this._toolbarActions.style.display = tabName === "plot" ? "" : "none";
+    }
+    this._plotContent.style.display = tabName === "plot" ? "flex" : "none";
+    this._dataContent.style.display = tabName === "data" ? "flex" : "none";
+    if (this._configContent) {
+      this._configContent.style.display = tabName === "config" ? "flex" : "none";
+    }
+    if (tabName === "plot" && this._chartCreated && window.Plotly) {
+      for (const div of this._chartDivs) {
+        if (div._fullLayout) {
+          Plotly.Plots.resize(div).catch(() => {
+          });
+        }
+      }
+    }
+    if (tabName === "data") {
+      this.#renderDataTable();
+    }
+  }
+  // ── Series visibility toggle ────────────────────────────────────────
+  #toggleSeriesPanel() {
+    if (this._seriesTogglePanelVisible) {
+      this.#hideSeriesPanel();
+    } else {
+      this.#showSeriesPanel();
+    }
+  }
+  #showSeriesPanel() {
+    if (!this._seriesTogglePanel || !this._seriesToggleBtn) return;
+    const btnRect = this._seriesToggleBtn.getBoundingClientRect();
+    const containerRect = this._contentEl.getBoundingClientRect();
+    this._seriesTogglePanel.style.top = `${btnRect.bottom - containerRect.top + 4}px`;
+    this._seriesTogglePanel.style.right = `${containerRect.right - btnRect.right}px`;
+    this._seriesTogglePanel.style.display = "";
+    this._seriesTogglePanelVisible = true;
+    this._seriesToggleBtn.classList.add("twm-is-active");
+    this.#rebuildSeriesToggleList();
+    this._outsideClickHandler = (e) => {
+      if (!this._seriesTogglePanel.contains(e.target) && !this._seriesToggleBtn.contains(e.target)) {
+        this.#hideSeriesPanel();
+      }
+    };
+    requestAnimationFrame(() => {
+      document.addEventListener("pointerdown", this._outsideClickHandler, true);
+    });
+  }
+  #hideSeriesPanel() {
+    if (this._seriesTogglePanel) {
+      this._seriesTogglePanel.style.display = "none";
+    }
+    this._seriesTogglePanelVisible = false;
+    this._lastTogglePanelSignature = null;
+    this._seriesToggleBtn?.classList.remove("twm-is-active");
+    if (this._outsideClickHandler) {
+      document.removeEventListener("pointerdown", this._outsideClickHandler, true);
+      this._outsideClickHandler = null;
+    }
+  }
+  #rebuildSeriesToggleList() {
+    const panel = this._seriesTogglePanel;
+    if (!panel) return;
+    panel.innerHTML = "";
+    const header = document.createElement("div");
+    header.className = "twm-plot-series-toggle-panel__header";
+    const title = document.createElement("span");
+    title.className = "twm-plot-series-toggle-panel__title";
+    title.textContent = "Series";
+    header.appendChild(title);
+    const headerActions = document.createElement("div");
+    headerActions.className = "twm-plot-series-toggle-panel__header-actions";
+    const showAllBtn = document.createElement("button");
+    showAllBtn.className = "twm-plot-series-toggle-panel__action";
+    showAllBtn.type = "button";
+    showAllBtn.textContent = "All";
+    showAllBtn.addEventListener("click", () => {
+      this._hiddenSeries.clear();
+      this.#rebuildSeriesToggleList();
+      this.#scheduleRender();
+    });
+    const hideAllBtn = document.createElement("button");
+    hideAllBtn.className = "twm-plot-series-toggle-panel__action";
+    hideAllBtn.type = "button";
+    hideAllBtn.textContent = "None";
+    hideAllBtn.addEventListener("click", () => {
+      for (const label of this._allSeriesLabels) {
+        this._hiddenSeries.add(label);
+      }
+      this.#rebuildSeriesToggleList();
+      this.#scheduleRender();
+    });
+    headerActions.appendChild(showAllBtn);
+    headerActions.appendChild(hideAllBtn);
+    header.appendChild(headerActions);
+    panel.appendChild(header);
+    const modelSeries = this._allSeriesInfo.filter((s) => !s.isOverlay);
+    const overlaySeries = this._allSeriesInfo.filter((s) => s.isOverlay);
+    const buildItem = ({ label, color, lineStyle }) => {
+      const item = document.createElement("label");
+      item.className = "twm-plot-series-toggle-panel__item";
+      const cb = document.createElement("input");
+      cb.type = "checkbox";
+      cb.checked = !this._hiddenSeries.has(label);
+      cb.addEventListener("change", () => {
+        if (cb.checked) this._hiddenSeries.delete(label);
+        else this._hiddenSeries.add(label);
+        this.#scheduleRender();
+      });
+      const dashMap = { solid: "", dashed: "4,2", dotted: "1,2" };
+      const indicator = document.createElement("div");
+      indicator.className = "twm-plot-series-toggle-panel__line-indicator";
+      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      svg.setAttribute("viewBox", "0 0 28 14");
+      const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+      line.setAttribute("x1", "3");
+      line.setAttribute("y1", "7");
+      line.setAttribute("x2", "25");
+      line.setAttribute("y2", "7");
+      line.setAttribute("stroke", color || "#888");
+      line.setAttribute("stroke-width", "2");
+      line.setAttribute("stroke-linecap", "round");
+      const dash = dashMap[lineStyle] || "";
+      if (dash) line.setAttribute("stroke-dasharray", dash);
+      svg.appendChild(line);
+      indicator.appendChild(svg);
+      const text = document.createElement("span");
+      text.className = "twm-plot-series-toggle-panel__label";
+      text.textContent = label;
+      text.title = label;
+      item.appendChild(cb);
+      item.appendChild(indicator);
+      item.appendChild(text);
+      return item;
+    };
+    const list = document.createElement("div");
+    list.className = "twm-plot-series-toggle-panel__list";
+    const subplotGroups = /* @__PURE__ */ new Map();
+    for (const info of modelSeries) {
+      if (!subplotGroups.has(info.subplotIndex)) {
+        subplotGroups.set(info.subplotIndex, []);
+      }
+      subplotGroups.get(info.subplotIndex).push(info);
+    }
+    const multipleSubplots = subplotGroups.size > 1;
+    for (const [spIdx, seriesList] of subplotGroups) {
+      if (multipleSubplots) {
+        const spName = seriesList[0]?.subplotName || `Subplot ${spIdx + 1}`;
+        const spHeader = document.createElement("div");
+        spHeader.className = "twm-plot-series-toggle-panel__axis-label";
+        spHeader.textContent = spName;
+        list.appendChild(spHeader);
+      }
+      for (const info of seriesList) {
+        list.appendChild(buildItem(info));
+      }
+    }
+    panel.appendChild(list);
+    if (overlaySeries.length > 0) {
+      const ovList = document.createElement("div");
+      ovList.className = "twm-plot-series-toggle-panel__list";
+      const ovHeader = document.createElement("div");
+      ovHeader.className = "twm-plot-series-toggle-panel__axis-label";
+      ovHeader.textContent = "Overlays";
+      ovList.appendChild(ovHeader);
+      for (const info of overlaySeries) {
+        ovList.appendChild(buildItem(info));
+      }
+      panel.appendChild(ovList);
+    }
+  }
+  // ── Event subscriptions ─────────────────────────────────────────────
+  #subscribeEvents() {
+    const { eventBus } = this._services;
+    if (!eventBus) return;
+    this._eventDisposers.push(
+      eventBus.on("streaming:delta", () => {
+        if (this._liveUpdate) this.#scheduleRender();
+      })
+    );
+    this._eventDisposers.push(
+      eventBus.on("streaming:complete", () => {
+        if (this._liveUpdate) this.#scheduleRender();
+      })
+    );
+    this._eventDisposers.push(
+      eventBus.on(this.refreshEvent, () => {
+        if (this._liveUpdate) this.#scheduleRender();
+      })
+    );
+  }
+  #toggleLiveUpdate() {
+    this._liveUpdate = !this._liveUpdate;
+    if (this._liveBtn) {
+      this._liveBtn.classList.toggle("twm-is-active", this._liveUpdate);
+      const icon = this._liveBtn.querySelector(".material-symbols-outlined");
+      if (icon) icon.textContent = this._liveUpdate ? "stream" : "lock";
+      this._liveBtn.title = this._liveUpdate ? "Live update \u2014 click to lock" : "Locked \u2014 click for live update";
+    }
+    if (this._liveUpdate) this.#scheduleRender();
+  }
+  #scheduleRender() {
+    if (this._renderPending) return;
+    this._renderPending = true;
+    requestAnimationFrame(() => {
+      this._renderPending = false;
+      this.#render();
+    });
+  }
+  // ── Rendering ───────────────────────────────────────────────────────
+  async #render() {
+    if (!this._window?.isVisible) return;
+    const results = this._getResults?.();
+    if (!results) return;
+    this._lastResults = results;
+    this.#collectSeriesInfo();
+    this.#renderAllCharts(results);
+    this.#updateTableData(results);
+    if (this._activeTab === "data") {
+      this.#renderDataTable();
+    }
+  }
+  #collectSeriesInfo() {
+    this._allSeriesInfo = [];
+    this._allSeriesLabels = [];
+    const subplots = this._plotConfig.subplots ?? [];
+    for (let spIdx = 0; spIdx < subplots.length; spIdx++) {
+      const sp = subplots[spIdx];
+      for (const axis of sp.yAxes ?? []) {
+        for (const s of axis.series ?? []) {
+          const label = s.label || s.variable || "Series";
+          this._allSeriesInfo.push({
+            label,
+            color: s.color || getSeriesColor(this._allSeriesInfo.length),
+            lineStyle: s.lineStyle || "solid",
+            subplotIndex: spIdx,
+            subplotName: sp.displayName || `Subplot ${spIdx + 1}`
+          });
+          this._allSeriesLabels.push(label);
+          if (s.overlay?.etlKey) {
+            const ovLabel = s.overlay.label || `${label} (actual)`;
+            this._allSeriesInfo.push({
+              label: ovLabel,
+              color: s.overlay.color || s.color || getSeriesColor(this._allSeriesInfo.length),
+              lineStyle: s.overlay.lineStyle || "dashed",
+              subplotIndex: spIdx,
+              subplotName: sp.displayName || `Subplot ${spIdx + 1}`,
+              isOverlay: true
+            });
+            this._allSeriesLabels.push(ovLabel);
+          }
+        }
+      }
+    }
+    for (const label of this._hiddenSeries) {
+      if (!this._allSeriesLabels.includes(label)) {
+        this._hiddenSeries.delete(label);
+      }
+    }
+    if (this._seriesTogglePanelVisible) {
+      const newSig = this._allSeriesInfo.map((s) => `${s.subplotIndex}|${s.label}|${s.lineStyle}`).join("\0");
+      if (newSig !== this._lastTogglePanelSignature) {
+        this._lastTogglePanelSignature = newSig;
+        this.#rebuildSeriesToggleList();
+      }
+    }
+    if (this._seriesToggleBtn) {
+      const icon = this._seriesToggleBtn.querySelector(".material-symbols-outlined");
+      if (icon) {
+        icon.textContent = this._hiddenSeries.size > 0 ? "visibility_off" : "visibility";
+      }
+    }
+  }
+  #renderAllCharts(results) {
+    if (!window.Plotly) return;
+    const subplots = this._plotConfig.subplots ?? [];
+    for (let i = 0; i < this._chartDivs.length; i++) {
+      const chartDiv = this._chartDivs[i];
+      const sp = subplots[i];
+      if (!chartDiv) continue;
+      if (!sp) {
+        chartDiv.innerHTML = '<div class="twm-plot-no-data" style="color:rgba(255,255,255,0.3);text-align:center;padding:16px;">No subplot configured.</div>';
+        continue;
+      }
+      this.#renderSubplotChart(chartDiv, sp, results);
+    }
+  }
+  async #renderSubplotChart(chartDiv, sp, results) {
+    const { time, series } = results;
+    const traces = [];
+    const layoutAxes = {};
+    const yRefByAxisId = {};
+    let axisCount = 0;
+    for (const axis of sp.yAxes ?? []) {
+      axisCount++;
+      const yAxisKey = axisCount === 1 ? "yaxis" : `yaxis${axisCount}`;
+      const yRef = axisCount === 1 ? "y" : `y${axisCount}`;
+      if (axis.id) yRefByAxisId[axis.id] = yRef;
+      layoutAxes[yAxisKey] = buildYAxisLayout({
+        axisId: yAxisKey,
+        title: axis.label || "",
+        position: axis.position || "left",
+        scaleType: axis.scale || "linear",
+        min: axis.min,
+        max: axis.max,
+        showGrid: (sp.yAxes ?? []).length === 1,
+        axisPosition: axisCount > 1 ? axis.position === "right" ? 1 : 0 : null
+      });
+      for (const s of axis.series ?? []) {
+        if (!s.variable) continue;
+        const label = s.label || s.variable;
+        if (this._hiddenSeries.has(label)) continue;
+        let rawY = series?.[s._resultKey ?? s.variable];
+        if (!rawY && s._resultKey) {
+          rawY = series?.[s.variable];
+        }
+        if (!rawY) {
+          const dotIdx = s.variable.indexOf(".");
+          if (dotIdx >= 0) rawY = series?.[s.variable.slice(dotIdx + 1)];
+        }
+        if (!rawY) continue;
+        const y = Array.isArray(rawY) ? applyNanHandling(rawY, sp.nanHandling ?? "gap", time) : rawY;
+        const seriesTime = s._resultTime ?? time;
+        traces.push(buildTrace({
+          chartType: sp.chartType || "line",
+          x: seriesTime,
+          y,
+          name: label,
+          color: s.color,
+          lineWidth: s.lineWidth ?? 2,
+          lineStyle: s.lineStyle ?? "solid",
+          interpolation: sp.interpolation ?? "linear",
+          yAxisId: yRef,
+          showMarkers: sp.showDataPoints ?? false,
+          stackGroup: s.stackGroup ?? null
+        }));
+        if (s.overlay?.etlKey && this._actuals?.[s.id]) {
+          const ovLabel = s.overlay.label || `${label} (actual)`;
+          if (!this._hiddenSeries.has(ovLabel)) {
+            const act = this._actuals[s.id];
+            if (act?.years?.length) {
+              const ov = s.overlay;
+              const dashMap = { dashed: "dash", dotted: "dot", solid: "solid" };
+              traces.push({
+                type: "scatter",
+                mode: ov.mode || "markers+lines",
+                x: act.years,
+                y: act.values,
+                name: ov.label || `${label} (actual)`,
+                yaxis: yRef === "y" ? void 0 : yRef,
+                line: {
+                  color: ov.color || s.color,
+                  width: ov.lineWidth ?? 2,
+                  dash: dashMap[ov.lineStyle] || "dash"
+                },
+                marker: {
+                  color: ov.color || s.color,
+                  size: 4,
+                  symbol: "circle"
+                },
+                showlegend: true
+              });
+            }
+          }
+        }
+      }
+    }
+    if ((sp.showHpTrend || sp.showHpCycle) && window.pywebview?.api?.hp_filter) {
+      const hpLambda = sp.hpLambda ?? 1600;
+      for (const trace of [...traces]) {
+        if (trace.type && trace.type !== "scatter" && trace.type !== "scattergl") continue;
+        try {
+          const hpResult = await window.pywebview.api.hp_filter({
+            data: trace.y,
+            lambda: hpLambda
+          });
+          if (!hpResult?.ok) continue;
+          const { trend, cycle } = hpResult;
+          const origColor = trace.line?.color || trace.marker?.color || getSeriesColor(0);
+          if (sp.showHpTrend && trend) {
+            traces.push({
+              x: trace.x,
+              y: trend,
+              type: "scatter",
+              mode: "lines",
+              name: `${trace.name} (HP Trend)`,
+              yaxis: trace.yaxis || "y",
+              line: { color: origColor, width: 2, dash: "dash" },
+              showlegend: true
+            });
+          }
+          if (sp.showHpCycle && cycle) {
+            traces.push({
+              x: trace.x,
+              y: cycle,
+              type: "scatter",
+              mode: "lines",
+              name: `${trace.name} (HP Cycle)`,
+              yaxis: trace.yaxis || "y",
+              line: { color: origColor, width: 1, dash: "dot" },
+              showlegend: true
+            });
+          }
+        } catch (_) {
+        }
+      }
+    }
+    if (traces.length === 0 && this._hiddenSeries.size === 0) {
+      chartDiv.innerHTML = `<div class="twm-plot-no-data" style="color:rgba(255,255,255,0.3);text-align:center;padding:16px;font-size:11px;">${this.emptyMessage}</div>`;
+      return;
+    }
+    const legendPos = sp.legendPosition === "hidden" ? "top" : sp.legendPosition ?? "top";
+    const legend = buildLegendLayout(legendPos);
+    const xRange = time?.length >= 2 ? [time[0], time[time.length - 1]] : void 0;
+    const { shapes, annotations } = buildOverlayShapes({
+      referenceLines: sp.referenceLines,
+      shadedBands: sp.shadedBands,
+      yRefByAxisId
+    });
+    const layout = {
+      ...layoutAxes,
+      ...shapes.length ? { shapes } : {},
+      ...annotations.length ? { annotations } : {},
+      xaxis: {
+        gridcolor: "rgba(255,255,255,0.05)",
+        linecolor: "rgba(255,255,255,0.08)",
+        tickcolor: "rgba(255,255,255,0.3)",
+        zerolinecolor: "rgba(255,255,255,0.06)",
+        automargin: true,
+        ...xRange ? { range: xRange } : {}
+      },
+      ...legend,
+      paper_bgcolor: "transparent",
+      plot_bgcolor: "transparent",
+      font: { family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif", color: "#cccccc", size: 11 },
+      margin: { t: 10, r: 20, b: 40, l: 50 },
+      hoverlabel: {
+        bgcolor: "#1e2228",
+        bordercolor: "#444444",
+        font: { family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif", color: "#cccccc" }
+      },
+      autosize: true,
+      hovermode: "x unified"
+    };
+    if (!chartDiv.isConnected || chartDiv.offsetWidth === 0) return;
+    try {
+      await Plotly.react(chartDiv, traces, layout, { responsive: true, displayModeBar: false });
+      this._chartCreated = true;
+    } catch (_) {
+    }
+  }
+  // ── Data table ──────────────────────────────────────────────────────
+  #updateTableData(results) {
+    if (!results) {
+      this._tableHeaders = [];
+      this._tableRows = [];
+      return;
+    }
+    const headers = ["Time"];
+    const seriesColumns = [];
+    const { time, series } = results;
+    const subplots = this._plotConfig.subplots ?? [];
+    for (const sp of subplots) {
+      for (const axis of sp.yAxes ?? []) {
+        for (const s of axis.series ?? []) {
+          if (!s.variable) continue;
+          const label = s.label || s.variable;
+          let rawY = series?.[s._resultKey ?? s.variable];
+          if (!rawY && s._resultKey) {
+            rawY = series?.[s.variable];
+          }
+          if (!rawY) {
+            const dotIdx = s.variable.indexOf(".");
+            if (dotIdx >= 0) rawY = series?.[s.variable.slice(dotIdx + 1)];
+          }
+          if (!rawY) continue;
+          headers.push(label);
+          seriesColumns.push(rawY);
+        }
+      }
+    }
+    const rows = [];
+    for (let i = 0; i < time.length; i++) {
+      const row = [time[i]];
+      for (const col of seriesColumns) {
+        row.push(Array.isArray(col) ? col[i] : null);
+      }
+      rows.push(row);
+    }
+    this._tableHeaders = headers;
+    this._tableRows = rows;
+  }
+  #renderDataTable() {
+    if (!this._dataTableContainer) return;
+    if (!this._dataTable) {
+      this._dataTable = new DataTable(this._dataTableContainer, {
+        headers: this._tableHeaders,
+        rows: this._tableRows,
+        pageSize: 100,
+        pagination: true,
+        selectable: true,
+        copyable: true,
+        sortable: true,
+        filterable: true,
+        readonly: false,
+        emptyMessage: this.tableEmptyMessage,
+        services: this._services,
+        host: this._host
+      });
+      this._dataTable.render();
+    } else {
+      this._dataTable.setData({
+        headers: this._tableHeaders,
+        rows: this._tableRows
+      });
+    }
+  }
+  // ── Downloads ────────────────────────────────────────────────────────
+  async #downloadCSV() {
+    if (this._tableRows.length === 0) {
+      this.#notify("Download", "No data available to download.", "warn");
+      return;
+    }
+    const filename = `${this._title.replace(/[^a-z0-9]/gi, "_")}_data.csv`;
+    const lines = [this._tableHeaders.join(",")];
+    for (const row of this._tableRows) {
+      lines.push(row.map((val) => this.#csvEscape(val)).join(","));
+    }
+    const csv = lines.join("\n");
+    const dialogs = this._host?.dialogs;
+    let result = null;
+    if (dialogs) {
+      try {
+        result = await dialogs.saveFile({ data: csv, filename, kind: "csv" });
+      } catch (err) {
+        console.error("[PlotPopoutWindow] CSV download failed:", err);
+        this.#notify("Download", "Failed to save file", "error");
+        return;
+      }
+    }
+    if (result) {
+      if (result.ok) {
+        this.#notify("Download", `Saved ${this._tableRows.length} rows to ${result.path}`, "success");
+      } else if (!result.cancelled) {
+        this.#notify("Download", result.error || "Failed to save file", "error");
+      }
+      return;
+    }
+    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    link.click();
+    URL.revokeObjectURL(url);
+    this.#notify("Download", "Download started", "info");
+  }
+  #csvEscape(value) {
+    if (value == null) return "";
+    const str = String(value);
+    if (str.includes(",") || str.includes('"') || str.includes("\n")) {
+      return `"${str.replace(/"/g, '""')}"`;
+    }
+    return str;
+  }
+  async #downloadPNG() {
+    const targetDiv = this._chartDivs.length === 1 ? this._chartDivs[0] : this._chartDivs[0];
+    if (!targetDiv || !window.Plotly || !this._chartCreated) {
+      this.#notify("Download", "Plot not ready", "warn");
+      return;
+    }
+    const filename = `${this._title.replace(/[^a-z0-9]/gi, "_")}.png`;
+    try {
+      const pngDataUrl = await window.Plotly.toImage(targetDiv, {
+        format: "png",
+        width: 1920,
+        height: 1080,
+        scale: 2
+      });
+      const dialogs = this._host?.dialogs;
+      const result = dialogs ? await dialogs.saveFile({ data: pngDataUrl.split(",")[1], filename, kind: "png" }) : null;
+      if (result) {
+        if (result.ok) {
+          this.#notify("Download", `Plot saved to ${result.path}`, "success");
+        } else if (!result.cancelled) {
+          this.#notify("Download", result.error || "Failed to save image", "error");
+        }
+      } else {
+        const link = document.createElement("a");
+        link.href = pngDataUrl;
+        link.download = filename;
+        link.click();
+        this.#notify("Download", "PNG download started", "info");
+      }
+    } catch (err) {
+      this._services.logger?.warn?.("[PlotPopoutWindow] PNG download failed", err);
+      this.#notify("Download", "Failed to generate PNG", "error");
+    }
+  }
+  // ── Utilities ───────────────────────────────────────────────────────
+  #notify(title, message, severity = "info") {
+    this._services.eventBus?.emit?.("toast:show", {
+      title,
+      message,
+      type: severity
+    });
+  }
+  // ── Cleanup ─────────────────────────────────────────────────────────
+  #dispose() {
+    if (this._dataTable) {
+      this._dataTable.dispose();
+      this._dataTable = null;
+    }
+    this.#hideSeriesPanel();
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = null;
+    }
+    for (const disposer of this._eventDisposers) {
+      try {
+        disposer?.dispose?.();
+      } catch (_) {
+      }
+    }
+    this._eventDisposers = [];
+    for (const div of this._chartDivs) {
+      if (div && window.Plotly) {
+        try {
+          purge(div);
+        } catch (_) {
+        }
+      }
+    }
+    this._window = null;
+    this._contentEl = null;
+    this._gridEl = null;
+    this._chartDivs = [];
+    this._plotTab = null;
+    this._dataTab = null;
+    this._plotContent = null;
+    this._dataContent = null;
+    this._dataTableContainer = null;
+    this._toolbarActions = null;
+    this._zoomBtn = null;
+    this._panBtn = null;
+    this._seriesToggleBtn = null;
+    this._seriesTogglePanel = null;
+    this._lastTogglePanelSignature = null;
+    this._hiddenSeries = null;
+    this._allSeriesInfo = null;
+    this._allSeriesLabels = null;
+    this._chartCreated = false;
+    this._lastResults = null;
+  }
+};
+var _openWindows = /* @__PURE__ */ new Map();
+async function openPlotPopoutWindow(options) {
+  const { id } = options;
+  let win = _openWindows.get(id);
+  if (win?.isVisible) {
+    win.bringToFront();
+    return win;
+  }
+  win = new PlotPopoutWindow({
+    ...options,
+    onClose: () => _openWindows.delete(id)
+  });
+  _openWindows.set(id, win);
+  await win.show();
+  return win;
+}
+async function openRawTracesWindow({ id, title, traces, layout, frames, tableHeaders, tableRows, services, host }) {
+  const existing = _openWindows.get(id);
+  if (existing?.isVisible) {
+    existing.bringToFront();
+    return existing;
+  }
+  await ensurePlotly();
+  let chartDiv = null;
+  let chartCreated = false;
+  let resizeObserver = null;
+  let dataTable = null;
+  let managedWindow = null;
+  const container = document.createElement("div");
+  container.className = "twm-plot-window-container";
+  const tabHeader = document.createElement("div");
+  tabHeader.className = "twm-code-tabs-header";
+  const tabs = document.createElement("div");
+  tabs.className = "tabs twm-code-tabs";
+  const plotTab = document.createElement("button");
+  plotTab.className = "twm-code-tab active";
+  plotTab.type = "button";
+  plotTab.textContent = "Plot";
+  const dataTab = document.createElement("button");
+  dataTab.className = "twm-code-tab";
+  dataTab.type = "button";
+  dataTab.textContent = "Data";
+  tabs.appendChild(plotTab);
+  tabs.appendChild(dataTab);
+  const toolbar = document.createElement("div");
+  toolbar.className = "twm-plot-window-toolbar";
+  const spacer = document.createElement("div");
+  spacer.style.flex = "1";
+  toolbar.appendChild(spacer);
+  const actionsGroup = document.createElement("div");
+  actionsGroup.className = "twm-plot-window-toolbar__group";
+  const mkBtn = (icon, tooltip, onClick) => {
+    const btn = document.createElement("button");
+    btn.className = "twm-btn-icon twm-has-tooltip";
+    btn.type = "button";
+    btn.setAttribute("data-tooltip", tooltip);
+    btn.innerHTML = `<span class="material-symbols-outlined">${icon}</span>`;
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      onClick();
+    });
+    return btn;
+  };
+  actionsGroup.appendChild(mkBtn("image", "Download plot as PNG", downloadPNG));
+  actionsGroup.appendChild(mkBtn("download", "Download data as CSV", downloadCSV));
+  toolbar.appendChild(actionsGroup);
+  tabHeader.appendChild(tabs);
+  tabHeader.appendChild(toolbar);
+  const content = document.createElement("div");
+  content.className = "twm-plot-window-content";
+  const plotContent = document.createElement("div");
+  plotContent.className = "twm-plot-tab-content active";
+  plotContent.setAttribute("data-tab", "plot");
+  plotContent.style.cssText = "display:flex; flex-direction:column;";
+  chartDiv = document.createElement("div");
+  chartDiv.className = "twm-plot-window-chart";
+  plotContent.appendChild(chartDiv);
+  const dataContent = document.createElement("div");
+  dataContent.className = "twm-plot-tab-content";
+  dataContent.setAttribute("data-tab", "data");
+  dataContent.style.cssText = "display:none; flex-direction:column;";
+  const dataTableContainer = document.createElement("div");
+  dataTableContainer.style.cssText = "flex:1; min-height:0; display:flex; flex-direction:column;";
+  dataContent.appendChild(dataTableContainer);
+  content.appendChild(plotContent);
+  content.appendChild(dataContent);
+  container.appendChild(tabHeader);
+  container.appendChild(content);
+  plotTab.addEventListener("click", () => {
+    plotTab.classList.add("active");
+    dataTab.classList.remove("active");
+    toolbar.style.display = "";
+    plotContent.style.display = "flex";
+    dataContent.style.display = "none";
+    if (chartCreated && window.Plotly && chartDiv) {
+      try {
+        window.Plotly.Plots.resize(chartDiv);
+      } catch (_) {
+      }
+    }
+  });
+  dataTab.addEventListener("click", () => {
+    dataTab.classList.add("active");
+    plotTab.classList.remove("active");
+    toolbar.style.display = "none";
+    plotContent.style.display = "none";
+    dataContent.style.display = "flex";
+    if (!dataTable && tableHeaders?.length) {
+      dataTable = new DataTable(dataTableContainer, {
+        headers: tableHeaders,
+        rows: tableRows || [],
+        pagination: true,
+        pageSize: 100,
+        selectable: true,
+        copyable: true,
+        sortable: true,
+        filterable: true,
+        readonly: true,
+        emptyMessage: "No data available",
+        services,
+        host
+      });
+      dataTable.render();
+    }
+  });
+  function dispose() {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+    if (dataTable) {
+      dataTable.dispose();
+      dataTable = null;
+    }
+    if (chartDiv && window.Plotly) {
+      try {
+        purge(chartDiv);
+      } catch (_) {
+      }
+    }
+    chartDiv = null;
+    chartCreated = false;
+    managedWindow = null;
+    _openWindows.delete(id);
+  }
+  managedWindow = new ManagedWindow({
+    id: `raw-plot-${id}`,
+    title: title || "Chart",
+    icon: "monitoring",
+    content: container,
+    minWidth: 500,
+    minHeight: 400,
+    defaultWidth: 800,
+    defaultHeight: 600,
+    canMinimize: true,
+    canMaximize: true,
+    canResize: true,
+    canDrag: true,
+    onClose: dispose
+  });
+  const handle = {
+    get isVisible() {
+      return managedWindow?.isVisible ?? false;
+    },
+    bringToFront() {
+      managedWindow?.bringToFront?.();
+    },
+    close() {
+      managedWindow?.close?.();
+    }
+  };
+  _openWindows.set(id, handle);
+  managedWindow.show();
+  const defaultMargin = { l: 60, r: 30, t: 40, b: 60 };
+  const plotLayout = {
+    paper_bgcolor: "transparent",
+    plot_bgcolor: "transparent",
+    font: { family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif", color: "#cccccc", size: 11 },
+    hoverlabel: {
+      bgcolor: "#1e2228",
+      bordercolor: "#444444",
+      font: { family: "Inter, -apple-system, BlinkMacSystemFont, sans-serif", color: "#cccccc" }
+    },
+    autosize: true,
+    hovermode: "x unified",
+    ...layout,
+    margin: { ...defaultMargin, ...layout?.margin || {} }
+  };
+  await window.Plotly.newPlot(chartDiv, traces, plotLayout, {
+    responsive: true,
+    displayModeBar: true,
+    displaylogo: false,
+    modeBarButtonsToRemove: ["lasso2d", "select2d", "toImage"]
+  });
+  if (Array.isArray(frames) && frames.length) {
+    try {
+      await window.Plotly.addFrames(chartDiv, frames);
+    } catch (err) {
+      console.warn("[openRawTracesWindow] addFrames failed:", err);
+    }
+  }
+  chartCreated = true;
+  resizeObserver = createRafResizeObserver(() => {
+    if (chartDiv && chartCreated && window.Plotly) {
+      try {
+        window.Plotly.Plots.resize(chartDiv);
+      } catch (_) {
+      }
+    }
+  });
+  resizeObserver.observe(plotContent);
+  function notify(ntitle, message, severity = "info") {
+    services?.eventBus?.emit?.("toast:show", { title: ntitle, message, type: severity });
+  }
+  async function downloadPNG() {
+    if (!chartDiv || !chartCreated || !window.Plotly) {
+      notify("Download", "Plot not ready", "warn");
+      return;
+    }
+    const filename = `${(title || "chart").replace(/[^a-z0-9]/gi, "_")}.png`;
+    try {
+      const dataUrl = await window.Plotly.toImage(chartDiv, {
+        format: "png",
+        width: 1920,
+        height: 1080,
+        scale: 2
+      });
+      const dialogs = host?.dialogs;
+      const result = dialogs ? await dialogs.saveFile({ data: dataUrl.split(",")[1], filename, kind: "png" }) : null;
+      if (result) {
+        if (result.ok) notify("Download", `Plot saved to ${result.path}`, "success");
+        else if (!result.cancelled) notify("Download", result.error || "Failed to save image", "error");
+      } else {
+        const link = document.createElement("a");
+        link.href = dataUrl;
+        link.download = filename;
+        link.click();
+        notify("Download", "PNG download started", "info");
+      }
+    } catch (err) {
+      console.error("[openRawTracesWindow] PNG download failed:", err);
+      notify("Download", "Failed to generate PNG", "error");
+    }
+  }
+  async function downloadCSV() {
+    if (!tableRows?.length) {
+      notify("Download", "No data available to download", "warn");
+      return;
+    }
+    const filename = `${(title || "data").replace(/[^a-z0-9]/gi, "_")}_data.csv`;
+    const csvEscape = (val) => {
+      if (val == null) return "";
+      const str = String(val);
+      return str.includes(",") || str.includes('"') || str.includes("\n") ? `"${str.replace(/"/g, '""')}"` : str;
+    };
+    const lines = [(tableHeaders || []).join(",")];
+    for (const row of tableRows) lines.push(row.map(csvEscape).join(","));
+    const csv = lines.join("\n");
+    const dialogs = host?.dialogs;
+    let result = null;
+    if (dialogs) {
+      try {
+        result = await dialogs.saveFile({ data: csv, filename, kind: "csv" });
+      } catch (err) {
+        console.error("[openRawTracesWindow] CSV download failed:", err);
+        notify("Download", "Failed to save file", "error");
+        return;
+      }
+    }
+    if (result) {
+      if (result.ok) notify("Download", `Saved ${tableRows.length} rows to ${result.path}`, "success");
+      else if (!result.cancelled) notify("Download", result.error || "Failed to save file", "error");
+    } else {
+      const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = filename;
+      link.click();
+      URL.revokeObjectURL(url);
+      notify("Download", "Download started", "info");
+    }
+  }
+  return handle;
+}
+
+export {
+  setPlotlySource,
+  DARK_THEME_LAYOUT,
+  DEFAULT_CONFIG,
+  ensurePlotly,
+  createChart,
+  updateChart,
+  extendTraces,
+  relayout,
+  restyle,
+  purge,
+  hasPlot,
+  resize,
+  hexToRgba,
+  COLOR_PALETTE,
+  getSeriesColor,
+  createChartDeferred,
+  CHART_TYPES_2D,
+  CHART_TYPES_3D,
+  ALL_CHART_TYPES,
+  is3DChart,
+  buildTrace,
+  buildYAxisLayout,
+  buildXAxisLayout,
+  build3DSceneLayout,
+  buildLegendLayout,
+  buildOverlayShapes,
+  buildFanBandTraces,
+  buildHistogramTrace,
+  buildBoxTrace,
+  buildHeatmapTrace,
+  buildIndicatorTrace,
+  uid,
+  applyNanHandling,
+  PLOT_LAYOUTS,
+  makeDefaultSubplot,
+  migrateData,
+  migrateSingleChart,
+  PlotPopoutWindow,
+  openPlotPopoutWindow,
+  openRawTracesWindow
+};
+//# sourceMappingURL=chunk-CNXP3SIN.js.map