@akcelik/strct 0.26.0 → 0.29.0

package/fesm2022/akcelik-strct.mjs

@@ -641,7 +641,7 @@ class StrctIcon {
           </svg>
         }
       </span>
-    }`, isInline: true, styles: [".strct-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;line-height:0}.strct-icon__raw{display:inline-flex}.strct-icon__raw>svg{width:100%;height:100%;display:block}.strct-icon__badge{position:absolute;right:-3px;bottom:-3px;width:50%;height:50%;min-width:8px;min-height:8px;max-width:12px;max-height:12px;border-radius:50%;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--success,.strct-icon__badge--critical,.strct-icon__badge--info,.strct-icon__badge--off{display:flex;align-items:center;justify-content:center;font-size:clamp(6px,68%,10px);font-weight:800;line-height:1;color:var(--inv)}.strct-icon__badge--success{background:var(--success)}.strct-icon__badge--success:before{content:\"\\2713\"}.strct-icon__badge--warning{background:var(--warning);border-radius:1px;clip-path:polygon(50% 10%,92% 90%,8% 90%);box-shadow:none;filter:drop-shadow(0 0 1.5px var(--bg-1));right:-2px;bottom:-2px;width:60%;height:60%;min-width:11px;min-height:11px;max-width:18px;max-height:18px;display:flex;align-items:center;justify-content:center;font-size:clamp(6px,70%,10px);font-weight:800;color:var(--inv);line-height:1}.strct-icon__badge--warning:before{content:\"!\"}.strct-icon__badge--critical{background:var(--critical)}.strct-icon__badge--critical:before{content:\"\\d7\"}.strct-icon__badge--off{background:var(--t3)}.strct-icon__badge--off:before{content:\"\\2013\"}.strct-icon__badge--info{background:var(--acc)}.strct-icon__badge--info:before{content:\"i\"}.strct-icon__badge--maintenance{background:var(--warning);right:-2px;bottom:-2px;width:58%;height:58%;min-width:10px;min-height:10px;max-width:16px;max-height:16px;display:flex;align-items:center;justify-content:center;padding:1px;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--maintenance svg{width:84%;height:84%;color:var(--inv)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    }`, isInline: true, styles: [".strct-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;line-height:0}.strct-icon__raw{display:inline-flex}.strct-icon__raw>svg{width:100%;height:100%;display:block}.strct-icon__badge{position:absolute;right:-3px;bottom:-3px;width:50%;height:50%;min-width:8px;min-height:8px;max-width:12px;max-height:12px;border-radius:50%;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--success,.strct-icon__badge--critical,.strct-icon__badge--info,.strct-icon__badge--off,.strct-icon__badge--paused,.strct-icon__badge--running{display:flex;align-items:center;justify-content:center;font-size:clamp(6px,68%,10px);font-weight:800;line-height:1;color:var(--inv)}.strct-icon__badge--success{background:var(--success)}.strct-icon__badge--success:before{content:\"\\2713\"}.strct-icon__badge--warning{background:var(--warning);border-radius:1px;clip-path:polygon(50% 10%,92% 90%,8% 90%);box-shadow:none;filter:drop-shadow(0 0 1.5px var(--bg-1));right:-2px;bottom:-2px;width:60%;height:60%;min-width:11px;min-height:11px;max-width:18px;max-height:18px;display:flex;align-items:center;justify-content:center;font-size:clamp(6px,70%,10px);font-weight:800;color:var(--inv);line-height:1}.strct-icon__badge--warning:before{content:\"!\"}.strct-icon__badge--critical{background:var(--critical);border-radius:1px;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);box-shadow:none;filter:drop-shadow(0 0 1.5px var(--bg-1));width:58%;height:58%;min-width:10px;min-height:10px;max-width:15px;max-height:15px;font-size:clamp(6px,56%,9px)}.strct-icon__badge--critical:before{content:\"\\d7\"}.strct-icon__badge--running{background:var(--success)}.strct-icon__badge--running:before{content:\"\";width:46%;height:46%;min-width:4px;min-height:4px;background:var(--inv);clip-path:polygon(15% 2%,100% 50%,15% 98%);transform:translate(9%)}.strct-icon__badge--paused{background:var(--warning)}.strct-icon__badge--paused:before{content:\"\";width:1.6px;height:42%;min-height:4px;background:var(--inv);box-shadow:2.6px 0 0 var(--inv);transform:translate(-1.3px)}.strct-icon__badge--off{background:var(--t3)}.strct-icon__badge--off:before{content:\"\";width:40%;height:40%;min-width:3.5px;min-height:3.5px;background:var(--inv);border-radius:1px}.strct-icon__badge--info{background:var(--acc)}.strct-icon__badge--info:before{content:\"i\"}.strct-icon__badge--maintenance{background:var(--warning);right:-2px;bottom:-2px;width:58%;height:58%;min-width:10px;min-height:10px;max-width:16px;max-height:16px;display:flex;align-items:center;justify-content:center;padding:1px;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--maintenance svg{width:84%;height:84%;color:var(--inv)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctIcon, decorators: [{
             type: Component,
@@ -685,7 +685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
           </svg>
         }
       </span>
