@c2n/chart 0.0.7

package/dist/chart-base-C4-1TyKq.js

@@ -0,0 +1,666 @@
+import { ChartFrameBuilder, columnValue } from "./chart-data.js";
+import { ChartThemeController, PROBE_COLORS } from "./chart-theme.js";
+import { i as __decorate, n as SERIES_CHANGE_EVENT, r as SERIES_TAG } from "./chart-series-BnpHO3lm.js";
+import { property, query, state } from "lit/decorators.js";
+import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
+import { jsonPropertyConverter } from "@c2n/core/lit-helper.js";
+//#region src/chart.scss?inline
+var chart_default = "@charset \"UTF-8\";\n/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--c2-chart--width,100%);\n  height: var(--c2-chart--height,320px);\n  /*\n   * The plot is absolutely positioned, so nothing inside the host contributes intrinsic width. As a flex\n   * item — which is what every example frame in the docs site makes it — the host would otherwise shrink\n   * to its legend, and to nothing at all when there is no legend. `min-width: 0` keeps it able to shrink\n   * below its content when a layout genuinely needs that.\n   */\n  min-width: 0;\n  padding: var(--c2-chart--padding,12px);\n  background: var(--c2-chart--background,#ffffff);\n  color: var(--c2-chart--color,#18181b);\n  font-family: var(--c2-chart--font-family,inherit);\n  font-size: var(--c2-chart--font-size,12px);\n  border-top: var(--c2-chart--border-top,1px solid #e4e4e7);\n  border-right: var(--c2-chart--border-right,1px solid #e4e4e7);\n  border-bottom: var(--c2-chart--border-bottom,1px solid #e4e4e7);\n  border-left: var(--c2-chart--border-left,1px solid #e4e4e7);\n  border-top-left-radius: var(--c2-chart--border-top-left-radius,8px);\n  border-top-right-radius: var(--c2-chart--border-top-right-radius,8px);\n  border-bottom-left-radius: var(--c2-chart--border-bottom-left-radius,8px);\n  border-bottom-right-radius: var(--c2-chart--border-bottom-right-radius,8px);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.frame {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n/*\n * The plot area is the engine's territory. `contain: strict` plus absolute positioning means the canvas\n * the engine sizes inside it can never feed its own size back into the ResizeObserver watching this box,\n * which is what makes the resize loop structurally impossible rather than merely unlikely.\n */\n.plot-area {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.plot {\n  position: absolute;\n  inset: 0;\n  contain: strict;\n}\n\n.plot canvas {\n  display: block;\n  position: absolute;\n  inset: 0;\n}\n\n.overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.tooltip {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  pointer-events: none;\n  will-change: transform;\n  display: flex;\n  flex-direction: column;\n  gap: var(--c2-chart__tooltip--gap,6px);\n  padding: var(--c2-chart__tooltip--padding,8px 10px);\n  border-radius: var(--c2-chart__tooltip--border-radius,6px);\n  background: var(--c2-chart__tooltip--background-color,#18181b);\n  color: var(--c2-chart__tooltip--color,#fafafa);\n  font-size: var(--c2-chart__tooltip--font-size,12px);\n  box-shadow: var(--c2-chart__tooltip--box-shadow,0 8px 24px rgba(24, 24, 27, 0.08));\n  white-space: nowrap;\n}\n\n.tooltip[hidden] {\n  display: none;\n}\n\n.tooltip-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.tooltip-marker {\n  width: var(--c2-chart__legend-marker--size,10px);\n  height: var(--c2-chart__legend-marker--size,10px);\n  border-radius: var(--c2-chart__legend-marker--border-radius,999px);\n  flex: none;\n}\n\n.tooltip-label {\n  flex: 1 1 auto;\n}\n\n.tooltip-value {\n  font-variant-numeric: tabular-nums;\n  font-weight: 600;\n}\n\n.actions {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: auto;\n  display: flex;\n  gap: 4px;\n}\n\n.state {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--c2-chart__state--color,#71717a);\n  font-size: var(--c2-chart__state--font-size,14px);\n  background: var(--c2-chart--background,#ffffff);\n}\n\n.legend {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--c2-chart__legend--gap,12px);\n  padding: var(--c2-chart__legend--padding,8px 0 0);\n  color: var(--c2-chart__legend--color,#71717a);\n  font-size: var(--c2-chart__legend--font-size,12px);\n}\n\n.legend--start,\n.legend--end {\n  flex-direction: column;\n  align-content: flex-start;\n  flex: 0 0 auto;\n  align-self: center;\n  max-height: 100%;\n  overflow: auto;\n}\n\n/* The legend is on an inline edge, so the frame runs as a row. */\n.frame--side {\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.legend-item {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n}\n\n.legend-item[aria-pressed=false] {\n  opacity: var(--c2-chart__legend__disabled--opacity,0.38);\n}\n\n.legend-marker {\n  width: var(--c2-chart__legend-marker--size,10px);\n  height: var(--c2-chart__legend-marker--size,10px);\n  border-radius: var(--c2-chart__legend-marker--border-radius,999px);\n  flex: none;\n}\n\n.definitions {\n  display: none;\n}\n\n/*\n * Colour probes. `getComputedStyle().getPropertyValue()` hands back the author's text for a `var()` or\n * `color-mix()` chain, which no canvas engine can parse; the computed `color` of an element always\n * resolves to `rgb(…)`. `display: none` keeps them free.\n */\n.theme-probe {\n  display: none;\n}\n.theme-probe i:nth-child(1) {\n  color: var(--c2-chart__series-1--color,#0265dc);\n}\n.theme-probe i:nth-child(2) {\n  color: var(--c2-chart__series-2--color,#ea580c);\n}\n.theme-probe i:nth-child(3) {\n  color: var(--c2-chart__series-3--color,#0f766e);\n}\n.theme-probe i:nth-child(4) {\n  color: var(--c2-chart__series-4--color,#db2777);\n}\n.theme-probe i:nth-child(5) {\n  color: var(--c2-chart__series-5--color,#a16207);\n}\n.theme-probe i:nth-child(6) {\n  color: var(--c2-chart__series-6--color,#7c3aed);\n}\n.theme-probe i:nth-child(7) {\n  color: var(--c2-chart__series-7--color,#0891b2);\n}\n.theme-probe i:nth-child(8) {\n  color: var(--c2-chart__series-8--color,#52525b);\n}\n.theme-probe i:nth-child(9) {\n  color: var(--c2-chart__axis--color,#71717a);\n}\n.theme-probe i:nth-child(10) {\n  color: var(--c2-chart__grid--color,#e4e4e7);\n}\n.theme-probe i:nth-child(11) {\n  color: var(--c2-chart--color,#18181b);\n}\n.theme-probe i:nth-child(12) {\n  color: var(--c2-chart__muted--color,#71717a);\n}\n.theme-probe i:nth-child(13) {\n  color: var(--c2-chart__tooltip--background-color,#18181b);\n}\n.theme-probe i:nth-child(14) {\n  color: var(--c2-chart__tooltip--color,#fafafa);\n}\n.theme-probe i:nth-child(15) {\n  color: var(--c2-chart__crosshair--color,#a1a1aa);\n}\n.theme-probe i:nth-child(16) {\n  color: var(--c2-chart__positive--color,#16a34a);\n}\n.theme-probe i:nth-child(17) {\n  color: var(--c2-chart__negative--color,#dc2626);\n}\n.theme-probe i:nth-child(18) {\n  color: var(--c2-chart__surface--color,#ffffff);\n}\n\n/*\n * uPlot's structural CSS, hand-ported.\n *\n * `uplot/dist/uPlot.min.css` is a global stylesheet and a shadow root cannot see it, so the rules the\n * engine's DOM depends on live here instead. Only the structural half is kept: the legend and title rules\n * are dropped because this component renders its own. Version-coupled to the `uplot` peer range — re-check\n * after an upgrade.\n */\n.uplot,\n.uplot *,\n.uplot *::before,\n.uplot *::after {\n  box-sizing: border-box;\n}\n\n.uplot {\n  font-family: var(--c2-chart--font-family,inherit);\n  line-height: 1.5;\n  width: min-content;\n}\n\n.u-wrap {\n  position: relative;\n  user-select: none;\n}\n\n.u-over,\n.u-under {\n  position: absolute;\n}\n\n.u-under {\n  overflow: hidden;\n}\n\n.uplot canvas {\n  display: block;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.u-axis {\n  position: absolute;\n}\n\n.u-select {\n  position: absolute;\n  pointer-events: none;\n  background: rgba(0, 0, 0, 0.07);\n}\n\n.u-cursor-x,\n.u-cursor-y {\n  position: absolute;\n  left: 0;\n  top: 0;\n  pointer-events: none;\n  will-change: transform;\n}\n\n.u-hz .u-cursor-x,\n.u-vt .u-cursor-y {\n  height: 100%;\n  border-right: var(--c2-chart__crosshair--width,1px) dashed var(--c2-chart__crosshair--color,#a1a1aa);\n}\n\n.u-hz .u-cursor-y,\n.u-vt .u-cursor-x {\n  width: 100%;\n  border-bottom: var(--c2-chart__crosshair--width,1px) dashed var(--c2-chart__crosshair--color,#a1a1aa);\n}\n\n.u-cursor-pt {\n  position: absolute;\n  top: 0;\n  left: 0;\n  border-radius: 50%;\n  border: 0 solid;\n  pointer-events: none;\n  will-change: transform;\n  /* Must stay !important: uPlot sets the `background` shorthand inline. */\n  background-clip: padding-box !important;\n}\n\n.u-axis.u-off,\n.u-select.u-off,\n.u-cursor-x.u-off,\n.u-cursor-y.u-off,\n.u-cursor-pt.u-off {\n  display: none;\n}";
+//#endregion
+//#region src/chart-base.ts
+/** Properties that only ever move data. A change limited to these takes the fast path. */
+var DATA_KEYS = /* @__PURE__ */ new Set(["data", "revision"]);
+/**
+* Reactive properties that change only this component's own DOM and never the engine's options.
+*
+* The hover state is the important one. Without it, moving the pointer counts as a presentation change and
+* rebuilds the engine options — and under uPlot `setOptions` destroys and reconstructs the instance, which
+* resets the cursor mid-hover, makes the tooltip impossible to show, and throws away the chart on every
+* mouse move. The legend and the state messages are likewise ours to draw, not the engine's.
+*/
+var VIEW_ONLY_KEYS = /* @__PURE__ */ new Set([
+	"hoverContext",
+	"hiddenSeries",
+	"engineFailed",
+	"loading",
+	"error",
+	"emptyMessage",
+	"tooltip",
+	"legend",
+	"maxPoints",
+	"lazyRender",
+	"renderTooltip",
+	"renderLegendItem",
+	"dataSource"
+]);
+/** `stats.cpu` -> `Cpu`, `unit_price` -> `Unit price`: a readable label for an inferred field. */
+function humanize(field) {
+	const spaced = (field.split(".").pop() ?? field).replace(/[_-]+/g, " ").replace(/([a-z\d])([A-Z])/g, "$1 $2");
+	return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+/** Pixels a resize must exceed before the engine is told; a canvas resize is a full redraw. */
+var RESIZE_EPSILON = 1;
+/**
+* Shared behaviour of every `c2-*-chart`: the chrome and its slots, the resize observer, theme
+* resolution, data normalisation, and the routing that keeps a realtime update off the expensive path.
+* It defines no tag and is never registered — the concrete charts extend it.
+*
+* **Why the data and presentation inputs are separate.** `data` and `revision` are the only properties on
+* the data path; everything else is presentation. A change limited to the data path is pushed straight
+* into the engine from `shouldUpdate`, which returns `false`, so Lit never renders or commits and the
+* canvas container is not touched. Anything else rebuilds the engine options, which is allowed to be
+* expensive. That is what makes a streaming tick cost one engine redraw and nothing more.
+*
+* **Sizing.** A canvas has no intrinsic size, so the host is sized by `--c2-chart--height` (320px by
+* default) rather than by its content. Give the host a height — through the variable, a CSS rule, or a
+* flex parent — or the plot area collapses.
+*
+* @slot default - The series definitions: `c2-chart-series` elements. They render nothing themselves.
+* @slot legend - Replaces the built-in legend. The built-in one is still what `legend` positions.
+* @slot tooltip - Replaces the built-in tooltip body. The hovered point is available through the `renderTooltip` property when a function is easier than markup.
+* @slot actions - Controls pinned to the top-right of the plot area, for a range picker or an export button.
+* @slot empty - Replaces the built-in "no data" message.
+* @slot loading - Replaces the built-in message shown while `loading` is set.
+* @slot error - Replaces the built-in message shown when `error` is set.
+*
+* @slotcomponent c2-chart-series
+*
+* @event {CustomEvent<{ engine: string }>} chart-ready - Fired after the engine has loaded and drawn for the first time. The host also gains `data-chart-ready`, which is what a test should wait on.
+* @event {CustomEvent<{ error: unknown }>} chart-error - Fired when the engine fails to load or to draw. `detail.error` is the underlying failure.
+* @event {CustomEvent<ChartPointEventDetail>} point-click - Fired when a datum is clicked. Does not bubble: several components fire point events, so a listener belongs on the element itself.
+* @event {CustomEvent<ChartPointEventDetail>} point-hover - Fired as the pointer moves between data points, and with a `null` detail when it leaves the plot. Does not bubble.
+* @event {CustomEvent<ChartRangeEventDetail>} range-change - Fired after the user zooms or brushes. `detail.min` and `detail.max` are the new x bounds. Does not bubble.
+* @event {CustomEvent<ChartSeriesToggleEventDetail>} series-toggle - Fired when a legend entry is toggled. Does not bubble.
+*
+* @csspart frame - The outer flex column holding the legend and the plot area.
+* @csspart plot-area - The positioned box the engine draws into.
+* @csspart plot - The engine's container element. Carries no Lit bindings, so the canvas survives every update.
+* @csspart overlay - The non-interactive layer above the canvas that holds the tooltip and the actions.
+* @csspart tooltip - The tooltip bubble.
+* @csspart actions - The container for the `actions` slot.
+* @csspart state - The empty, loading or error message layer.
+* @csspart legend - The legend container.
+* @csspart legend-item - One legend entry, a toggle button.
+* @csspart legend-marker - The colour swatch inside a legend entry.
+*
+* @cssproperty {length} [--c2-chart--width=100%] - Width of the host. The plot is absolutely positioned and has no intrinsic width, so a chart used as a flex item would otherwise collapse to its legend.
+* @cssproperty {pixel} [--c2-chart--height=320px] - Height of the host. A canvas has no intrinsic size, so this is what gives the chart a box.
+* @cssproperty {color} [--c2-chart--background=#ffffff] - Background of the chart surface.
+* @cssproperty {color} [--c2-chart--color=#18181b] - Primary text colour.
+* @cssproperty {font-family} [--c2-chart--font-family=inherit] - Font family used for the chart chrome and the labels the engine draws.
+* @cssproperty {font-size} [--c2-chart--font-size=12px] - Base font size.
+* @cssproperty {padding} [--c2-chart--padding=12px] - Padding around the whole chart.
+*
+* @cssproperty {border} [--c2-chart--border-top=1px solid #e4e4e7] - Top border.
+* @cssproperty {border} [--c2-chart--border-right=1px solid #e4e4e7] - Right border.
+* @cssproperty {border} [--c2-chart--border-bottom=1px solid #e4e4e7] - Bottom border.
+* @cssproperty {border} [--c2-chart--border-left=1px solid #e4e4e7] - Left border.
+* @cssproperty {border-radius} [--c2-chart--border-top-left-radius=8px] - Top-left corner radius.
+* @cssproperty {border-radius} [--c2-chart--border-top-right-radius=8px] - Top-right corner radius.
+* @cssproperty {border-radius} [--c2-chart--border-bottom-left-radius=8px] - Bottom-left corner radius.
+* @cssproperty {border-radius} [--c2-chart--border-bottom-right-radius=8px] - Bottom-right corner radius.
+*
+* @cssproperty {color} [--c2-chart__series-1--color=#0265dc] - Colour of the first series.
+* @cssproperty {color} [--c2-chart__series-2--color=#ea580c] - Colour of the second series.
+* @cssproperty {color} [--c2-chart__series-3--color=#0f766e] - Colour of the third series.
+* @cssproperty {color} [--c2-chart__series-4--color=#db2777] - Colour of the fourth series.
+* @cssproperty {color} [--c2-chart__series-5--color=#a16207] - Colour of the fifth series.
+* @cssproperty {color} [--c2-chart__series-6--color=#7c3aed] - Colour of the sixth series.
+* @cssproperty {color} [--c2-chart__series-7--color=#0891b2] - Colour of the seventh series.
+* @cssproperty {color} [--c2-chart__series-8--color=#52525b] - Colour of the eighth series. Series beyond the eighth reuse the palette from the start.
+*
+* @cssproperty {pixel} [--c2-chart__line--width=2px] - Stroke width of a line series.
+* @cssproperty {pixel} [--c2-chart__point--radius=2.5px] - Radius of a data point marker.
+* @cssproperty {opacity} [--c2-chart__area--opacity=0.15] - Opacity of the fill under an area series.
+*
+* @cssproperty {color} [--c2-chart__axis--color=#71717a] - Colour of the axis lines and tick labels.
+* @cssproperty {font-size} [--c2-chart__axis--font-size=12px] - Font size of the tick labels.
+* @cssproperty {color} [--c2-chart__grid--color=#e4e4e7] - Colour of the grid lines.
+* @cssproperty {pixel} [--c2-chart__grid--width=1px] - Width of the grid lines.
+* @cssproperty {color} [--c2-chart__crosshair--color=#a1a1aa] - Colour of the cursor crosshair.
+* @cssproperty {pixel} [--c2-chart__crosshair--width=1px] - Width of the cursor crosshair.
+*
+* @cssproperty {color} [--c2-chart__surface--color=#ffffff] - Surface colour handed to the engine, for marker borders and label backdrops.
+* @cssproperty {color} [--c2-chart__muted--color=#71717a] - Secondary text colour.
+* @cssproperty {color} [--c2-chart__positive--color=#16a34a] - Colour for a rising value, used by the candlestick and gauge charts.
+* @cssproperty {color} [--c2-chart__negative--color=#dc2626] - Colour for a falling value, used by the candlestick and gauge charts.
+*
+* @cssproperty {pixel} [--c2-chart__legend--gap=12px] - Gap between legend entries.
+* @cssproperty {padding} [--c2-chart__legend--padding=8px 0 0] - Padding around the legend.
+* @cssproperty {color} [--c2-chart__legend--color=#71717a] - Legend text colour.
+* @cssproperty {font-size} [--c2-chart__legend--font-size=12px] - Legend font size.
+* @cssproperty {opacity} [--c2-chart__legend__disabled--opacity=0.38] - Opacity of a legend entry whose series is hidden.
+* @cssproperty {pixel} [--c2-chart__legend-marker--size=10px] - Size of the legend colour swatch.
+* @cssproperty {border-radius} [--c2-chart__legend-marker--border-radius=999px] - Corner radius of the legend colour swatch.
+*
+* @cssproperty {color} [--c2-chart__tooltip--background-color=#18181b] - Tooltip background.
+* @cssproperty {color} [--c2-chart__tooltip--color=#fafafa] - Tooltip text colour.
+* @cssproperty {font-size} [--c2-chart__tooltip--font-size=12px] - Tooltip font size.
+* @cssproperty {padding} [--c2-chart__tooltip--padding=8px 10px] - Tooltip padding.
+* @cssproperty {border-radius} [--c2-chart__tooltip--border-radius=6px] - Tooltip corner radius.
+* @cssproperty {box-shadow} [--c2-chart__tooltip--box-shadow=0 8px 24px rgba(24, 24, 27, 0.08)] - Tooltip shadow.
+* @cssproperty {pixel} [--c2-chart__tooltip--gap=6px] - Gap between tooltip rows.
+*
+* @cssproperty {color} [--c2-chart__state--color=#71717a] - Colour of the empty, loading and error text.
+* @cssproperty {font-size} [--c2-chart__state--font-size=14px] - Font size of the empty, loading and error text.
+*/
+var ChartBase = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.revision = 0;
+		this.xField = "";
+		this.labelField = "";
+		this.xType = "linear";
+		this.legend = "bottom";
+		this.tooltip = "axis";
+		this.animation = "none";
+		this.loading = false;
+		this.error = "";
+		this.emptyMessage = "No data";
+		this.maxPoints = 0;
+		this.lazyRender = false;
+		this.seriesElements = [];
+		this.hiddenSeries = /* @__PURE__ */ new Set();
+		this.hoverContext = null;
+		this.engineFailed = false;
+		this.themeController = new ChartThemeController(this, () => this.handleThemeChange());
+		this.frameBuilder = new ChartFrameBuilder();
+		this.#creating = false;
+		this.#optionsDirty = false;
+		this.#optionsMode = "merge";
+		this.#dataDirty = false;
+		this.#appended = 0;
+		this.#measured = {
+			width: 0,
+			height: 0
+		};
+		this.#visible = false;
+		this.#handleSeriesChange = (event) => {
+			event.stopPropagation();
+			this.#collectSeries();
+		};
+	}
+	static {
+		this.styles = unsafeCSS(chart_default);
+	}
+	/** Guards against two `createChart` runs racing while the engine chunk is in flight. */
+	#creating;
+	#optionsDirty;
+	#optionsMode;
+	#dataDirty;
+	#appended;
+	#measured;
+	#resizeObserver;
+	#intersectionObserver;
+	#visible;
+	#unsubscribe;
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener(SERIES_CHANGE_EVENT, this.#handleSeriesChange);
+		if (isServer) return;
+		if (typeof ResizeObserver !== "undefined" && !this.#resizeObserver) this.#resizeObserver = new ResizeObserver((entries) => this.#handleResize(entries));
+		if (this.plotElement) this.#resizeObserver?.observe(this.plotElement);
+		if (this.lazyRender && typeof IntersectionObserver !== "undefined") {
+			if (!this.#intersectionObserver) this.#intersectionObserver = new IntersectionObserver((entries) => {
+				if (!entries.some((entry) => entry.isIntersecting)) return;
+				this.#visible = true;
+				this.#intersectionObserver?.disconnect();
+				this.requestUpdate();
+			});
+			this.#intersectionObserver.observe(this);
+		} else this.#visible = true;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(SERIES_CHANGE_EVENT, this.#handleSeriesChange);
+		this.#resizeObserver?.disconnect();
+		this.#intersectionObserver?.disconnect();
+		this.#unsubscribe?.();
+		this.#unsubscribe = void 0;
+		this.adapter?.destroy();
+		this.adapter = void 0;
+		this.removeAttribute("data-chart-ready");
+	}
+	/**
+	* The fast path. A change confined to `data`/`revision` on a live chart is pushed into the engine here
+	* and `false` is returned, so Lit skips render and commit entirely and the canvas is never touched.
+	*/
+	shouldUpdate(changed) {
+		if (!this.hasUpdated || !this.adapter) return true;
+		for (const key of changed.keys()) if (!DATA_KEYS.has(key)) return true;
+		this.frame = this.frameBuilder.build(this.data, this.normalizeContext());
+		this.#flushData();
+		return false;
+	}
+	willUpdate(changed) {
+		if (changed.has("data") || changed.has("revision")) {
+			this.frame = this.frameBuilder.build(this.data, this.normalizeContext());
+			this.#dataDirty = true;
+		}
+		if (changed.has("dataSource")) this.#bindDataSource();
+		for (const key of changed.keys()) {
+			const name = key;
+			if (!DATA_KEYS.has(name) && !VIEW_ONLY_KEYS.has(name)) {
+				this.#optionsDirty = true;
+				break;
+			}
+		}
+		if (changed.has("series") || changed.has("seriesElements")) this.#optionsMode = "replace";
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (isServer) return;
+		this.#sync();
+	}
+	/**
+	* Replaces the data without going through the update queue. Equivalent to assigning `data`, but skips
+	* Lit's scheduling — worth it in a tight loop.
+	*/
+	updateData(next) {
+		this.data = next;
+		this.frame = this.frameBuilder.build(next, this.normalizeContext());
+		this.#flushData();
+	}
+	/**
+	* Appends one point across every series at a shared x. The frame grows in place, so nothing is
+	* re-normalised and no Lit update is scheduled: a 10 Hz feed costs one engine redraw per tick.
+	*/
+	appendPoint(x, values) {
+		if (!this.frame) {
+			this.frame = this.frameBuilder.build([], this.normalizeContext());
+			if (!this.frame) return;
+		}
+		this.frameBuilder.push(this.frame, x, values, this.maxPoints);
+		this.#appended += 1;
+		this.#flushData();
+	}
+	/** Shows or hides one series, as the legend does. */
+	setSeriesVisible(index, visible) {
+		const next = new Set(this.hiddenSeries);
+		if (visible) next.delete(index);
+		else next.add(index);
+		this.hiddenSeries = next;
+		this.adapter?.setSeriesVisibility(index, visible);
+		const series = this.resolvedSeries[index];
+		if (!series) return;
+		this.dispatchEvent(new CustomEvent("series-toggle", { detail: {
+			seriesIndex: index,
+			series,
+			visible,
+			hidden: [...next]
+		} }));
+	}
+	/** The series in draw order: `c2-chart-series` children when present, otherwise the `series` property. */
+	get resolvedSeries() {
+		if (this.seriesElements.length > 0) return this.seriesElements.filter((element) => !element.hidden).map((element) => element.toConfig());
+		if (this.series && this.series.length > 0) return this.series.filter((series) => !series.hidden);
+		return this.inferredSeries();
+	}
+	/**
+	* The series to draw when nothing was declared: every numeric field of the first row except the ones
+	* already spoken for by `x-field` and `label-field`.
+	*
+	* This reads `data` rather than the normalised frame on purpose. Deriving it from the frame would be
+	* circular — the frame is built *from* the series list — and naming the results positionally would be
+	* worse than circular: the next normalisation would look up a field that does not exist in the rows and
+	* quietly read every value as a gap.
+	*/
+	inferredSeries() {
+		const rows = this.data;
+		if (!Array.isArray(rows) || rows.length === 0) return [];
+		const first = rows[0];
+		if (typeof first === "number") return [{
+			field: "value",
+			label: "Value"
+		}];
+		if (Array.isArray(first) || ArrayBuffer.isView(first)) return rows.slice(1).map((_column, index) => ({
+			field: `${index}`,
+			label: `Series ${index + 1}`
+		}));
+		const row = first;
+		return Object.keys(row).filter((key) => typeof row[key] === "number" && key !== this.xField && key !== this.labelField).map((key) => ({
+			field: key,
+			label: humanize(key)
+		}));
+	}
+	/** The colour a series draws with: its own `color`, else its palette slot. */
+	colorOf(series, index, theme = this.themeController.theme) {
+		return series.color ?? theme.palette[index % theme.palette.length];
+	}
+	normalizeContext() {
+		const series = this.resolvedSeries;
+		return {
+			xField: this.xField,
+			labelField: this.labelField,
+			series,
+			signature: `${this.xField}|${this.labelField}|${this.xType}|${series.map((item) => item.field).join(",")}`
+		};
+	}
+	buildContext() {
+		return {
+			theme: this.themeController.theme,
+			series: this.resolvedSeries,
+			hidden: this.hiddenSeries,
+			labels: this.frame?.labels,
+			width: this.#measured.width || this.plotElement?.clientWidth || 0,
+			height: this.#measured.height || this.plotElement?.clientHeight || 0
+		};
+	}
+	/** True once there is something to draw and somewhere to draw it. */
+	#canRender() {
+		if (!this.#visible || this.engineFailed || this.error || this.loading) return false;
+		if (!this.plotElement || !this.frame || this.frame.length === 0) return false;
+		const { width, height } = this.buildContext();
+		return width > 0 && height > 0;
+	}
+	async #sync() {
+		if (!this.#canRender()) return;
+		if (!this.adapter) {
+			await this.#createChart();
+			return;
+		}
+		if (this.#optionsDirty) {
+			this.#optionsDirty = false;
+			this.adapter.setOptions(this.buildOptions(this.buildContext()), this.#optionsMode);
+			this.#optionsMode = "merge";
+			this.#dataDirty = true;
+		}
+		if (this.#dataDirty) this.#flushData();
+	}
+	async #createChart() {
+		if (this.#creating || !this.plotElement || !this.frame) return;
+		this.#creating = true;
+		try {
+			const adapter = await this.createAdapter();
+			if (!this.isConnected || !this.plotElement) {
+				adapter.destroy();
+				return;
+			}
+			const context = this.buildContext();
+			await adapter.create(this.plotElement, this.buildOptions(context), this.projectData(this.frame, context), {
+				hover: (detail) => this.#handleHover(detail),
+				click: (detail) => this.#handleClick(detail),
+				rangeChange: (detail) => this.dispatchEvent(new CustomEvent("range-change", { detail }))
+			});
+			this.adapter = adapter;
+			this.#optionsDirty = false;
+			this.#dataDirty = false;
+			for (const index of this.hiddenSeries) adapter.setSeriesVisibility(index, false);
+			this.setAttribute("data-chart-ready", "true");
+			this.dispatchEvent(new CustomEvent("chart-ready", { detail: { engine: this.engineName } }));
+		} catch (error) {
+			this.engineFailed = true;
+			this.dispatchEvent(new CustomEvent("chart-error", { detail: { error } }));
+		} finally {
+			this.#creating = false;
+		}
+	}
+	#flushData() {
+		if (!this.adapter || !this.frame) return;
+		this.#dataDirty = false;
+		const projected = this.projectData(this.frame, this.buildContext());
+		if (this.#appended > 0 && this.adapter.appendData) this.adapter.appendData(projected, this.#appended);
+		else this.adapter.setData(projected);
+		this.#appended = 0;
+	}
+	#handleResize(entries) {
+		const rect = entries[entries.length - 1]?.contentRect;
+		if (!rect) return;
+		if (Math.abs(rect.width - this.#measured.width) < RESIZE_EPSILON && Math.abs(rect.height - this.#measured.height) < RESIZE_EPSILON) return;
+		this.#measured = {
+			width: rect.width,
+			height: rect.height
+		};
+		if (this.adapter) this.adapter.resize(rect.width, rect.height);
+		else this.#sync();
+	}
+	handleThemeChange() {
+		this.#optionsDirty = true;
+		this.requestUpdate();
+	}
+	#handleSeriesChange;
+	#collectSeries() {
+		const slot = this.renderRoot?.querySelector("slot.definitions");
+		if (!slot) return;
+		const found = [];
+		for (const element of slot.assignedElements({ flatten: true })) if (element.localName === "c2-chart-series") found.push(element);
+		else found.push(...Array.from(element.querySelectorAll(SERIES_TAG)));
+		if (!isServer && typeof customElements !== "undefined") for (const element of found) customElements.upgrade(element);
+		this.seriesElements = found;
+	}
+	#bindDataSource() {
+		this.#unsubscribe?.();
+		this.#unsubscribe = void 0;
+		const source = this.dataSource;
+		if (!source) return;
+		const controller = new AbortController();
+		source.getWindow({
+			maxPoints: this.maxPoints || 2e3,
+			signal: controller.signal
+		}).then((result) => {
+			this.updateData(result.data);
+		}).catch((error) => {
+			this.dispatchEvent(new CustomEvent("chart-error", { detail: { error } }));
+		});
+		if (source.subscribe) {
+			const stop = source.subscribe((x, values) => this.appendPoint(x, values));
+			this.#unsubscribe = () => {
+				controller.abort();
+				stop();
+			};
+		} else this.#unsubscribe = () => controller.abort();
+	}
+	#handleHover(detail) {
+		if (!detail || !this.frame || this.tooltip === "none") {
+			this.#setHover(null);
+			return;
+		}
+		const context = this.#tooltipContextAt(detail);
+		this.#setHover(context);
+		const point = this.#pointAt(detail.index, detail.seriesIndex);
+		if (point) this.dispatchEvent(new CustomEvent("point-hover", { detail: point }));
+	}
+	/**
+	* Positions the tooltip imperatively. A pointer move must not schedule a Lit update, so the transform is
+	* written straight to the node; only a change of hovered index re-renders, and only when the body is
+	* actually dynamic.
+	*/
+	#setHover(context) {
+		const previous = this.hoverContext;
+		if (context && this.tooltipElement) this.tooltipElement.style.transform = `translate(${context.px}px, ${context.py}px)`;
+		if (previous && context && previous.index === context.index) return;
+		this.hoverContext = context;
+	}
+	#tooltipContextAt(detail) {
+		const frame = this.frame;
+		const theme = this.themeController.theme;
+		const series = this.resolvedSeries;
+		const x = columnValue(frame.x, detail.index) ?? detail.index;
+		const entries = [];
+		series.forEach((item, index) => {
+			if (this.hiddenSeries.has(index)) return;
+			if (this.tooltip === "item" && index !== detail.seriesIndex) return;
+			const column = frame.columns[index];
+			if (!column) return;
+			const value = columnValue(column, detail.index);
+			entries.push({
+				seriesIndex: index,
+				series: item,
+				value,
+				formatted: value === null ? "—" : item.format?.(value) ?? this.formatValue(value),
+				color: this.colorOf(item, index, theme)
+			});
+		});
+		return {
+			index: detail.index,
+			x,
+			formattedX: frame.labels?.[detail.index] ?? this.formatX(x),
+			entries,
+			px: detail.px,
+			py: detail.py
+		};
+	}
+	#pointAt(index, seriesIndex) {
+		const frame = this.frame;
+		const series = this.resolvedSeries[seriesIndex];
+		if (!frame || !series) return void 0;
+		return {
+			index,
+			seriesIndex,
+			series,
+			x: columnValue(frame.x, index) ?? index,
+			y: frame.columns[seriesIndex] ? columnValue(frame.columns[seriesIndex], index) : null,
+			label: frame.labels?.[index]
+		};
+	}
+	#handleClick(detail) {
+		const point = this.#pointAt(detail.index, detail.seriesIndex);
+		if (point) this.dispatchEvent(new CustomEvent("point-click", { detail: point }));
+	}
+	/** Formats an x value for the tooltip. Time charts get a date, everything else a number. */
+	formatX(value) {
+		if (this.xType === "time") return new Intl.DateTimeFormat(this.locale, {
+			dateStyle: "medium",
+			timeStyle: "short"
+		}).format(new Date(value));
+		return this.formatValue(value);
+	}
+	/**
+	* How much time the chart currently covers, in milliseconds, or `0` when that is not a meaningful question.
+	* Axis labels are chosen from it: a day of five-minute samples and a year of daily ones want different ticks.
+	*/
+	xSpan() {
+		const frame = this.frame;
+		if (!frame || frame.length < 2) return 0;
+		const first = Number(frame.x[0]);
+		const last = Number(frame.x[frame.length - 1]);
+		return Number.isFinite(first) && Number.isFinite(last) ? Math.abs(last - first) : 0;
+	}
+	/** Formats a y value for the tooltip and the built-in labels. */
+	formatValue(value) {
+		return new Intl.NumberFormat(this.locale, { maximumFractionDigits: 2 }).format(value);
+	}
+	render() {
+		const legendBefore = this.legend === "top" || this.legend === "start";
+		const legendAfter = this.legend === "bottom" || this.legend === "end";
+		const side = this.legend === "start" || this.legend === "end";
+		return html`
+      <div class="frame ${side ? "frame--side" : ""}" part="frame">
+        ${legendBefore ? this.renderLegend() : nothing}
+        <div class="plot-area" part="plot-area">
+          <!-- No bindings inside: Lit never patches this node, so the engine's canvas survives updates. -->
+          <div class="plot" part="plot"></div>
+          <div class="overlay" part="overlay">
+            <div class="tooltip" part="tooltip" role="tooltip" ?hidden=${!this.hoverContext || this.tooltip === "none"}>${this.renderTooltipBody()}</div>
+            <div class="actions" part="actions"><slot name="actions"></slot></div>
+          </div>
+          ${this.renderState()}
+        </div>
+        ${legendAfter ? this.renderLegend() : nothing}
+      </div>
+      <div class="theme-probe" aria-hidden="true">${PROBE_COLORS.map(() => html`<i></i>`)}</div>
+      <slot class="definitions" @slotchange=${this.#collectSeries}></slot>
+    `;
+	}
+	/** Named slot, then the renderer property, then the built-in rows — the library's three-layer fallback. */
+	renderTooltipBody() {
+		const context = this.hoverContext;
+		return html`<slot name="tooltip">${context ? this.renderTooltip?.(context) ?? this.defaultTooltip(context) : nothing}</slot>`;
+	}
+	defaultTooltip(context) {
+		return html`
+      <div class="tooltip-title">${context.formattedX}</div>
+      ${context.entries.map((entry) => html`
+          <div class="tooltip-row">
+            <span class="tooltip-marker" style="background:${entry.color}"></span>
+            <span class="tooltip-label">${entry.series.label ?? entry.series.field}</span>
+            <span class="tooltip-value">${entry.formatted}</span>
+          </div>
+        `)}
+    `;
+	}
+	renderState() {
+		if (this.error) return html`<div class="state" part="state"><slot name="error">${this.error}</slot></div>`;
+		if (this.loading) return html`<div class="state" part="state"><slot name="loading">Loading…</slot></div>`;
+		if (!this.frame || this.frame.length === 0) return html`<div class="state" part="state"><slot name="empty">${this.emptyMessage}</slot></div>`;
+		return nothing;
+	}
+	/**
+	* What the legend lists. One entry per series for every cartesian chart — but a chart whose data is one
+	* dimensional overrides this: a pie has a single series and many slices, and listing "Revenue" above a
+	* four-slice donut tells the reader nothing.
+	*/
+	legendItems() {
+		return this.resolvedSeries.map((item, index) => ({
+			label: item.label ?? item.field,
+			color: this.colorOf(item, index),
+			visible: !this.hiddenSeries.has(index),
+			toggle: () => this.setSeriesVisible(index, this.hiddenSeries.has(index)),
+			series: item,
+			index
+		}));
+	}
+	renderLegend() {
+		return html`
+      <div class="legend legend--${this.legend}" part="legend">
+        <slot name="legend">
+          ${this.legendItems().map((item) => html`
+              <button class="legend-item" part="legend-item" type="button" aria-pressed=${item.visible ? "true" : "false"} @click=${item.toggle}>
+                ${this.renderLegendItem?.(item.series, item.index) ?? html`
+                    <span class="legend-marker" part="legend-marker" style="background:${item.color}"></span>
+                    <span class="legend-label">${item.label}</span>
+                  `}
+              </button>
+            `)}
+        </slot>
+      </div>
+    `;
+	}
+};
+__decorate([query(".plot")], ChartBase.prototype, "plotElement", void 0);
+__decorate([query(".tooltip")], ChartBase.prototype, "tooltipElement", void 0);
+__decorate([property({ converter: jsonPropertyConverter })], ChartBase.prototype, "data", void 0);
+__decorate([property({ type: Number })], ChartBase.prototype, "revision", void 0);
+__decorate([property({ attribute: false })], ChartBase.prototype, "dataSource", void 0);
+__decorate([property({ converter: jsonPropertyConverter })], ChartBase.prototype, "series", void 0);
+__decorate([property({
+	type: String,
+	attribute: "x-field"
+})], ChartBase.prototype, "xField", void 0);
+__decorate([property({
+	type: String,
+	attribute: "label-field"
+})], ChartBase.prototype, "labelField", void 0);
+__decorate([property({
+	type: String,
+	attribute: "x-type"
+})], ChartBase.prototype, "xType", void 0);
+__decorate([property({ type: String })], ChartBase.prototype, "legend", void 0);
+__decorate([property({ type: String })], ChartBase.prototype, "tooltip", void 0);
+__decorate([property({ type: String })], ChartBase.prototype, "animation", void 0);
+__decorate([property({ type: String })], ChartBase.prototype, "locale", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ChartBase.prototype, "loading", void 0);
+__decorate([property({ type: String })], ChartBase.prototype, "error", void 0);
+__decorate([property({
+	type: String,
+	attribute: "empty-message"
+})], ChartBase.prototype, "emptyMessage", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "max-points"
+})], ChartBase.prototype, "maxPoints", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "lazy-render"
+})], ChartBase.prototype, "lazyRender", void 0);
+__decorate([property({ attribute: false })], ChartBase.prototype, "renderTooltip", void 0);
+__decorate([property({ attribute: false })], ChartBase.prototype, "renderLegendItem", void 0);
+__decorate([state()], ChartBase.prototype, "seriesElements", void 0);
+__decorate([state()], ChartBase.prototype, "hiddenSeries", void 0);
+__decorate([state()], ChartBase.prototype, "hoverContext", void 0);
+__decorate([state()], ChartBase.prototype, "engineFailed", void 0);
+//#endregion
+export { chart_default as n, ChartBase as t };