ml-time-graph 1.0.0

package/dist/index.js

@@ -0,0 +1,3432 @@
+// src/core/layout.ts
+var Layout = class _Layout {
+  _config;
+  constructor(config) {
+    this._config = config;
+  }
+  /** Calculate layout dimensions */
+  compute() {
+    const { width, height, margin } = this._config;
+    return {
+      totalWidth: width,
+      totalHeight: height,
+      chartWidth: width - margin.left - margin.right,
+      chartHeight: height - margin.top - margin.bottom,
+      chartX: margin.left,
+      chartY: margin.top,
+      margin
+    };
+  }
+  /** Default layout for standard charts */
+  static default(width = 800, height = 400) {
+    return new _Layout({
+      width,
+      height,
+      margin: { top: 20, right: 20, bottom: 40, left: 60 }
+    });
+  }
+};
+
+// src/core/slug.ts
+function slugify(s) {
+  if (!s) return "unnamed";
+  const slug = s.toString().normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 50);
+  return slug || "unnamed";
+}
+
+// src/core/scale.ts
+var LinearScale = class {
+  #domain;
+  #range;
+  constructor(config) {
+    this.#domain = [...config.domain];
+    this.#range = [...config.range];
+  }
+  map(value) {
+    const v = Number(value);
+    const [d0, d1] = this.#domain;
+    const [r0, r1] = this.#range;
+    if (d1 === d0) return r0;
+    return r0 + (v - d0) / (d1 - d0) * (r1 - r0);
+  }
+  invert(pixel) {
+    const [d0, d1] = this.#domain;
+    const [r0, r1] = this.#range;
+    if (r1 === r0) return d0;
+    return d0 + (pixel - r0) / (r1 - r0) * (d1 - d0);
+  }
+  domain() {
+    return [...this.#domain];
+  }
+  range() {
+    return [...this.#range];
+  }
+};
+var TIME_INTERVALS = [
+  { label: "second", ms: 1e3 },
+  { label: "2_seconds", ms: 2e3 },
+  { label: "5_seconds", ms: 5e3 },
+  { label: "10_seconds", ms: 1e4 },
+  { label: "30_seconds", ms: 3e4 },
+  { label: "minute", ms: 6e4 },
+  { label: "5_minutes", ms: 3e5 },
+  { label: "15_minutes", ms: 9e5 },
+  { label: "30_minutes", ms: 18e5 },
+  { label: "hour", ms: 36e5 },
+  { label: "3_hours", ms: 108e5 },
+  { label: "6_hours", ms: 216e5 },
+  { label: "day", ms: 864e5 },
+  { label: "week", ms: 6048e5 },
+  { label: "month", ms: 2592e6 },
+  { label: "3_months", ms: 7776e6 },
+  { label: "6_months", ms: 15552e6 },
+  { label: "year", ms: 31536e6 },
+  { label: "2_years", ms: 63072e6 },
+  { label: "5_years", ms: 15768e7 }
+];
+var TimeScale = class {
+  #linear;
+  #locale;
+  constructor(config) {
+    this.#linear = new LinearScale({
+      domain: config.domain,
+      range: config.range
+    });
+    this.#locale = config.locale || (typeof navigator !== "undefined" ? navigator.language : "en-US");
+  }
+  map(value) {
+    return this.#linear.map(Number(value));
+  }
+  invert(pixel) {
+    return this.#linear.invert(pixel);
+  }
+  domain() {
+    return this.#linear.domain();
+  }
+  range() {
+    return this.#linear.range();
+  }
+  get locale() {
+    return this.#locale;
+  }
+  /**
+   * Pick the "nicest" time interval that yields roughly `targetTicks` ticks
+   * across the visible range. Clamps to minTicks / maxTicks bounds.
+   */
+  tickInterval(targetTicks, minTicks = 3, maxTicks = 12) {
+    const [d0, d1] = this.#linear.domain();
+    const totalMs = d1 - d0;
+    if (totalMs <= 0) return { interval: TIME_INTERVALS[0].ms };
+    const ideal = totalMs / targetTicks;
+    let picked = TIME_INTERVALS[0].ms;
+    for (const t of TIME_INTERVALS) {
+      if (t.ms >= ideal) {
+        picked = t.ms;
+        break;
+      }
+    }
+    let candidate = picked;
+    let count = Math.round(totalMs / candidate);
+    while (count > maxTicks && candidate < TIME_INTERVALS[TIME_INTERVALS.length - 1].ms) {
+      const idx = TIME_INTERVALS.findIndex((t) => t.ms === candidate);
+      candidate = TIME_INTERVALS[Math.min(idx + 1, TIME_INTERVALS.length - 1)].ms;
+      count = Math.round(totalMs / candidate);
+    }
+    while (count < minTicks && candidate > TIME_INTERVALS[0].ms) {
+      const idx = TIME_INTERVALS.findIndex((t) => t.ms === candidate);
+      candidate = TIME_INTERVALS[Math.max(idx - 1, 0)].ms;
+      count = Math.round(totalMs / candidate);
+    }
+    return { interval: candidate };
+  }
+  /**
+   * Generate tick positions (timestamps) across the domain.
+   */
+  ticks(opts) {
+    const minT = opts?.minTicks ?? 5;
+    const maxT = opts?.maxTicks ?? 12;
+    const { interval } = this.tickInterval(
+      (minT + maxT) / 2,
+      minT,
+      maxT
+    );
+    const [d0, d1] = this.#linear.domain();
+    const result = [];
+    const start = Math.ceil(d0 / interval) * interval;
+    for (let t = start; t <= d1; t += interval) {
+      result.push(t);
+    }
+    return result;
+  }
+  /** Format a timestamp using Intl.DateTimeFormat */
+  format(timestamp, formatOpts) {
+    return new Intl.DateTimeFormat(this.#locale, formatOpts).format(
+      new Date(timestamp)
+    );
+  }
+};
+
+// src/theme/defaults.ts
+var theme = {
+  // ── Series ──
+  /** Default stroke color for series lines */
+  stroke: "#4285f4",
+  /** Default line width in pixels */
+  strokeWidth: 2,
+  /** Default point marker size (radius / half-width) */
+  pointSize: 4,
+  /** Max data points before point markers are suppressed */
+  pointThreshold: 100,
+  /** Default max time gap (ms) before the line breaks; 0 = off */
+  gapThreshold: 0,
+  /** Default series type */
+  fill: "none",
+  hatch: null,
+  // ── Aggregated series ──
+  /** Default band fill color */
+  bandFill: "#4285f4",
+  /** Default band opacity (when countOpacity is disabled) */
+  bandOpacity: 0.6,
+  /** Default avg line color for bands */
+  bandAvgLine: "#e53e3e",
+  /** Default min color for minmaxavg series */
+  minColor: "#3b82f6",
+  /** Default max color for minmaxavg series */
+  maxColor: "#ef4444",
+  /** Default avg color for minmaxavg series */
+  avgColor: "#64748b",
+  /** Area fill alpha suffix (hex) for zoned areas — default 20% opacity */
+  areaFillAlpha: "4285f433",
+  // ── Axis ──
+  /** Default axis baseline color */
+  axisColor: "#ccc",
+  /** Default tick mark color */
+  tickColor: "#ddd",
+  /** Default axis label text color */
+  textColor: "#777",
+  /** Default axis text size (axis labels, tick labels) */
+  textSize: 11,
+  /** Axis label (rotated title next to axis) fill color */
+  axisLabelColor: "#444",
+  /** Axis label font size */
+  axisLabelSize: 12,
+  // ── Grid ──
+  /** Default grid line stroke */
+  gridStroke: "#e2e8f0",
+  /** Default grid line stroke width */
+  gridStrokeWidth: 1,
+  /** Default grid opacity */
+  gridOpacity: 1,
+  // ── Legend ──
+  /** Legend swatch stroke */
+  legendStroke: "#ccc",
+  /** Legend text fill */
+  legendText: "#333",
+  /** Legend font size */
+  legendFont: 11,
+  // ── Annotations ──
+  /** Default annotation color */
+  annotationColor: "#334155",
+  /** Default annotation line width */
+  annotationWidth: 1.5,
+  /** Default annotation arrow head size */
+  annotationHead: 9,
+  /** Default annotation point radius */
+  annotationRadius: 4,
+  /** Default annotation text font size */
+  annotationFontSize: 11,
+  // ── Thresholds ──
+  /** Default threshold line color */
+  thresholdColor: "#666",
+  /** Default threshold line style */
+  thresholdLine: "dashed",
+  /** Default threshold fill opacity */
+  thresholdFillOpacity: 0.12,
+  /** Default threshold label font size */
+  thresholdFontSize: 10,
+  // ── Highlights ──
+  /** Default highlight fill color */
+  highlightColor: "#fbbf24",
+  /** Default highlight box opacity */
+  highlightOpacity: 0.2,
+  /** Default highlight label text color */
+  highlightLabelColor: "#92400e",
+  // ── Markers ──
+  /** Default marker color */
+  markerColor: "#f59e0b",
+  /** Default marker point size (cross / circle radius) */
+  markerSize: 5,
+  // ── Gaps ──
+  /** Gap region background fill */
+  gapFill: "#fff",
+  /** Gap border stroke */
+  gapStroke: "#ccc",
+  /** Gap border stroke width */
+  gapStrokeWidth: 1,
+  /** Gap label text color */
+  gapFontColor: "#999",
+  /** Gap label font size */
+  gapFontSize: 10,
+  gapFillOpacity: 0.15,
+  // ── Tooltip ──
+  /** Tooltip box background */
+  tooltipBg: "#fff",
+  /** Tooltip border */
+  tooltipBorder: "#cbd5e1",
+  /** Tooltip text color */
+  tooltipText: "#1e293b",
+  /** Tooltip value label color */
+  tooltipValue: "#3b82f6",
+  /** Tooltip crosshair stroke */
+  tooltipCrosshair: "#94a3b8",
+  /** Tooltip snap radius in pixels */
+  tooltipSnapRadius: 20,
+  // ── Statistics ──
+  /** Stats overlay line color */
+  statsLineColor: "#94a3b8",
+  /** Stats label color */
+  statsLabelColor: "#64748b",
+  // ── Minimap ──
+  /** Minimap overview line stroke */
+  minimapStroke: "#94a3b8",
+  /** Minimap background */
+  minimapBg: "#f8f9fa",
+  /** Minimap brush (viewport) fill */
+  minimapBrush: "#3b82f644",
+  // ── Palette ──
+  /** Default colour palette for enum categories and multi-series. */
+  palette: [
+    "#4285f4",
+    "#ea4335",
+    "#22c55e",
+    "#fbbc05",
+    "#9334ea",
+    "#12b5e5",
+    "#fb923c",
+    "#6366f1"
+  ]
+};
+
+// src/patterns/hatch.ts
+function getHatch(id, variant = "classic-diagonal", fillcolor = "rgba(200, 220, 255, 0.3)", linecolor = "#4D88FF", strokewidth = 2) {
+  if (variant === "none") {
+    return `
+      <pattern id="${id}" width="10" height="10" patternUnits="userSpaceOnUse">
+        <rect width="10" height="10" fill="${fillcolor}" />
+      </pattern>
+    `.trim();
+  }
+  let width = 12;
+  let height = 12;
+  let transform = "rotate(0)";
+  let patternContent = "";
+  switch (variant) {
+    case "classic-diagonal":
+      width = 12;
+      height = 12;
+      transform = "rotate(45)";
+      patternContent = `<line x1="0" y1="0" x2="0" y2="${height}" stroke="${linecolor}" stroke-width="${strokewidth}" stroke-linecap="square" />`;
+      break;
+    case "dense-steep":
+      width = 6;
+      height = 6;
+      transform = "rotate(30)";
+      patternContent = `<line x1="0" y1="0" x2="0" y2="${height}" stroke="${linecolor}" stroke-width="${strokewidth}" stroke-linecap="square" />`;
+      break;
+    case "crosshatch":
+      width = 14;
+      height = 14;
+      transform = "rotate(45)";
+      patternContent = `
+        <line x1="0" y1="0" x2="0" y2="${height}" stroke="${linecolor}" stroke-width="${strokewidth}" stroke-linecap="square" />
+        <line x1="0" y1="0" x2="${width}" y2="0" stroke="${linecolor}" stroke-width="${strokewidth}" stroke-linecap="square" />
+      `;
+      break;
+    case "dots":
+      width = 12;
+      height = 12;
+      patternContent = `<circle cx="${width / 2}" cy="${height / 2}" r="${strokewidth * 1.2}" fill="${linecolor}" />`;
+      break;
+    case "waves":
+      width = 16;
+      height = 16;
+      patternContent = `
+        <path d="M 0 ${height / 2} Q ${width / 4} 0, ${width / 2} ${height / 2} T ${width} ${height / 2}"
+              fill="none" stroke="${linecolor}" stroke-width="${strokewidth}" stroke-linecap="round" />
+      `;
+      break;
+    case "dashed":
+      width = 12;
+      height = 12;
+      transform = "rotate(45)";
+      patternContent = `<line x1="0" y1="0" x2="0" y2="${height}" stroke="${linecolor}" stroke-width="${strokewidth}" stroke-dasharray="3,3" />`;
+      break;
+    case "herringbone":
+      width = 16;
+      height = 16;
+      patternContent = `
+        <path d="M 0 0 L ${width / 2} ${height / 2} L 0 ${height} M ${width} 0 L ${width / 2} ${height / 2} L ${width} ${height}"
+              fill="none" stroke="${linecolor}" stroke-width="${strokewidth}" stroke-linejoin="round" stroke-linecap="round" />
+      `;
+      break;
+    case "brick":
+      width = 20;
+      height = 20;
+      patternContent = `
+        <path d="M 0 ${height / 2} L ${width} ${height / 2} M 0 ${height} L ${width} ${height} M ${width / 2} 0 L ${width / 2} ${height / 2} M 0 ${height / 2} L 0 ${height}"
+              fill="none" stroke="${linecolor}" stroke-width="${strokewidth}" />
+      `;
+      break;
+    case "double-stripe":
+      width = 16;
+      height = 16;
+      transform = "rotate(45)";
+      patternContent = `
+        <line x1="0" y1="0" x2="0" y2="${height}" stroke="${linecolor}" stroke-width="${strokewidth}" stroke-linecap="square" />
+        <line x1="${width / 2}" y1="0" x2="${width / 2}" y2="${height}" stroke="${linecolor}" stroke-width="${strokewidth / 2}" stroke-linecap="square" />
+      `;
+      break;
+    case "honeycomb":
+      width = 18;
+      height = 32;
+      patternContent = `
+        <path d="M 0 0 L ${width / 2} 5 L ${width} 0 M 0 16 L ${width / 2} 11 L ${width} 16 M 0 16 L 0 32 M ${width / 2} 5 L ${width / 2} 11 M ${width} 16 L ${width} 32 M 0 32 L ${width / 2} 27 L ${width} 32 M ${width / 2} 27 L ${width / 2} 32"
+              fill="none" stroke="${linecolor}" stroke-width="${strokewidth}" stroke-linejoin="round" stroke-linecap="round" />
+      `;
+      break;
+  }
+  const bgRect = `<rect width="${width}" height="${height}" fill="${fillcolor}" />`;
+  return `
+    <pattern id="${id}" width="${width}" height="${height}" patternTransform="${transform}" patternUnits="userSpaceOnUse">
+      ${bgRect}
+      ${patternContent}
+    </pattern>
+  `.trim();
+}
+
+// src/patterns/line.ts
+function getLineStyle(variant, strokeWidth = 2) {
+  const sw = strokeWidth;
+  switch (variant) {
+    case "dotted":
+      return { strokeDasharray: `0, ${sw * 2}`, strokeLinecap: "round" };
+    case "sparse-dots":
+      return { strokeDasharray: `0, ${sw * 4}`, strokeLinecap: "round" };
+    case "dashed":
+      return { strokeDasharray: `${sw * 3}, ${sw * 2}`, strokeLinecap: "butt" };
+    case "long-dash":
+      return { strokeDasharray: `${sw * 6}, ${sw * 3}`, strokeLinecap: "butt" };
+    case "dense-dash":
+      return {
+        strokeDasharray: `${sw * 1.5}, ${sw * 1.5}`,
+        strokeLinecap: "butt"
+      };
+    case "dash-dot":
+      return {
+        strokeDasharray: `${sw * 4}, ${sw * 2}, 0, ${sw * 2}`,
+        strokeLinecap: "round"
+      };
+    case "dash-dot-dot":
+      return {
+        strokeDasharray: `${sw * 5}, ${sw * 2}, 0, ${sw * 2}, 0, ${sw * 2}`,
+        strokeLinecap: "round"
+      };
+    case "loose-dash":
+      return { strokeDasharray: `${sw * 3}, ${sw * 4}`, strokeLinecap: "butt" };
+    case "solid":
+    default:
+      return { strokeDasharray: "none", strokeLinecap: "butt" };
+  }
+}
+
+// src/axis/time_axis.ts
+var DEFAULT_COLORS = {
+  axisColor: theme.axisColor,
+  tickColor: theme.tickColor,
+  textColor: theme.textColor,
+  textSize: theme.textSize
+};
+var TimeAxis = class {
+  #scale;
+  #config;
+  constructor(config) {
+    this.#scale = new TimeScale({
+      domain: config.domain,
+      range: config.xRange,
+      locale: config.locale
+    });
+    this.#config = config;
+  }
+  get scale() {
+    return this.#scale;
+  }
+  get axisColor() {
+    return (this.#config.colors ?? DEFAULT_COLORS).axisColor;
+  }
+  get tickColor() {
+    return (this.#config.colors ?? DEFAULT_COLORS).tickColor;
+  }
+  get textColor() {
+    return (this.#config.colors ?? DEFAULT_COLORS).textColor;
+  }
+  get textSize() {
+    return (this.#config.colors ?? DEFAULT_COLORS).textSize;
+  }
+  /**
+   * Generate properly spaced, formatted ticks for the time axis.
+   * Applies anti-overlap: if ticks are too close, every-other is skipped.
+   */
+  generateTicks() {
+    const minTicks = this.#config.minTicks ?? 5;
+    const maxTicks = this.#config.maxTicks ?? 12;
+    const timestamps = this.#scale.ticks({ minTicks, maxTicks });
+    const ticks = timestamps.map((time) => ({
+      time,
+      x: this.#scale.map(time),
+      label: this.tickLabel(time)
+    }));
+    return this.antiOverlap(ticks);
+  }
+  /** Pick the right date format based on the tick interval. */
+  tickLabel(time) {
+    if (this.#config.format) return this.#config.format(new Date(time));
+    const minTicks = this.#config.minTicks ?? 5;
+    const maxTicks = this.#config.maxTicks ?? 12;
+    const { interval } = this.#scale.tickInterval(
+      (minTicks + maxTicks) / 2,
+      minTicks,
+      maxTicks
+    );
+    const opts = {};
+    if (interval < 6e4) {
+      opts.hour = "2-digit";
+      opts.minute = "2-digit";
+      opts.second = "2-digit";
+    } else if (interval < 36e5) {
+      opts.hour = "2-digit";
+      opts.minute = "2-digit";
+    } else if (interval < 864e5) {
+      opts.hour = "2-digit";
+      opts.minute = "2-digit";
+    } else if (interval < 31536e6) {
+      opts.day = "numeric";
+      opts.month = "short";
+      if (interval >= 2592e6) {
+        opts.day = void 0;
+        opts.month = "long";
+      }
+    } else {
+      opts.year = "numeric";
+      if (interval < 2 * 31536e6) opts.month = "short";
+    }
+    return this.#scale.format(time, opts);
+  }
+  /** Remove ticks that would overlap (minimum 60px spacing). */
+  antiOverlap(ticks) {
+    if (ticks.length <= 1) return ticks;
+    const minGap = 60;
+    const result = [ticks[0]];
+    for (let i = 1; i < ticks.length; i++) {
+      const lastX = result[result.length - 1].x;
+      if (Math.abs(ticks[i].x - lastX) >= minGap) {
+        result.push(ticks[i]);
+      }
+    }
+    return result;
+  }
+  /** Render axis baseline + tick marks as draw commands. */
+  render() {
+    const ticks = this.generateTicks();
+    const colors = this.#config.colors ?? DEFAULT_COLORS;
+    const y = this.#config.y ?? 0;
+    const commands = [];
+    const [x0] = this.#scale.range();
+    commands.push({
+      type: "line",
+      x1: x0,
+      y1: y,
+      x2: ticks[ticks.length - 1]?.x ?? x0,
+      y2: y,
+      stroke: colors.axisColor,
+      strokeWidth: colors.axisWidth
+    });
+    for (const tick of ticks) {
+      commands.push({
+        type: "line",
+        x1: tick.x,
+        y1: y,
+        x2: tick.x,
+        y2: y + 6,
+        stroke: colors.tickColor,
+        strokeWidth: colors.axisWidth
+      });
+      commands.push({
+        type: "text",
+        content: tick.label,
+        x: tick.x,
+        y: y + colors.textSize + 6,
+        anchor: "middle",
+        fontSize: colors.textSize,
+        fill: colors.textColor
+      });
+    }
+    return commands;
+  }
+};
+
+// src/axis/value_axis.ts
+var DEFAULT_COLORS2 = {
+  axisColor: "#ccc",
+  tickColor: "#ddd",
+  textColor: "#777",
+  textSize: 12
+};
+function defaultFormat(value) {
+  if (Math.abs(value) >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
+  if (Math.abs(value) >= 1e3) return `${(value / 1e3).toFixed(1)}k`;
+  if (Number.isInteger(value)) return String(value);
+  return value.toFixed(1);
+}
+var ValueAxis = class {
+  #scale;
+  #config;
+  constructor(config) {
+    this.#scale = new LinearScale({ domain: config.domain, range: config.range });
+    this.#config = config;
+  }
+  get scale() {
+    return this.#scale;
+  }
+  get axisColor() {
+    return (this.#config.colors ?? DEFAULT_COLORS2).axisColor;
+  }
+  get tickColor() {
+    return (this.#config.colors ?? DEFAULT_COLORS2).tickColor;
+  }
+  get textColor() {
+    return (this.#config.colors ?? DEFAULT_COLORS2).textColor;
+  }
+  get textSize() {
+    return (this.#config.colors ?? DEFAULT_COLORS2).textSize;
+  }
+  /** Generate nicely-spaced tick values. */
+  generateTicks() {
+    const format = this.#config.format ?? defaultFormat;
+    const numTicks = 6;
+    const [d0, d1] = this.#scale.domain();
+    const range = d1 - d0;
+    if (range === 0) {
+      return [{ value: d0, position: this.#scale.map(d0), label: format(d0) }];
+    }
+    const rough = range / numTicks;
+    const magnitude = Math.pow(10, Math.floor(Math.log10(rough)));
+    const residual = rough / magnitude;
+    let step;
+    if (residual <= 1.5) step = magnitude;
+    else if (residual <= 3) step = 2 * magnitude;
+    else if (residual <= 7) step = 5 * magnitude;
+    else step = 10 * magnitude;
+    const ticks = [];
+    const start = Math.ceil(d0 / step) * step;
+    for (let v = start; v <= d1; v += step) {
+      ticks.push({ value: v, position: this.#scale.map(v), label: format(v) });
+    }
+    return ticks;
+  }
+  /** Render axis as draw commands. */
+  render() {
+    const ticks = this.generateTicks();
+    const colors = this.#config.colors ?? DEFAULT_COLORS2;
+    const x = this.#config.x ?? 0;
+    const orientation = this.#config.orientation ?? "vertical";
+    const position = this.#config.position ?? "left";
+    const commands = [];
+    if (orientation === "vertical") {
+      const [r0, r1] = this.#scale.range();
+      commands.push({
+        type: "line",
+        x1: x,
+        y1: r0,
+        x2: x,
+        y2: r1,
+        stroke: colors.axisColor,
+        strokeWidth: colors.axisWidth
+      });
+      for (const tick of ticks) {
+        if (position === "left") {
+          commands.push({
+            type: "line",
+            x1: x - 4,
+            y1: tick.position,
+            x2: x,
+            y2: tick.position,
+            stroke: colors.tickColor,
+            strokeWidth: colors.axisWidth
+          });
+          commands.push({
+            type: "text",
+            content: tick.label,
+            x: x - 8,
+            y: tick.position + 4,
+            anchor: "end",
+            fontSize: 11,
+            fill: colors.textColor
+          });
+        } else {
+          commands.push({
+            type: "line",
+            x1: x,
+            y1: tick.position,
+            x2: x + 4,
+            y2: tick.position,
+            stroke: colors.tickColor,
+            strokeWidth: colors.axisWidth
+          });
+          commands.push({
+            type: "text",
+            content: tick.label,
+            x: x + 8,
+            y: tick.position + 4,
+            anchor: "start",
+            fontSize: 11,
+            fill: colors.textColor
+          });
+        }
+      }
+    } else {
+      const [r0, r1] = this.#scale.range();
+      commands.push({
+        type: "line",
+        x1: r0,
+        y1: x,
+        x2: r1,
+        y2: x,
+        stroke: colors.axisColor,
+        strokeWidth: colors.axisWidth
+      });
+      for (const tick of ticks) {
+        commands.push({
+          type: "line",
+          x1: tick.position,
+          y1: x,
+          x2: tick.position,
+          y2: x + 6,
+          stroke: colors.tickColor,
+          strokeWidth: colors.axisWidth
+        });
+        commands.push({
+          type: "text",
+          content: tick.label,
+          x: tick.position,
+          y: x + 18,
+          anchor: "middle",
+          fontSize: colors.textSize,
+          fill: colors.textColor
+        });
+      }
+    }
+    return commands;
+  }
+};
+
+// src/analyze/processor.ts
+var SeriesProcessor = class {
+  /**
+   * Standard interpolation for scalar DataPoints.
+   */
+  static interpolateDataPoint(p1, p2, t) {
+    return {
+      time: p1.time + t * (p2.time - p1.time),
+      value: (p1.value ?? 0) + t * ((p2.value ?? 0) - (p1.value ?? 0))
+    };
+  }
+  /**
+   * Standard interpolation for AggregatedPoints (interpolates min, max, avg and count).
+   */
+  static interpolateAggregatedPoint(p1, p2, t) {
+    const lerp = (v1, v2) => v1 !== null && v2 !== null ? v1 + t * (v2 - v1) : null;
+    return {
+      time: p1.time + t * (p2.time - p1.time),
+      min: lerp(p1.min, p2.min),
+      max: lerp(p1.max, p2.max),
+      avg: lerp(p1.avg, p2.avg),
+      count: Math.round(p1.count + t * (p2.count - p1.count))
+    };
+  }
+  /**
+   * Splits a data array into contiguous runs based on null values or time jumps.
+   *
+   * @param data The raw data points.
+   * @param isNull A predicate to identify "gap" points (e.g. value === null).
+   * @param gapThreshold Max time distance between points before a new run starts.
+   */
+  static getRuns(data, isNull, gapThreshold = 0) {
+    const sorted = [...data].sort((a, b) => a.time - b.time);
+    const runs = [];
+    let current = [];
+    let prev = null;
+    for (const p of sorted) {
+      const isPointNull = isNull(p);
+      const isJump = gapThreshold > 0 && prev && p.time - prev.time > gapThreshold;
+      if (isPointNull || isJump) {
+        if (current.length) {
+          runs.push(current);
+          current = [];
+        }
+      }
+      if (!isPointNull) {
+        current.push(p);
+      }
+      prev = p;
+    }
+    if (current.length) {
+      runs.push(current);
+    }
+    return runs;
+  }
+  /**
+   * Splits a contiguous run into sub-segments at the given boundary values.
+   * Inserts interpolated points at every boundary crossing so segments
+   * meet exactly at the boundary.
+   *
+   * @param run A gap-free array of points.
+   * @param boundaries Values at which to split the run.
+   * @param getValue Function to extract the numeric value used for splitting.
+   * @param interpolate Function to create an interpolated point between p1 and p2 at factor t [0..1].
+   */
+  static splitByBoundaries(run, boundaries, getValue, interpolate) {
+    if (run.length === 0) return [];
+    if (boundaries.length === 0) {
+      return [{ data: run, zoneIndex: 0 }];
+    }
+    const bs = [...boundaries].sort((a, b) => a - b);
+    const out = [];
+    const getZone = (v) => {
+      let idx = 0;
+      for (let i = 0; i < bs.length; i++) {
+        if (v >= bs[i]) idx = i + 1;
+        else break;
+      }
+      return idx;
+    };
+    let currentSeg = [run[0]];
+    for (let i = 1; i < run.length; i++) {
+      const p1 = run[i - 1];
+      const p2 = run[i];
+      const v1 = getValue(p1);
+      const v2 = getValue(p2);
+      let crossed;
+      if (v2 > v1) {
+        crossed = bs.filter((b) => b > v1 && b <= v2);
+      } else if (v2 < v1) {
+        crossed = bs.filter((b) => b >= v2 && b < v1).reverse();
+      } else {
+        crossed = [];
+      }
+      for (const b of crossed) {
+        const t = (b - v1) / (v2 - v1);
+        const pInt = interpolate(p1, p2, t);
+        currentSeg.push(pInt);
+        out.push({ data: currentSeg, zoneIndex: getZone((v1 + b) / 2) });
+        currentSeg = [pInt];
+      }
+      currentSeg.push(p2);
+    }
+    if (currentSeg.length > 0) {
+      const vStart = getValue(currentSeg[0]);
+      const vEnd = getValue(currentSeg[currentSeg.length - 1]);
+      out.push({ data: currentSeg, zoneIndex: getZone((vStart + vEnd) / 2) });
+    }
+    return out;
+  }
+  /**
+   * Splits a contiguous run into two groups: those below and those at/above a threshold.
+   * Internally uses splitByBoundaries to ensure exact intersection points.
+   */
+  static splitByThreshold(run, threshold, getValue, interpolate) {
+    const segments = this.splitByBoundaries(run, [threshold], getValue, interpolate);
+    const result = { above: [], below: [] };
+    for (const seg of segments) {
+      if (seg.zoneIndex === 0) result.below.push(seg.data);
+      else result.above.push(seg.data);
+    }
+    return result;
+  }
+};
+
+// src/renderer/series_renderer.ts
+function resolveStyle(style) {
+  return {
+    id: style.id,
+    line: {
+      stroke: style.stroke ?? theme.stroke,
+      strokeWidth: style.strokeWidth ?? theme.strokeWidth,
+      smoothing: style.smoothing ?? false,
+      dashed: style.dashed ?? false
+    },
+    fill: style.fill ?? theme.areaFillAlpha,
+    markers: {
+      type: style.pointStyle ?? "none",
+      size: style.pointSize ?? theme.pointSize,
+      stroke: style.stroke ?? theme.stroke,
+      fill: "#ffffff"
+    },
+    shadow: {
+      color: style.shadowColor ?? "transparent",
+      blur: style.shadowBlur ?? 0,
+      offsetX: style.shadowOffsetX ?? 0,
+      offsetY: style.shadowOffsetY ?? 0
+    }
+  };
+}
+function renderLine(segments, ctx, style) {
+  const commands = [];
+  const totalPoints = segments.reduce((sum, seg) => sum + seg.data.length, 0);
+  const s = resolveStyle(style);
+  for (let si = 0; si < segments.length; si++) {
+    const seg = segments[si];
+    if (seg.data.length >= 2) {
+      commands.push({
+        type: "path",
+        id: style.id ? `${style.id}-line-${si}` : void 0,
+        points: seg.data.map((p) => ({
+          x: ctx.timeScale.map(p.time),
+          y: ctx.valueScale.map(p.value)
+        })),
+        stroke: seg.color ?? s.line.stroke,
+        strokeWidth: s.line.strokeWidth,
+        smoothing: s.line.smoothing,
+        dashed: s.line.dashed,
+        shadowColor: s.shadow.color,
+        shadowBlur: s.shadow.blur,
+        shadowOffsetX: s.shadow.offsetX,
+        shadowOffsetY: s.shadow.offsetY,
+        fill: "none"
+      });
+    } else if (seg.data.length === 1 && totalPoints === 1) {
+      commands.push({
+        type: "circle",
+        cx: ctx.timeScale.map(seg.data[0].time),
+        cy: ctx.valueScale.map(seg.data[0].value),
+        r: Math.max(s.markers.size, s.line.strokeWidth),
+        fill: seg.color ?? s.line.stroke,
+        shadowColor: s.shadow.color,
+        shadowBlur: s.shadow.blur
+      });
+    }
+  }
+  return commands;
+}
+function renderZonedArea(run, ctx, options, style) {
+  if (run.length < 2) return [];
+  const segments = SeriesProcessor.splitByBoundaries(
+    run,
+    options.boundaries,
+    options.getValue,
+    options.interpolate
+  );
+  const commands = [];
+  for (let si = 0; si < segments.length; si++) {
+    const seg = segments[si];
+    if (seg.data.length < 2) continue;
+    const color = options.getColor(seg.zoneIndex);
+    if (!color) continue;
+    const ptsLow = seg.data.map((p) => ({
+      x: ctx.timeScale.map(p.time),
+      y: ctx.valueScale.map(options.yLow(p))
+    }));
+    const ptsHigh = seg.data.map((p) => ({
+      x: ctx.timeScale.map(p.time),
+      y: ctx.valueScale.map(options.yHigh(p))
+    })).reverse();
+    commands.push({
+      type: "path",
+      id: style?.id ? `${style.id}-fill-${si}` : void 0,
+      points: [...ptsLow, ...ptsHigh],
+      fill: color,
+      hatch: options.getHatch?.(seg.zoneIndex),
+      stroke: "none"
+    });
+  }
+  return commands;
+}
+function renderMarkers(points, ctx, style, getColor) {
+  const s = resolveStyle(style);
+  if (!s.markers.type || s.markers.type === "none") return [];
+  const commands = [];
+  for (let mi = 0; mi < points.length; mi++) {
+    const p = points[mi];
+    const x = ctx.timeScale.map(p.time);
+    const y = ctx.valueScale.map(p.value);
+    const pointColor = getColor(p);
+    const stroke = style.pointStroke ?? pointColor;
+    const fill = style.pointFill ?? pointColor;
+    const strokeWidth = style.pointStrokeWidth ?? 1.5;
+    const id = style.id ? `${style.id}-marker-${mi}` : void 0;
+    drawMarker(commands, id, s.markers.type, x, y, s.markers.size, stroke, fill, strokeWidth);
+  }
+  return commands;
+}
+function drawMarker(commands, id, shape, x, y, size, stroke, fill, sw) {
+  switch (shape) {
+    case "circle":
+      commands.push({ type: "circle", cx: x, cy: y, r: size, fill, stroke, strokeWidth: sw, id });
+      break;
+    case "square":
+      commands.push({ type: "rect", x: x - size, y: y - size, w: size * 2, h: size * 2, fill, stroke, strokeWidth: sw, id });
+      break;
+    case "cross":
+      commands.push({ type: "line", x1: x - size, y1: y - size, x2: x + size, y2: y + size, stroke, strokeWidth: sw, id });
+      commands.push({ type: "line", x1: x - size, y1: y + size, x2: x + size, y2: y - size, stroke, strokeWidth: sw, id });
+      break;
+    case "diamond":
+      commands.push({ type: "path", points: [{ x, y: y - size }, { x: x + size, y }, { x, y: y + size }, { x: x - size, y }], fill, stroke, strokeWidth: sw, id });
+      break;
+    case "triangle":
+      commands.push({ type: "path", points: [{ x, y: y - size }, { x: x + size, y: y + size }, { x: x - size, y: y + size }], fill, stroke, strokeWidth: sw, id });
+      break;
+    case "star": {
+      const pts = [];
+      for (let i = 0; i < 10; i++) {
+        const r = i % 2 === 0 ? size : size * 0.5;
+        const a = Math.PI / 2 * 3 + i * Math.PI / 5;
+        pts.push({ x: x + r * Math.cos(a), y: y + r * Math.sin(a) });
+      }
+      commands.push({ type: "path", points: pts, fill, stroke, strokeWidth: sw, id });
+      break;
+    }
+    case "arrow":
+      commands.push({ type: "path", points: [{ x: x - size, y: y + size }, { x, y: y - size }, { x: x + size, y: y + size }], stroke, strokeWidth: sw, fill: "none", id });
+      break;
+    default:
+      commands.push({ type: "circle", cx: x, cy: y, r: size, fill, stroke, strokeWidth: sw, id });
+  }
+}
+
+// src/series/series.ts
+var Series = class _Series {
+  /** SVG id prefix for elements. Generated ids: `<id>-slot-<index>`, `<id>-avg-<index>`. */
+  #id;
+  #timeScale;
+  static uidcnt = 0;
+  #data;
+  constructor(config, data = []) {
+    this.#id = config.id ?? "id" + Date.now + ++_Series.uidcnt;
+    this.#timeScale = config.timeScale;
+    this.#data = data;
+  }
+  get id() {
+    return this.#id;
+  }
+  get timeScale() {
+    return this.#timeScale;
+  }
+  get data() {
+    return this.#data;
+  }
+};
+
+// src/series/minmaxavg_series.ts
+var MinMaxAvgSeries = class extends Series {
+  #config;
+  constructor(config) {
+    super(config, config.data);
+    this.#config = config;
+  }
+  render() {
+    const c = this.#config;
+    const minColor = c.minColor ?? theme.minColor;
+    const maxColor = c.maxColor ?? theme.maxColor;
+    const avgColor = c.avgColor ?? theme.avgColor;
+    const avgDashed = c.avgDashed ?? true;
+    const smoothing = c.smoothing ?? false;
+    const strokeWidth = c.strokeWidth ?? theme.strokeWidth;
+    const runs = SeriesProcessor.getRuns(
+      this.data,
+      (p) => p.min === null || p.max === null || p.avg === null
+    );
+    if (runs.length === 0) return [];
+    const ctx = { timeScale: this.timeScale, valueScale: c.valueScale };
+    const commands = [];
+    for (const run of runs) {
+      if (run.length < 2) continue;
+      if (c.fillToMax) {
+        commands.push(
+          ...renderZonedArea(
+            run,
+            ctx,
+            {
+              boundaries: [],
+              yLow: (p) => p.avg,
+              yHigh: (p) => p.max,
+              getValue: (p) => p.avg,
+              interpolate: SeriesProcessor.interpolateAggregatedPoint,
+              getColor: () => c.fillToMax,
+              getHatch: () => c.fillToMaxHatch
+            },
+            { id: this.id ? `${this.id}-fillToMax` : void 0 }
+          )
+        );
+      }
+      if (c.fillToMin) {
+        commands.push(
+          ...renderZonedArea(
+            run,
+            ctx,
+            {
+              boundaries: [],
+              yLow: (p) => p.avg,
+              yHigh: (p) => p.min,
+              getValue: (p) => p.avg,
+              interpolate: SeriesProcessor.interpolateAggregatedPoint,
+              getColor: () => c.fillToMin,
+              getHatch: () => c.fillToMinHatch
+            },
+            { id: this.id ? `${this.id}-fillToMin` : void 0 }
+          )
+        );
+      }
+      commands.push(
+        ...renderLine(
+          [{ data: run.map((p) => ({ time: p.time, value: p.max })) }],
+          ctx,
+          { stroke: maxColor, strokeWidth, smoothing, id: this.id ? `${this.id}-max` : void 0 }
+        ),
+        ...renderLine(
+          [{ data: run.map((p) => ({ time: p.time, value: p.min })) }],
+          ctx,
+          { stroke: minColor, strokeWidth, smoothing, id: this.id ? `${this.id}-min` : void 0 }
+        ),
+        ...renderLine(
+          [{ data: run.map((p) => ({ time: p.time, value: p.avg })) }],
+          ctx,
+          { stroke: avgColor, strokeWidth, smoothing, dashed: avgDashed, id: this.id ? `${this.id}-avg` : void 0 }
+        )
+      );
+    }
+    return commands;
+  }
+};
+
+// src/series/band_series.ts
+var BandSeries = class extends Series {
+  #config;
+  constructor(config) {
+    super(config, config.data);
+    this.#config = config;
+  }
+  /** Calculate opacity from count (normalized 0.2-1.0) */
+  opacity(count) {
+    if (!(this.#config.countOpacity ?? false)) return 0.6;
+    const maxCount = Math.max(...this.data.map((d) => d.count));
+    if (maxCount === 0) return 0.2;
+    return 0.2 + 0.8 * count / maxCount;
+  }
+  /** Render bands as draw commands */
+  render() {
+    const c = this.#config;
+    const fill = c.fill ?? theme.bandFill;
+    const hatch = c.hatch;
+    const avgLine = c.avgLine ?? false;
+    const avgLineColor = c.avgLineColor ?? theme.bandAvgLine;
+    const bandWidth = c.bandWidth ?? 10;
+    const commands = [];
+    for (const dp of this.data) {
+      if (dp.min === null || dp.max === null) continue;
+      const x = this.timeScale.map(dp.time);
+      const yMin = c.valueScale.map(dp.max);
+      const yMax = c.valueScale.map(dp.min);
+      const w = bandWidth;
+      const idx = this.data.indexOf(dp);
+      commands.push({
+        type: "rect",
+        x: x - w / 2,
+        y: yMin,
+        w,
+        h: yMax - yMin,
+        fill,
+        hatch,
+        opacity: this.opacity(dp.count),
+        id: this.id ? `${this.id}-slot-${idx}` : void 0
+      });
+      if (avgLine && dp.avg !== null) {
+        const yAvg = c.valueScale.map(dp.avg);
+        commands.push({
+          type: "line",
+          x1: x - w / 2,
+          y1: yAvg,
+          x2: x + w / 2,
+          y2: yAvg,
+          stroke: avgLineColor,
+          strokeWidth: 1,
+          id: this.id ? `${this.id}-avg-${idx}` : void 0
+        });
+      }
+    }
+    return commands;
+  }
+};
+
+// src/series/threshold_renderer.ts
+function dashFor(line) {
+  if (line === "dotted") return { dash: "dotted" };
+  if (line === "dashed") return { dash: "dashed" };
+  return {};
+}
+function renderThresholds(config) {
+  const { thresholds, valueScale, xRange } = config;
+  const [x0, x1] = xRange;
+  const [r0, r1] = valueScale.range();
+  const top = Math.min(r0, r1);
+  const bottom = Math.max(r0, r1);
+  const commands = [];
+  for (const t of thresholds) {
+    const color = t.color ?? theme.thresholdColor;
+    const y = valueScale.map(t.value);
+    if (t.fill === "above") {
+      commands.push({
+        type: "rect",
+        x: x0,
+        y: top,
+        w: x1 - x0,
+        h: Math.max(0, y - top),
+        fill: color,
+        hatch: t.fillHatch,
+        opacity: t.fillOpacity ?? 0.12,
+        id: t.id ? `${t.id}-fill` : void 0
+      });
+    } else if (t.fill === "below") {
+      commands.push({
+        type: "rect",
+        x: x0,
+        y,
+        w: x1 - x0,
+        h: Math.max(0, bottom - y),
+        fill: color,
+        hatch: t.fillHatch,
+        opacity: t.fillOpacity ?? 0.12,
+        id: t.id ? `${t.id}-fill` : void 0
+      });
+    }
+    const line = t.line ?? theme.thresholdLine;
+    if (line !== "none") {
+      const dash = dashFor(line);
+      const lineCmd = {
+        type: "line",
+        x1: x0,
+        y1: y,
+        x2: x1,
+        y2: y,
+        stroke: color,
+        strokeWidth: 1,
+        ...dash,
+        id: t.id ? `${t.id}-line` : void 0
+      };
+      if (t.shadowColor) {
+        lineCmd.shadowColor = t.shadowColor;
+        lineCmd.shadowBlur = t.shadowBlur ?? 4;
+        lineCmd.shadowOffsetX = t.shadowOffsetX ?? 0;
+        lineCmd.shadowOffsetY = t.shadowOffsetY ?? 2;
+      }
+      commands.push(lineCmd);
+    }
+    if (t.label !== false) {
+      const labelObj = t.label && typeof t.label === "object" ? t.label : void 0;
+      const text = typeof t.label === "string" ? t.label : labelObj?.text ?? t.name;
+      const position = labelObj?.position ?? "right";
+      commands.push({
+        ...thresholdLabel(text, position, x0, x1, y, color, labelObj),
+        id: t.id ? `${t.id}-label` : void 0
+      });
+    }
+  }
+  return commands;
+}
+function thresholdLabel(text, pos, x0, x1, y, color, labelObj) {
+  const mid = (x0 + x1) / 2;
+  const base = {
+    type: "text",
+    content: text,
+    fontSize: theme.thresholdFontSize,
+    fill: color
+  };
+  const extras = labelObj ? {
+    ...labelObj.rotate !== void 0 && { rotate: labelObj.rotate },
+    ...labelObj.textBaseline !== void 0 && {
+      textBaseline: labelObj.textBaseline
+    }
+  } : {};
+  switch (pos) {
+    case "left":
+      return { ...base, ...extras, x: x0 + 4, y: y - 4, anchor: "start" };
+    case "above":
+      return { ...base, ...extras, x: mid, y: y - 6, anchor: "middle" };
+    case "below":
+      return { ...base, ...extras, x: mid, y: y + 14, anchor: "middle" };
+    case "center":
+      return { ...base, ...extras, x: mid, y: y - 4, anchor: "middle" };
+    case "right":
+    default:
+      return { ...base, ...extras, x: x1 - 4, y: y - 4, anchor: "end" };
+  }
+}
+
+// src/series/gap_renderer.ts
+function renderGaps(config) {
+  const {
+    gaps,
+    timeScale,
+    yRange,
+    fill = theme.gapFill,
+    hatch,
+    fillOpacity = theme.gapFillOpacity,
+    stroke = theme.gapStroke,
+    strokeWidth = theme.gapStrokeWidth,
+    dashed = true,
+    fontSize = theme.gapFontSize,
+    fontFill = theme.gapFontColor,
+    labelBaseline: defaultBaseline = "middle",
+    labelRotate: defaultRotate
+  } = config;
+  const [y0, y1] = yRange;
+  const commands = [];
+  for (const gap of gaps) {
+    const x1 = timeScale.map(gap.startTime);
+    const x2 = timeScale.map(gap.endTime);
+    const gapFill = gap.fill ?? fill;
+    const gapHatch = gap.hatch ?? hatch;
+    const gapOpacity = gap.fillOpacity ?? fillOpacity;
+    const gapLabel = gap.label ?? "";
+    const gapRotate = gap.rotate ?? defaultRotate;
+    const baseline = gap.labelBaseline ?? defaultBaseline;
+    if (gap.style === "dashed_border" || !gap.style) {
+      commands.push({
+        type: "rect",
+        x: x1,
+        y: y0,
+        w: x2 - x1,
+        h: y1 - y0,
+        fill: gapFill,
+        hatch: gapHatch,
+        opacity: gapOpacity,
+        stroke,
+        strokeWidth,
+        dashed
+      });
+    } else if (gap.style === "empty") {
+      commands.push({
+        type: "rect",
+        x: x1,
+        y: y0,
+        w: x2 - x1,
+        h: y1 - y0,
+        fill: gapFill,
+        hatch: gapHatch,
+        opacity: gapOpacity
+      });
+    }
+    if (gapLabel) {
+      const labelY = gapLabelY(y0, y1, baseline);
+      const svgBaseline = baseline === "above" ? "top" : baseline === "below" ? "bottom" : "middle";
+      commands.push({
+        type: "text",
+        content: gapLabel,
+        x: (x1 + x2) / 2,
+        y: labelY,
+        anchor: "middle",
+        fontSize,
+        fill: fontFill,
+        textBaseline: svgBaseline,
+        rotate: gapRotate
+      });
+    }
+  }
+  return commands;
+}
+function gapLabelY(y0, y1, baseline) {
+  switch (baseline) {
+    case "above":
+      return y0 - 12;
+    case "below":
+      return y1 + 4;
+    case "middle":
+    default:
+      return (y0 + y1) / 2;
+  }
+}
+
+// src/series/annotation_band.ts
+var AnnotationBandSeries = class {
+  #config;
+  constructor(config, xRange, y, height) {
+    this.#config = { ...config, xRange, y, height };
+  }
+  /** Render the band as colored rects with labels, optionally with a time axis. */
+  render() {
+    const { items, timeScale, background, hatch: bandHatch, showAxis, xRange, y, height } = this.#config;
+    const commands = [];
+    if (background) {
+      commands.push({
+        type: "rect",
+        x: xRange[0],
+        y,
+        w: xRange[1] - xRange[0],
+        h: height,
+        fill: background,
+        opacity: 0.04,
+        stroke: "#ddd",
+        strokeWidth: 0.25
+      });
+    }
+    for (const item of items) {
+      const x1 = timeScale.map(item.startTime);
+      const x2 = timeScale.map(item.endTime);
+      if (x2 - x1 < 1) continue;
+      commands.push({
+        type: "rect",
+        x: x1,
+        y,
+        w: x2 - x1,
+        h: height,
+        hatch: item.hatch ?? bandHatch,
+        fill: item.fill ?? "#6b728044",
+        stroke: item.stroke,
+        strokeWidth: item.strokeWidth ?? 0
+      });
+      if (item.label) {
+        commands.push({
+          type: "text",
+          content: item.label,
+          x: (x1 + x2) / 2,
+          y: this.#labelY(item.labelBaseline),
+          anchor: "middle",
+          fontSize: item.labelFontSize ?? 10,
+          fill: item.labelFill ?? "#333",
+          textBaseline: item.labelBaseline ?? "middle"
+        });
+      }
+    }
+    if (showAxis) {
+      const timeAxis = new TimeAxis({
+        domain: timeScale.domain(),
+        xRange,
+        y: y + height + 4
+      });
+      commands.push({
+        type: "group",
+        cssClass: "annotation-band-axis",
+        commands: timeAxis.render()
+      });
+    }
+    return commands;
+  }
+  #labelY(baseline) {
+    const { y, height } = this.#config;
+    switch (baseline) {
+      case "top":
+        return y + 1;
+      case "bottom":
+        return y + height - 1;
+      default:
+        return y + height / 2;
+    }
+  }
+};
+
+// src/annotation/highlight.ts
+function renderHighlights(config) {
+  const { highlights, timeScale, yRange, height } = config;
+  const [y0, y1] = yRange;
+  const commands = [];
+  for (const h of highlights) {
+    const x1 = timeScale.map(h.startTime);
+    const x2 = timeScale.map(h.endTime);
+    commands.push({
+      type: "rect",
+      x: x1,
+      y: y0,
+      w: x2 - x1,
+      h: y1 - y0,
+      fill: h.color ?? theme.highlightColor,
+      opacity: h.opacity ?? theme.highlightOpacity
+    });
+    if (h.label) {
+      commands.push({
+        type: "text",
+        content: h.label,
+        x: (x1 + x2) / 2,
+        y: highlightLabelY(h.labelPosition ?? "top", y0, y1, height),
+        anchor: "middle",
+        fontSize: theme.annotationFontSize,
+        fill: h.color ?? theme.highlightLabelColor
+      });
+    }
+  }
+  return commands;
+}
+function highlightLabelY(pos, y0, y1, height) {
+  switch (pos) {
+    case "above":
+      return y0 - 5;
+    case "below":
+      return height !== void 0 ? height - 5 : y1 + 14;
+    case "center":
+      return (y0 + y1) / 2 + 4;
+    case "bottom":
+      return y1 - 6;
+    case "top":
+    default:
+      return y0 + 14;
+  }
+}
+
+// src/annotation/marker.ts
+function renderMarkers2(config) {
+  const { markers, timeScale, valueScale, yRange = [0, 300] } = config;
+  const [yTop, yBottom] = yRange;
+  const commands = [];
+  for (const marker of markers) {
+    const x = timeScale.map(marker.time);
+    const color = marker.color ?? theme.markerColor;
+    const pointStyle = marker.pointStyle ?? (marker.value !== void 0 ? "circle" : "none");
+    const lineStyle = marker.lineStyle ?? "full";
+    if (marker.value !== void 0) {
+      const y = valueScale.map(marker.value);
+      if (lineStyle === "to-value") {
+        commands.push({ type: "line", x1: x, y1: yBottom, x2: x, y2: y, stroke: color, strokeWidth: 1, dashed: true });
+      } else if (lineStyle === "to-top") {
+        commands.push({ type: "line", x1: x, y1: yTop, x2: x, y2: y, stroke: color, strokeWidth: 1, dashed: true });
+      } else if (lineStyle === "full") {
+        commands.push({ type: "line", x1: x, y1: yTop, x2: x, y2: yBottom, stroke: color, strokeWidth: 1 });
+      }
+      if (pointStyle !== "none") {
+        drawMarkerPoint(commands, x, y, color, pointStyle);
+      }
+      if (marker.label) {
+        const labelY = lineStyle === "to-value" ? y - 10 : yTop - 6;
+        commands.push({ type: "text", content: marker.label, x, y: labelY, anchor: "middle", fontSize: 11, fill: color });
+      }
+    } else {
+      commands.push({ type: "line", x1: x, y1: yTop, x2: x, y2: yBottom, stroke: color, strokeWidth: 1 });
+      if (marker.label) {
+        commands.push({ type: "text", content: marker.label, x, y: yTop - 6, anchor: "middle", fontSize: 11, fill: color });
+      }
+    }
+  }
+  return commands;
+}
+function drawMarkerPoint(commands, x, y, color, style) {
+  const s = theme.markerSize;
+  switch (style) {
+    case "circle":
+      commands.push({ type: "circle", cx: x, cy: y, r: s, fill: color });
+      break;
+    case "square":
+      commands.push({ type: "rect", x: x - s, y: y - s, w: s * 2, h: s * 2, fill: color });
+      break;
+    case "cross":
+      commands.push({ type: "line", x1: x - s, y1: y - s, x2: x + s, y2: y + s, stroke: color, strokeWidth: 2 });
+      commands.push({ type: "line", x1: x - s, y1: y + s, x2: x + s, y2: y - s, stroke: color, strokeWidth: 2 });
+      break;
+    case "arrow":
+      commands.push({
+        type: "path",
+        points: [{ x: x - s, y: y + s }, { x, y: y - s }, { x: x + s, y: y + s }],
+        stroke: color,
+        strokeWidth: 2,
+        fill: "none"
+      });
+      break;
+    case "diamond":
+      commands.push({
+        type: "path",
+        points: [{ x, y: y - s }, { x: x + s, y }, { x, y: y + s }, { x: x - s, y }],
+        fill: color,
+        stroke: "none"
+      });
+      break;
+    case "triangle":
+      commands.push({
+        type: "path",
+        points: [{ x, y: y - s }, { x: x + s, y: y + s }, { x: x - s, y: y + s }],
+        fill: color,
+        stroke: "none"
+      });
+      break;
+    case "star": {
+      const pts = [];
+      const innerRadius = s * 0.4;
+      for (let i = 0; i < 10; i++) {
+        const r = i % 2 === 0 ? s : innerRadius;
+        const angle = Math.PI / 2 * 3 + i * Math.PI / 5;
+        pts.push({ x: x + r * Math.cos(angle), y: y + r * Math.sin(angle) });
+      }
+      commands.push({ type: "path", points: pts, fill: color, stroke: "none" });
+      break;
+    }
+    case "plus":
+      commands.push({ type: "line", x1: x - s, y1: y, x2: x + s, y2: y, stroke: color, strokeWidth: 2 });
+      commands.push({ type: "line", x1: x, y1: y - s, x2: x, y2: y + s, stroke: color, strokeWidth: 2 });
+      break;
+    case "triangle-down":
+      commands.push({
+        type: "path",
+        points: [{ x, y: y + s }, { x: x + s, y: y - s }, { x: x - s, y: y - s }],
+        fill: color,
+        stroke: "none"
+      });
+      break;
+    case "hexagon": {
+      const pts = [];
+      for (let i = 0; i < 6; i++) {
+        const angle = i * (Math.PI / 3);
+        pts.push({ x: x + s * Math.cos(angle), y: y + s * Math.sin(angle) });
+      }
+      commands.push({ type: "path", points: pts, fill: color, stroke: "none" });
+      break;
+    }
+    case "hourglass":
+      commands.push({
+        type: "path",
+        points: [{ x: x - s, y: y - s }, { x: x + s, y: y - s }, { x: x - s, y: y + s }, { x: x + s, y: y + s }],
+        fill: color,
+        stroke: "none"
+      });
+      break;
+    case "line-horizontal":
+      commands.push({ type: "line", x1: x - s, y1: y, x2: x + s, y2: y, stroke: color, strokeWidth: 2 });
+      break;
+  }
+}
+
+// src/annotation/annotation_renderer.ts
+function renderAnnotations(config) {
+  const { annotations, timeScale, valueScales } = config;
+  const cmds = [];
+  const project = (ref) => {
+    const scale = valueScales.get(ref.axis ?? 0) ?? valueScales.values().next().value;
+    return { x: timeScale.map(ref.time), y: scale ? scale.map(ref.value) : 0 };
+  };
+  for (const a of annotations) {
+    switch (a.type) {
+      case "line": {
+        const p1 = project(a.from);
+        const p2 = project(a.to);
+        cmds.push({ type: "line", x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y, stroke: a.color ?? theme.annotationColor, strokeWidth: a.width ?? theme.annotationWidth, dash: a.dash });
+        break;
+      }
+      case "arrow": {
+        const p1 = project(a.from);
+        const p2 = project(a.to);
+        const color = a.color ?? theme.annotationColor;
+        const h = a.headSize ?? theme.annotationHead;
+        cmds.push({ type: "line", x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y, stroke: color, strokeWidth: a.width ?? theme.annotationWidth });
+        const len = Math.hypot(p2.x - p1.x, p2.y - p1.y) || 1;
+        const ux = (p2.x - p1.x) / len;
+        const uy = (p2.y - p1.y) / len;
+        const baseX = p2.x - ux * h;
+        const baseY = p2.y - uy * h;
+        cmds.push({
+          type: "path",
+          points: [
+            { x: p2.x, y: p2.y },
+            { x: baseX - uy * h * 0.5, y: baseY + ux * h * 0.5 },
+            { x: baseX + uy * h * 0.5, y: baseY - ux * h * 0.5 }
+          ],
+          fill: color,
+          stroke: "none"
+        });
+        break;
+      }
+      case "rect": {
+        const p1 = project(a.from);
+        const p2 = project(a.to);
+        cmds.push({ type: "rect", x: Math.min(p1.x, p2.x), y: Math.min(p1.y, p2.y), w: Math.abs(p2.x - p1.x), h: Math.abs(p2.y - p1.y), fill: a.fill ?? "none", stroke: a.stroke, opacity: a.opacity });
+        break;
+      }
+      case "point": {
+        const p = project(a.at);
+        const color = a.color ?? "#334155";
+        const r = a.radius ?? theme.annotationRadius;
+        const shape = a.shape ?? "circle";
+        if (shape === "circle") {
+          cmds.push({ type: "circle", cx: p.x, cy: p.y, r, fill: color });
+        } else if (shape === "square") {
+          cmds.push({ type: "rect", x: p.x - r, y: p.y - r, w: r * 2, h: r * 2, fill: color });
+        } else {
+          cmds.push({ type: "line", x1: p.x - r, y1: p.y - r, x2: p.x + r, y2: p.y + r, stroke: color, strokeWidth: 1.5 });
+          cmds.push({ type: "line", x1: p.x - r, y1: p.y + r, x2: p.x + r, y2: p.y - r, stroke: color, strokeWidth: 1.5 });
+        }
+        break;
+      }
+      case "label": {
+        const p = project(a.at);
+        cmds.push({ type: "text", content: a.text, x: p.x + (a.dx ?? 0), y: p.y + (a.dy ?? 0), anchor: a.anchor ?? "middle", fontSize: theme.annotationFontSize, fill: a.color ?? theme.annotationColor, rotate: a.rotate });
+        break;
+      }
+    }
+  }
+  return cmds;
+}
+
+// src/renderer/legend_renderer.ts
+var SWATCH = 12;
+var GAP = 8;
+var ITEM_H = 20;
+var FONT = 11;
+var H_GAP = 18;
+var labelWidth = (s) => s.length * FONT * 0.6;
+function measureLegend(items, orientation = "vertical") {
+  if (orientation === "horizontal") {
+    let w = 0;
+    for (const it of items) w += SWATCH + GAP + labelWidth(it.name) + H_GAP;
+    return { width: Math.max(0, w - H_GAP), height: ITEM_H };
+  }
+  let maxLabel = 0;
+  for (const it of items) maxLabel = Math.max(maxLabel, labelWidth(it.name));
+  return { width: SWATCH + GAP + maxLabel, height: items.length * ITEM_H };
+}
+function renderLegend(config) {
+  const { items, x, y, orientation = "vertical" } = config;
+  const commands = [];
+  let cursorX = x;
+  items.forEach((item, i) => {
+    const sx = orientation === "horizontal" ? cursorX : x;
+    const sy = orientation === "horizontal" ? y : y + i * ITEM_H;
+    commands.push({
+      type: "rect",
+      x: sx,
+      y: sy,
+      w: SWATCH,
+      h: SWATCH,
+      fill: item.color,
+      stroke: theme.legendStroke,
+      strokeWidth: 1
+    });
+    commands.push({
+      type: "text",
+      content: item.name,
+      x: sx + SWATCH + GAP,
+      y: sy + SWATCH - 2,
+      fontSize: theme.legendFont,
+      fill: theme.legendText
+    });
+    if (orientation === "horizontal") cursorX += SWATCH + GAP + labelWidth(item.name) + H_GAP;
+  });
+  return { type: "group", cssClass: "chart-legend", commands };
+}
+
+// src/renderer/grid_renderer.ts
+function renderGrid(config) {
+  const {
+    xTicks,
+    yTicks,
+    xRange,
+    yRange,
+    stroke = theme.gridStroke,
+    strokeWidth = theme.gridStrokeWidth,
+    dashed = false,
+    opacity = theme.gridOpacity
+  } = config;
+  const commands = [];
+  if (yTicks) {
+    for (const y of yTicks) {
+      commands.push({ type: "line", x1: xRange[0], y1: y, x2: xRange[1], y2: y, stroke, strokeWidth, dashed, opacity });
+    }
+  }
+  if (xTicks) {
+    for (const x of xTicks) {
+      commands.push({ type: "line", x1: x, y1: yRange[0], x2: x, y2: yRange[1], stroke, strokeWidth, dashed, opacity });
+    }
+  }
+  return commands;
+}
+
+// src/analyze/aggregator.ts
+function detectGaps(data, minGapMs = 6e4) {
+  if (data.length < 2) return [];
+  const sorted = [...data].sort((a, b) => a.time - b.time);
+  const gaps = [];
+  for (let i = 1; i < sorted.length; i++) {
+    const gap = sorted[i].time - sorted[i - 1].time;
+    if (gap > minGapMs) {
+      gaps.push({
+        startTime: sorted[i - 1].time,
+        endTime: sorted[i].time
+      });
+    }
+  }
+  return gaps;
+}
+
+// src/series/fill_spec_renderer.ts
+function projectBound(bound, defaultBound, ctx) {
+  const b = bound ?? defaultBound;
+  if (b === "series") return null;
+  if (b === "chartTop") return ctx.chartTop;
+  if (b === "chartBottom") return ctx.chartBottom;
+  if (typeof b === "object" && "threshold" in b) {
+    const t = ctx.thresholds.get(b.threshold);
+    if (!t) {
+      throw new Error(
+        `fillSpec region references unknown threshold '${b.threshold}'`
+      );
+    }
+    return ctx.valueScale.map(t.value);
+  }
+  if (typeof b === "object" && "value" in b) {
+    return ctx.valueScale.map(b.value);
+  }
+  return null;
+}
+function unpackFill(fill) {
+  if (typeof fill === "string") return { color: fill };
+  return { color: fill.color, hatch: fill.hatch };
+}
+function renderRegion(region, ctx, regionIndex) {
+  const fromY = projectBound(region.from, "chartBottom", ctx);
+  const toY = projectBound(region.to, "series", ctx);
+  const { color, hatch } = unpackFill(region.fill);
+  const baseAttrs = {
+    type: "path",
+    fill: color,
+    hatch,
+    stroke: "none",
+    ...ctx.idPrefix && { id: `${ctx.idPrefix}-fill-r${regionIndex}` }
+  };
+  if (fromY !== null && toY !== null) {
+    const range = ctx.timeScale.range();
+    const xMin = range[0];
+    const xMax = range[1];
+    const yTop = Math.min(fromY, toY);
+    const yBot = Math.max(fromY, toY);
+    return [
+      {
+        ...baseAttrs,
+        points: [
+          { x: xMin, y: yTop },
+          { x: xMax, y: yTop },
+          { x: xMax, y: yBot },
+          { x: xMin, y: yBot }
+        ]
+      }
+    ];
+  }
+  const fixedY = fromY ?? toY;
+  const cmds = [];
+  let fixedValue = recoverFixedValue(region, ctx);
+  if (fixedValue === null) {
+    const d = ctx.valueScale.domain();
+    fixedValue = (fromY ?? toY) === ctx.chartBottom ? d[0] : d[1];
+  }
+  const outerValue = recoverBoundValue(region.outer, ctx);
+  for (const run of ctx.runs) {
+    if (run.length < 2) continue;
+    const split = SeriesProcessor.splitByThreshold(
+      run,
+      fixedValue,
+      (p) => p.value ?? fixedValue,
+      SeriesProcessor.interpolateDataPoint
+    );
+    let segments = region.side === "above" ? split.above : region.side === "below" ? split.below : [...split.above, ...split.below];
+    if (outerValue !== null && region.side) {
+      const keep = region.side === "above" ? "below" : "above";
+      segments = segments.flatMap((seg) => {
+        if (seg.length < 2) return [];
+        const sub = SeriesProcessor.splitByThreshold(
+          seg,
+          outerValue,
+          (p) => p.value ?? outerValue,
+          SeriesProcessor.interpolateDataPoint
+        );
+        return keep === "above" ? sub.above : sub.below;
+      });
+    }
+    for (const seg of segments) {
+      if (seg.length < 2) continue;
+      const ptsCurve = seg.map((p) => ({
+        x: ctx.timeScale.map(p.time),
+        y: ctx.valueScale.map(p.value)
+      }));
+      const ptsBase = [...ptsCurve].reverse().map((p) => ({ x: p.x, y: fixedY }));
+      cmds.push({
+        ...baseAttrs,
+        smoothing: ctx.smoothing,
+        points: [...ptsCurve, ...ptsBase]
+      });
+    }
+  }
+  return cmds;
+}
+function recoverFixedValue(region, ctx) {
+  const fixed = region.from === "series" ? region.to : region.from;
+  return recoverBoundValue(fixed, ctx);
+}
+function recoverBoundValue(bound, ctx) {
+  if (bound === void 0 || bound === "series") return null;
+  if (bound === "chartTop" || bound === "chartBottom") return null;
+  if (typeof bound === "object" && "threshold" in bound) {
+    return ctx.thresholds.get(bound.threshold)?.value ?? null;
+  }
+  if (typeof bound === "object" && "value" in bound) return bound.value;
+  return null;
+}
+function renderFillSpec(spec, ctx) {
+  if (typeof spec === "string" || !("regions" in spec)) {
+    return renderRegion({ fill: spec }, ctx, 0);
+  }
+  const out = [];
+  spec.regions.forEach((region, i) => {
+    out.push(...renderRegion(region, ctx, i));
+  });
+  return out;
+}
+
+// src/analyze/mkt.ts
+var R = 8.314;
+var C_TO_K = 273.15;
+var DEFAULT_ACTIVATION_ENERGY = 83144;
+function mkt(samples, activationEnergy = DEFAULT_ACTIVATION_ENERGY) {
+  const dhR = activationEnergy / R;
+  let sumExp = 0;
+  let count = 0;
+  for (const v of samples) {
+    if (v === null) continue;
+    sumExp += Math.exp(-dhR / (v + C_TO_K));
+    count++;
+  }
+  if (count === 0) return null;
+  const meanExp = sumExp / count;
+  const mktKelvin = dhR / -Math.log(meanExp);
+  return mktKelvin - C_TO_K;
+}
+function rollingMkt(data, windowMs, activationEnergy = DEFAULT_ACTIVATION_ENERGY) {
+  const out = new Array(data.length);
+  let left = 0;
+  for (let i = 0; i < data.length; i++) {
+    const t = data[i].time;
+    const wStart = t - windowMs;
+    while (left < i && data[left].time < wStart) left++;
+    const slice = data.slice(left, i + 1).map((p) => p.value);
+    const value = mkt(slice, activationEnergy);
+    out[i] = { time: t, value, synthetic: true };
+  }
+  return out;
+}
+
+// src/analyze/std_dev.ts
+function stdDev(samples) {
+  let sum = 0;
+  let count = 0;
+  for (const v of samples) {
+    if (v === null) continue;
+    sum += v;
+    count++;
+  }
+  if (count === 0) return null;
+  const mean = sum / count;
+  let sqSum = 0;
+  for (const v of samples) {
+    if (v === null) continue;
+    const d = v - mean;
+    sqSum += d * d;
+  }
+  return Math.sqrt(sqSum / count);
+}
+function sampleStdDev(samples) {
+  let sum = 0;
+  let count = 0;
+  for (const v of samples) {
+    if (v === null) continue;
+    sum += v;
+    count++;
+  }
+  if (count < 2) return null;
+  const mean = sum / count;
+  let sqSum = 0;
+  for (const v of samples) {
+    if (v === null) continue;
+    const d = v - mean;
+    sqSum += d * d;
+  }
+  return Math.sqrt(sqSum / (count - 1));
+}
+function rollingStdDev(data, windowMs, sample = false) {
+  const out = new Array(data.length);
+  let left = 0;
+  const compute = sample ? sampleStdDev : stdDev;
+  for (let i = 0; i < data.length; i++) {
+    const t = data[i].time;
+    const wStart = t - windowMs;
+    while (left < i && data[left].time < wStart) left++;
+    const slice = data.slice(left, i + 1).map((p) => p.value);
+    const value = compute(slice);
+    out[i] = { time: t, value, synthetic: true };
+  }
+  return out;
+}
+
+// src/series/overlay_renderer.ts
+function rollingMean(data, windowMs) {
+  const out = new Array(data.length);
+  let left = 0;
+  for (let i = 0; i < data.length; i++) {
+    const t = data[i].time;
+    const wStart = t - windowMs;
+    while (left < i && data[left].time < wStart) left++;
+    let sum = 0;
+    let count = 0;
+    for (let j = left; j <= i; j++) {
+      const v = data[j].value;
+      if (v === null) continue;
+      sum += v;
+      count++;
+    }
+    out[i] = {
+      time: t,
+      value: count === 0 ? null : sum / count,
+      synthetic: true
+    };
+  }
+  return out;
+}
+function lineStyleFromOverlay(overlay) {
+  const line = overlay.style?.line;
+  const ls = line && !Array.isArray(line) ? line : void 0;
+  return {
+    color: ls?.color ?? theme.stroke,
+    width: ls?.width ?? theme.strokeWidth,
+    dash: ls?.style,
+    smoothing: ls?.smoothing ?? false
+  };
+}
+function emitLineFromPoints(points, ctx, overlay, suffix) {
+  const valid = points.filter((p) => p.value !== null);
+  if (valid.length < 2) return [];
+  const pts = valid.map((p) => ({
+    x: ctx.timeScale.map(p.time),
+    y: ctx.valueScale.map(p.value)
+  }));
+  const ls = lineStyleFromOverlay(overlay);
+  const id = ctx.idPrefix ? `${ctx.idPrefix}-overlay-${suffix}` : `overlay-${suffix}`;
+  return [
+    {
+      type: "path",
+      id,
+      points: pts,
+      stroke: ls.color,
+      strokeWidth: ls.width,
+      smoothing: ls.smoothing,
+      dash: ls.dash,
+      fill: "none"
+    }
+  ];
+}
+function renderOverlay(overlay, ctx) {
+  switch (overlay.kind) {
+    case "movingAverage": {
+      if (overlay.type === "exponential") ;
+      const computed = rollingMean(ctx.data, overlay.window);
+      return emitLineFromPoints(computed, ctx, overlay, "movingAvg");
+    }
+    case "movingMkt": {
+      const computed = rollingMkt(
+        ctx.data,
+        overlay.window,
+        overlay.activationEnergy
+      );
+      return emitLineFromPoints(computed, ctx, overlay, "movingMkt");
+    }
+    case "limits": {
+      const cmds = [];
+      const range = ctx.timeScale.range();
+      const x1 = range[0];
+      const x2 = range[1];
+      const ls = lineStyleFromOverlay(overlay);
+      const stroke = ls.color;
+      const strokeWidth = ls.width;
+      const dash = ls.dash ?? "dashed";
+      const pre = ctx.idPrefix ? `${ctx.idPrefix}-` : "";
+      if (overlay.high !== void 0) {
+        cmds.push({
+          type: "line",
+          id: `${pre}overlay-limit-high`,
+          x1,
+          y1: ctx.valueScale.map(overlay.high),
+          x2,
+          y2: ctx.valueScale.map(overlay.high),
+          stroke,
+          strokeWidth,
+          dash
+        });
+      }
+      if (overlay.low !== void 0) {
+        cmds.push({
+          type: "line",
+          id: `${pre}overlay-limit-low`,
+          x1,
+          y1: ctx.valueScale.map(overlay.low),
+          x2,
+          y2: ctx.valueScale.map(overlay.low),
+          stroke,
+          strokeWidth,
+          dash
+        });
+      }
+      return cmds;
+    }
+    case "stdDevBand": {
+      const mult = overlay.multiplier ?? 1;
+      const mean = rollingMean(ctx.data, overlay.window);
+      const std = rollingStdDev(ctx.data, overlay.window);
+      const upper = [];
+      const lower = [];
+      for (let i = 0; i < mean.length; i++) {
+        const m = mean[i].value;
+        const s = std[i].value;
+        if (m === null || s === null) continue;
+        const x = ctx.timeScale.map(mean[i].time);
+        upper.push({ x, y: ctx.valueScale.map(m + mult * s) });
+        lower.push({ x, y: ctx.valueScale.map(m - mult * s) });
+      }
+      if (upper.length < 2) return [];
+      const pre = ctx.idPrefix ? `${ctx.idPrefix}-` : "";
+      const cmds = [];
+      const fillSpec = typeof overlay.style?.fill === "string" ? overlay.style.fill : overlay.style?.fill && !("regions" in overlay.style.fill) ? overlay.style.fill : void 0;
+      const bandFill = fillSpec ?? "#94a3b833";
+      const { color, hatch } = unpackFill2(bandFill);
+      cmds.push({
+        type: "path",
+        id: `${pre}overlay-stdDevBand`,
+        points: [...upper, ...[...lower].reverse()],
+        fill: color,
+        hatch,
+        stroke: "none"
+      });
+      const line = overlay.style?.line;
+      const ls = line && !Array.isArray(line) ? line : void 0;
+      if (ls) {
+        const centerPts = mean.filter((p) => p.value !== null).map((p) => ({ x: ctx.timeScale.map(p.time), y: ctx.valueScale.map(p.value) }));
+        if (centerPts.length >= 2) {
+          cmds.push({
+            type: "path",
+            id: `${pre}overlay-stdDevBand-mean`,
+            points: centerPts,
+            stroke: ls.color ?? theme.stroke,
+            strokeWidth: ls.width ?? 1.5,
+            smoothing: ls.smoothing,
+            dash: ls.style,
+            fill: "none"
+          });
+        }
+      }
+      return cmds;
+    }
+  }
+}
+function unpackFill2(fill) {
+  if (typeof fill === "string") return { color: fill };
+  return { color: fill.color, hatch: fill.hatch };
+}
+
+// src/MLTimeGraph.ts
+function normalizeGaps(input) {
+  if (!input) return { gaps: [], autoDetect: false, minGapMs: 6e4 };
+  if (Array.isArray(input)) {
+    return { gaps: input, autoDetect: false, minGapMs: 6e4 };
+  }
+  const regions = input.regions ?? [];
+  const def = input.style;
+  const gaps = regions.map((r) => {
+    const merged = { ...def, ...r.style };
+    const fillSpec = merged.fill;
+    let fill;
+    let hatch;
+    if (typeof fillSpec === "string") fill = fillSpec;
+    else if (fillSpec) {
+      fill = fillSpec.color;
+      hatch = fillSpec.hatch;
+    }
+    return {
+      startTime: r.startTime,
+      endTime: r.endTime,
+      label: r.label,
+      fill,
+      hatch,
+      fillOpacity: merged.opacity,
+      labelBaseline: merged.label?.baseline,
+      rotate: merged.label?.rotate,
+      // 'filled' and 'bridge_line' are new display values not in legacy
+      // DrawGapType_t. 'bridge_line' is per-series-only (chart-level gaps
+      // have no series data to interpolate against); both map to undefined
+      // so the renderer falls back to default rendering.
+      style: merged.display === "filled" || merged.display === "bridge_line" ? void 0 : merged.display
+    };
+  });
+  return {
+    gaps,
+    autoDetect: input.autoDetect ?? false,
+    minGapMs: input.minGapMs ?? 6e4
+  };
+}
+function isAggregated(s) {
+  return "showAs" in s && !!s.showAs;
+}
+var MLTimeGraph = class {
+  _layout;
+  _renderer;
+  _locale;
+  _legend;
+  _markers;
+  _thresholds;
+  _highlights;
+  _gaps;
+  _gapsAutoDetect;
+  _gapsMinGapMs;
+  _annotations;
+  _annotationBands;
+  _disabledAnnotations = /* @__PURE__ */ new Set();
+  _annotationSeq = 0;
+  _axes;
+  _series;
+  _annotationBandHeight = 0;
+  _timeScale;
+  _valueScales = /* @__PURE__ */ new Map();
+  /** @param options Chart configuration; every field is optional and has a sensible default. */
+  constructor(options = {}) {
+    this._layout = new Layout({
+      width: options.width ?? 800,
+      height: options.height ?? 400,
+      margin: options.margin ?? { top: 20, right: 20, bottom: 40, left: 60 }
+    }).compute();
+    this._renderer = options.renderer;
+    this._locale = options.locale;
+    this._legend = options.legend;
+    this._markers = options.markers ?? [];
+    this._thresholds = options.thresholds ?? [];
+    this._highlights = options.highlights ?? [];
+    const normalizedGaps = normalizeGaps(options.gaps);
+    this._gaps = normalizedGaps.gaps;
+    this._gapsAutoDetect = normalizedGaps.autoDetect;
+    this._gapsMinGapMs = normalizedGaps.minGapMs;
+    this._annotations = options.annotations ?? [];
+    this._annotationBands = options.annotationBands ?? [];
+    this._axes = options.axes;
+    this._series = [];
+    if (options.series) {
+      this.setData(options.series);
+    }
+  }
+  getWidth() {
+    return this._layout.totalWidth;
+  }
+  getHeight() {
+    return this._layout.totalHeight + this._annotationBandTotalHeight();
+  }
+  /** Read-only view of the parsed series array (post-`setData`). */
+  get series() {
+    return this._series;
+  }
+  _annotationBandTotalHeight() {
+    let total = 0;
+    for (const band of this._annotationBands) {
+      const bandHeight = band.height ?? 12;
+      const bandSpacing = band.spacing ?? 0;
+      if (band.showAxis ?? false) {
+        total += 26 + bandSpacing;
+      }
+      total += bandHeight + bandSpacing;
+    }
+    return total;
+  }
+  /** Set chart data (raw or aggregated series with a non-empty `data` array). */
+  setData(series) {
+    this._series = series.filter((s) => Array.isArray(s.data));
+  }
+  /** Add a free-form annotation. Returns its id. */
+  addAnnotation(annotation) {
+    const id = annotation.id ?? `anno-${++this._annotationSeq}`;
+    this._annotations.push({ ...annotation, id });
+    return id;
+  }
+  /** Remove an annotation by id. */
+  removeAnnotation(id) {
+    const before = this._annotations.length;
+    this._annotations = this._annotations.filter((a) => a.id !== id);
+    this._disabledAnnotations.delete(id);
+    return this._annotations.length < before;
+  }
+  /** Replace all annotations. */
+  setAnnotations(annotations) {
+    this._annotations = [...annotations];
+    this._disabledAnnotations.clear();
+  }
+  /** Remove all annotations. */
+  clearAnnotations() {
+    this._annotations = [];
+    this._disabledAnnotations.clear();
+  }
+  /** Current annotations (read-only snapshot). */
+  getAnnotations() {
+    return this._annotations;
+  }
+  /** Hide an annotation by id. */
+  disableAnnotation(id) {
+    this._disabledAnnotations.add(id);
+  }
+  /** Re-show a previously disabled annotation. */
+  enableAnnotation(id) {
+    this._disabledAnnotations.delete(id);
+  }
+  _axisIndexOf(s) {
+    return s.yAxisIndex ?? 0;
+  }
+  _timesOf(s) {
+    return s.data.map((p) => p.time);
+  }
+  _valuesOf(s) {
+    if (isAggregated(s)) {
+      const out = [];
+      for (const p of s.data) {
+        if (p.min !== null) out.push(p.min);
+        if (p.max !== null) out.push(p.max);
+      }
+      return out;
+    }
+    return s.data.map((p) => p.value).filter((v) => v !== null);
+  }
+  /**
+   * Compute the chart's renderer-agnostic draw commands.
+   */
+  renderCommands() {
+    if (this._series.length === 0) return [];
+    const legendItems = this._legendItems();
+    const legendShow = (this._legend?.show ?? false) && legendItems.length > 0;
+    const legendPos = this._legend?.position ?? "inside-right";
+    const legendOrient = this._legend?.orientation ?? "vertical";
+    const legendSize = legendShow ? measureLegend(legendItems, legendOrient) : { width: 0};
+    let layout = this._layout;
+    if (legendShow && (legendPos === "outside-right" || legendPos === "outside-left")) {
+      const reserve = legendSize.width + 16;
+      const m = { ...this._layout.margin };
+      if (legendPos === "outside-right") m.right += reserve;
+      else m.left += reserve;
+      layout = new Layout({ width: this._layout.totalWidth, height: this._layout.totalHeight, margin: m }).compute();
+    }
+    const { chartX, chartY, chartWidth, chartHeight } = layout;
+    const xRange = [chartX, chartX + chartWidth];
+    const yRange = [chartY, chartY + chartHeight];
+    const commands = [];
+    for (const s of this._series) {
+      s.data.sort((a, b) => a.time - b.time);
+    }
+    const seriesByIndex = /* @__PURE__ */ new Map();
+    let tMin = Infinity;
+    let tMax = -Infinity;
+    let hasTime = false;
+    for (const s of this._series) {
+      const idx = this._axisIndexOf(s);
+      const bucket = seriesByIndex.get(idx);
+      if (bucket) bucket.push(s);
+      else seriesByIndex.set(idx, [s]);
+      for (const t of this._timesOf(s)) {
+        if (t < tMin) tMin = t;
+        if (t > tMax) tMax = t;
+        hasTime = true;
+      }
+    }
+    if (!hasTime) return [];
+    const xDomainCfg = this._axes?.x?.domain;
+    const timeDomain = xDomainCfg && xDomainCfg !== "auto" ? xDomainCfg : [tMin, tMax];
+    this._timeScale = new TimeScale({ domain: timeDomain, range: xRange, locale: this._locale });
+    const buildAxisColors = (a) => ({
+      axisColor: a?.color ?? theme.axisColor,
+      tickColor: a?.color ?? theme.tickColor,
+      textColor: theme.textColor,
+      textSize: theme.textSize,
+      axisWidth: a?.width
+    });
+    const timeAxis = new TimeAxis({
+      domain: timeDomain,
+      xRange,
+      y: chartY + chartHeight,
+      locale: this._locale,
+      // Phase 3.13 — wire `axes.x.format` + `axes.x.ticks.major`
+      format: this._axes?.x?.format,
+      maxTicks: this._axes?.x?.ticks?.major,
+      colors: buildAxisColors(this._axes?.x?.axis)
+    });
+    this._valueScales.clear();
+    const indices = Array.from(seriesByIndex.keys()).sort((a, b) => a - b);
+    let primaryValueAxis;
+    for (const idx of indices) {
+      const group = seriesByIndex.get(idx);
+      let vMin = Infinity;
+      let vMax = -Infinity;
+      let hasValue = false;
+      for (const s of group) {
+        for (const v of this._valuesOf(s)) {
+          if (v < vMin) vMin = v;
+          if (v > vMax) vMax = v;
+          hasValue = true;
+        }
+      }
+      if (!hasValue) continue;
+      const axisCfg = idx === 0 ? this._axes?.left : this._axes?.right;
+      const cfgDomain = axisCfg?.domain;
+      const domain = cfgDomain && cfgDomain !== "auto" ? cfgDomain : [vMin, vMax];
+      this._valueScales.set(idx, new LinearScale({ domain, range: [chartY + chartHeight, chartY] }));
+      const vAxis = new ValueAxis({
+        domain,
+        range: [chartY + chartHeight, chartY],
+        x: idx === 0 ? chartX : chartX + chartWidth,
+        position: idx === 0 ? "left" : "right",
+        format: axisCfg?.format,
+        ticks: axisCfg?.ticks?.major,
+        colors: buildAxisColors(axisCfg?.axis)
+      });
+      if (idx === 0) primaryValueAxis = vAxis;
+      commands.push({
+        type: "group",
+        cssClass: `value-axis ${idx === 0 ? "left" : "right"}`,
+        commands: vAxis.render()
+      });
+    }
+    const primaryScale = this._valueScales.get(0) ?? this._valueScales.get(indices[0]);
+    commands.push({ type: "group", cssClass: "time-axis", commands: timeAxis.render() });
+    const xGrid = this._axes?.x?.grid?.major;
+    const leftGrid = this._axes?.left?.grid?.major;
+    if (xGrid !== void 0 || leftGrid !== void 0) {
+      const xEnabled = xGrid !== false;
+      const yEnabled = leftGrid !== false && !!primaryValueAxis;
+      const xTicks = xEnabled ? timeAxis.generateTicks().map((t) => t.x) : void 0;
+      const yTicks = yEnabled ? primaryValueAxis.generateTicks().map((t) => t.position) : void 0;
+      if (xTicks || yTicks) {
+        const chosen = (xGrid && typeof xGrid === "object" ? xGrid : void 0) ?? (leftGrid && typeof leftGrid === "object" ? leftGrid : void 0);
+        commands.push({
+          type: "group",
+          cssClass: "chart-grid",
+          commands: renderGrid({
+            xTicks,
+            yTicks,
+            xRange,
+            yRange,
+            stroke: chosen?.color,
+            opacity: chosen?.opacity,
+            dashed: chosen?.style === "dashed"
+          })
+        });
+      }
+    }
+    if (this._highlights.length > 0) {
+      commands.push({
+        type: "group",
+        cssClass: "highlights",
+        commands: renderHighlights({ highlights: this._highlights, timeScale: this._timeScale, yRange, height: layout.totalHeight })
+      });
+    }
+    if (this._thresholds.length > 0 && primaryScale) {
+      const thresholdGroups = this._thresholds.map((t) => {
+        const slug = t.id ?? slugify(t.name);
+        return {
+          type: "group",
+          cssClass: `threshold threshold--${slug}`,
+          id: `threshold-${slug}`,
+          commands: renderThresholds({ thresholds: [t], valueScale: primaryScale, xRange })
+        };
+      });
+      commands.push({
+        type: "group",
+        cssClass: "thresholds",
+        commands: thresholdGroups,
+        clipRect: { x: chartX, y: chartY, w: chartWidth, h: chartHeight }
+      });
+    }
+    let gapsToRender = this._gaps;
+    if (this._gapsAutoDetect) {
+      const auto = [];
+      for (const s of this._series) {
+        if (isAggregated(s)) continue;
+        auto.push(...detectGaps(s.data, this._gapsMinGapMs));
+      }
+      if (auto.length > 0) gapsToRender = [...this._gaps, ...auto];
+    }
+    if (gapsToRender.length > 0) {
+      commands.push({
+        type: "group",
+        cssClass: "gaps",
+        commands: renderGaps({ gaps: gapsToRender, timeScale: this._timeScale, yRange })
+      });
+    }
+    const thresholdByName = new Map(this._thresholds.map((t) => [t.name, t]));
+    for (const series of this._series) {
+      if (series.data.length === 0) continue;
+      const scale = this._valueScales.get(this._axisIndexOf(series));
+      if (!scale) continue;
+      const slug = series.id ?? slugify(series.name);
+      commands.push({
+        type: "group",
+        cssClass: `series series--${slug}`,
+        id: `series-${slug}`,
+        commands: this._renderSeries(series, scale, thresholdByName)
+      });
+    }
+    const markersToRender = this._markers.map((m) => ({ ...m }));
+    for (const m of markersToRender) {
+      if (m.value === void 0 && (m.lineStyle === "to-value" || m.lineStyle === "to-top")) {
+        const target = this._series[m.seriesIndex ?? 0];
+        if (target && !isAggregated(target) && target.data.length >= 2) {
+          m.value = this._interpolateValue(m.time, target.data);
+        }
+      }
+    }
+    if (markersToRender.length > 0 && primaryScale) {
+      commands.push({
+        type: "group",
+        cssClass: "markers",
+        commands: renderMarkers2({
+          markers: markersToRender,
+          timeScale: this._timeScale,
+          valueScale: primaryScale,
+          yRange
+        })
+      });
+    }
+    const activeAnnotations = this._annotations.filter((a) => !a.id || !this._disabledAnnotations.has(a.id));
+    if (activeAnnotations.length > 0) {
+      commands.push({
+        type: "group",
+        cssClass: "annotations",
+        commands: renderAnnotations({
+          annotations: activeAnnotations,
+          timeScale: this._timeScale,
+          valueScales: this._valueScales
+        })
+      });
+    }
+    if (this._annotationBands.length > 0) {
+      const bandYStart = chartY + chartHeight + this._layout.margin.bottom;
+      let bandOffset = 0;
+      this._annotationBands.forEach((band) => {
+        const bandHeight = band.height ?? 12;
+        const bandSpacing = band.spacing ?? 0;
+        const bandTop = bandYStart + bandOffset;
+        if (band.showAxis ?? false) {
+          bandOffset += 26 + bandSpacing;
+        }
+        bandOffset += bandHeight + bandSpacing;
+        commands.push({
+          type: "group",
+          cssClass: "annotation-band",
+          commands: new AnnotationBandSeries({
+            name: band.name,
+            showAxis: band.showAxis ?? false,
+            items: band.items,
+            timeScale: this._timeScale,
+            background: band.background,
+            hatch: band.hatch
+          }, [chartX, chartX + chartWidth], bandTop, bandHeight).render()
+        });
+      });
+    }
+    if (legendShow && legendPos !== "separate") {
+      let lx;
+      let ly;
+      if (legendPos === "inside-right") {
+        lx = chartX + chartWidth - legendSize.width - 8;
+        ly = chartY + 8;
+      } else if (legendPos === "inside-left") {
+        lx = chartX + 8;
+        ly = chartY + 8;
+      } else if (legendPos === "outside-right") {
+        lx = chartX + chartWidth + 16;
+        ly = chartY;
+      } else {
+        lx = 8;
+        ly = chartY;
+      }
+      commands.push(renderLegend({ items: legendItems, x: lx, y: ly, orientation: legendOrient }));
+    }
+    const leftLabel = this._axes?.left?.label;
+    const rightLabel = this._axes?.right?.label;
+    const xLabel = this._axes?.x?.label;
+    if (leftLabel || rightLabel || xLabel) {
+      const labelCmds = [];
+      const midY = chartY + chartHeight / 2;
+      const leftStyle = this._axes?.left?.labels;
+      const rightStyle = this._axes?.right?.labels;
+      const xStyle = this._axes?.x?.labels;
+      if (leftLabel) labelCmds.push({
+        type: "text",
+        content: leftLabel,
+        x: 14,
+        y: midY,
+        anchor: "middle",
+        fontSize: leftStyle?.fontSize ?? theme.axisLabelSize,
+        fill: leftStyle?.color ?? theme.axisLabelColor,
+        rotate: -90
+      });
+      if (rightLabel) labelCmds.push({
+        type: "text",
+        content: rightLabel,
+        x: layout.totalWidth - 14,
+        y: midY,
+        anchor: "middle",
+        fontSize: rightStyle?.fontSize ?? theme.axisLabelSize,
+        fill: rightStyle?.color ?? theme.axisLabelColor,
+        rotate: 90
+      });
+      if (xLabel) labelCmds.push({
+        type: "text",
+        content: xLabel,
+        x: chartX + chartWidth / 2,
+        y: layout.totalHeight - 6,
+        anchor: "middle",
+        fontSize: xStyle?.fontSize ?? theme.axisLabelSize,
+        fill: xStyle?.color ?? theme.axisLabelColor
+      });
+      if (labelCmds.length) commands.push({ type: "group", cssClass: "axis-labels", commands: labelCmds });
+    }
+    return commands;
+  }
+  /** Build the draw commands for a single series based on its type. */
+  _renderSeries(series, scale, thresholds) {
+    const timeScale = this._timeScale;
+    const ctx = { timeScale, valueScale: scale };
+    if (isAggregated(series)) {
+      const aggLine = series.style?.line && !Array.isArray(series.style.line) ? series.style.line : void 0;
+      const aggFillStyle = typeof series.style?.fill === "string" ? series.style.fill : void 0;
+      if (series.showAs === "minmaxavg") {
+        return new MinMaxAvgSeries({
+          data: series.data,
+          timeScale,
+          valueScale: scale,
+          minColor: series.minColor,
+          maxColor: series.maxColor,
+          avgColor: series.avgColor,
+          avgDashed: series.avgDashed,
+          fillToMax: series.fillToMax,
+          fillToMaxHatch: series.fillToMaxHatch,
+          fillToMin: series.fillToMin,
+          fillToMinHatch: series.fillToMinHatch,
+          smoothing: aggLine?.smoothing,
+          strokeWidth: aggLine?.width,
+          id: series.id
+        }).render();
+      }
+      return new BandSeries({
+        data: series.data,
+        timeScale,
+        valueScale: scale,
+        fill: aggFillStyle ?? aggLine?.color,
+        avgLine: series.avgLine,
+        countOpacity: series.countOpacity,
+        id: series.id
+      }).render();
+    }
+    const s = series;
+    const lineDefaults = series.style?.line && !Array.isArray(series.style.line) ? series.style.line : void 0;
+    const gapThreshold = lineDefaults?.gapThreshold ?? theme.gapThreshold;
+    const runs = SeriesProcessor.getRuns(series.data, (p) => p.value === null, gapThreshold);
+    const totalPoints = runs.reduce((sum, run) => sum + run.length, 0);
+    if (totalPoints === 0) return [];
+    const cmds = [];
+    const styleMarkers = series.style?.markers;
+    const styleShadow = series.style?.shadow;
+    const style = {
+      stroke: lineDefaults?.color ?? theme.stroke,
+      strokeWidth: lineDefaults?.width ?? theme.strokeWidth,
+      smoothing: lineDefaults?.smoothing,
+      dashed: lineDefaults?.style === "dashed",
+      pointStyle: styleMarkers?.type,
+      pointSize: styleMarkers?.size,
+      pointStroke: styleMarkers?.stroke,
+      pointFill: styleMarkers?.fill,
+      pointStrokeWidth: styleMarkers?.strokeWidth,
+      shadowColor: styleShadow?.color,
+      shadowBlur: styleShadow?.blur,
+      shadowOffsetX: styleShadow?.offsetX,
+      shadowOffsetY: styleShadow?.offsetY,
+      id: series.id
+    };
+    const styleLine = series.style?.line;
+    const lineOverride = styleLine && !Array.isArray(styleLine) ? styleLine : void 0;
+    const lineColorOverride = lineOverride?.color;
+    const lineWidthOverride = lineOverride?.width;
+    const lineDash = lineOverride?.style;
+    const lineSmoothing = lineOverride?.smoothing;
+    const newFillSpec = series.style?.fill;
+    if (newFillSpec !== void 0) {
+      const r = scale.range();
+      const chartTop = Math.min(r[0], r[1]);
+      const chartBottom = Math.max(r[0], r[1]);
+      cmds.push(...renderFillSpec(newFillSpec, {
+        runs,
+        timeScale,
+        valueScale: scale,
+        thresholds,
+        chartTop,
+        chartBottom,
+        smoothing: lineDefaults?.smoothing,
+        idPrefix: series.id
+      }));
+    }
+    const colorThresholdNames = s.colorByThresholds ?? [];
+    const boundaries = colorThresholdNames.map((n) => thresholds.get(n)).filter((t) => !!t).map((t) => t.value).sort((a, b) => a - b);
+    const getZoneColor = (val, names) => {
+      let color = style.stroke;
+      for (const n of names) {
+        const t = thresholds.get(n);
+        if (t && val >= t.value) color = t.color ?? color;
+      }
+      return color;
+    };
+    for (const run of runs) {
+      if (run.length < 2) continue;
+      const segments = SeriesProcessor.splitByBoundaries(run, boundaries, (p) => p.value, SeriesProcessor.interpolateDataPoint);
+      for (let segIdx = 0; segIdx < segments.length; segIdx++) {
+        const seg = segments[segIdx];
+        if (seg.data.length < 2) continue;
+        const midVal = (seg.data[0].value + seg.data[seg.data.length - 1].value) / 2;
+        const seriesId = s.id;
+        const segPts = seg.data.map((p) => ({ x: timeScale.map(p.time), y: scale.map(p.value) }));
+        const segLineId = seriesId ? `${seriesId}-line-${segIdx}` : void 0;
+        if (styleLine === false) ; else if (styleLine && Array.isArray(styleLine)) {
+          styleLine.forEach((ls, li) => {
+            cmds.push({
+              type: "path",
+              id: segLineId ? `${segLineId}-${li}` : void 0,
+              points: segPts,
+              stroke: ls.color ?? getZoneColor(midVal, colorThresholdNames),
+              strokeWidth: ls.width ?? style.strokeWidth,
+              smoothing: ls.smoothing ?? style.smoothing,
+              dash: ls.style,
+              opacity: ls.opacity,
+              fill: "none",
+              shadowColor: style.shadowColor,
+              shadowBlur: style.shadowBlur,
+              shadowOffsetX: style.shadowOffsetX,
+              shadowOffsetY: style.shadowOffsetY
+            });
+          });
+        } else {
+          cmds.push({
+            type: "path",
+            id: segLineId,
+            points: segPts,
+            stroke: lineColorOverride ?? getZoneColor(midVal, colorThresholdNames),
+            strokeWidth: lineWidthOverride ?? style.strokeWidth,
+            smoothing: lineSmoothing ?? style.smoothing,
+            dash: lineDash,
+            fill: "none",
+            shadowColor: style.shadowColor,
+            shadowBlur: style.shadowBlur,
+            shadowOffsetX: style.shadowOffsetX,
+            shadowOffsetY: style.shadowOffsetY
+          });
+        }
+      }
+      if (style.pointStyle && style.pointStyle !== "none" && totalPoints <= (styleMarkers?.threshold ?? theme.pointThreshold)) {
+        cmds.push(...renderMarkers(run, ctx, style, (p) => getZoneColor(p.value, colorThresholdNames)));
+      }
+    }
+    const overlays = series.overlays;
+    if (overlays && overlays.length > 0) {
+      const r = scale.range();
+      const overlayCtx = {
+        data: series.data,
+        timeScale,
+        valueScale: scale,
+        chartTop: Math.min(r[0], r[1]),
+        chartBottom: Math.max(r[0], r[1]),
+        idPrefix: series.id
+      };
+      for (const overlay of overlays) {
+        cmds.push(...renderOverlay(overlay, overlayCtx));
+      }
+    }
+    if (series.style?.gap && runs.length > 1) {
+      const r = scale.range();
+      const yTop = Math.min(r[0], r[1]);
+      const yBot = Math.max(r[0], r[1]);
+      const seriesGap = series.style.gap;
+      const fillSpec = seriesGap.fill;
+      let fill;
+      let hatch;
+      if (typeof fillSpec === "string") fill = fillSpec;
+      else if (fillSpec) {
+        fill = fillSpec.color;
+        hatch = fillSpec.hatch;
+      }
+      const opacity = seriesGap.opacity ?? 0.15;
+      const bridge = seriesGap.bridge;
+      for (let i = 1; i < runs.length; i++) {
+        const prevPt = runs[i - 1][runs[i - 1].length - 1];
+        const nextPt = runs[i][0];
+        const x1 = timeScale.map(prevPt.time);
+        const x2 = timeScale.map(nextPt.time);
+        if (seriesGap.display === "bridge_line") {
+          if (prevPt.value === null || nextPt.value === null) continue;
+          const y1 = scale.map(prevPt.value);
+          const y2 = scale.map(nextPt.value);
+          cmds.push({
+            type: "line",
+            x1,
+            y1,
+            x2,
+            y2,
+            stroke: bridge?.color ?? (typeof series.style?.line === "object" && !Array.isArray(series.style.line) ? series.style.line.color : void 0) ?? theme.stroke,
+            strokeWidth: bridge?.width ?? 1.5,
+            dash: bridge?.style ?? "dotted"
+          });
+        } else if (fill !== void 0) {
+          cmds.push({
+            type: "rect",
+            x: x1,
+            y: yTop,
+            w: x2 - x1,
+            h: yBot - yTop,
+            fill,
+            hatch,
+            opacity,
+            stroke: "none"
+          });
+        } else if (seriesGap.display !== "empty") {
+          cmds.push({
+            type: "rect",
+            x: x1,
+            y: yTop,
+            w: x2 - x1,
+            h: yBot - yTop,
+            stroke: theme.gapStroke,
+            strokeWidth: 1,
+            dashed: true,
+            fill: "none"
+          });
+        }
+      }
+    }
+    return cmds;
+  }
+  _interpolateValue(time, data) {
+    for (let i = 1; i < data.length; i++) {
+      const p1 = data[i - 1];
+      const p2 = data[i];
+      if (p1.value === null || p2.value === null) continue;
+      if (time >= p1.time && time <= p2.time) {
+        const t = (time - p1.time) / (p2.time - p1.time);
+        return p1.value + t * (p2.value - p1.value);
+      }
+    }
+    return void 0;
+  }
+  legendItems() {
+    return this._legendItems();
+  }
+  _legendItems() {
+    return this._series.map((s) => {
+      const line = s.style?.line && !Array.isArray(s.style.line) ? s.style.line : void 0;
+      return { name: s.name, color: line?.color ?? theme.stroke };
+    });
+  }
+  get renderer() {
+    return this._renderer;
+  }
+  get layout() {
+    return this._layout;
+  }
+  get timeScale() {
+    return this._timeScale;
+  }
+  get valueScales() {
+    return this._valueScales;
+  }
+  invertTime(x) {
+    if (!this._timeScale) return 0;
+    return this._timeScale.invert(x);
+  }
+  invertValue(y, axisIndex = 0) {
+    const scale = this._valueScales.get(axisIndex);
+    if (!scale) return 0;
+    return scale.invert(y);
+  }
+  project(time, value, axisIndex = 0) {
+    const x = this._timeScale ? this._timeScale.map(time) : 0;
+    const scale = this._valueScales.get(axisIndex);
+    return { x, y: scale ? scale.map(value) : 0 };
+  }
+};
+
+// src/renderer/renderer.ts
+var Renderer = class {
+};
+
+// src/renderer/svg_renderer.ts
+var FIXED_FRAC = 1e3;
+var SVGRenderer = class extends Renderer {
+  #width = "100%";
+  #height = "100%";
+  #filters = /* @__PURE__ */ new Map();
+  #clipPaths = /* @__PURE__ */ new Map();
+  #patterns = /* @__PURE__ */ new Map();
+  constructor(options) {
+    super();
+    if (options?.width !== void 0) this.#width = options.width;
+    if (options?.height !== void 0) this.#height = options.height;
+  }
+  render(commands) {
+    this.#filters.clear();
+    this.#clipPaths.clear();
+    this.#patterns.clear();
+    const elements = commands.map((c) => this._toSVG(c)).join("\n    ");
+    let defs = "";
+    const allDefs = [];
+    for (const [, filter] of this.#filters) {
+      allDefs.push(filter);
+    }
+    for (const [, clip] of this.#clipPaths) {
+      allDefs.push(clip);
+    }
+    for (const [, pattern] of this.#patterns) {
+      allDefs.push(pattern);
+    }
+    if (allDefs.length > 0) {
+      defs = `    <defs>
+       ${allDefs.join("\n       ")}
+    </defs>
+`;
+    }
+    const w = typeof this.#width === "number" ? `${this.#width}` : this.#width;
+    const h = typeof this.#height === "number" ? `${this.#height}` : this.#height;
+    const vb = typeof this.#width === "number" && typeof this.#height === "number" ? ` viewBox="0 0 ${this.#width} ${this.#height}"` : "";
+    return {
+      type: "svg",
+      content: `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}"${vb}>
+${defs}   ${elements}
+</svg>`
+    };
+  }
+  /* ── Intern: Command → SVG-Element ── */
+  _toSVG(cmd) {
+    switch (cmd.type) {
+      case "path":
+        return this._path(cmd);
+      case "line":
+        return this._line(cmd);
+      case "rect":
+        return this._rect(cmd);
+      case "circle":
+        return this._circle(cmd);
+      case "text":
+        return this.#text(cmd);
+      case "gradient":
+        return this._gradient(cmd);
+      case "gap":
+        return this._gap(cmd);
+      case "group":
+        return this._group(cmd);
+    }
+  }
+  /** Build the path `d`: straight segments, or a Catmull-Rom spline when smoothing. */
+  #pathD(pts, smoothing) {
+    if (pts.length === 0) return "";
+    if (!smoothing || pts.length < 3) {
+      return pts.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" ");
+    }
+    const r = (n) => Math.round(n * 100) / 100;
+    let d = `M${pts[0].x},${pts[0].y}`;
+    for (let i = 0; i < pts.length - 1; i++) {
+      const p0 = pts[i - 1] ?? pts[i];
+      const p1 = pts[i];
+      const p2 = pts[i + 1];
+      const p3 = pts[i + 2] ?? p2;
+      let c1x = r(p1.x + (p2.x - p0.x) / 6);
+      let c1y = r(p1.y + (p2.y - p0.y) / 6);
+      let c2x = r(p2.x - (p3.x - p1.x) / 6);
+      let c2y = r(p2.y - (p3.y - p1.y) / 6);
+      {
+        c1x = (c1x * FIXED_FRAC | 0) / FIXED_FRAC;
+        c1y = (c1y * FIXED_FRAC | 0) / FIXED_FRAC;
+        c2x = (c2x * FIXED_FRAC | 0) / FIXED_FRAC;
+        c2y = (c2y * FIXED_FRAC | 0) / FIXED_FRAC;
+      }
+      d += ` C${c1x},${c1y} ${c2x},${c2y} ${p2.x},${p2.y}`;
+    }
+    return d;
+  }
+  /** Register or retrieve a hatch pattern by variant. Returns the pattern id for use as fill="url(#id)". */
+  _hatchPattern(variant, fillColor) {
+    const id = `hatch-${variant}-${this._hatchIndex++}`;
+    if (this.#patterns.has(id)) return id;
+    const svg = getHatch(id, variant, fillColor ?? "rgba(200,220,255,0.3)");
+    this.#patterns.set(id, svg);
+    return id;
+  }
+  /** Monotonic counter for unique hatch pattern ids. */
+  _hatchIndex = 0;
+  _path(c) {
+    const d = this.#pathD(c.points, c.smoothing);
+    const att = [];
+    if (c.hatch) {
+      const hatchId = this._hatchPattern(c.hatch, c.fill);
+      att.push(`fill="url(#${hatchId})"`);
+    } else {
+      att.push(`fill="${c.fill ? this._esc(c.fill) : "none"}"`);
+    }
+    if (c.stroke) att.push(`stroke="${this._esc(c.stroke)}"`);
+    if (c.strokeWidth) att.push(`stroke-width="${c.strokeWidth}"`);
+    const pdash = this.#dashArray(c.dash, c.dashed, c.strokeWidth);
+    if (pdash) {
+      att.push(`stroke-dasharray="${pdash.strokeDasharray}"`);
+      if (pdash.strokeLinecap) att.push(`stroke-linecap="${pdash.strokeLinecap}"`);
+    }
+    if (c.opacity !== void 0) att.push(`opacity="${c.opacity}"`);
+    if (c.id) att.push(`id="${this._esc(c.id)}"`);
+    const filterId = this.#getShadowFilter(c);
+    if (filterId) att.push(`filter="url(#${filterId})"`);
+    return `<path d="${d}" ${att.join(" ")} />`;
+  }
+  _line(c) {
+    const att = [];
+    if (c.stroke) att.push(`stroke="${this._esc(c.stroke)}"`);
+    if (c.strokeWidth) att.push(`stroke-width="${c.strokeWidth}"`);
+    const ldash = this.#dashArray(c.dash, c.dashed, c.strokeWidth);
+    if (ldash) {
+      att.push(`stroke-dasharray="${ldash.strokeDasharray}"`);
+      if (ldash.strokeLinecap) att.push(`stroke-linecap="${ldash.strokeLinecap}"`);
+    }
+    if (c.opacity !== void 0) att.push(`opacity="${c.opacity}"`);
+    if (c.id) att.push(`id="${this._esc(c.id)}"`);
+    const filterId = this.#getShadowFilter(c);
+    if (filterId) att.push(`filter="url(#${filterId})"`);
+    return `<line x1="${c.x1}" y1="${c.y1}" x2="${c.x2}" y2="${c.y2}" ${att.join(" ")} />`;
+  }
+  _rect(c) {
+    const att = [];
+    if (c.hatch) {
+      const hatchId = this._hatchPattern(c.hatch, c.fill);
+      att.push(`fill="url(#${hatchId})"`);
+    } else if (c.fill !== void 0) {
+      att.push(`fill="${this._esc(c.fill)}"`);
+    }
+    if (c.stroke) att.push(`stroke="${this._esc(c.stroke)}"`);
+    if (c.strokeWidth) att.push(`stroke-width="${c.strokeWidth}"`);
+    if (c.opacity !== void 0) att.push(`opacity="${c.opacity}"`);
+    if (c.dashed) att.push(`stroke-dasharray="4,4"`);
+    if (c.id) att.push(`id="${this._esc(c.id)}"`);
+    const filterId = this.#getShadowFilter(c);
+    if (filterId) att.push(`filter="url(#${filterId})"`);
+    return `<rect x="${c.x}" y="${c.y}" width="${c.w}" height="${c.h}" ${att.join(" ")} />`;
+  }
+  _circle(c) {
+    const att = [];
+    if (c.hatch) {
+      const hatchId = this._hatchPattern(c.hatch, c.fill);
+      att.push(`fill="url(#${hatchId})"`);
+    } else if (c.fill) {
+      att.push(`fill="${this._esc(c.fill)}"`);
+    }
+    if (c.stroke) att.push(`stroke="${this._esc(c.stroke)}"`);
+    if (c.strokeWidth) att.push(`stroke-width="${c.strokeWidth}"`);
+    if (c.id) att.push(`id="${this._esc(c.id)}"`);
+    const filterId = this.#getShadowFilter(c);
+    if (filterId) att.push(`filter="url(#${filterId})"`);
+    return `<circle cx="${c.cx}" cy="${c.cy}" r="${c.r}" ${att.join(" ")} />`;
+  }
+  /**
+   * Produce stroke-dasharray (and optional stroke-linecap) for a line / path.
+   * Preserves the exact legacy output for `'dashed'` / `'dotted'` (and the
+   * legacy `dashed: boolean` shorthand) so existing renders stay pixel-identical;
+   * uses `getLineStyle()` for the newer {@link LineVariant} values so they
+   * scale proportionally with the stroke width.
+   */
+  #dashArray(dash, dashed, strokeWidth) {
+    if (dash === "dashed" || !dash && dashed) {
+      return { strokeDasharray: "4,4" };
+    }
+    if (dash === "dotted") {
+      return { strokeDasharray: "2,4" };
+    }
+    if (!dash || dash === "solid") return null;
+    return getLineStyle(dash, strokeWidth ?? 2);
+  }
+  /** Build SVG `<filter>` definition for drop-shadow effects. Returns the filter id or null. */
+  #getShadowFilter(c) {
+    if (!c.shadowColor) return null;
+    const blur = c.shadowBlur ?? 0;
+    const dx = c.shadowOffsetX ?? 0;
+    const dy = c.shadowOffsetY ?? 0;
+    if (!blur && !dx && !dy) return null;
+    const key = `shadow_${blur}_${dx}_${dy}`;
+    if (this.#filters.has(key)) return key;
+    const filter = `<filter id="${key}" x="-50%" y="-50%" width="200%" height="200%">
+        <feDropShadow dx="${dx}" dy="${dy}" stdDeviation="${blur / 2}" flood-color="${this._esc(c.shadowColor)}" />
+      </filter>`;
+    this.#filters.set(key, filter);
+    return key;
+  }
+  /** Register a plot-area `<clipPath>` by id. */
+  #registerClipPath(id, x, y, w, h) {
+    if (this.#clipPaths.has(id)) return;
+    this.#clipPaths.set(
+      id,
+      `<clipPath id="${id}">
+        <rect x="${x}" y="${y}" width="${w}" height="${h}" />
+      </clipPath>`
+    );
+  }
+  #text(c) {
+    const att = [];
+    if (c.anchor) att.push(`text-anchor="${c.anchor}"`);
+    if (c.fontSize) att.push(`font-size="${c.fontSize}"`);
+    if (c.fontFamily) att.push(`font-family="${this._esc(c.fontFamily)}"`);
+    if (c.fill) att.push(`fill="${this._esc(c.fill)}"`);
+    if (c.rotate) att.push(`transform="rotate(${c.rotate} ${c.x} ${c.y})"`);
+    if (c.textBaseline) att.push(`textBaseline="${c.textBaseline}"`);
+    if (c.id) att.push(`id="${this._esc(c.id)}"`);
+    return `<text x="${c.x}" y="${c.y}" ${att.join(" ")}>${this._esc(c.content)}</text>`;
+  }
+  _gradient(c) {
+    const id = `grad-${Math.random().toString(36).slice(2, 8)}`;
+    const stops = c.stops.map(
+      (s) => `     <stop offset="${s.offset}" stop-color="${this._esc(s.color)}" />`
+    ).join("\n");
+    return `<linearGradient id="${id}" gradientUnits="userSpaceOnUse">
+${stops}
+   </linearGradient>
+   <path d="${c.points.map((p) => `${p.x},${p.y}`).join(" ")}" fill="url(#${id})" />`;
+  }
+  _gap(c) {
+    if (c.style === "empty") return "";
+    const att = [
+      `stroke="${this._esc("#999")}"`,
+      `stroke-dasharray="4,4"`,
+      `fill="none"`
+    ];
+    if (c.style === "label" && c.label) {
+      return `<g class="gap">
+     <rect x="${c.x1}" y="${c.y1}" width="${c.x2 - c.x1}" height="${c.y2 - c.y1}" ${att.join(" ")} />
+     <text x="${c.x1}" y="${c.y1 - 4}" fill="#999" font-size="10">${this._esc(c.label)}</text>
+   </g>`;
+    }
+    return `<rect x="${c.x1}" y="${c.y1}" width="${c.x2 - c.x1}" height="${c.y2 - c.y1}" ${att.join(" ")} />`;
+  }
+  _group(c) {
+    if (c.clipRect) {
+      this.#registerClipPath(`clip-plot`, c.clipRect.x, c.clipRect.y, c.clipRect.w, c.clipRect.h);
+    }
+    const inner = c.commands.map((cmd) => `   ${this._toSVG(cmd).replace(/\n {3}/g, "\n      ")}`).join("\n");
+    const cls = c.cssClass ? ` class="${this._esc(c.cssClass)}"` : "";
+    const gid = c.id ? ` id="${this._esc(c.id)}"` : "";
+    const clipId = c.plotClipId || (c.clipRect ? `clip-plot` : null);
+    const clip = clipId ? ` clip-path="url(#${this._esc(clipId)})"` : "";
+    return `<g${cls}${gid}${clip}>
+${inner}
+</g>`;
+  }
+  _esc(s) {
+    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+};
+
+// src/tooltip.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+function seriesColor(s) {
+  const line = s.style?.line;
+  if (line && !Array.isArray(line) && line.color) return line.color;
+  return theme.stroke;
+}
+function escapeHtml(s) {
+  return s.replace(
+    /[&<>"']/g,
+    (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]
+  );
+}
+function defaultFormat2(samples) {
+  if (samples.length === 0) return "";
+  const time = new Date(samples[0].time).toLocaleString();
+  const rows = samples.map((s) => {
+    const name = escapeHtml(s.series.name);
+    return `<div><span class="mlc-tooltip__name">${name}:</span> ${s.value.toFixed(2)}</div>`;
+  });
+  return `<div class="mlc-tooltip__time">${escapeHtml(time)}</div>${rows.join("")}`;
+}
+function findClosest(data, targetTime) {
+  if (data.length === 0) return void 0;
+  let lo = 0;
+  let hi = data.length - 1;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    if (data[mid].time < targetTime) lo = mid + 1;
+    else hi = mid;
+  }
+  const a = data[Math.max(0, lo - 1)];
+  const b = data[lo];
+  return Math.abs(a.time - targetTime) <= Math.abs(b.time - targetTime) ? a : b;
+}
+function pointValue(p) {
+  if ("value" in p) return p.value;
+  return p.avg;
+}
+function attachTooltip(target, chart, options = {}) {
+  const svg = target.querySelector("svg");
+  if (!svg) {
+    throw new Error("attachTooltip: target has no <svg> child (did you mount the chart first?)");
+  }
+  const format = options.format ?? defaultFormat2;
+  const snapRadius = options.snapRadius ?? Infinity;
+  const className = options.className ?? "mlc-tooltip";
+  const showPicks = options.showPicks ?? true;
+  const pickRadius = options.pickRadius ?? 5;
+  const picksClassName = options.picksClassName ?? "mlc-tooltip-picks";
+  const tooltip = document.createElement("div");
+  tooltip.className = className;
+  tooltip.style.position = "absolute";
+  tooltip.style.pointerEvents = "none";
+  tooltip.style.display = "none";
+  if (getComputedStyle(target).position === "static") {
+    target.style.position = "relative";
+  }
+  target.appendChild(tooltip);
+  let picksGroup = null;
+  if (showPicks) {
+    picksGroup = document.createElementNS(SVG_NS, "g");
+    picksGroup.setAttribute("class", picksClassName);
+    picksGroup.setAttribute("pointer-events", "none");
+    svg.appendChild(picksGroup);
+  }
+  const clearPicks = () => {
+    if (picksGroup) picksGroup.replaceChildren();
+  };
+  const cache = chart.series.map((s, i) => {
+    const points = s.data.map((p) => ({ time: p.time, value: pointValue(p) })).filter((p) => p.value !== null).sort((a, b) => a.time - b.time);
+    return { data: points, series: s, index: i };
+  });
+  const onMove = (e) => {
+    const rect = svg.getBoundingClientRect();
+    const chartWidth = chart.getWidth?.() ?? rect.width;
+    const chartX = (e.clientX - rect.left) * chartWidth / Math.max(1, rect.width);
+    chart.getHeight?.() ?? rect.height;
+    const time = chart.invertTime(chartX);
+    if (!Number.isFinite(time)) {
+      tooltip.style.display = "none";
+      return;
+    }
+    const samples = [];
+    for (const entry of cache) {
+      const closest = findClosest(entry.data, time);
+      if (!closest) continue;
+      const sx = chart.project(closest.time, closest.value, entry.series.yAxisIndex ?? 0).x;
+      const sy = chart.project(closest.time, closest.value, entry.series.yAxisIndex ?? 0).y;
+      const dx = Math.abs(sx - chartX);
+      if (dx > snapRadius) continue;
+      samples.push({
+        seriesIndex: entry.index,
+        series: entry.series,
+        time: closest.time,
+        value: closest.value,
+        x: sx,
+        y: sy
+      });
+    }
+    if (samples.length === 0) {
+      tooltip.style.display = "none";
+      clearPicks();
+      return;
+    }
+    tooltip.innerHTML = format(samples);
+    const targetRect = target.getBoundingClientRect();
+    tooltip.style.left = `${e.clientX - targetRect.left}px`;
+    tooltip.style.top = `${e.clientY - targetRect.top}px`;
+    tooltip.style.display = "";
+    if (picksGroup) {
+      picksGroup.replaceChildren();
+      for (const s of samples) {
+        const c = document.createElementNS(SVG_NS, "circle");
+        c.setAttribute("cx", String(s.x));
+        c.setAttribute("cy", String(s.y));
+        c.setAttribute("r", String(pickRadius));
+        c.setAttribute("fill", "#ffffff");
+        c.setAttribute("stroke", seriesColor(s.series));
+        c.setAttribute("stroke-width", "2");
+        c.setAttribute("class", `${picksClassName}__dot`);
+        picksGroup.appendChild(c);
+      }
+    }
+  };
+  const onLeave = () => {
+    tooltip.style.display = "none";
+    clearPicks();
+  };
+  svg.addEventListener("mousemove", onMove);
+  svg.addEventListener("mouseleave", onLeave);
+  let disposed = false;
+  return () => {
+    if (disposed) return;
+    disposed = true;
+    svg.removeEventListener("mousemove", onMove);
+    svg.removeEventListener("mouseleave", onLeave);
+    tooltip.remove();
+    if (picksGroup) picksGroup.remove();
+  };
+}
+
+// src/mount.ts
+function mount(target, options = {}) {
+  const el = typeof target === "string" ? document.querySelector(target) : target;
+  if (!el) {
+    throw new Error(
+      `mount: target ${typeof target === "string" ? `'${target}'` : ""} not found`
+    );
+  }
+  const { tooltip, ...chartOptions } = options;
+  const width = chartOptions.width ?? el.clientWidth ?? 800;
+  const height = chartOptions.height ?? 350;
+  const chart = new MLTimeGraph({ ...chartOptions, width, height });
+  const { content } = new SVGRenderer().render(chart.renderCommands());
+  el.innerHTML = content;
+  const svg = el.querySelector("svg");
+  if (svg) {
+    svg.setAttribute("viewBox", `0 0 ${width} ${chart.getHeight()}`);
+    svg.setAttribute("width", "100%");
+    svg.setAttribute("height", String(chart.getHeight()));
+  }
+  if (tooltip?.show) {
+    attachTooltip(el, chart, tooltip);
+  }
+  return chart;
+}
+
+// src/style/fill_helpers.ts
+function fillBetweenThresholds(input) {
+  const { thresholds, colors, hatches } = input;
+  if (colors.length !== thresholds.length + 1) {
+    throw new Error(
+      `fillBetweenThresholds: expected ${thresholds.length + 1} colors for ${thresholds.length} thresholds, got ${colors.length}`
+    );
+  }
+  if (hatches !== void 0 && hatches.length !== colors.length) {
+    throw new Error(
+      `fillBetweenThresholds: hatches length (${hatches.length}) must equal colors length (${colors.length})`
+    );
+  }
+  const regions = colors.map((color, i) => {
+    const hatch = hatches?.[i];
+    const fill = hatch ? { color, hatch } : color;
+    if (i === 0) {
+      return { to: { threshold: thresholds[0] }, fill };
+    }
+    if (i === colors.length - 1) {
+      return { from: { threshold: thresholds[thresholds.length - 1] }, fill };
+    }
+    return {
+      from: { threshold: thresholds[i - 1] },
+      to: { threshold: thresholds[i] },
+      fill
+    };
+  });
+  return { regions };
+}
+
+// src/data/parser.ts
+function parseDataPoint(obj) {
+  if (!obj || typeof obj !== "object") {
+    throw new Error("DataPoint: object expected");
+  }
+  const { time, value, annotation } = obj;
+  if (typeof time !== "number" || isNaN(time)) {
+    throw new Error(`DataPoint: invalid time=${time}`);
+  }
+  if (value !== null && (typeof value !== "number" || isNaN(value))) {
+    throw new Error(`DataPoint: invalid value=${value}`);
+  }
+  return {
+    time,
+    value,
+    // null = gap
+    annotation: annotation && typeof annotation === "string" ? annotation : void 0
+  };
+}
+function parseSeries(obj) {
+  if (Array.isArray(obj)) return obj.map(parseDataPoint);
+  if (obj && typeof obj === "object") {
+    const json = obj;
+    const name = json.name;
+    const data = json.data;
+    const sensorType = json.sensorType;
+    const enumMap = json.enumMap;
+    const color = json.color;
+    const lineWidth = json.lineWidth;
+    const smoothing = json.smoothing;
+    const seriesType = json.seriesType;
+    if (!name || !name.length) throw new Error("Series: name required");
+    if (!Array.isArray(data)) throw new Error("Series: data must be an array");
+    const styleLine = color !== void 0 || lineWidth !== void 0 || smoothing !== void 0 ? { color, width: lineWidth, smoothing } : void 0;
+    return {
+      name,
+      data: data.map(parseDataPoint),
+      sensorType: sensorType ?? "numeric",
+      enumMap,
+      seriesType,
+      ...styleLine && { style: { line: styleLine } }
+    };
+  }
+  throw new Error("parseSeries: object or DataPoint[] expected");
+}
+function parseAggregated(obj) {
+  if (!obj || typeof obj !== "object") throw new Error("parseAggregated: object expected");
+  const json = obj;
+  const name = json.name;
+  const data = json.data;
+  const showAs = json.showAs;
+  const avgLine = json.avgLine;
+  const countOpacity = json.countOpacity;
+  const color = json.color;
+  if (!name || !name.length) throw new Error("AggregatedSeries: name required");
+  if (!Array.isArray(data)) throw new Error("AggregatedSeries: data must be an array");
+  return {
+    name,
+    data: parseAggregatedData(data),
+    showAs,
+    avgLine,
+    countOpacity,
+    ...color !== void 0 && { style: { line: { color }, fill: color } }
+  };
+}
+function parseAggregatedData(arr) {
+  const stat = (v) => typeof v === "number" ? v : null;
+  return arr.map((item) => {
+    const p = item;
+    return {
+      time: p.time ?? 0,
+      min: stat(p.min),
+      max: stat(p.max),
+      avg: stat(p.avg),
+      count: typeof p.count === "number" ? p.count : 0
+    };
+  });
+}
+
+// src/theme/runtime.ts
+var currentDefault = { ...theme };
+function setDefaultTheme(partial) {
+  currentDefault = { ...currentDefault, ...partial };
+}
+function getDefaultTheme() {
+  return currentDefault;
+}
+function resetDefaultTheme() {
+  currentDefault = { ...theme };
+}
+/*!
+ * MLTimeGraph — Copyright (c) 2026 Michael Lechner
+ * MIT with Attribution: free use incl. commercial requires visible credit to
+ * "Michael Lechner". Commercial license (no attribution) on request. See LICENSE.
+ */
+/*!
+ * MLTimeGraph — Copyright (c) 2026 Michael Lechner
+ * MIT with Attribution: free use incl. commercial must have visible credit to
+ * "Michael Lechner". Commercial license (no attribution) on request. See LICENSE.
+ */
+
+export { MLTimeGraph, SVGRenderer, attachTooltip, fillBetweenThresholds, getDefaultTheme, mount, parseAggregated, parseDataPoint, parseSeries, resetDefaultTheme, setDefaultTheme };