@kubex/zinc 1.1.180 → 1.1.182

package/docs/pages/components/chart.md

@@ -682,3 +682,52 @@ chart.enableAnimations = true;
 - Round values appropriately for readability
 - Use `y-axis-append` to add units or symbols to values
 - Format dates consistently when using time series data
+
+
+## Signed SSE charts
+
+Use SSE for a moving time window with authoritative bucket updates:
+
+```html
+<zn-chart type="line" xaxis="datetime" live
+  live-renew-url="/sensors/live-grant?sensor=cpu&window=3600&interval=1&metric=hits"
+  enable-animations="200"></zn-chart>
+```
+
+Rubix rewrites `live-renew-url` through the app's authenticated route. The GET
+endpoint must return JSON `{stream_url, expires_at, server_time}` with UTC
+millisecond times, `Cache-Control: no-store`, and recheck login and permissions.
+Renewal accepts only same-origin URLs, sends the login cookie only to that route,
+and rejects redirects. Return 401/403 to stop streaming after logout or loss of
+access. Grants must also expire on the streaming server; the client is not an
+authorization boundary.
+
+For a grant obtained elsewhere, supply `stream-url` directly. Without a renewal
+route it stops at the first frame's expiry. Stream requests use EventSource with
+no cross-origin credentials. Existing `live data-url` polling remains supported;
+SSE takes precedence when `stream-url` or `live-renew-url` is present.
+
+The stream uses `snapshot`, `delta`, and `heartbeat` events. Snapshots and deltas
+contain `{from, until, server_time, expires_at, resolution_seconds, metric, points}`.
+Times are UTC milliseconds; each point is `{at, value}`. Snapshots replace the
+window, deltas replace buckets by timestamp, and heartbeats contain
+`{server_time, expires_at}`. Reconnect must start with a snapshot. Buffers are
+limited to 10,000 points. A resolution or metric change requires a snapshot.
+
+Optional `prediction` contains `status`, `average_rates`, and `points` with
+`{at, lower, upper, expected, available}`. Available ranges are drawn behind
+actual values and labelled as average rates when necessary. Ordinary deltas
+preserve the range; snapshots replace it. `hide-zero` hides actual zeros only.
+
+The chart emits `zn-live-status` with `detail.status` (`connecting`, `connected`,
+`reconnecting`, `expired`, `denied`, `invalid`, or `unavailable`) and shows status
+below the plot. It closes its transport on removal or when live mode is disabled.
+
+
+Live charts honour `enable-animations`: a numeric value sets the update
+transition in milliseconds (capped at 1,000ms). Use `350` for gentle live
+transitions. Initial reveal animations remain disabled; existing points and the
+moving window interpolate without resetting the chart. The expected range moves
+with the same transition. Animation remains enabled up to the 10,000-point live
+buffer limit. Reduced-motion preferences and disabled animations produce instant
+updates. Recorded values and peaks are unchanged.

package/docs/pages/components/content-block.md

