ml-time-graph 1.0.0

package/dist/internals.js

@@ -0,0 +1,2465 @@
+// src/renderer/renderer.ts
+var Renderer = class {
+};
+
+// 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/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/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 renderStep(segments, ctx, style) {
+  const commands = [];
+  const s = resolveStyle(style);
+  for (let si = 0; si < segments.length; si++) {
+    const seg = segments[si];
+    if (seg.data.length < 2) continue;
+    const pts = [];
+    for (let i = 0; i < seg.data.length; i++) {
+      const px = ctx.timeScale.map(seg.data[i].time);
+      const py = ctx.valueScale.map(seg.data[i].value);
+      if (i === 0) {
+        pts.push({ x: px, y: py });
+      } else {
+        pts.push({ x: px, y: pts[pts.length - 1].y });
+        pts.push({ x: px, y: py });
+      }
+    }
+    commands.push({
+      type: "path",
+      id: style.id ? `${style.id}-line-${si}` : void 0,
+      points: pts,
+      stroke: seg.color ?? s.line.stroke,
+      strokeWidth: s.line.strokeWidth,
+      smoothing: false,
+      fill: "none"
+    });
+  }
+  return commands;
+}
+function renderArea(segments, ctx, style, yLow, yHigh) {
+  const commands = [];
+  const s = resolveStyle(style);
+  for (let si = 0; si < segments.length; si++) {
+    const seg = segments[si];
+    if (seg.data.length < 2) continue;
+    const ptsLow = seg.data.map((p) => ({
+      x: ctx.timeScale.map(p.time),
+      y: ctx.valueScale.map(yLow(p))
+    }));
+    const ptsHigh = seg.data.map((p) => ({
+      x: ctx.timeScale.map(p.time),
+      y: ctx.valueScale.map(yHigh(p))
+    })).reverse();
+    commands.push({
+      type: "path",
+      id: style.id ? `${style.id}-fill-${si}` : void 0,
+      points: [...ptsLow, ...ptsHigh],
+      fill: seg.color ?? s.fill,
+      hatch: style.hatch,
+      stroke: "none"
+    });
+  }
+  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 renderSplitLine(run, threshold, ctx, styles) {
+  const split = SeriesProcessor.splitByThreshold(
+    run,
+    threshold,
+    (p) => p.value,
+    SeriesProcessor.interpolateDataPoint
+  );
+  const commands = [];
+  if (styles.below) {
+    commands.push(...renderLine(split.below.map((data) => ({ data })), ctx, styles.below));
+  }
+  if (styles.above) {
+    commands.push(...renderLine(split.above.map((data) => ({ data })), ctx, styles.above));
+  }
+  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/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/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)
+    );
+  }
+};
+var BandScale = class {
+  #domain;
+  #range;
+  #paddingInner;
+  #paddingOuter;
+  constructor(config) {
+    this.#domain = [...config.domain];
+    this.#range = [...config.range];
+    this.#paddingInner = config.paddingInner ?? 0.1;
+    this.#paddingOuter = config.paddingOuter ?? 0.05;
+  }
+  /** Get the pixel width of each band (including padding) */
+  get step() {
+    const [r0, r1] = this.#range;
+    const n = this.#domain.length;
+    if (n <= 1) return Math.abs(r1 - r0);
+    return Math.abs(r1 - r0) * (1 - this.#paddingOuter * 2) / n + Math.abs(r1 - r0) * this.#paddingInner * 2 / n;
+  }
+  /** Get the pixel width of each band's content area */
+  get bandwidth() {
+    const [r0, r1] = this.#range;
+    const n = this.#domain.length;
+    if (n <= 1) return Math.abs(r1 - r0) * (1 - this.#paddingOuter * 2);
+    const totalPaddingOuter = this.#paddingOuter * 2 * Math.abs(r1 - r0);
+    const usable = Math.abs(r1 - r0) - totalPaddingOuter;
+    const step = usable / n;
+    return step * (1 - this.#paddingInner);
+  }
+  map(value) {
+    const idx = this.#domain.findIndex((d) => String(d) === String(value));
+    if (idx === -1) return this.#range[0];
+    const [r0, r1] = this.#range;
+    const n = this.#domain.length;
+    if (n <= 1) return (r0 + r1) / 2;
+    const totalPaddingOuter = this.#paddingOuter * 2 * Math.abs(r1 - r0);
+    const usable = Math.abs(r1 - r0) - totalPaddingOuter;
+    const direction = r1 >= r0 ? 1 : -1;
+    const step = usable / n;
+    const start = r0 + this.#paddingOuter * Math.abs(r1 - r0) * direction;
+    return start + idx * step;
+  }
+  invert(pixel) {
+    let bestIdx = 0;
+    let bestDist = Infinity;
+    for (let i = 0; i < this.#domain.length; i++) {
+      const pos = this.map(this.#domain[i]);
+      const dist = Math.abs(pixel - pos);
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestIdx = i;
+      }
+    }
+    return this.#domain[bestIdx];
+  }
+  domain() {
+    if (this.#domain.length === 0) return ["", ""];
+    return [this.#domain[0], this.#domain[this.#domain.length - 1]];
+  }
+  range() {
+    return [...this.#range];
+  }
+  /** Get all band positions */
+  positions() {
+    const m = /* @__PURE__ */ new Map();
+    for (const d of this.#domain) {
+      m.set(d, this.map(d));
+    }
+    return m;
+  }
+};
+
+// 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 ?? 0.15,
+    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/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/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/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/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/clip.ts
+var Clip = class {
+  #regions;
+  constructor() {
+    this.#regions = [];
+  }
+  /** Add a clipping region */
+  add(region) {
+    this.#regions.push(region);
+  }
+  /** Clear all clipping regions */
+  clear() {
+    this.#regions = [];
+  }
+  /** Check if a point is within the clipping regions */
+  isInside(x, y) {
+    if (this.#regions.length === 0) return true;
+    return this.#regions.some(
+      (r) => x >= r.x && x <= r.x + r.width && y >= r.y && y <= r.y + r.height
+    );
+  }
+  /** Generate SVG clipPath element */
+  toSVGClipPath(id = "clip") {
+    if (this.#regions.length === 0) return "";
+    const rects = this.#regions.map((r) => `<rect x="${r.x}" y="${r.y}" width="${r.width}" height="${r.height}" />`).join("\n      ");
+    return `<clipPath id="${id}">
+      ${rects}
+    </clipPath>`;
+  }
+  /** Get current clipping regions */
+  get regions() {
+    return [...this.#regions];
+  }
+};
+
+// 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/axis/enum_axis.ts
+var EnumAxis = class {
+  #scale;
+  /** All enum keys (as strings), sorted numerically — the full category list. */
+  #keys;
+  #config;
+  constructor(config) {
+    const domain = Object.keys(config.enumMap).map(Number).sort((a, b) => a - b).map(String);
+    this.#keys = domain;
+    this.#scale = new BandScale({ domain, range: config.range });
+    this.#config = config;
+  }
+  get scale() {
+    return this.#scale;
+  }
+  /** Get all enum ticks with labels, positions, colors. */
+  generateTicks() {
+    const { enumMap, showLabels = true, autoColor = true, gapValues } = this.#config;
+    const gaps = new Set(gapValues ?? []);
+    return this.#keys.map((key, idx) => {
+      const value = Number(key);
+      const label = showLabels ? enumMap[value] ?? String(value) : String(value);
+      const y = this.#scale.map(value);
+      const color = autoColor ? theme.palette[idx % theme.palette.length] : void 0;
+      return { value, label, y, color, isGap: gaps.has(value) };
+    });
+  }
+  /** Get color for a specific enum value. */
+  colorFor(value) {
+    const idx = this.#keys.indexOf(String(value));
+    if (idx === -1 || !(this.#config.autoColor ?? true)) return void 0;
+    return theme.palette[idx % theme.palette.length];
+  }
+  /** Render enum axis labels as draw commands. */
+  render() {
+    const ticks = this.generateTicks();
+    const x = this.#config.x ?? 0;
+    const commands = [];
+    for (const tick of ticks) {
+      if (tick.isGap) continue;
+      commands.push({
+        type: "text",
+        content: tick.label,
+        x,
+        y: tick.y + 4,
+        anchor: "end",
+        fontSize: 11,
+        fill: tick.color ?? theme.textColor
+      });
+    }
+    return commands;
+  }
+  /** Map an enum value to its pixel position. */
+  map(value) {
+    return this.#scale.map(value);
+  }
+  /** Check if a value should be treated as a gap. */
+  isGap(value) {
+    return new Set(this.#config.gapValues ?? []).has(value);
+  }
+};
+
+// 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/line_series.ts
+var LineSeries = class extends Series {
+  #config;
+  constructor(config) {
+    super(config, config.data);
+    this.#config = config;
+  }
+  /** Convert non-null data points to pixel coordinates (sorted by X). */
+  points() {
+    const valueScale = this.#config.valueScale;
+    return this.data.filter((dp) => dp.value !== null).map((dp) => ({
+      x: this.timeScale.map(dp.time),
+      y: valueScale.map(dp.value),
+      time: dp.time
+    })).sort((a, b) => a.x - b.x);
+  }
+  render() {
+    const c = this.#config;
+    const style = {
+      smoothing: c.smoothing ?? false,
+      stroke: c.stroke ?? theme.stroke,
+      strokeWidth: c.strokeWidth ?? theme.strokeWidth,
+      dashed: c.dashed ?? false,
+      pointStyle: c.pointStyle ?? "none",
+      pointSize: c.pointSize ?? theme.pointSize,
+      shadowColor: c.shadowColor,
+      shadowBlur: c.shadowBlur,
+      shadowOffsetX: c.shadowOffsetX,
+      shadowOffsetY: c.shadowOffsetY
+    };
+    const pointThreshold = c.pointThreshold ?? theme.pointThreshold;
+    const gapThreshold = c.gapThreshold ?? theme.gapThreshold;
+    const id = c.id;
+    const runs = SeriesProcessor.getRuns(
+      this.data,
+      (p) => p.value === null,
+      gapThreshold
+    );
+    const totalPoints = runs.reduce((sum, run) => sum + run.length, 0);
+    if (totalPoints === 0) return [];
+    const ctx = { timeScale: this.timeScale, valueScale: c.valueScale };
+    const segments = runs.map((run) => ({ data: run }));
+    const commands = [];
+    commands.push(
+      ...renderLine(segments, ctx, {
+        ...style,
+        id: id ? `${id}-line` : void 0
+      })
+    );
+    if (style.pointStyle && style.pointStyle !== "none" && totalPoints <= pointThreshold) {
+      for (const run of runs) {
+        commands.push(
+          ...renderMarkers(
+            run,
+            ctx,
+            { ...style, id: id ? `${id}-marker` : void 0 },
+            () => style.stroke
+          )
+        );
+      }
+    }
+    return commands;
+  }
+};
+
+// src/series/step_series.ts
+var StepSeries = class extends Series {
+  #config;
+  constructor(config) {
+    super(config, config.data);
+    this.#config = config;
+  }
+  /**
+   * Convert (non-null) data points to step-style pixel coordinates.
+   * Each data point generates two corners (horizontal then vertical).
+   */
+  points() {
+    const valueScale = this.#config.valueScale;
+    const sorted = [...this.data].filter((p) => p.value !== null).sort((a, b) => a.time - b.time);
+    const pts = [];
+    for (let i = 0; i < sorted.length; i++) {
+      const px = this.timeScale.map(sorted[i].time);
+      const py = valueScale.map(sorted[i].value);
+      if (i === 0) {
+        pts.push({ x: px, y: py });
+      } else {
+        pts.push({ x: px, y: pts[pts.length - 1].y });
+        pts.push({ x: px, y: py });
+      }
+    }
+    return pts;
+  }
+  render() {
+    const runs = SeriesProcessor.getRuns(this.data, (p) => p.value === null);
+    if (runs.length === 0) return [];
+    const ctx = { timeScale: this.timeScale, valueScale: this.#config.valueScale };
+    const segments = runs.map((run) => ({ data: run }));
+    return renderStep(segments, ctx, {
+      stroke: this.#config.stroke ?? theme.stroke,
+      strokeWidth: this.#config.strokeWidth ?? theme.strokeWidth,
+      id: this.id ? `${this.id}-line` : void 0
+    });
+  }
+};
+
+// 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/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/zoned_line_series.ts
+var ZonedLineSeries = class extends Series {
+  #config;
+  #sortedZones;
+  constructor(config) {
+    super(config, config.data);
+    this.#config = config;
+    this.#sortedZones = [...config.zones ?? []].sort((a, b) => a.value - b.value);
+  }
+  /** Colour for a given zone index (0 = base, 1..N = zones). */
+  #colorAtZone(zoneIndex) {
+    if (zoneIndex === 0) return this.#config.baseColor ?? theme.stroke;
+    return this.#sortedZones[zoneIndex - 1].color;
+  }
+  render() {
+    const c = this.#config;
+    const baseColor = c.baseColor ?? theme.stroke;
+    const style = {
+      stroke: baseColor,
+      strokeWidth: c.strokeWidth ?? theme.strokeWidth,
+      smoothing: c.smoothing ?? false,
+      pointStyle: c.pointStyle ?? "none",
+      pointSize: c.pointSize ?? theme.pointSize
+    };
+    const gapThreshold = c.gapThreshold ?? theme.gapThreshold;
+    const pointThreshold = c.pointThreshold ?? theme.pointThreshold;
+    const runs = SeriesProcessor.getRuns(this.data, (p) => p.value === null, gapThreshold);
+    const totalPoints = runs.reduce((sum, run) => sum + run.length, 0);
+    if (totalPoints === 0) return [];
+    const ctx = { timeScale: this.timeScale, valueScale: c.valueScale };
+    const commands = [];
+    for (const run of runs) {
+      if (run.length < 2) continue;
+      if (c.fill) {
+        const fillVal = c.fill.value;
+        const fillSegments = SeriesProcessor.splitByBoundaries(
+          run,
+          [fillVal],
+          (p) => p.value,
+          SeriesProcessor.interpolateDataPoint
+        );
+        const yFill = c.valueScale.map(fillVal);
+        for (let fi = 0; fi < fillSegments.length; fi++) {
+          const seg = fillSegments[fi];
+          const rep = (seg.data[0].value + seg.data[seg.data.length - 1].value) / 2;
+          if (c.fill.side === "above" === rep >= fillVal) {
+            const pts = seg.data.map((p) => ({
+              x: this.timeScale.map(p.time),
+              y: c.valueScale.map(p.value)
+            }));
+            commands.push({
+              type: "path",
+              id: this.id ? `${this.id}-fill-${fi}` : void 0,
+              points: [...pts, { x: pts[pts.length - 1].x, y: yFill }, { x: pts[0].x, y: yFill }],
+              fill: c.fill.color,
+              hatch: c.fill.hatch,
+              stroke: "none"
+            });
+          }
+        }
+      }
+      const boundaries = this.#sortedZones.map((z) => z.value);
+      const segments = SeriesProcessor.splitByBoundaries(
+        run,
+        boundaries,
+        (p) => p.value,
+        SeriesProcessor.interpolateDataPoint
+      );
+      const zonedSegments = segments.map((seg) => ({
+        data: seg.data,
+        color: this.#colorAtZone(seg.zoneIndex)
+      }));
+      commands.push(
+        ...renderLine(zonedSegments, ctx, { ...style, id: this.id ? `${this.id}-line` : void 0 })
+      );
+      if (style.pointStyle && style.pointStyle !== "none" && totalPoints <= pointThreshold) {
+        commands.push(
+          ...renderMarkers(
+            run,
+            ctx,
+            { ...style, id: this.id ? `${this.id}-marker` : void 0 },
+            (p) => {
+              let color = baseColor;
+              for (const z of this.#sortedZones) {
+                if (p.value >= z.value) color = z.color;
+              }
+              return color;
+            }
+          )
+        );
+      }
+    }
+    return commands;
+  }
+};
+
+// 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/analyze/stats.ts
+var StatsAggregator = class {
+  /** Compute statistics from data points */
+  static compute(data) {
+    const values = data.map((d) => d.value).filter((v) => v !== null).sort((a, b) => a - b);
+    if (values.length === 0) {
+      return { min: NaN, max: NaN, avg: NaN, mean: NaN, median: NaN, stdDev: NaN, count: 0 };
+    }
+    const count = values.length;
+    const sum = values.reduce((a, b) => a + b, 0);
+    const mean = sum / count;
+    const median = count % 2 === 1 ? values[Math.floor(count / 2)] : (values[count / 2 - 1] + values[count / 2]) / 2;
+    const variance = values.reduce((a, b) => a + Math.pow(b - mean, 2), 0) / count;
+    const stdDev = Math.sqrt(variance);
+    return {
+      min: values[0],
+      max: values[count - 1],
+      avg: mean,
+      mean,
+      median,
+      stdDev,
+      count
+    };
+  }
+  /** Compute stats for a specific time range (viewport-scoped) */
+  static computeInRange(data, startTime, endTime) {
+    const filtered = data.filter((d) => d.time >= startTime && d.time <= endTime);
+    return this.compute(filtered);
+  }
+};
+
+// src/series/stats_overlay.ts
+var StatsOverlay = class {
+  #config;
+  constructor(config) {
+    this.#config = config;
+  }
+  /** Render stats as horizontal lines with labels. */
+  render() {
+    const {
+      data,
+      valueScale,
+      xRange,
+      showMin = false,
+      showMax = false,
+      showAvg = true,
+      showMedian = false,
+      labelPosition = "end",
+      lineColor = theme.statsLineColor,
+      labelColor = theme.statsLabelColor
+    } = this.#config;
+    const stats = StatsAggregator.compute(data);
+    const lines = [
+      { name: "min", value: stats.min, enabled: showMin },
+      { name: "max", value: stats.max, enabled: showMax },
+      { name: "avg", value: stats.avg, enabled: showAvg },
+      { name: "median", value: stats.median, enabled: showMedian }
+    ];
+    const commands = [];
+    const [x0, x1] = xRange;
+    for (const stat of lines.filter((s) => s.enabled)) {
+      const y = valueScale.map(stat.value);
+      commands.push({ type: "line", x1: x0, y1: y, x2: x1, y2: y, stroke: lineColor, strokeWidth: 1 });
+      const label = `${stat.name}: ${stat.value.toFixed(1)}`;
+      if (labelPosition === "start" || labelPosition === "both") {
+        commands.push({ type: "text", content: label, x: x0 + 4, y: y - 4, anchor: "start", fontSize: 10, fill: labelColor });
+      }
+      if (labelPosition === "end" || labelPosition === "both") {
+        commands.push({ type: "text", content: label, x: x1 - 4, y: y - 4, anchor: "end", fontSize: 10, fill: labelColor });
+      }
+      if (labelPosition === "center") {
+        commands.push({ type: "text", content: label, x: (x0 + x1) / 2, y: y - 4, anchor: "middle", fontSize: 10, fill: labelColor });
+      }
+    }
+    return commands;
+  }
+};
+
+// src/formatter/time_formatter.ts
+var TimeFormatter = class {
+  #locale;
+  #fallbackLocales;
+  #autoFormat;
+  constructor(opts) {
+    this.#locale = opts?.locale || (typeof navigator !== "undefined" ? navigator.language : "en-US");
+    this.#fallbackLocales = opts?.fallbackLocales ?? ["en-US"];
+    this.#autoFormat = opts?.autoFormat ?? true;
+  }
+  /**
+   * Format a timestamp.
+   * Auto-selects format options based on the time difference if autoFormat is enabled.
+   */
+  format(timestamp, opts, referenceTime) {
+    try {
+      const options = this.#autoFormat && referenceTime ? this.#autoOptions(timestamp, referenceTime, opts) : opts;
+      return new Intl.DateTimeFormat(this.#locale, options).format(
+        new Date(timestamp)
+      );
+    } catch {
+      for (const locale of this.#fallbackLocales) {
+        try {
+          return new Intl.DateTimeFormat(locale, opts).format(
+            new Date(timestamp)
+          );
+        } catch {
+        }
+      }
+      return new Date(timestamp).toISOString();
+    }
+  }
+  /** Format a time range display */
+  formatRange(start, end) {
+    const startStr = this.format(start);
+    const endStr = this.format(end);
+    return `${startStr} \u2014 ${endStr}`;
+  }
+  #autoOptions(timestamp, referenceTime, base) {
+    const diff = Math.abs(timestamp - referenceTime);
+    const day = 864e5;
+    const hour = 36e5;
+    const minute = 6e4;
+    const opts = {};
+    if (diff < minute) {
+      opts.second = "2-digit";
+      opts.minute = "2-digit";
+      opts.hour = "2-digit";
+    } else if (diff < hour) {
+      opts.minute = "2-digit";
+      opts.hour = "2-digit";
+    } else if (diff < day) {
+      opts.hour = "2-digit";
+      opts.minute = "2-digit";
+    } else if (diff < 7 * day) {
+      opts.weekday = "short";
+      opts.day = "numeric";
+    } else if (diff < 365 * day) {
+      opts.month = "short";
+      opts.day = "numeric";
+    } else {
+      opts.month = "short";
+      opts.year = "numeric";
+    }
+    return { ...base, ...opts };
+  }
+};
+
+// src/formatter/value_formatter.ts
+var ValueFormatter = class _ValueFormatter {
+  #unit;
+  #decimals;
+  _compact;
+  #custom;
+  constructor(opts) {
+    this.#unit = opts?.unit ?? "";
+    this.#decimals = opts?.decimals ?? 1;
+    this._compact = opts?.compact ?? false;
+    this.#custom = opts?.custom;
+  }
+  /** Format a single value */
+  format(value) {
+    if (this.#custom) {
+      return this.#custom(value);
+    }
+    let formatted;
+    if (this._compact && Math.abs(value) >= 1e6) {
+      formatted = `${(value / 1e6).toFixed(this.#decimals)}M`;
+    } else if (this._compact && Math.abs(value) >= 1e3) {
+      formatted = `${(value / 1e3).toFixed(this.#decimals)}k`;
+    } else {
+      formatted = value.toFixed(this.#decimals);
+    }
+    return this.#unit ? `${formatted}${this.#unit}` : formatted;
+  }
+  /** Format a range of values */
+  formatRange(min, max) {
+    return `${this.format(min)} \u2014 ${this.format(max)}`;
+  }
+  /** Create a formatter for a specific unit */
+  static unit(unit, decimals = 1) {
+    return new _ValueFormatter({ unit, decimals });
+  }
+  /** Temperature formatter */
+  static temperature(unit = "\xB0C") {
+    return new _ValueFormatter({ unit, decimals: 1 });
+  }
+  /** Percentage formatter */
+  static percentage() {
+    return new _ValueFormatter({ unit: "%", decimals: 0 });
+  }
+};
+
+// src/formatter/enum_formatter.ts
+var EnumFormatter = class _EnumFormatter {
+  #map;
+  #fallback;
+  #showValue;
+  constructor(opts) {
+    this.#map = opts?.map ?? {};
+    this.#fallback = opts?.fallback ?? ((v) => String(v));
+    this.#showValue = opts?.showValue ?? false;
+  }
+  /** Format an enum value */
+  format(value) {
+    const label = this.#map[value] ?? this.#fallback(value);
+    return this.#showValue ? `(${value}) ${label}` : label;
+  }
+  /** Check if value exists in map */
+  has(value) {
+    return value in this.#map;
+  }
+  /** Get all mapped labels */
+  labels() {
+    return Object.values(this.#map);
+  }
+  /** Get all mapped values */
+  values() {
+    return Object.keys(this.#map).map(Number);
+  }
+  /** Create formatter from label config strings */
+  static fromLabels(labels, showValue = false) {
+    const map = {};
+    labels.forEach((label, idx) => {
+      map[idx] = label;
+    });
+    return new _EnumFormatter({ map, showValue });
+  }
+};
+
+// src/formatter/index.ts
+var Formatters = {
+  time: new TimeFormatter(),
+  value: new ValueFormatter(),
+  enum: new EnumFormatter()
+};
+
+// src/theme/runtime.ts
+var currentDefault = { ...theme };
+function getDefaultTheme() {
+  return currentDefault;
+}
+
+// src/style/resolver.ts
+function mergeLine(line, series) {
+  const theme2 = getDefaultTheme();
+  return {
+    color: line.color ?? theme2.stroke,
+    width: line.width ?? theme2.strokeWidth,
+    style: line.style ?? "solid",
+    smoothing: line.smoothing ?? false,
+    shape: line.shape ?? (series.seriesType === "step" ? "step" : "line"),
+    gapThreshold: line.gapThreshold ?? theme2.gapThreshold,
+    opacity: line.opacity ?? 1
+  };
+}
+function resolveLines(series) {
+  const styleLine = series.style?.line;
+  if (styleLine === false) return [];
+  if (styleLine === void 0) return [mergeLine({}, series)];
+  if (Array.isArray(styleLine)) return styleLine.map((l) => mergeLine(l, series));
+  return [mergeLine(styleLine, series)];
+}
+function resolveMarkers(series) {
+  const m = series.style?.markers;
+  if (!m?.type || m.type === "none") return void 0;
+  const theme2 = getDefaultTheme();
+  const lineColor = series.style?.line && !Array.isArray(series.style.line) ? series.style.line.color : void 0;
+  const seriesColor = lineColor ?? theme2.stroke;
+  return {
+    type: m.type,
+    size: m.size ?? theme2.pointSize,
+    stroke: m.stroke ?? seriesColor,
+    fill: m.fill ?? "#ffffff",
+    strokeWidth: m.strokeWidth ?? 1,
+    threshold: m.threshold
+  };
+}
+function resolveShadow(series) {
+  const s = series.style?.shadow;
+  if (!s?.color || s.color === "transparent" || s.color === "none") return void 0;
+  return {
+    color: s.color,
+    blur: s.blur ?? 4,
+    offsetX: s.offsetX ?? 0,
+    offsetY: s.offsetY ?? 0
+  };
+}
+function resolveGap(series) {
+  return series.style?.gap;
+}
+function resolveFill(series) {
+  return series.style?.fill;
+}
+function resolveSeriesStyle(series) {
+  return {
+    lines: resolveLines(series),
+    fill: resolveFill(series),
+    markers: resolveMarkers(series),
+    shadow: resolveShadow(series),
+    gap: resolveGap(series),
+    id: series.style?.id ?? series.id
+  };
+}
+
+// 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";
+}
+/*!
+ * 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 { AnnotationBandSeries, BandScale, BandSeries, Clip, EnumAxis, EnumFormatter, Formatters, Layout, LineSeries, LinearScale, MinMaxAvgSeries, Renderer, StatsOverlay, StepSeries, TIME_INTERVALS, TimeAxis, TimeFormatter, TimeScale, ValueAxis, ValueFormatter, ZonedLineSeries, getHatch, measureLegend, renderAnnotations, renderArea, renderGaps, renderGrid, renderHighlights, renderLegend, renderLine, renderMarkers2 as renderMarkers, renderMarkers as renderSeriesMarkers, renderSplitLine, renderStep, renderThresholds, renderZonedArea, resolveFill, resolveGap, resolveLines, resolveMarkers, resolveSeriesStyle, resolveShadow, slugify, theme };