-    }`, host: { class: 'strct-icon' }, styles: [".strct-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;line-height:0}.strct-icon__raw{display:inline-flex}.strct-icon__raw>svg{width:100%;height:100%;display:block}.strct-icon__badge{position:absolute;right:-3px;bottom:-3px;width:50%;height:50%;min-width:8px;min-height:8px;max-width:12px;max-height:12px;border-radius:50%;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--success,.strct-icon__badge--critical,.strct-icon__badge--info,.strct-icon__badge--off{display:flex;align-items:center;justify-content:center;font-size:clamp(6px,68%,10px);font-weight:800;line-height:1;color:var(--inv)}.strct-icon__badge--success{background:var(--success)}.strct-icon__badge--success:before{content:\"\\2713\"}.strct-icon__badge--warning{background:var(--warning);border-radius:1px;clip-path:polygon(50% 10%,92% 90%,8% 90%);box-shadow:none;filter:drop-shadow(0 0 1.5px var(--bg-1));right:-2px;bottom:-2px;width:60%;height:60%;min-width:11px;min-height:11px;max-width:18px;max-height:18px;display:flex;align-items:center;justify-content:center;font-size:clamp(6px,70%,10px);font-weight:800;color:var(--inv);line-height:1}.strct-icon__badge--warning:before{content:\"!\"}.strct-icon__badge--critical{background:var(--critical)}.strct-icon__badge--critical:before{content:\"\\d7\"}.strct-icon__badge--off{background:var(--t3)}.strct-icon__badge--off:before{content:\"\\2013\"}.strct-icon__badge--info{background:var(--acc)}.strct-icon__badge--info:before{content:\"i\"}.strct-icon__badge--maintenance{background:var(--warning);right:-2px;bottom:-2px;width:58%;height:58%;min-width:10px;min-height:10px;max-width:16px;max-height:16px;display:flex;align-items:center;justify-content:center;padding:1px;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--maintenance svg{width:84%;height:84%;color:var(--inv)}\n"] }]
+    }`, host: { class: 'strct-icon' }, styles: [".strct-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;line-height:0}.strct-icon__raw{display:inline-flex}.strct-icon__raw>svg{width:100%;height:100%;display:block}.strct-icon__badge{position:absolute;right:-3px;bottom:-3px;width:50%;height:50%;min-width:8px;min-height:8px;max-width:12px;max-height:12px;border-radius:50%;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--success,.strct-icon__badge--critical,.strct-icon__badge--info,.strct-icon__badge--off,.strct-icon__badge--paused,.strct-icon__badge--running{display:flex;align-items:center;justify-content:center;font-size:clamp(6px,68%,10px);font-weight:800;line-height:1;color:var(--inv)}.strct-icon__badge--success{background:var(--success)}.strct-icon__badge--success:before{content:\"\\2713\"}.strct-icon__badge--warning{background:var(--warning);border-radius:1px;clip-path:polygon(50% 10%,92% 90%,8% 90%);box-shadow:none;filter:drop-shadow(0 0 1.5px var(--bg-1));right:-2px;bottom:-2px;width:60%;height:60%;min-width:11px;min-height:11px;max-width:18px;max-height:18px;display:flex;align-items:center;justify-content:center;font-size:clamp(6px,70%,10px);font-weight:800;color:var(--inv);line-height:1}.strct-icon__badge--warning:before{content:\"!\"}.strct-icon__badge--critical{background:var(--critical);border-radius:1px;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);box-shadow:none;filter:drop-shadow(0 0 1.5px var(--bg-1));width:58%;height:58%;min-width:10px;min-height:10px;max-width:15px;max-height:15px;font-size:clamp(6px,56%,9px)}.strct-icon__badge--critical:before{content:\"\\d7\"}.strct-icon__badge--running{background:var(--success)}.strct-icon__badge--running:before{content:\"\";width:46%;height:46%;min-width:4px;min-height:4px;background:var(--inv);clip-path:polygon(15% 2%,100% 50%,15% 98%);transform:translate(9%)}.strct-icon__badge--paused{background:var(--warning)}.strct-icon__badge--paused:before{content:\"\";width:1.6px;height:42%;min-height:4px;background:var(--inv);box-shadow:2.6px 0 0 var(--inv);transform:translate(-1.3px)}.strct-icon__badge--off{background:var(--t3)}.strct-icon__badge--off:before{content:\"\";width:40%;height:40%;min-width:3.5px;min-height:3.5px;background:var(--inv);border-radius:1px}.strct-icon__badge--info{background:var(--acc)}.strct-icon__badge--info:before{content:\"i\"}.strct-icon__badge--maintenance{background:var(--warning);right:-2px;bottom:-2px;width:58%;height:58%;min-width:10px;min-height:10px;max-width:16px;max-height:16px;display:flex;align-items:center;justify-content:center;padding:1px;box-shadow:0 0 0 1.5px var(--bg-1)}.strct-icon__badge--maintenance svg{width:84%;height:84%;color:var(--inv)}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /** Palette dots + light/dark pill, wired to {@link StrctThemeService}. */
@@ -8330,6 +8330,64 @@ function smoothPath(p) {
 function pathFor(pts, curve) {
     return curve === 'linear' ? linearPath(pts) : curve === 'step' ? stepPath(pts) : smoothPath(pts);
 }
+/** A real value — `null` and `NaN` both mark a data gap. */
+function isVal(v) {
+    return v != null && !Number.isNaN(v);
+}
+/** Split a nullable point array into contiguous non-gap segments. */
+function segs(pts) {
+    const out = [];
+    let cur = [];
+    for (const p of pts) {
+        if (p)
+            cur.push(p);
+        else if (cur.length) {
+            out.push(cur);
+            cur = [];
+        }
+    }
+    if (cur.length)
+        out.push(cur);
+    return out;
+}
+/** Line path that breaks at gaps (one sub-path per segment). */
+function pathForSegs(pts, curve) {
+    return segs(pts)
+        .map((s) => pathFor(s, curve))
+        .join('');
+}
+/** Area path per segment — the fill drops to the baseline at gap edges, never across. */
+function areaForSegs(pts, curve, base) {
+    return segs(pts)
+        .map((s) => `${pathFor(s, curve)}L${round$1(s[s.length - 1].x)},${round$1(base)}L${round$1(s[0].x)},${round$1(base)}Z`)
+        .join('');
+}
+/** Closed band between per-point upper and lower bounds (gap-aware). */
+function bandPath(upper, lower, curve) {
+    let out = '';
+    let u = [];
+    let l = [];
+    const flush = () => {
+        if (u.length > 1) {
+            const back = pathFor([...l].reverse(), curve).replace(/^M/, 'L');
+            out += pathFor(u, curve) + back + 'Z';
+        }
+        u = [];
+        l = [];
+    };
+    for (let i = 0; i < upper.length; i++) {
+        const up = upper[i];
+        const lo = lower[i];
+        if (up && lo) {
+            u.push(up);
+            l.push(lo);
+        }
+        else
+            flush();
+    }
+    flush();
+    return out;
+}
 /**
  * Single- or multi-series chart (line / area / bar). Dependency-free SVG,
  * token-coloured.
@@ -8346,7 +8404,7 @@ function pathFor(pts, curve) {
  *   <strct-chart [series]="[{data:inArr,label:'In'},{data:outArr,label:'Out'}]" legend />
  */
 class StrctChart {
-    /** Single-series data (or use `series`). */
+    /** Single-series data (or use `series`). `null` / `NaN` marks a gap — the line breaks. */
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     /** Multiple series; when set it takes precedence over `data`. */
     series = input(null, ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
@@ -8404,6 +8462,28 @@ class StrctChart {
      * `[valueFormat]="v => v.toFixed(3) + ' %'"`. When null, the raw value is shown.
      */
     valueFormat = input(null, ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
+    /** Vertical event / annotation markers ("alarm raised", "deploy", …). */
+    annotations = input([], ...(ngDevMode ? [{ debugName: "annotations" }] : /* istanbul ignore next */ []));
+    /**
+     * Drive the crosshair externally (e.g. mirror a sibling chart's hover for a
+     * vCenter-style synced dashboard). A local pointer wins while over this chart.
+     */
+    activeIndex = input(null, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** Drag-select a range; the selection is emitted through `brushChange`. */
+    brush = input(false, { ...(ngDevMode ? { debugName: "brush" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Drag-select **zooms into** the selected range (implies `brush`).
+     * Double-click, Escape or the reset chip zooms back out.
+     */
+    zoom = input(false, { ...(ngDevMode ? { debugName: "zoom" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Tooltip text for a gap (null) point. */
+    gapText = input('no data', ...(ngDevMode ? [{ debugName: "gapText" }] : /* istanbul ignore next */ []));
+    /** Accessible label of the reset-zoom chip (localizable). */
+    resetLabel = input('Reset zoom', ...(ngDevMode ? [{ debugName: "resetLabel" }] : /* istanbul ignore next */ []));
+    /** Emits the hovered point index (or null on leave) — wire cross-chart sync with it. */
+    hoverIndex = output();
+    /** Emits the brushed [startIndex, endIndex] (inclusive), or null when cleared. */
+    brushChange = output();
     pad = PAD;
     color = computed(() => COLOR$1[this.status()], ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     showArea = computed(() => this.area() || this.type() === 'area', ...(ngDevMode ? [{ debugName: "showArea" }] : /* istanbul ignore next */ []));
@@ -8420,8 +8500,22 @@ class StrctChart {
     firstData = true;
     /** Reactive OS motion preference (tracks live changes, not just first load). */
     reduceMotion = signal(typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches, ...(ngDevMode ? [{ debugName: "reduceMotion" }] : /* istanbul ignore next */ []));
-    // Hover state.
+    // Hover state. `hoverIdx` is the local pointer/keyboard index; `dispIdx` is
+    // what actually renders — local wins, else the externally driven activeIndex.
     hoverIdx = signal(null, ...(ngDevMode ? [{ debugName: "hoverIdx" }] : /* istanbul ignore next */ []));
+    dispIdx = computed(() => {
+        const local = this.hoverIdx();
+        const i = local ?? this.activeIndex();
+        if (i == null)
+            return null;
+        const [s, e] = this.domain();
+        return i >= s && i <= e ? i : null;
+    }, ...(ngDevMode ? [{ debugName: "dispIdx" }] : /* istanbul ignore next */ []));
+    // Zoom / brush state (indices are always in the full-data domain).
+    viewRange = signal(null, ...(ngDevMode ? [{ debugName: "viewRange" }] : /* istanbul ignore next */ []));
+    brushDrag = signal(null, ...(ngDevMode ? [{ debugName: "brushDrag" }] : /* istanbul ignore next */ []));
+    brushEnabled = computed(() => this.brush() || this.zoom(), ...(ngDevMode ? [{ debugName: "brushEnabled" }] : /* istanbul ignore next */ []));
+    zoomed = computed(() => this.viewRange() !== null, ...(ngDevMode ? [{ debugName: "zoomed" }] : /* istanbul ignore next */ []));
     constructor() {
         const destroyRef = inject(DestroyRef);
         if (typeof matchMedia !== 'undefined') {
@@ -8481,6 +8575,16 @@ class StrctChart {
     isEmpty = computed(() => this.allData().every((d) => d.length === 0), ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
     /** Number of x slots. */
     nx = computed(() => Math.max(1, ...this.allData().map((d) => d.length)), ...(ngDevMode ? [{ debugName: "nx" }] : /* istanbul ignore next */ []));
+    /** Visible index window: the brush-zoom range, or the full data. */
+    domain = computed(() => {
+        const n = this.nx();
+        const vr = this.viewRange();
+        if (!vr)
+            return [0, n - 1];
+        const s = Math.max(0, Math.min(vr[0], n - 1));
+        const e = Math.max(s, Math.min(vr[1], n - 1));
+        return e > s ? [s, e] : [0, n - 1];
+    }, ...(ngDevMode ? [{ debugName: "domain" }] : /* istanbul ignore next */ []));
     /** Left padding: wider when the y-axis labels are shown. */
     pl = computed(() => (this.yAxis() ? Y_AXIS_GUTTER : PAD.l), ...(ngDevMode ? [{ debugName: "pl" }] : /* istanbul ignore next */ []));
     chartW() {
@@ -8489,16 +8593,46 @@ class StrctChart {
     chartH() {
         return this.height() - PAD.t - PAD.b;
     }
-    /** Horizontal gap between two data points, in px. */
+    /** Horizontal gap between two data points, in px (of the visible window). */
     stepX() {
-        const n = this.nx();
-        return n > 1 ? this.chartW() / (n - 1) : 0;
+        const [s, e] = this.domain();
+        return e > s ? this.chartW() / (e - s) : 0;
     }
+    /** Real values inside the visible window (multi-aware; bands included). */
+    visibleValues = computed(() => {
+        const [s, e] = this.domain();
+        const out = [];
+        const push = (v) => {
+            if (isVal(v))
+                out.push(v);
+        };
+        const ser = this.seriesResolved();
+        if (ser) {
+            const N = this.nx();
+            for (const x of ser) {
+                const data = x.data ?? [];
+                const offset = N - data.length;
+                for (let gi = Math.max(s, offset); gi <= e; gi++) {
+                    const li = gi - offset;
+                    if (li < 0 || li >= data.length)
+                        continue;
+                    push(data[li]);
+                    push(x.upper?.[li]);
+                }
+            }
+        }
+        else {
+            const d = this.data();
+            for (let i = s; i <= Math.min(e, d.length - 1); i++)
+                push(d[i]);
+        }
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "visibleValues" }] : /* istanbul ignore next */ []));
     yMax = computed(() => {
         const explicit = this.max();
         if (explicit != null)
             return explicit || 1;
-        const m = Math.max(0, ...this.allData().flat());
+        const m = Math.max(0, ...this.visibleValues());
         return m === 0 ? 1 : m * 1.1;
     }, ...(ngDevMode ? [{ debugName: "yMax" }] : /* istanbul ignore next */ []));
     yMin = computed(() => this.min() ?? 0, ...(ngDevMode ? [{ debugName: "yMin" }] : /* istanbul ignore next */ []));
@@ -8509,50 +8643,46 @@ class StrctChart {
         const c = Math.max(lo, Math.min(hi, v));
         return PAD.t + (1 - (c - lo) / range) * this.chartH();
     }
-    // ── Single-series geometry (unchanged output) ─────────────────
+    // ── Single-series geometry (gap-aware; null keeps its x-slot) ──
     points = computed(() => {
         const d = this.data();
-        const step = this.stepX();
-        const pl = this.pl();
-        return d.map((v, i) => ({ x: pl + i * step, y: this.yOf(v) }));
+        return d.map((v, i) => (isVal(v) ? { x: this.xOf(i), y: this.yOf(v) } : null));
     }, ...(ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []));
+    /** Non-gap points only (dot rendering). */
+    dotPts = computed(() => this.points().filter((p) => p !== null), ...(ngDevMode ? [{ debugName: "dotPts" }] : /* istanbul ignore next */ []));
     head = computed(() => {
         const p = this.points();
-        return p.length ? p[p.length - 1] : null;
+        for (let i = p.length - 1; i >= 0; i--)
+            if (p[i])
+                return p[i];
+        return null;
     }, ...(ngDevMode ? [{ debugName: "head" }] : /* istanbul ignore next */ []));
     plotPoints = computed(() => {
         const p = this.points();
-        if (!this.live() || p.length < 2)
+        if (!this.live() || p.length < 2 || !p[0])
             return p;
         return [{ x: p[0].x - this.stepX(), y: p[0].y }, ...p];
     }, ...(ngDevMode ? [{ debugName: "plotPoints" }] : /* istanbul ignore next */ []));
-    linePath = computed(() => pathFor(this.plotPoints(), this.curve()), ...(ngDevMode ? [{ debugName: "linePath" }] : /* istanbul ignore next */ []));
-    areaPath = computed(() => {
-        const line = this.linePath();
-        const p = this.plotPoints();
-        if (!line || !p.length)
-            return '';
-        const base = this.height() - PAD.b;
-        return `${line}L${round$1(p[p.length - 1].x)},${round$1(base)}L${round$1(p[0].x)},${round$1(base)}Z`;
-    }, ...(ngDevMode ? [{ debugName: "areaPath" }] : /* istanbul ignore next */ []));
+    linePath = computed(() => pathForSegs(this.plotPoints(), this.curve()), ...(ngDevMode ? [{ debugName: "linePath" }] : /* istanbul ignore next */ []));
+    areaPath = computed(() => areaForSegs(this.plotPoints(), this.curve(), this.height() - PAD.b), ...(ngDevMode ? [{ debugName: "areaPath" }] : /* istanbul ignore next */ []));
     // ── Multi-series geometry ─────────────────────────────────────
     multiSeries = computed(() => {
         const s = this.seriesResolved();
         if (!s)
             return [];
         const N = this.nx();
-        const step = this.stepX();
-        const pl = this.pl();
         const base = this.height() - PAD.b;
         return s.map((x) => {
             const data = x.data ?? [];
             const offset = N - data.length; // right-align shorter series
-            const pts = data.map((v, i) => ({ x: pl + (offset + i) * step, y: this.yOf(v) }));
+            const ptOf = (v, i) => isVal(v) ? { x: this.xOf(offset + i), y: this.yOf(v) } : null;
+            const pts = data.map((v, i) => ptOf(v, i));
             const curve = x.curve ?? this.curve();
-            const path = pathFor(pts, curve);
+            const path = pathForSegs(pts, curve);
             const area = x.area ?? false;
-            const areaPath = area && pts.length
-                ? `${path}L${round$1(pts[pts.length - 1].x)},${round$1(base)}L${round$1(pts[0].x)},${round$1(base)}Z`
+            const areaPath = area ? areaForSegs(pts, curve, base) : '';
+            const band = x.lower && x.upper
+                ? bandPath(x.upper.map((v, i) => ptOf(v, i)), x.lower.map((v, i) => ptOf(v, i)), curve)
                 : '';
             return {
                 color: COLOR$1[x.status ?? this.status()],
@@ -8562,26 +8692,42 @@ class StrctChart {
                 pts,
                 path,
                 areaPath,
+                bandPath: band,
                 offset,
                 data,
+                lower: x.lower,
+                upper: x.upper,
             };
         });
     }, ...(ngDevMode ? [{ debugName: "multiSeries" }] : /* istanbul ignore next */ []));
     legendItems = computed(() => this.multiSeries()
         .filter((s) => s.label)
         .map((s) => ({ label: s.label, color: s.color, dash: s.dash })), ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
-    // ── Bars (single-series only) ─────────────────────────────────
+    // ── Bars (single-series only; gaps render no bar, keep their slot) ──
     bars = computed(() => {
         const d = this.data();
+        const [s, e] = this.domain();
         const chartW = this.chartW();
         const base = this.height() - PAD.b;
-        const slot = d.length ? chartW / d.length : chartW;
+        const last = Math.min(e, d.length - 1);
+        const count = Math.max(1, last - s + 1);
+        const slot = chartW / count;
         const w = slot * 0.6;
         const pl = this.pl();
-        return d.map((v, i) => {
+        const out = [];
+        for (let i = s; i <= last; i++) {
+            const v = d[i];
+            if (!isVal(v))
+                continue;
             const h = ((Math.max(0, v) - this.yMin()) / (this.yMax() - this.yMin() || 1)) * this.chartH();
-            return { x: pl + i * slot + (slot - w) / 2, y: base - Math.max(0, h), w, h: Math.max(0, h) };
-        });
+            out.push({
+                x: pl + (i - s) * slot + (slot - w) / 2,
+                y: base - Math.max(0, h),
+                w,
+                h: Math.max(0, h),
+            });
+        }
+        return out;
     }, ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
     // ── Axes ───────────────────────────────────────────────────────
     gridY = computed(() => {
@@ -8616,34 +8762,49 @@ class StrctChart {
         const ls = this.labels();
         const fmt = this.xFormat();
         const xt = this.xTicks();
-        let items;
-        if (xt && xt > 1 && ls.length > xt) {
-            const stepI = (ls.length - 1) / (xt - 1);
-            const idxs = Array.from(new Set(Array.from({ length: xt }, (_, k) => Math.round(k * stepI))));
-            items = idxs.map((i) => ({ l: ls[i], i }));
+        const [s, e] = this.domain();
+        const last = Math.min(e, ls.length - 1);
+        let idxs;
+        if (xt && xt > 1 && last - s + 1 > xt) {
+            const stepI = (last - s) / (xt - 1);
+            idxs = Array.from(new Set(Array.from({ length: xt }, (_, k) => s + Math.round(k * stepI))));
         }
         else {
-            items = ls.map((l, i) => ({ l, i }));
-        }
-        return items.map(({ l, i }) => ({ text: fmt ? fmt(l, i) : l, i }));
+            idxs = Array.from({ length: Math.max(0, last - s + 1) }, (_, k) => s + k);
+        }
+        return idxs
+            .filter((i) => i >= 0 && i < ls.length)
+            .map((i) => ({
+            text: fmt ? fmt(ls[i], i) : ls[i],
+            i,
+        }));
     }, ...(ngDevMode ? [{ debugName: "displayLabels" }] : /* istanbul ignore next */ []));
-    // ── Hover ──────────────────────────────────────────────────────
+    // ── Hover (driven by dispIdx: local pointer, else external activeIndex) ──
     hoverX = computed(() => {
-        const i = this.hoverIdx();
+        const i = this.dispIdx();
         if (i == null)
             return null;
-        return this.pl() + i * this.stepX();
+        return this.xOf(i);
     }, ...(ngDevMode ? [{ debugName: "hoverX" }] : /* istanbul ignore next */ []));
     hoverPt = computed(() => {
-        const i = this.hoverIdx();
+        const i = this.dispIdx();
         const p = this.points();
         return i != null && i >= 0 && i < p.length ? p[i] : null;
     }, ...(ngDevMode ? [{ debugName: "hoverPt" }] : /* istanbul ignore next */ []));
     hoverValue = computed(() => {
-        const i = this.hoverIdx();
+        const i = this.dispIdx();
         const d = this.data();
-        return i != null && i >= 0 && i < d.length ? d[i] : '';
+        const v = i != null && i >= 0 && i < d.length ? d[i] : null;
+        return isVal(v) ? v : '';
     }, ...(ngDevMode ? [{ debugName: "hoverValue" }] : /* istanbul ignore next */ []));
+    /** The hovered slot exists but holds a gap (single-series). */
+    hoverGap = computed(() => {
+        const i = this.dispIdx();
+        if (i == null || this.isMulti())
+            return false;
+        const d = this.data();
+        return i >= 0 && i < d.length && !isVal(d[i]);
+    }, ...(ngDevMode ? [{ debugName: "hoverGap" }] : /* istanbul ignore next */ []));
     /** hoverValue run through valueFormat (unit / precision), else the raw value. */
     hoverValueText = computed(() => {
         const v = this.hoverValue();
@@ -8658,20 +8819,24 @@ class StrctChart {
         return f ? f(this.absDelta()) : String(this.absDelta());
     }, ...(ngDevMode ? [{ debugName: "absDeltaText" }] : /* istanbul ignore next */ []));
     hoverLabel = computed(() => {
-        const i = this.hoverIdx();
+        const i = this.dispIdx();
         const l = this.labels();
         return i != null && i >= 0 && i < l.length ? l[i] : '';
     }, ...(ngDevMode ? [{ debugName: "hoverLabel" }] : /* istanbul ignore next */ []));
-    /** Change from the previous point (single-series; null at the first point). */
+    /** Change from the previous point (single-series; null at the first point or across a gap). */
     hoverDelta = computed(() => {
-        const i = this.hoverIdx();
+        const i = this.dispIdx();
         const d = this.data();
-        return i != null && i > 0 && i < d.length ? d[i] - d[i - 1] : null;
+        if (i == null || i <= 0 || i >= d.length)
+            return null;
+        const cur = d[i];
+        const prev = d[i - 1];
+        return isVal(cur) && isVal(prev) ? cur - prev : null;
     }, ...(ngDevMode ? [{ debugName: "hoverDelta" }] : /* istanbul ignore next */ []));
     absDelta = computed(() => Math.abs(this.hoverDelta() ?? 0), ...(ngDevMode ? [{ debugName: "absDelta" }] : /* istanbul ignore next */ []));
     /** Second tooltip line: "Xs ago" while live, else the x label. */
     hoverMeta = computed(() => {
-        const i = this.hoverIdx();
+        const i = this.dispIdx();
         if (i == null)
             return '';
         if (this.live()) {
@@ -8684,59 +8849,102 @@ class StrctChart {
         const l = this.labels();
         return i >= 0 && i < l.length ? l[i] : '';
     }, ...(ngDevMode ? [{ debugName: "hoverMeta" }] : /* istanbul ignore next */ []));
-    /** Per-series value at the hovered index (multi-series tooltip). */
+    /** Per-series value at the hovered index (multi-series tooltip; bands as `avg (min–max)`). */
     hoverRows = computed(() => {
-        const i = this.hoverIdx();
+        const i = this.dispIdx();
         const s = this.multiSeries();
         if (i == null || !s.length)
             return [];
         const f = this.valueFormat();
+        const fmt = (v) => (f ? f(v) : String(v));
         return s
             .map((x) => {
             const li = i - x.offset;
-            const v = li >= 0 && li < x.data.length ? x.data[li] : null;
+            const raw = li >= 0 && li < x.data.length ? x.data[li] : null;
+            const v = isVal(raw) ? raw : null;
+            const lo = x.lower?.[li];
+            const hi = x.upper?.[li];
+            const band = isVal(lo) && isVal(hi) ? ` (${fmt(lo)}–${fmt(hi)})` : '';
             return {
                 label: x.label,
                 color: x.color,
                 value: v,
-                text: v == null ? '' : f ? f(v) : String(v),
+                text: v == null ? '' : fmt(v) + band,
             };
         })
             .filter((r) => r.value !== null);
     }, ...(ngDevMode ? [{ debugName: "hoverRows" }] : /* istanbul ignore next */ []));
     /** Per-series hover dots (multi-series). */
     hoverDots = computed(() => {
-        const i = this.hoverIdx();
+        const i = this.dispIdx();
         const s = this.multiSeries();
         if (i == null || !s.length)
             return [];
         return s
             .map((x) => {
             const li = i - x.offset;
-            return li >= 0 && li < x.pts.length
-                ? { x: x.pts[li].x, y: x.pts[li].y, color: x.color }
-                : null;
+            const p = li >= 0 && li < x.pts.length ? x.pts[li] : null;
+            return p ? { x: p.x, y: p.y, color: x.color } : null;
         })
             .filter((d) => d !== null);
     }, ...(ngDevMode ? [{ debugName: "hoverDots" }] : /* istanbul ignore next */ []));
+    // ── Annotations ────────────────────────────────────────────────
+    annotationLines = computed(() => {
+        const [s, e] = this.domain();
+        return this.annotations()
+            .filter((a) => a.index >= s && a.index <= e)
+            .map((a) => ({
+            x: this.xOf(a.index),
+            color: COLOR$1[a.status ?? 'accent'],
+            dashed: a.dashed ?? true,
+            label: a.label ?? '',
+            index: a.index,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "annotationLines" }] : /* istanbul ignore next */ []));
+    /** The annotation sitting exactly under the crosshair, if any. */
+    annAt = computed(() => {
+        const i = this.dispIdx();
+        if (i == null)
+            return null;
+        return this.annotationLines().find((a) => a.index === i && a.label) ?? null;
+    }, ...(ngDevMode ? [{ debugName: "annAt" }] : /* istanbul ignore next */ []));
+    // ── Brush / zoom ───────────────────────────────────────────────
+    brushRect = computed(() => {
+        const d = this.brushDrag();
+        if (!d)
+            return null;
+        const x1 = this.xOf(Math.min(d.a, d.b));
+        const x2 = this.xOf(Math.max(d.a, d.b));
+        return { x: round$1(x1), w: round$1(Math.max(1, x2 - x1)) };
+    }, ...(ngDevMode ? [{ debugName: "brushRect" }] : /* istanbul ignore next */ []));
+    /** Zoom back out to the full data window (also emits `brushChange` null). */
+    resetZoom() {
+        this.brushDrag.set(null);
+        if (this.viewRange() !== null) {
+            this.viewRange.set(null);
+            this.brushChange.emit(null);
+        }
+    }
     /** Screen-reader summary of the whole chart (role="img" name). */
     chartAria = computed(() => {
         const f = this.valueFormat() ?? ((v) => String(Math.round(v * 100) / 100));
         if (this.isMulti()) {
             const parts = this.multiSeries().map((s) => {
-                const last = s.data.length ? f(s.data[s.data.length - 1]) : '';
+                const reals = s.data.filter(isVal);
+                const last = reals.length ? f(reals[reals.length - 1]) : '';
                 return `${s.label || 'series'} latest ${last}`;
             });
             return `Chart, ${this.multiSeries().length} series: ${parts.join('; ')}`;
         }
         const d = this.data();
-        if (!d.length)
+        const reals = d.filter(isVal);
+        if (!reals.length)
             return this.emptyText();
-        return `Chart, ${d.length} points. Min ${f(Math.min(...d))}, max ${f(Math.max(...d))}, latest ${f(d[d.length - 1])}`;
+        return `Chart, ${d.length} points. Min ${f(Math.min(...reals))}, max ${f(Math.max(...reals))}, latest ${f(reals[reals.length - 1])}`;
     }, ...(ngDevMode ? [{ debugName: "chartAria" }] : /* istanbul ignore next */ []));
     /** aria-live text announcing the hovered / keyboard-selected point. */
     srText = computed(() => {
-        const i = this.hoverIdx();
+        const i = this.dispIdx();
         if (i == null)
             return '';
         if (this.isMulti()) {
@@ -8746,61 +8954,221 @@ class StrctChart {
             return `${this.hoverMeta() || 'point ' + (i + 1)}: ${rows}`;
         }
         const meta = this.hoverMeta();
-        return `${meta ? meta + ': ' : ''}${this.hoverValueText()}`;
+        const value = this.hoverGap() ? this.gapText() : this.hoverValueText();
+        return `${meta ? meta + ': ' : ''}${value}`;
     }, ...(ngDevMode ? [{ debugName: "srText" }] : /* istanbul ignore next */ []));
-    /** Pixel x of a data index (shared by the plot and the x-axis labels). */
+    /** Pixel x of a data index (shared by the plot, labels and annotations). */
     xOf(i) {
-        return this.pl() + i * this.stepX();
+        const [s] = this.domain();
+        return this.pl() + (i - s) * this.stepX();
+    }
+    /** Set the local hover index, emitting `hoverIndex` on change. */
+    setHover(i) {
+        if (i === this.hoverIdx())
+            return;
+        this.hoverIdx.set(i);
+        this.hoverIndex.emit(i);
+    }
+    onLeave() {
+        this.setHover(null);
     }
-    /** Keyboard access to the crosshair: arrows walk the points. */
+    /** Keyboard access: arrows walk the points; Escape unwinds brush → zoom → crosshair. */
     onKey(event) {
-        if (!this.interactive() || this.type() === 'bar')
+        if (event.key === 'Escape') {
+            if (this.brushDrag()) {
+                this.brushDrag.set(null);
+            }
+            else if (this.zoomed()) {
+                this.resetZoom();
+            }
+            else {
+                this.setHover(null);
+            }
             return;
-        const n = this.nx();
-        if (!n)
+        }
+        if (!this.interactive() || this.type() === 'bar')
             return;
+        const [s, e] = this.domain();
         const cur = this.hoverIdx();
         let next = null;
         switch (event.key) {
             case 'ArrowRight':
-                next = cur == null ? 0 : Math.min(n - 1, cur + 1);
+                next = cur == null ? s : Math.min(e, cur + 1);
                 break;
             case 'ArrowLeft':
-                next = cur == null ? n - 1 : Math.max(0, cur - 1);
+                next = cur == null ? e : Math.max(s, cur - 1);
                 break;
             case 'Home':
-                next = 0;
+                next = s;
                 break;
             case 'End':
-                next = n - 1;
+                next = e;
                 break;
-            case 'Escape':
-                this.hoverIdx.set(null);
-                return;
             default:
                 return;
         }
         event.preventDefault();
-        this.hoverIdx.set(next);
+        this.setHover(next);
     }
-    onMove(event) {
-        if (!this.interactive() || (this.type() === 'bar' && !this.isMulti()))
-            return;
+    /** Data index under the pointer, clamped to the visible window. */
+    idxAt(event) {
         const el = this.svgRef()?.nativeElement;
-        const n = this.nx();
         if (!el || this.isEmpty())
-            return;
+            return null;
         const rect = el.getBoundingClientRect();
         if (!rect.width)
-            return;
+            return null;
         const plFrac = this.pl() / this.width();
         const rFrac = PAD.r / this.width();
         const fx = ((event.clientX - rect.left) / rect.width - plFrac) / (1 - plFrac - rFrac);
-        const idx = Math.max(0, Math.min(n - 1, Math.round(fx * (n - 1))));
-        this.hoverIdx.set(idx);
+        const [s, e] = this.domain();
+        return Math.max(s, Math.min(e, s + Math.round(fx * (e - s))));
+    }
+    onDown(event) {
+        if (!this.brushEnabled() || this.isEmpty())
+            return;
+        const i = this.idxAt(event);
+        if (i == null)
+            return;
+        event.currentTarget?.setPointerCapture?.(event.pointerId);
+        this.brushDrag.set({ a: i, b: i });
+        this.setHover(null);
+        event.preventDefault();
+    }
+    onMove(event) {
+        const drag = this.brushDrag();
+        if (drag) {
+            const i = this.idxAt(event);
+            if (i != null && i !== drag.b)
+                this.brushDrag.set({ a: drag.a, b: i });
+            return;
+        }
+        if (!this.interactive() || (this.type() === 'bar' && !this.isMulti()))
+            return;
+        const i = this.idxAt(event);
+        if (i != null)
+            this.setHover(i);
+    }
+    onUp() {
+        const d = this.brushDrag();
+        if (!d)
+            return;
+        this.brushDrag.set(null);
+        const lo = Math.min(d.a, d.b);
+        const hi = Math.max(d.a, d.b);
+        if (hi - lo < 1)
+            return; // a click, not a selection
+        if (this.zoom())
+            this.viewRange.set([lo, hi]);
+        this.brushChange.emit([lo, hi]);
+    }
+    onDblClick() {
+        if (this.brushEnabled())
+            this.resetZoom();
+    }
+    // ── Export (FR-CHART-13) ───────────────────────────────────────
+    /**
+     * The rendered chart as a standalone SVG string — theme colors resolved to
+     * literals, background baked in, y-tick / x-label text included.
+     */
+    toSVG() {
+        const svg = this.svgRef()?.nativeElement;
+        if (!svg || typeof getComputedStyle === 'undefined')
+            return '';
+        const doc = svg.ownerDocument;
+        const NS = 'http://www.w3.org/2000/svg';
+        const clone = svg.cloneNode(true);
+        clone.setAttribute('xmlns', NS);
+        clone.removeAttribute('class');
+        clone.removeAttribute('style');
+        clone.removeAttribute('tabindex');
+        const PROPS = [
+            'stroke',
+            'fill',
+            'stroke-width',
+            'stroke-dasharray',
+            'stroke-linecap',
+            'stroke-linejoin',
+            'opacity',
+            'fill-opacity',
+            'stroke-opacity',
+        ];
+        const src = Array.from(svg.querySelectorAll('*'));
+        const dst = Array.from(clone.querySelectorAll('*'));
+        src.forEach((el, i) => {
+            const cs = getComputedStyle(el);
+            for (const p of PROPS) {
+                const v = cs.getPropertyValue(p);
+                if (v)
+                    dst[i].setAttribute(p, v);
+            }
+            dst[i].removeAttribute('class');
+        });
+        const rootCs = getComputedStyle(svg);
+        const bg = rootCs.getPropertyValue('--bg-1').trim();
+        const fg = rootCs.getPropertyValue('--t3').trim() || '#888';
+        const hasLabels = this.displayLabels().length > 0;
+        const w = this.width();
+        const h = this.height() + (hasLabels ? 18 : 0);
+        clone.setAttribute('viewBox', `0 0 ${w} ${h}`);
+        clone.setAttribute('width', String(w));
+        clone.setAttribute('height', String(h));
+        if (bg) {
+            const rect = doc.createElementNS(NS, 'rect');
+            rect.setAttribute('width', String(w));
+            rect.setAttribute('height', String(h));
+            rect.setAttribute('fill', bg);
+            clone.insertBefore(rect, clone.firstChild);
+        }
+        const text = (x, y, content, anchor) => {
+            const t = doc.createElementNS(NS, 'text');
+            t.setAttribute('x', String(round$1(x)));
+            t.setAttribute('y', String(round$1(y)));
+            t.setAttribute('fill', fg);
+            t.setAttribute('font-size', '10');
+            t.setAttribute('font-family', 'monospace');
+            t.setAttribute('text-anchor', anchor);
+            t.textContent = content;
+            clone.appendChild(t);
+        };
+        for (const tick of this.yAxisTicks())
+            text(this.pl() - 6, tick.y + 3.5, tick.text, 'end');
+        if (hasLabels) {
+            for (const l of this.displayLabels())
+                text(this.xOf(l.i), this.height() + 12, l.text, 'middle');
+        }
+        return new XMLSerializer().serializeToString(clone);
+    }
+    /** The chart as a PNG data URL at the given scale (default 2×). */
+    toPNG(scale = 2) {
+        const s = this.toSVG();
+        const w = this.width();
+        const h = this.height() + (this.displayLabels().length ? 18 : 0);
+        return new Promise((resolve, reject) => {
+            if (!s) {
+                reject(new Error('chart is not rendered'));
+                return;
+            }
+            const img = new Image();
+            img.onload = () => {
+                const canvas = document.createElement('canvas');
+                canvas.width = Math.round(w * scale);
+                canvas.height = Math.round(h * scale);
+                const ctx = canvas.getContext('2d');
+                if (!ctx) {
+                    reject(new Error('no 2d canvas context'));
+                    return;
+                }
+                ctx.scale(scale, scale);
+                ctx.drawImage(img, 0, 0);
+                resolve(canvas.toDataURL('image/png'));
+            };
+            img.onerror = () => reject(new Error('SVG rasterization failed'));
+            img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(s);
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctChart, isStandalone: true, selector: "strct-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, glow: { classPropertyName: "glow", publicName: "glow", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, dots: { classPropertyName: "dots", publicName: "dots", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, xTicks: { classPropertyName: "xTicks", publicName: "xTicks", isSignal: true, isRequired: false, transformFunction: null }, xFormat: { classPropertyName: "xFormat", publicName: "xFormat", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, yAxis: { classPropertyName: "yAxis", publicName: "yAxis", isSignal: true, isRequired: false, transformFunction: null }, yTicks: { classPropertyName: "yTicks", publicName: "yTicks", isSignal: true, isRequired: false, transformFunction: null }, axisFormat: { classPropertyName: "axisFormat", publicName: "axisFormat", isSignal: true, isRequired: false, transformFunction: null }, thresholds: { classPropertyName: "thresholds", publicName: "thresholds", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, agoFormat: { classPropertyName: "agoFormat", publicName: "agoFormat", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-chart--glow": "glow()", "style.--strct-chart-c": "color()" }, classAttribute: "strct-chart" }, viewQueries: [{ propertyName: "svgRef", first: true, predicate: ["svg"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctChart, isStandalone: true, selector: "strct-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, glow: { classPropertyName: "glow", publicName: "glow", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, dots: { classPropertyName: "dots", publicName: "dots", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, xTicks: { classPropertyName: "xTicks", publicName: "xTicks", isSignal: true, isRequired: false, transformFunction: null }, xFormat: { classPropertyName: "xFormat", publicName: "xFormat", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, yAxis: { classPropertyName: "yAxis", publicName: "yAxis", isSignal: true, isRequired: false, transformFunction: null }, yTicks: { classPropertyName: "yTicks", publicName: "yTicks", isSignal: true, isRequired: false, transformFunction: null }, axisFormat: { classPropertyName: "axisFormat", publicName: "axisFormat", isSignal: true, isRequired: false, transformFunction: null }, thresholds: { classPropertyName: "thresholds", publicName: "thresholds", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, agoFormat: { classPropertyName: "agoFormat", publicName: "agoFormat", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, annotations: { classPropertyName: "annotations", publicName: "annotations", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, brush: { classPropertyName: "brush", publicName: "brush", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, gapText: { classPropertyName: "gapText", publicName: "gapText", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hoverIndex: "hoverIndex", brushChange: "brushChange" }, host: { properties: { "class.strct-chart--glow": "glow()", "class.strct-chart--brush": "brush() || zoom()", "style.--strct-chart-c": "color()" }, classAttribute: "strct-chart" }, viewQueries: [{ propertyName: "svgRef", first: true, predicate: ["svg"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (isEmpty()) {
       <div class="strct-chart__empty" [style.height.px]="height()">{{ emptyText() }}</div>
     } @else {
@@ -8835,10 +9203,14 @@ class StrctChart {
           [attr.width]="width()"
           [attr.height]="height()"
           [style.height.px]="height()"
+          (pointerdown)="onDown($event)"
           (pointermove)="onMove($event)"
-          (pointerleave)="hoverIdx.set(null)"
+          (pointerup)="onUp()"
+          (lostpointercapture)="onUp()"
+          (pointerleave)="onLeave()"
+          (dblclick)="onDblClick()"
           (keydown)="onKey($event)"
-          (blur)="hoverIdx.set(null)"
+          (blur)="onLeave()"
         >
           <defs>
             <linearGradient [attr.id]="gradId" x1="0" y1="0" x2="0" y2="1">
@@ -8862,6 +9234,19 @@ class StrctChart {
             }
           }
 
+          <!-- Event / annotation markers: behind the data, above the grid. -->
+          @for (a of annotationLines(); track $index) {
+            <line
+              class="strct-chart__ann"
+              [class.strct-chart__ann--dashed]="a.dashed"
+              [attr.x1]="a.x"
+              [attr.x2]="a.x"
+              [attr.y1]="pad.t"
+              [attr.y2]="height() - pad.b"
+              [attr.stroke]="a.color"
+            />
+          }
+
           @if (type() === 'bar' && !isMulti()) {
             @for (b of bars(); track $index) {
               <rect
@@ -8882,6 +9267,9 @@ class StrctChart {
               >
                 @if (isMulti()) {
                   @for (s of multiSeries(); track $index) {
+                    @if (s.bandPath) {
+                      <path class="strct-chart__band" [attr.d]="s.bandPath" [attr.fill]="s.color" />
+                    }
                     @if (s.area && s.areaPath) {
                       <path
                         class="strct-chart__area strct-chart__area--flat"
@@ -8916,7 +9304,7 @@ class StrctChart {
                     [attr.stroke]="color()"
                   />
                   @if (dots()) {
-                    @for (p of points(); track $index) {
+                    @for (p of dotPts(); track $index) {
                       <circle
                         class="strct-chart__dot"
                         [attr.cx]="p.x"
@@ -8942,6 +9330,16 @@ class StrctChart {
               />
             }
 
+            @if (brushRect(); as br) {
+              <rect
+                class="strct-chart__brush"
+                [attr.x]="br.x"
+                [attr.y]="pad.t"
+                [attr.width]="br.w"
+                [attr.height]="height() - pad.t - pad.b"
+              />
+            }
+
             @if (interactive() && hoverX() !== null) {
               <line
                 class="strct-chart__cross"
@@ -9002,12 +9400,29 @@ class StrctChart {
           }
         }
 
+        @for (a of annotationLines(); track $index) {
+          @if (a.label) {
+            <div class="strct-chart__ann-label" [style.left.px]="a.x" [style.color]="a.color">
+              {{ a.label }}
+            </div>
+          }
+        }
+
+        @if (zoomed()) {
+          <button type="button" class="strct-chart__reset" (click)="resetZoom()">
+            ⟲ {{ resetLabel() }}
+          </button>
+        }
+
         @if (interactive() && hoverX() !== null) {
           @if (isMulti()) {
             <div class="strct-chart__tip strct-chart__tip--multi" [style.left.px]="hoverX()">
               @if (hoverMeta()) {
                 <span class="strct-chart__tip-l">{{ hoverMeta() }}</span>
               }
+              @if (annAt(); as ann) {
+                <span class="strct-chart__tip-ann" [style.color]="ann.color">{{ ann.label }}</span>
+              }
               @for (r of hoverRows(); track r.label) {
                 <span class="strct-chart__tip-row">
                   <span class="strct-chart__tip-sw" [style.background]="r.color"></span>
@@ -9039,6 +9454,17 @@ class StrctChart {
                   }
                 </span>
               }
+              @if (annAt(); as ann) {
+                <span class="strct-chart__tip-ann" [style.color]="ann.color">{{ ann.label }}</span>
+              }
+            </div>
+          } @else if (hoverGap()) {
+            <!-- A gap point: keep the time slot, say "no data" instead of a value. -->
+            <div class="strct-chart__tip strct-chart__tip--gap" [style.left.px]="hoverX()">
+              <span class="strct-chart__tip-v">{{ gapText() }}</span>
+              @if (hoverMeta()) {
+                <span class="strct-chart__tip-l">{{ hoverMeta() }}</span>
+              }
             </div>
           }
         }
@@ -9053,7 +9479,7 @@ class StrctChart {
         <div class="strct-chart__labels">
           @for (l of displayLabels(); track $index) {
             <span
-              [class.strct-chart__label--active]="interactive() && hoverIdx() === l.i"
+              [class.strct-chart__label--active]="interactive() && dispIdx() === l.i"
               [style.left.px]="xOf(l.i)"
               >{{ l.text }}</span
             >
@@ -9061,7 +9487,7 @@ class StrctChart {
         </div>
       }
     }
-  `, isInline: true, styles: [".strct-chart{display:block;position:relative}.strct-chart__plot{position:relative}.strct-chart__svg{width:100%;display:block;touch-action:none}.strct-chart__svg:focus-visible{outline:2px solid var(--acc50);outline-offset:2px;border-radius:var(--radius-sm)}.strct-chart__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-chart__empty{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--t3)}.strct-chart__grid{stroke:var(--b1);stroke-width:1;vector-effect:non-scaling-stroke}.strct-chart__line{vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}.strct-chart__area{stroke:none}.strct-chart__area--flat{opacity:.14}.strct-chart__dot,.strct-chart__hoverdot,.strct-chart__head-dot{stroke:var(--bg-1);stroke-width:1.5}.strct-chart__cross{stroke:var(--strct-chart-c);stroke-width:1;opacity:.4;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}.strct-chart__threshold{stroke-width:1;opacity:.85;vector-effect:non-scaling-stroke}.strct-chart__threshold--dashed{stroke-dasharray:4 3}.strct-chart__bar{rx:1.5}.strct-chart--glow .strct-chart__line{filter:drop-shadow(0 0 1.5px var(--strct-chart-c)) drop-shadow(0 0 5px var(--strct-chart-c))}.strct-chart--glow .strct-chart__head-dot{filter:drop-shadow(0 0 2px var(--strct-chart-c)) drop-shadow(0 0 6px var(--strct-chart-c))}.strct-chart--glow .strct-chart__hoverdot{filter:drop-shadow(0 0 4px var(--strct-chart-c))}.strct-chart__ytick{position:absolute;left:0;width:34px;text-align:end;transform:translateY(-50%);pointer-events:none;font-family:var(--mono);font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}.strct-chart__thr{position:absolute;right:2px;transform:translateY(-50%);pointer-events:none;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--bg-1);padding:0 3px;border-radius:3px}.strct-chart__axis-y{position:absolute;left:0;transform:translateY(-50%);pointer-events:none;padding:1px 5px;border-radius:var(--radius-sm);background:var(--bg-a);border:1px solid var(--b2);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--t2);font-variant-numeric:tabular-nums;z-index:2}.strct-chart__label--active{color:var(--t1);font-weight:700}.strct-chart__legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:8px;font-size:12px;color:var(--t2)}.strct-chart__leg{display:inline-flex;align-items:center;gap:6px}.strct-chart__leg-sw{width:9px;height:3px;border-radius:2px;flex-shrink:0}.strct-chart__tip{position:absolute;transform:translate(-50%,calc(-100% - 10px));pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 8px;border-radius:var(--radius-sm);background:var(--bg-a);border:1px solid var(--b2);box-shadow:var(--shadow-elevated);white-space:nowrap;z-index:2}.strct-chart__tip--multi{top:6px;transform:translate(-50%);align-items:stretch;gap:3px}.strct-chart__tip-v{font-size:12px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}.strct-chart__tip-meta{display:inline-flex;align-items:center;gap:5px}.strct-chart__tip-delta{font-size:12px;font-weight:600;color:var(--t3);font-variant-numeric:tabular-nums}.strct-chart__tip-delta--up{color:var(--success)}.strct-chart__tip-delta--down{color:var(--critical)}.strct-chart__tip-l{font-size:12px;color:var(--t3)}.strct-chart__tip-row{display:inline-flex;align-items:center;gap:6px;font-size:12px}.strct-chart__tip-sw{width:8px;height:3px;border-radius:2px;flex-shrink:0}.strct-chart__tip-rl{color:var(--t3);margin-inline-end:auto}.strct-chart__tip-rv{color:var(--t1);font-weight:700;font-variant-numeric:tabular-nums}.strct-chart__labels{position:relative;height:15px;margin-top:6px;font-size:12px;color:var(--t3)}.strct-chart__labels span{position:absolute;transform:translate(-50%);white-space:nowrap}@media(prefers-reduced-motion:no-preference){.strct-chart__line--draw{stroke-dasharray:1;stroke-dashoffset:1;animation:strct-chart-draw .9s ease forwards}.strct-chart__pulse{transform-box:fill-box;transform-origin:center;animation:strct-chart-pulse 2.4s ease-out infinite}}@keyframes strct-chart-draw{to{stroke-dashoffset:0}}@keyframes strct-chart-pulse{0%{transform:scale(1);opacity:.45}70%{opacity:0}to{transform:scale(2.5);opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-chart{display:block;position:relative}.strct-chart__plot{position:relative}.strct-chart__svg{width:100%;display:block;touch-action:none}.strct-chart__svg:focus-visible{outline:2px solid var(--acc50);outline-offset:2px;border-radius:var(--radius-sm)}.strct-chart__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-chart__empty{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--t3)}.strct-chart__grid{stroke:var(--b1);stroke-width:1;vector-effect:non-scaling-stroke}.strct-chart__line{vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}.strct-chart__area{stroke:none}.strct-chart__area--flat{opacity:.14}.strct-chart__dot,.strct-chart__hoverdot,.strct-chart__head-dot{stroke:var(--bg-1);stroke-width:1.5}.strct-chart__cross{stroke:var(--strct-chart-c);stroke-width:1;opacity:.4;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}.strct-chart__threshold{stroke-width:1;opacity:.85;vector-effect:non-scaling-stroke}.strct-chart__threshold--dashed{stroke-dasharray:4 3}.strct-chart__bar{rx:1.5}.strct-chart__band{opacity:.13;stroke:none}.strct-chart__ann{stroke-width:1;opacity:.8;vector-effect:non-scaling-stroke}.strct-chart__ann--dashed{stroke-dasharray:4 3}.strct-chart__ann-label{position:absolute;top:0;transform:translate(-50%);pointer-events:none;font-size:12px;font-weight:600;background:var(--bg-1);padding:0 3px;border-radius:3px;white-space:nowrap}.strct-chart--brush .strct-chart__svg{cursor:crosshair}.strct-chart__brush{fill:var(--acc);opacity:.16;stroke:var(--acc50);stroke-width:1;vector-effect:non-scaling-stroke}.strct-chart__reset{position:absolute;top:6px;right:8px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border:1px solid var(--b2);border-radius:99px;background:var(--bg-a);color:var(--t2);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer}.strct-chart__reset:hover{color:var(--t1);border-color:var(--acc50)}.strct-chart__reset:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-chart__tip--gap{top:6px;transform:translate(-50%)}.strct-chart__tip-ann{font-size:12px;font-weight:600}.strct-chart--glow .strct-chart__line{filter:drop-shadow(0 0 1.5px var(--strct-chart-c)) drop-shadow(0 0 5px var(--strct-chart-c))}.strct-chart--glow .strct-chart__head-dot{filter:drop-shadow(0 0 2px var(--strct-chart-c)) drop-shadow(0 0 6px var(--strct-chart-c))}.strct-chart--glow .strct-chart__hoverdot{filter:drop-shadow(0 0 4px var(--strct-chart-c))}.strct-chart__ytick{position:absolute;left:0;width:34px;text-align:end;transform:translateY(-50%);pointer-events:none;font-family:var(--mono);font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}.strct-chart__thr{position:absolute;right:2px;transform:translateY(-50%);pointer-events:none;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--bg-1);padding:0 3px;border-radius:3px}.strct-chart__axis-y{position:absolute;left:0;transform:translateY(-50%);pointer-events:none;padding:1px 5px;border-radius:var(--radius-sm);background:var(--bg-a);border:1px solid var(--b2);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--t2);font-variant-numeric:tabular-nums;z-index:2}.strct-chart__label--active{color:var(--t1);font-weight:700}.strct-chart__legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:8px;font-size:12px;color:var(--t2)}.strct-chart__leg{display:inline-flex;align-items:center;gap:6px}.strct-chart__leg-sw{width:9px;height:3px;border-radius:2px;flex-shrink:0}.strct-chart__tip{position:absolute;transform:translate(-50%,calc(-100% - 10px));pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 8px;border-radius:var(--radius-sm);background:var(--bg-a);border:1px solid var(--b2);box-shadow:var(--shadow-elevated);white-space:nowrap;z-index:2}.strct-chart__tip--multi{top:6px;transform:translate(-50%);align-items:stretch;gap:3px}.strct-chart__tip-v{font-size:12px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}.strct-chart__tip-meta{display:inline-flex;align-items:center;gap:5px}.strct-chart__tip-delta{font-size:12px;font-weight:600;color:var(--t3);font-variant-numeric:tabular-nums}.strct-chart__tip-delta--up{color:var(--success)}.strct-chart__tip-delta--down{color:var(--critical)}.strct-chart__tip-l{font-size:12px;color:var(--t3)}.strct-chart__tip-row{display:inline-flex;align-items:center;gap:6px;font-size:12px}.strct-chart__tip-sw{width:8px;height:3px;border-radius:2px;flex-shrink:0}.strct-chart__tip-rl{color:var(--t3);margin-inline-end:auto}.strct-chart__tip-rv{color:var(--t1);font-weight:700;font-variant-numeric:tabular-nums}.strct-chart__labels{position:relative;height:15px;margin-top:6px;font-size:12px;color:var(--t3)}.strct-chart__labels span{position:absolute;transform:translate(-50%);white-space:nowrap}@media(prefers-reduced-motion:no-preference){.strct-chart__line--draw{stroke-dasharray:1;stroke-dashoffset:1;animation:strct-chart-draw .9s ease forwards}.strct-chart__pulse{transform-box:fill-box;transform-origin:center;animation:strct-chart-pulse 2.4s ease-out infinite}}@keyframes strct-chart-draw{to{stroke-dashoffset:0}}@keyframes strct-chart-pulse{0%{transform:scale(1);opacity:.45}70%{opacity:0}to{transform:scale(2.5);opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctChart, decorators: [{
             type: Component,
@@ -9100,10 +9526,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
           [attr.width]="width()"
           [attr.height]="height()"
           [style.height.px]="height()"
+          (pointerdown)="onDown($event)"
           (pointermove)="onMove($event)"
-          (pointerleave)="hoverIdx.set(null)"
+          (pointerup)="onUp()"
+          (lostpointercapture)="onUp()"
+          (pointerleave)="onLeave()"
+          (dblclick)="onDblClick()"
           (keydown)="onKey($event)"
-          (blur)="hoverIdx.set(null)"
+          (blur)="onLeave()"
         >
           <defs>
             <linearGradient [attr.id]="gradId" x1="0" y1="0" x2="0" y2="1">
@@ -9127,6 +9557,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
             }
           }
 
+          <!-- Event / annotation markers: behind the data, above the grid. -->
+          @for (a of annotationLines(); track $index) {
+            <line
+              class="strct-chart__ann"
+              [class.strct-chart__ann--dashed]="a.dashed"
+              [attr.x1]="a.x"
+              [attr.x2]="a.x"
+              [attr.y1]="pad.t"
+              [attr.y2]="height() - pad.b"
+              [attr.stroke]="a.color"
+            />
+          }
+
           @if (type() === 'bar' && !isMulti()) {
             @for (b of bars(); track $index) {
               <rect
@@ -9147,6 +9590,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
               >
                 @if (isMulti()) {
                   @for (s of multiSeries(); track $index) {
+                    @if (s.bandPath) {
+                      <path class="strct-chart__band" [attr.d]="s.bandPath" [attr.fill]="s.color" />
+                    }
                     @if (s.area && s.areaPath) {
                       <path
                         class="strct-chart__area strct-chart__area--flat"
@@ -9181,7 +9627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     [attr.stroke]="color()"
                   />
                   @if (dots()) {
-                    @for (p of points(); track $index) {
+                    @for (p of dotPts(); track $index) {
                       <circle
                         class="strct-chart__dot"
                         [attr.cx]="p.x"
@@ -9207,6 +9653,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
               />
             }
 
+            @if (brushRect(); as br) {
+              <rect
+                class="strct-chart__brush"
+                [attr.x]="br.x"
+                [attr.y]="pad.t"
+                [attr.width]="br.w"
+                [attr.height]="height() - pad.t - pad.b"
+              />
+            }
+
             @if (interactive() && hoverX() !== null) {
               <line
                 class="strct-chart__cross"
@@ -9267,12 +9723,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
           }
         }
 
+        @for (a of annotationLines(); track $index) {
+          @if (a.label) {
+            <div class="strct-chart__ann-label" [style.left.px]="a.x" [style.color]="a.color">
+              {{ a.label }}
+            </div>
+          }
+        }
+
+        @if (zoomed()) {
+          <button type="button" class="strct-chart__reset" (click)="resetZoom()">
+            ⟲ {{ resetLabel() }}
+          </button>
+        }
+
         @if (interactive() && hoverX() !== null) {
           @if (isMulti()) {
             <div class="strct-chart__tip strct-chart__tip--multi" [style.left.px]="hoverX()">
               @if (hoverMeta()) {
                 <span class="strct-chart__tip-l">{{ hoverMeta() }}</span>
               }
+              @if (annAt(); as ann) {
+                <span class="strct-chart__tip-ann" [style.color]="ann.color">{{ ann.label }}</span>
+              }
               @for (r of hoverRows(); track r.label) {
                 <span class="strct-chart__tip-row">
                   <span class="strct-chart__tip-sw" [style.background]="r.color"></span>
@@ -9304,6 +9777,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                   }
                 </span>
               }
+              @if (annAt(); as ann) {
+                <span class="strct-chart__tip-ann" [style.color]="ann.color">{{ ann.label }}</span>
+              }
+            </div>
+          } @else if (hoverGap()) {
+            <!-- A gap point: keep the time slot, say "no data" instead of a value. -->
+            <div class="strct-chart__tip strct-chart__tip--gap" [style.left.px]="hoverX()">
+              <span class="strct-chart__tip-v">{{ gapText() }}</span>
+              @if (hoverMeta()) {
+                <span class="strct-chart__tip-l">{{ hoverMeta() }}</span>
+              }
             </div>
           }
         }
@@ -9318,7 +9802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         <div class="strct-chart__labels">
           @for (l of displayLabels(); track $index) {
             <span
-              [class.strct-chart__label--active]="interactive() && hoverIdx() === l.i"
+              [class.strct-chart__label--active]="interactive() && dispIdx() === l.i"
               [style.left.px]="xOf(l.i)"
               >{{ l.text }}</span
             >
@@ -9329,9 +9813,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `, host: {
                         class: 'strct-chart',
                         '[class.strct-chart--glow]': 'glow()',
+                        '[class.strct-chart--brush]': 'brush() || zoom()',
                         '[style.--strct-chart-c]': 'color()',
-                    }, styles: [".strct-chart{display:block;position:relative}.strct-chart__plot{position:relative}.strct-chart__svg{width:100%;display:block;touch-action:none}.strct-chart__svg:focus-visible{outline:2px solid var(--acc50);outline-offset:2px;border-radius:var(--radius-sm)}.strct-chart__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-chart__empty{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--t3)}.strct-chart__grid{stroke:var(--b1);stroke-width:1;vector-effect:non-scaling-stroke}.strct-chart__line{vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}.strct-chart__area{stroke:none}.strct-chart__area--flat{opacity:.14}.strct-chart__dot,.strct-chart__hoverdot,.strct-chart__head-dot{stroke:var(--bg-1);stroke-width:1.5}.strct-chart__cross{stroke:var(--strct-chart-c);stroke-width:1;opacity:.4;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}.strct-chart__threshold{stroke-width:1;opacity:.85;vector-effect:non-scaling-stroke}.strct-chart__threshold--dashed{stroke-dasharray:4 3}.strct-chart__bar{rx:1.5}.strct-chart--glow .strct-chart__line{filter:drop-shadow(0 0 1.5px var(--strct-chart-c)) drop-shadow(0 0 5px var(--strct-chart-c))}.strct-chart--glow .strct-chart__head-dot{filter:drop-shadow(0 0 2px var(--strct-chart-c)) drop-shadow(0 0 6px var(--strct-chart-c))}.strct-chart--glow .strct-chart__hoverdot{filter:drop-shadow(0 0 4px var(--strct-chart-c))}.strct-chart__ytick{position:absolute;left:0;width:34px;text-align:end;transform:translateY(-50%);pointer-events:none;font-family:var(--mono);font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}.strct-chart__thr{position:absolute;right:2px;transform:translateY(-50%);pointer-events:none;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--bg-1);padding:0 3px;border-radius:3px}.strct-chart__axis-y{position:absolute;left:0;transform:translateY(-50%);pointer-events:none;padding:1px 5px;border-radius:var(--radius-sm);background:var(--bg-a);border:1px solid var(--b2);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--t2);font-variant-numeric:tabular-nums;z-index:2}.strct-chart__label--active{color:var(--t1);font-weight:700}.strct-chart__legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:8px;font-size:12px;color:var(--t2)}.strct-chart__leg{display:inline-flex;align-items:center;gap:6px}.strct-chart__leg-sw{width:9px;height:3px;border-radius:2px;flex-shrink:0}.strct-chart__tip{position:absolute;transform:translate(-50%,calc(-100% - 10px));pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 8px;border-radius:var(--radius-sm);background:var(--bg-a);border:1px solid var(--b2);box-shadow:var(--shadow-elevated);white-space:nowrap;z-index:2}.strct-chart__tip--multi{top:6px;transform:translate(-50%);align-items:stretch;gap:3px}.strct-chart__tip-v{font-size:12px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}.strct-chart__tip-meta{display:inline-flex;align-items:center;gap:5px}.strct-chart__tip-delta{font-size:12px;font-weight:600;color:var(--t3);font-variant-numeric:tabular-nums}.strct-chart__tip-delta--up{color:var(--success)}.strct-chart__tip-delta--down{color:var(--critical)}.strct-chart__tip-l{font-size:12px;color:var(--t3)}.strct-chart__tip-row{display:inline-flex;align-items:center;gap:6px;font-size:12px}.strct-chart__tip-sw{width:8px;height:3px;border-radius:2px;flex-shrink:0}.strct-chart__tip-rl{color:var(--t3);margin-inline-end:auto}.strct-chart__tip-rv{color:var(--t1);font-weight:700;font-variant-numeric:tabular-nums}.strct-chart__labels{position:relative;height:15px;margin-top:6px;font-size:12px;color:var(--t3)}.strct-chart__labels span{position:absolute;transform:translate(-50%);white-space:nowrap}@media(prefers-reduced-motion:no-preference){.strct-chart__line--draw{stroke-dasharray:1;stroke-dashoffset:1;animation:strct-chart-draw .9s ease forwards}.strct-chart__pulse{transform-box:fill-box;transform-origin:center;animation:strct-chart-pulse 2.4s ease-out infinite}}@keyframes strct-chart-draw{to{stroke-dashoffset:0}}@keyframes strct-chart-pulse{0%{transform:scale(1);opacity:.45}70%{opacity:0}to{transform:scale(2.5);opacity:0}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], glow: [{ type: i0.Input, args: [{ isSignal: true, alias: "glow", required: false }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], dots: [{ type: i0.Input, args: [{ isSignal: true, alias: "dots", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], xTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "xTicks", required: false }] }], xFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "xFormat", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], yAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxis", required: false }] }], yTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "yTicks", required: false }] }], axisFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisFormat", required: false }] }], thresholds: [{ type: i0.Input, args: [{ isSignal: true, alias: "thresholds", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], agoFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "agoFormat", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], svgRef: [{ type: i0.ViewChild, args: ['svg', { isSignal: true }] }] } });
+                    }, styles: [".strct-chart{display:block;position:relative}.strct-chart__plot{position:relative}.strct-chart__svg{width:100%;display:block;touch-action:none}.strct-chart__svg:focus-visible{outline:2px solid var(--acc50);outline-offset:2px;border-radius:var(--radius-sm)}.strct-chart__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.strct-chart__empty{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--t3)}.strct-chart__grid{stroke:var(--b1);stroke-width:1;vector-effect:non-scaling-stroke}.strct-chart__line{vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}.strct-chart__area{stroke:none}.strct-chart__area--flat{opacity:.14}.strct-chart__dot,.strct-chart__hoverdot,.strct-chart__head-dot{stroke:var(--bg-1);stroke-width:1.5}.strct-chart__cross{stroke:var(--strct-chart-c);stroke-width:1;opacity:.4;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}.strct-chart__threshold{stroke-width:1;opacity:.85;vector-effect:non-scaling-stroke}.strct-chart__threshold--dashed{stroke-dasharray:4 3}.strct-chart__bar{rx:1.5}.strct-chart__band{opacity:.13;stroke:none}.strct-chart__ann{stroke-width:1;opacity:.8;vector-effect:non-scaling-stroke}.strct-chart__ann--dashed{stroke-dasharray:4 3}.strct-chart__ann-label{position:absolute;top:0;transform:translate(-50%);pointer-events:none;font-size:12px;font-weight:600;background:var(--bg-1);padding:0 3px;border-radius:3px;white-space:nowrap}.strct-chart--brush .strct-chart__svg{cursor:crosshair}.strct-chart__brush{fill:var(--acc);opacity:.16;stroke:var(--acc50);stroke-width:1;vector-effect:non-scaling-stroke}.strct-chart__reset{position:absolute;top:6px;right:8px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border:1px solid var(--b2);border-radius:99px;background:var(--bg-a);color:var(--t2);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer}.strct-chart__reset:hover{color:var(--t1);border-color:var(--acc50)}.strct-chart__reset:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-chart__tip--gap{top:6px;transform:translate(-50%)}.strct-chart__tip-ann{font-size:12px;font-weight:600}.strct-chart--glow .strct-chart__line{filter:drop-shadow(0 0 1.5px var(--strct-chart-c)) drop-shadow(0 0 5px var(--strct-chart-c))}.strct-chart--glow .strct-chart__head-dot{filter:drop-shadow(0 0 2px var(--strct-chart-c)) drop-shadow(0 0 6px var(--strct-chart-c))}.strct-chart--glow .strct-chart__hoverdot{filter:drop-shadow(0 0 4px var(--strct-chart-c))}.strct-chart__ytick{position:absolute;left:0;width:34px;text-align:end;transform:translateY(-50%);pointer-events:none;font-family:var(--mono);font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}.strct-chart__thr{position:absolute;right:2px;transform:translateY(-50%);pointer-events:none;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--bg-1);padding:0 3px;border-radius:3px}.strct-chart__axis-y{position:absolute;left:0;transform:translateY(-50%);pointer-events:none;padding:1px 5px;border-radius:var(--radius-sm);background:var(--bg-a);border:1px solid var(--b2);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--t2);font-variant-numeric:tabular-nums;z-index:2}.strct-chart__label--active{color:var(--t1);font-weight:700}.strct-chart__legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:8px;font-size:12px;color:var(--t2)}.strct-chart__leg{display:inline-flex;align-items:center;gap:6px}.strct-chart__leg-sw{width:9px;height:3px;border-radius:2px;flex-shrink:0}.strct-chart__tip{position:absolute;transform:translate(-50%,calc(-100% - 10px));pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 8px;border-radius:var(--radius-sm);background:var(--bg-a);border:1px solid var(--b2);box-shadow:var(--shadow-elevated);white-space:nowrap;z-index:2}.strct-chart__tip--multi{top:6px;transform:translate(-50%);align-items:stretch;gap:3px}.strct-chart__tip-v{font-size:12px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}.strct-chart__tip-meta{display:inline-flex;align-items:center;gap:5px}.strct-chart__tip-delta{font-size:12px;font-weight:600;color:var(--t3);font-variant-numeric:tabular-nums}.strct-chart__tip-delta--up{color:var(--success)}.strct-chart__tip-delta--down{color:var(--critical)}.strct-chart__tip-l{font-size:12px;color:var(--t3)}.strct-chart__tip-row{display:inline-flex;align-items:center;gap:6px;font-size:12px}.strct-chart__tip-sw{width:8px;height:3px;border-radius:2px;flex-shrink:0}.strct-chart__tip-rl{color:var(--t3);margin-inline-end:auto}.strct-chart__tip-rv{color:var(--t1);font-weight:700;font-variant-numeric:tabular-nums}.strct-chart__labels{position:relative;height:15px;margin-top:6px;font-size:12px;color:var(--t3)}.strct-chart__labels span{position:absolute;transform:translate(-50%);white-space:nowrap}@media(prefers-reduced-motion:no-preference){.strct-chart__line--draw{stroke-dasharray:1;stroke-dashoffset:1;animation:strct-chart-draw .9s ease forwards}.strct-chart__pulse{transform-box:fill-box;transform-origin:center;animation:strct-chart-pulse 2.4s ease-out infinite}}@keyframes strct-chart-draw{to{stroke-dashoffset:0}}@keyframes strct-chart-pulse{0%{transform:scale(1);opacity:.45}70%{opacity:0}to{transform:scale(2.5);opacity:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], glow: [{ type: i0.Input, args: [{ isSignal: true, alias: "glow", required: false }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], dots: [{ type: i0.Input, args: [{ isSignal: true, alias: "dots", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], xTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "xTicks", required: false }] }], xFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "xFormat", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], yAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxis", required: false }] }], yTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "yTicks", required: false }] }], axisFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisFormat", required: false }] }], thresholds: [{ type: i0.Input, args: [{ isSignal: true, alias: "thresholds", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], agoFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "agoFormat", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], annotations: [{ type: i0.Input, args: [{ isSignal: true, alias: "annotations", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], brush: [{ type: i0.Input, args: [{ isSignal: true, alias: "brush", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], gapText: [{ type: i0.Input, args: [{ isSignal: true, alias: "gapText", required: false }] }], resetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetLabel", required: false }] }], hoverIndex: [{ type: i0.Output, args: ["hoverIndex"] }], brushChange: [{ type: i0.Output, args: ["brushChange"] }], svgRef: [{ type: i0.ViewChild, args: ['svg', { isSignal: true }] }] } });
 
 const PALETTE = [
     'var(--acc)',