@@ -52,6 +52,53 @@ layout: component
 </zn-content-block>
 ```
 
+### Editor Formatting
+
+Text that holds escaped HTML, such as a note saved from `zn-editor`, is sanitized and rendered with the
+editor's formatting. Only the text and background colour survive from a `style` attribute.
+
+```html:preview
+
+<zn-content-block
+  time="16 Jun 2025, 13:00"
+  sender="John Smith"
+  avatar="JS"
+>
+  <div slot="text">
+    &lt;p&gt;&lt;strong&gt;Bold&lt;/strong&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;em&gt;Italic&lt;/em&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;u&gt;Underline&lt;/u&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;s&gt;Strikethrough&lt;/s&gt;&lt;/p&gt;
+    &lt;blockquote&gt;Blockquote&lt;/blockquote&gt;
+    &lt;p&gt;&lt;code&gt;Inline code&lt;/code&gt;&lt;/p&gt;
+    &lt;pre data-language=plain&gt;Code block&lt;/pre&gt;
+    &lt;p&gt;&lt;span style=color:red&gt;Coloured text&lt;/span&gt;&lt;/p&gt;
+    &lt;ul&gt;&lt;li&gt;Bullet&lt;/li&gt;&lt;li&gt;Bullet&lt;ul&gt;&lt;li&gt;Nested bullet&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;
+    &lt;ol&gt;&lt;li&gt;Numbered&lt;ol&gt;&lt;li&gt;Nested numbered&lt;/li&gt;&lt;li&gt;Nested numbered&lt;/li&gt;&lt;/ol&gt;&lt;/li&gt;&lt;/ol&gt;
+    &lt;ul&gt;&lt;li data-list=checked&gt;Checked&lt;/li&gt;&lt;li data-list=unchecked&gt;Unchecked&lt;/li&gt;&lt;/ul&gt;
+    &lt;hr class=ql-hr&gt;
+    &lt;p&gt;Divider above&lt;/p&gt;
+    &lt;p&gt;&lt;a href=https://example.com&gt;Link&lt;/a&gt;&lt;/p&gt;
+  </div>
+  <div slot="html">
+    <p><strong>Bold</strong></p>
+    <p><em>Italic</em></p>
+    <p><u>Underline</u></p>
+    <p><s>Strikethrough</s></p>
+    <blockquote>Blockquote</blockquote>
+    <p><code>Inline code</code></p>
+    <pre data-language="plain">Code block</pre>
+    <p><span style="color:red">Coloured text</span></p>
+    <ul><li>Bullet</li><li>Bullet<ul><li>Nested bullet</li></ul></li></ul>
+    <ol><li>Numbered<ol><li>Nested numbered</li><li>Nested numbered</li></ol></li></ol>
+    <ul><li data-list="checked">Checked</li><li data-list="unchecked">Unchecked</li></ul>
+    <hr class="ql-hr">
+    <p>Divider above</p>
+    <p><a href="https://example.com">Link</a></p>
+  </div>
+</zn-content-block>
+```
+
 ### Attachments
 
 Attachments render in a row at the bottom of the content and are only visible while the block

package/docs/pages/components/stat.md

@@ -99,6 +99,80 @@ Use the `show-delta` attribute with `previous` to show the percentage change fro
 </zn-cols>
 ```
 
+### Value First
+
+Use `layout="value-first"` to show the amount under the caption, with the description beneath it in muted text. In this layout `color` tints the amount, so use `color="neutral"` for plain figures and a semantic color to flag one. Each stat has a box of its own, so `zn-cols divide` draws lines between them. The example adds `size="large"` for headline figures.
+
+```html:preview
+<zn-panel caption="Last 30 days">
+  <zn-cols layout="1,1,1,1" divide>
+    <zn-stat layout="value-first" size="large" caption="Quality score" description="Weighted by points" amount="88.9" previous="86.5" type="percent" delta-format="points" show-delta color="neutral"></zn-stat>
+    <zn-stat layout="value-first" size="large" caption="Evaluations" description="Completed assessments" amount="42" color="neutral"></zn-stat>
+    <zn-stat layout="value-first" size="large" caption="Fails" description="1 automatic" amount="3" color="error"></zn-stat>
+    <zn-stat layout="value-first" size="large" caption="Kudos" description="From reviewers" amount="2" icon="award@lu" color="neutral"></zn-stat>
+  </zn-cols>
+</zn-panel>
+```
+
+### Padded
+
+Use `padded` to give each stat its own padding, for stats laid edge to edge in a flush panel. With `zn-cols no-gap divide` the dividers run the full height of the panel body.
+
+```html:preview
+<zn-panel caption="Last 30 days" flush>
+  <zn-cols layout="1,1,1" no-gap divide stack-at="md">
+    <zn-stat layout="value-first" size="large" padded caption="Quality score" description="Weighted by points" amount="88.9" type="percent" color="neutral"></zn-stat>
+    <zn-stat layout="value-first" size="large" padded caption="Evaluations" description="Completed assessments" amount="42" color="neutral"></zn-stat>
+    <zn-stat layout="value-first" size="large" padded caption="Fails" description="1 automatic" amount="3" color="error"></zn-stat>
+  </zn-cols>
+</zn-panel>
+```
+
+### Large
+
+Use `size="large"` to give the amount more weight, for a row of a few headline figures.
+
+```html:preview
+<zn-cols>
+  <zn-panel>
+    <zn-stat size="large" caption="Total Users" description="Active accounts" amount="1247"></zn-stat>
+  </zn-panel>
+  <zn-panel>
+    <zn-stat size="large" caption="Conversion Rate" description="Last 30 days" amount="4.8" type="percent" color="success"></zn-stat>
+  </zn-panel>
+</zn-cols>
+```
+
+### Delta In Points
+
+Use `delta-format="points"` with `show-delta` to show the difference between `amount` and `previous` in points rather than the relative change. This suits values that are already percentages.
+
+```html:preview
+<zn-cols>
+  <zn-panel>
+    <zn-stat caption="Pass rate" description="This month" amount="91.5" previous="88.2" type="percent" delta-format="points" show-delta color="success"></zn-stat>
+  </zn-panel>
+  <zn-panel>
+    <zn-stat caption="Error rate" description="Last 24 hours" amount="2.1" previous="3.4" type="percent" delta-format="points" show-delta color="neutral"></zn-stat>
+  </zn-panel>
+</zn-cols>
+```
+
+### Icon
+
+Use `icon` to show an icon beside the amount. It takes the amount's color unless you set `icon-color`.
+
+```html:preview
+<zn-cols>
+  <zn-panel>
+    <zn-stat caption="Awards" description="This quarter" amount="12" icon="award@lu" color="warning"></zn-stat>
+  </zn-panel>
+  <zn-panel>
+    <zn-stat caption="Kudos" description="From reviewers" amount="2" icon="award@lu" icon-color="warning" color="neutral"></zn-stat>
+  </zn-panel>
+</zn-cols>
+```
+
 ### Color Variants
 
 Use the `color` attribute to set the semantic color of the stat. Available colors: `primary`, `error`, `info`, `warning`, `success`, and `neutral`.

package/docs/pages/components/tile.md

@@ -179,6 +179,22 @@ Use the `actions` slot to add buttons or other interactive elements to the right
 </zn-sp>
 ```
 
+### Stacked Actions
+
+Use `stack-actions` when a tile carries several actions, such as a row of chips. Once the tile is narrower than 600px the actions move under the caption and description and wrap, rather than squeezing the text.
+
+```html:preview
+<zn-sp divide no-gap>
+  <zn-tile stack-actions caption="Refund not received" description="Support scorecard · scored 13 Oct 2026 13:22">
+    <zn-icon slot="image" size="24" src="at-sign@lu"></zn-icon>
+    <zn-chip slot="actions" size="small" type="info" icon="messages-square@lu">Coached</zn-chip>
+    <zn-chip slot="actions" size="small" type="error" icon="circle-x@lu">Auto fail</zn-chip>
+    <zn-chip slot="actions" size="small" type="error" icon="shield-alert@lu">Compliance</zn-chip>
+    <zn-chip slot="actions" size="small" type="error">0%</zn-chip>
+  </zn-tile>
+</zn-sp>
+```
+
 ### Properties with Actions
 
 Combine both properties and actions for comprehensive tile layouts.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.180",
+  "version": "1.1.182",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/chart/builders.ts

@@ -17,11 +17,19 @@ export type ChartType =
   | 'treemap';
 
 export interface SeriesItem {
+  /** Stable identity for incremental live updates. */
+  id?: string;
+  animation?: boolean;
+  animationDuration?: number;
+  animationDurationUpdate?: number;
+  animationEasingUpdate?: 'linear';
+  animationThreshold?: number;
   name: string;
   data: any[];
   color?: string;
   /** Series sharing a stack ID are stacked, overriding the chart-wide `stacked` setting. */
   stack?: string;
+  stackStrategy?: 'all' | 'samesign' | 'positive' | 'negative';
   /** Fill below a line, for example `{ opacity: 0.15 }`; `{ opacity: 0 }` keeps a stacked base invisible. */
   areaStyle?: Record<string, unknown>;
   lineStyle?: Record<string, unknown>;
@@ -191,6 +199,13 @@ function seriesFromProps(
 // followed by a filled series holding the band's height.
 function seriesStyle(s: SeriesItem): Record<string, unknown> {
   return {
+    ...(s.id ? { id: s.id } : {}),
+    ...(s.animation !== undefined ? { animation: s.animation } : {}),
+    ...(s.animationDuration !== undefined ? { animationDuration: s.animationDuration } : {}),
+    ...(s.animationDurationUpdate !== undefined ? { animationDurationUpdate: s.animationDurationUpdate } : {}),
+    ...(s.animationEasingUpdate ? { animationEasingUpdate: s.animationEasingUpdate } : {}),
+    ...(s.animationThreshold !== undefined ? { animationThreshold: s.animationThreshold } : {}),
+    ...(s.stackStrategy ? { stackStrategy: s.stackStrategy } : {}),
     ...(s.areaStyle ? { areaStyle: s.areaStyle } : {}),
     ...(s.lineStyle ? { lineStyle: s.lineStyle } : {}),
     ...(s.symbol ? { symbol: s.symbol } : {}),

package/src/components/chart/chart-live.test.ts

@@ -0,0 +1,82 @@
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-return */
+import { expect, fixture, html } from '@open-wc/testing';
+import ZnChart from './chart.component';
+
+ZnChart.define('zn-chart-live-test');
+class Source extends EventTarget {
+  static instances: Source[]=[]; closed=false; onopen?:()=>void; onerror?:()=>void;
+  url: string;
+  constructor(url: string) { super(); this.url = url;Source.instances.push(this); }
+  close() {this.closed=true;}
+  send(event:string,frame:unknown) {this.dispatchEvent(new MessageEvent(event,{data:JSON.stringify(frame)}));}
+}
+const pause=()=>new Promise(r=>setTimeout(r,50));
+
+describe('chart SSE component',()=>{
+  const original=window.EventSource;
+  beforeEach(()=>{Source.instances=[];window.EventSource=Source as unknown as typeof EventSource;});
+  afterEach(()=>{window.EventSource=original;});
+  it('renders SSE buckets and expected bands, reacts to display changes, and stops when removed',async()=>{
+    const el:any=await fixture(html`<zn-chart-live-test type="line" xaxis="datetime" enable-animations="350" live stream-url="https://relay.example/events"></zn-chart-live-test>`);
+    await el.updateComplete;await pause();
+    const source=Source.instances.at(-1)!;
+    expect(source).to.exist;
+    const f={from:0,until:10000,server_time:Date.now(),expires_at:Date.now()+60000,resolution_seconds:1,metric:'hits',points:[{at:1000,value:0},{at:2000,value:2}],prediction:{status:'ready',points:[{at:0,lower:1,upper:5,expected:3,available:true}]}};
+    source.send('snapshot',f);await el.updateComplete;
+    expect(el.chart.getOption().series.length).to.equal(3);
+    expect(el.chart.getOption().series[2].data.map((p:any)=>p.value)).to.deep.equal([[1000,0],[2000,2]]);
+    const valueModel = el.chart.getModel().getSeriesByIndex(2);
+    const axisModel = el.chart.getModel().getComponent('xAxis',0);
+    expect(valueModel.get('animation')).to.equal(true);
+    expect(valueModel.get('animationDuration')).to.equal(0);
+    expect(valueModel.get('animationDurationUpdate')).to.equal(350);
+    expect(valueModel.get('animationThreshold')).to.equal(10000);
+    const rangeModel = el.chart.getModel().getSeriesByIndex(1);
+    const rangeData = rangeModel.option.data;
+    expect(rangeModel.id).to.equal('live-range');
+    expect(rangeModel.get('animation')).to.equal(true);
+    expect(rangeModel.get('animationDuration')).to.equal(0);
+    el.hideZero=true;await el.updateComplete;await el.updateComplete;
+    expect(el.chart.getOption().series[2].data[0].value[1]).to.equal(null);
+    source.send('delta',{...f,prediction:undefined,points:[{at:2000,value:7}]});await el.updateComplete;
+    expect(el.chart.getOption().series[2].data[1].value[1]).to.equal(7);
+    expect(el.chart.getViewOfSeriesModel(valueModel)._polyline.animators.length).to.be.greaterThan(0);
+    const sameAxis = el.chart.getModel().getComponent('xAxis',0) === axisModel;
+    const sameValues = el.chart.getModel().getSeriesByIndex(2) === valueModel;
+    expect(sameAxis).to.equal(true);
+    expect(sameValues).to.equal(true);
+    const sameModel = el.chart.getModel().getSeriesByIndex(1) === rangeModel;
+    expect(sameModel).to.equal(true);
+    const sameSource = el.chart.getModel().getSeriesByIndex(1).option.data === rangeData;
+    expect(sameSource).to.equal(true);
+    source.send('heartbeat',{server_time:f.server_time+1000,expires_at:f.expires_at});await el.updateComplete;
+    const sameHeartbeatSource = el.chart.getModel().getSeriesByIndex(1).option.data === rangeData;
+    expect(sameHeartbeatSource).to.equal(true);
+    source.send('snapshot',{...f,prediction:undefined,points:[]});await el.updateComplete;
+    expect(el.chart.getModel().getSeries().length).to.equal(1);
+    el.remove();expect(source.closed).to.equal(true);
+  });
+  it('keeps transitions enabled for a high-volume hour', async()=>{
+    const el:any=await fixture(html`<zn-chart-live-test type="line" xaxis="datetime" enable-animations="350" live stream-url="https://relay.example/hour"></zn-chart-live-test>`);
+    await el.updateComplete;await pause();
+    Source.instances.at(-1)!.send('snapshot',{
+      from:0,until:3600000,server_time:Date.now(),expires_at:Date.now()+60000,resolution_seconds:1,metric:'average',
+      points:Array.from({length:3600},(_,i)=>({at:i*1000,value:10+i%3})),
+    });
+    await el.updateComplete;
+    const model=el.chart.getModel().getSeriesByIndex(0);
+    expect(model.getData().count()).to.equal(3600);
+    expect(model.isAnimationEnabled()).to.equal(true);
+    expect(model.get('animationDuration')).to.equal(0);
+    el.remove();
+  });
+  it('restarts transport when its URL changes and when reattached',async()=>{
+    const el:any=await fixture(html`<zn-chart-live-test type="line" live stream-url="https://relay.example/a"></zn-chart-live-test>`);
+    await el.updateComplete;await pause();
+    const old=Source.instances.at(-1)!;
+    el.streamUrl='https://relay.example/b';await el.updateComplete;
+    expect(old.closed).to.equal(true);expect(Source.instances.at(-1)!.url).to.include('/b');
+    const parent=el.parentElement;el.remove();parent.append(el);await el.updateComplete;await pause();
+    expect(Source.instances.at(-1)!.closed).to.equal(false);el.remove();
+  });
+});

package/src/components/chart/chart.component.ts

@@ -18,7 +18,8 @@ import {
 } from './builders';
 import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
 import { type EChartsModule, loadECharts } from './echarts-loader';
-import { property } from 'lit/decorators.js';
+import { LiveTransport, LiveWindow } from './live';
+import { property, state } from 'lit/decorators.js';
 import { ResizeController } from '@lit-labs/observers/resize-controller.js';
 import styles from './chart.scss';
 import ZincElement from '../../internal/zinc-element';
@@ -47,6 +48,9 @@ export default class ZnChart extends ZincElement {
 
   @property({ type: Boolean }) live = false;
   @property({ attribute: 'data-url' }) dataUrl = '';
+  @property({ attribute: 'stream-url' }) streamUrl = '';
+  @property({ attribute: 'live-renew-url' }) liveRenewUrl = '';
+  @property({ attribute: 'hide-zero', type: Boolean }) hideZero = false;
   @property({ attribute: 'live-interval', type: Number }) liveInterval = 1000;
   @property({ type: Number, reflect: true }) height = 300;
 
@@ -86,6 +90,80 @@ export default class ZnChart extends ZincElement {
   private echarts?: EChartsModule;
   private initPromise?: Promise<void>;
   private liveTimer?: number;
+  private pollAbort?: AbortController;
+  @state() private liveStatus = 'connecting';
+  private liveWindow = new LiveWindow();
+  private replaceLiveSeries = true;
+  private transport = new LiveTransport((frame, snapshot) => {
+    const applied = this.liveWindow.apply(frame, snapshot);
+    this.replaceLiveSeries ||= snapshot || applied.prediction !== undefined;
+    this.data = this.liveSeries();
+    this.requestUpdate();
+  }, status => {
+    this.liveStatus = status;
+    this.dispatchEvent(new CustomEvent('zn-live-status', { detail: { status }, bubbles: true, composed: true }));
+  }, serverTime => {
+    this.liveWindow.advance(serverTime);
+    this.data = this.liveSeries();
+  });
+
+  private liveTransitionDuration() {
+    if (this.enableAnimations === false || this.enableAnimations === 0 || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return 0;
+    return Math.max(0, Math.min(1000, typeof this.enableAnimations === 'number' ? this.enableAnimations : 350));
+  }
+
+  private liveSeries(): SeriesItem[] {
+    const duration = this.liveTransitionDuration();
+    return this.liveWindow.series(this.hideZero).map(series => ({ ...series,
+      animation: duration > 0, animationDuration: 0, animationDurationUpdate: duration,
+      animationEasingUpdate: 'linear', animationThreshold: 10000,
+    }));
+  }
+
+  private updateChart() {
+    const option = this.buildOption();
+    if (this.liveWindow.frame && this.live && (this.streamUrl || this.liveRenewUrl)) {
+      const axis = Array.isArray(option.xAxis) ? option.xAxis[0] : option.xAxis;
+      option.xAxis = { ...axis, id: 'live-time', min: this.liveWindow.frame.from, max: this.liveWindow.frame.until };
+      const series = this.liveSeries();
+      option.legend = { ...option.legend, data: series.filter(s => !s.name.startsWith('_')).map(s => s.name) };
+      option.animation = this.liveTransitionDuration() > 0;
+      option.animationDuration = 0;
+      option.animationDurationUpdate = this.liveTransitionDuration();
+      option.animationThreshold = 10000;
+      option.animationEasingUpdate = 'linear';
+    }
+    if (this.liveWindow.frame && this.live && !this.replaceLiveSeries) {
+      // Keep the prediction's models and data in ECharts between snapshots.
+      // Only measurements and the moving viewport change on deltas/heartbeats.
+      const series = Array.isArray(option.series) ? option.series : option.series ? [option.series] : [];
+      option.series = series.filter(s => s?.id === 'live-values');
+      this.chart?.setOption({
+        series: option.series,
+        xAxis: { id: 'live-time', min: this.liveWindow.frame.from, max: this.liveWindow.frame.until },
+        animation: this.liveTransitionDuration() > 0,
+        animationDuration: 0,
+        animationDurationUpdate: this.liveTransitionDuration(),
+        animationEasingUpdate: 'linear',
+        animationThreshold: 10000,
+      });
+    } else {
+      this.chart?.setOption(option, { replaceMerge: ['series', 'legend', 'xAxis'] });
+    }
+    this.replaceLiveSeries = false;
+  }
+
+  protected updated(changed: PropertyValues) {
+    super.updated(changed);
+    if (!this.chart) return;
+    if (['live', 'dataUrl', 'streamUrl', 'liveRenewUrl', 'liveInterval'].some(key => changed.has(key))) this.startLive();
+    if (changed.size !== 1 || !changed.has('liveStatus')) this.updateChart();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated && !this.chart) this.initPromise = this.initChart().catch(() => undefined);
+  }
 
   private readonly resizeObserver = new ResizeController(this, {
     target: null,
@@ -129,7 +207,7 @@ export default class ZnChart extends ZincElement {
   private buildOption() {
     const props: BuilderProps = {
       type: this.type,
-      data: this.data ?? [],
+      data: this.liveWindow.frame && this.live ? this.liveSeries() : this.data ?? [],
       categories: Array.isArray(this.categories) ? this.categories : [],
       xAxisType: this.xAxis,
       yAxisAppend: this.yAxisAppend,
@@ -187,23 +265,40 @@ export default class ZnChart extends ZincElement {
 
     this.resizeObserver.observe(host);
 
-    if (this.live && this.dataUrl) this.startLive();
+    this.startLive();
+  }
+
+  private stopLive() {
+    this.transport.stop();
+    if (this.liveTimer) clearTimeout(this.liveTimer);
+    this.liveTimer = undefined;
+    this.pollAbort?.abort();
   }
 
   private startLive() {
-    this.liveTimer = window.setInterval(async () => {
+    this.stopLive(); this.liveWindow = new LiveWindow(); this.replaceLiveSeries = true;
+    if (!this.live || !this.isConnected) return;
+    if (this.streamUrl || this.liveRenewUrl) {
+      try { this.transport.start(this.streamUrl, this.liveRenewUrl); } catch { this.stopLive(); }
+      return;
+    }
+    if (!this.dataUrl) return;
+    const controller = new AbortController(); this.pollAbort = controller;
+    const poll = async () => {
       try {
-        const res = await fetch(this.dataUrl);
-        const newData = await res.json() as SeriesItem[];
-        this.data = newData;
-        this.chart?.setOption({ ...this.buildOption() });
-      } catch {
-        /* swallow transient fetch errors */
-      }
-    }, this.liveInterval);
+        const res = await fetch(this.dataUrl, { signal: controller.signal });
+        if (res.ok) {
+          const data = await res.json() as SeriesItem[];
+          if (!controller.signal.aborted) { this.data = data; }
+        }
+      } catch { /* transient polling failure */ }
+      if (!controller.signal.aborted) this.liveTimer = window.setTimeout(() => void poll(), Math.max(250, this.liveInterval));
+    };
+    this.liveTimer = window.setTimeout(() => void poll(), Math.max(250, this.liveInterval));
   }
 
   private reinit() {
+    this.stopLive();
     this.chart?.dispose();
     this.chart = undefined;
     this.initPromise = this.initChart().catch(() => undefined);
@@ -235,12 +330,14 @@ export default class ZnChart extends ZincElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    if (this.liveTimer) clearInterval(this.liveTimer);
+    this.stopLive();
     this.chart?.dispose();
     this.chart = undefined;
   }
 
   protected render(): unknown {
-    return html`<div class="chart"><div id="chart"></div></div>`;
+    return html`<div class="chart"><div id="chart"></div>
+      ${this.live && (this.streamUrl || this.liveRenewUrl) ? html`<div role="status" aria-live="polite">Live: ${this.liveStatus}${this.liveWindow.frame ? ` · ${this.liveWindow.frame.resolution_seconds}s intervals · Expected range: ${this.liveWindow.predictionStatus}` : ''}</div>` : ''}
+    </div>`;
   }
 }

package/src/components/chart/live.test.ts

@@ -0,0 +1,96 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/require-await, @typescript-eslint/no-empty-function, no-return-assign */
+import { expect } from '@open-wc/testing';
+import { type LiveFrame, LiveTransport, LiveWindow } from './live';
+
+const frame = (points: LiveFrame['points'], from = 0): LiveFrame => ({ points, from, until: from + 10000, server_time: Date.now(), expires_at: Date.now()+60000, resolution_seconds: 1, metric: 'hits' });
+const sleep = (ms = 20) => new Promise(resolve => setTimeout(resolve,ms));
+class MockSource extends EventTarget {
+  static sources: MockSource[] = [];
+  onopen?: () => void; onerror?: () => void; closed = false;
+  url: string;
+  constructor(url: string) { super(); this.url = url; MockSource.sources.push(this); }
+  close() { this.closed = true; }
+  send(event: string, data: unknown) { this.dispatchEvent(new MessageEvent(event,{data: JSON.stringify(data)})); }
+}
+
+describe('chart live window', () => {
+  it('replaces duplicate buckets, sorts, prunes, and reconnect snapshots clear old values', () => {
+    const w = new LiveWindow();
+    w.apply(frame([{at:1000,value:1},{at:2000,value:2}]),true);
+    w.apply(frame([{at:3000,value:0},{at:2000,value:5}],2000),false);
+    const data = w.series()[0].data;
+    expect(data.map(p=>p.value)).to.deep.equal([[2000,5],[3000,0]]);
+    expect(w.series(true)[0].data[1].value).to.deep.equal([3000,null]);
+    expect(w.series()[0].data[1].value).to.deep.equal([3000,0]);
+    w.apply(frame([{at:5000,value:8}],2000),true);
+    expect(w.series()[0].data.length).to.equal(1);
+  });
+  it('preserves optional ranges across deltas and clears stale ranges on a snapshot', () => {
+    const w = new LiveWindow(); const f=frame([{at:1000,value:8}]);
+    f.prediction={status:'ready',average_rates:true,points:[{at:0,expected:2,lower:-1,upper:5,available:true}]};
+    w.apply(f,true); w.apply(frame([{at:2000,value:9}]),false);
+    expect(w.series().length).to.equal(3);
+    expect(w.series()[1].name).to.include('average rate');
+    expect(w.series()[0].stackStrategy).to.equal('all');
+    w.apply(frame([]),true); expect(w.series().length).to.equal(1);
+  });
+  it('advances the viewport on heartbeats without inventing readings', () => {
+    const w = new LiveWindow(); const f = frame([{at:1000,value:1},{at:3000,value:2}]);
+    w.apply(f,true);w.advance(f.server_time+2500);
+    expect(w.frame!.from).to.equal(2500);
+    expect(w.series()[0].data.map(p=>p.value)).to.deep.equal([[3000,2]]);
+  });
+  it('rejects invalid frames and resolution changes in a delta', () => {
+    const w=new LiveWindow();
+    expect(()=>w.apply({},true)).to.throw();
+    w.apply(frame([]),true);
+    expect(()=>w.apply({...frame([]),resolution_seconds:60},false)).to.throw();
+    expect(()=>w.apply(frame([{at:1,value:NaN}]),false)).to.throw();
+  });
+});
+
+describe('chart SSE transport', () => {
+  const originalSource=window.EventSource; const originalFetch=window.fetch;
+  beforeEach(()=>{MockSource.sources=[]; window.EventSource=MockSource as unknown as typeof EventSource;});
+  afterEach(()=>{window.EventSource=originalSource;window.fetch=originalFetch;});
+  it('opens a renewed URL and closes connections on disconnect', async()=>{
+    let requests=0; const events: boolean[]=[];
+    window.fetch=async (_url,options)=>{
+      requests++; expect(options?.credentials).to.equal('same-origin');expect(options?.redirect).to.equal('error');
+      return new Response(JSON.stringify({stream_url:'https://relay.example/events',expires_at:Date.now()+60000,server_time:Date.now()}));
+    };
+    const t=new LiveTransport((_data,snapshot)=>events.push(snapshot),()=>{});
+    t.start('', '/grant'); await sleep();
+    expect(requests).to.equal(1); expect(MockSource.sources.length).to.equal(1);
+    const source=MockSource.sources[0];source.send('snapshot',frame([]));source.send('delta',frame([]));
+    expect(events).to.deep.equal([true,false]);
+    t.stop();expect(source.closed).to.equal(true);
+  });
+  it('stops at the grant deadline without a renewal route',async()=>{
+    const statuses: string[]=[]; const t=new LiveTransport(()=>{},s=>statuses.push(s));
+    t.start('https://relay.example/events',''); const source=MockSource.sources[0];
+    source.send('heartbeat',{server_time:1000,expires_at:1025}); await sleep(50);
+    expect(source.closed).to.equal(true);expect(statuses).to.include('expired');t.stop();
+  });
+  it('rejects cross-origin renewal and stops immediately on an authentication failure',async()=>{
+    const statuses: string[]=[];const t=new LiveTransport(()=>{},s=>statuses.push(s));
+    t.start('','https://evil.example/grant');expect(statuses).to.include('denied');expect(MockSource.sources.length).to.equal(0);
+    window.fetch=async ()=>new Response('',{status:403});t.start('','/grant');await sleep();
+    expect(statuses.filter(s=>s==='denied').length).to.equal(2);t.stop();
+  });
+  it('ignores an outstanding renewal response after stopping',async()=>{
+    let resolve!: (r:Response)=>void;
+    window.fetch=()=>new Promise(r=>resolve=r);
+    const t=new LiveTransport(()=>{},()=>{});t.start('','/grant');t.stop();
+    resolve(new Response(JSON.stringify({stream_url:'https://relay.example/events',expires_at:Date.now()+60000,server_time:Date.now()})));await sleep();
+    expect(MockSource.sources.length).to.equal(0);
+  });
+  it('does not overlap renewals while heartbeats arrive',async()=>{
+    let count=0;let resolve!: (r:Response)=>void;
+    window.fetch=()=>{count++;return new Promise(r=>resolve=r);};
+    const t=new LiveTransport(()=>{},()=>{});t.start('https://relay.example/events','/grant');
+    const source=MockSource.sources[0];source.send('heartbeat',{server_time:1000,expires_at:11000});await sleep();
+    source.send('heartbeat',{server_time:2000,expires_at:11000});await sleep();expect(count).to.equal(1);
+    t.stop();resolve(new Response('{}'));await sleep();
+  });
+});