@mono-lit/helper 0.0.0-stage → 0.0.1

package/dist/ui/shadow/chart.js

@@ -0,0 +1,1569 @@
+import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration, u as numberStringConverter, v as monoPendingGrace } from "../../hydration-flush-RB5Tz5nl.js";
+import { n as toCssSize } from "../../css-size-DhHSVZJK.js";
+import { n as detachEventHandlers, t as applyProps } from "../../element-props-CLB6yvbm.js";
+import { t as createNotifier } from "../../notifier-CE4yxMUQ.js";
+import { n as isPath, t as getFieldValue } from "../../field-path-C92eGLg3.js";
+import { b as andPredicates, x as compileFilterPredicate, y as andFilters } from "../../reactive-BHsqVjRh.js";
+import { r as readAllRows } from "../../data-source-read-CUX-lgrQ.js";
+import { a as resolveDataSourceOptions, d as createApplyGate, f as isRolledUp, h as monoArraySource, i as normalizeSortList, n as extraLoadOptions, o as toList, p as loadApply, r as mergeDataSourceOptions, u as summaryFilterOf } from "../../data-source-options-BTpfrOZ_.js";
+import { t as arrayToODataString } from "../../filter-odata-C1vSGZaY.js";
+import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+//#region src/components/chart/chart-core.ts
+/**
+* The mono color names a chart accepts wherever a color is expected. They map to
+* the `--_mono-chart-<name>` resolvers in chart.css, which chain through the
+* public `--mono-chart-*` overrides to the Basecoat tokens — `chart-1` … `chart-5`
+* are Basecoat's own chart palette (`--chart-1` … `--chart-5`), the roles are the
+* page's. `surface` is internal: the hairline between slices.
+*/
+var MONO_COLOR_NAMES = new Set([
+	"chart-1",
+	"chart-2",
+	"chart-3",
+	"chart-4",
+	"chart-5",
+	"primary",
+	"secondary",
+	"accent",
+	"success",
+	"warning",
+	"danger",
+	"info",
+	"surface"
+]);
+/** Used before the element is in the DOM (SSR) or if a token resolves empty — ONE, light. */
+var MONO_COLOR_FALLBACK = {
+	"chart-1": "oklch(0.859 0.069 267.7)",
+	"chart-2": "oklch(0.735 0.12 268.04)",
+	"chart-3": "oklch(0.61 0.12 267.95)",
+	"chart-4": "oklch(0.485 0.119 267.92)",
+	"chart-5": "oklch(0.36 0.12 268.21)",
+	primary: "oklch(0.299 0.119 267.96)",
+	secondary: "oklch(0.554 0.041 257.42)",
+	accent: "oklch(0.735 0.12 268.04)",
+	success: "oklch(0.5239 0.0917 180.004)",
+	warning: "oklch(0.5423 0.1066 70.504)",
+	danger: "oklch(0.561 0.202 26.71)",
+	info: "oklch(0.431 0.163 267.72)",
+	surface: "oklch(0.973 0.007 268.55)"
+};
+/** The tooltip lines come from the data (labels, formatted values) — never markup. */
+function escapeHtml(s) {
+	return s.replace(/[&<>"']/g, (c) => ({
+		"&": "&amp;",
+		"<": "&lt;",
+		">": "&gt;",
+		"\"": "&quot;",
+		"'": "&#39;"
+	})[c]);
+}
+/**
+* Cached loader for the OPTIONAL `chart.js` peer.
+*
+* `chart.js/auto` self-registers every controller/scale/element — the right
+* trade here because the library is externalized, so the consumer's bundler
+* owns the cost and tree-shaking on our side would buy nothing.
+*/
+var _chartPromise = null;
+function loadChartJs() {
+	_chartPromise ??= import("chart.js/auto").then((m) => m?.default ?? m).catch((err) => {
+		_chartPromise = null;
+		throw new Error("[mono-chart] needs the optional peer dependency \"chart.js\". Install it in your app: pnpm add chart.js@4.5.1" + (err?.message ? ` (original error: ${err.message})` : ""));
+	});
+	return _chartPromise;
+}
+/**
+* `MonoChartCore` — render-mode-agnostic logic for the chart elements.
+*
+* It owns the imperative Chart.js lifecycle, following the same shape as the
+* flatpickr wrapper in `date-core.ts`: create in `firstUpdated` behind an
+* `isServer` guard and a dynamic import, split `updated()` into a cheap data
+* update vs a full rebuild, and destroy in `disconnectedCallback` BEFORE
+* `super`. A `ResizeObserver` is added on top because, unlike flatpickr, a
+* canvas needs to be told when its box changes.
+*/
+var MonoChartCore = (superClass) => {
+	class MonoChartCoreClass extends superClass {
+		constructor(...args) {
+			super(...args);
+			this.aspectRatio = 2;
+			this.legend = true;
+			this.title = "";
+			this.stacked = false;
+			this.cssClass = {};
+			this.cssClassName = "";
+			this._error = "";
+			this._chart = null;
+			this._buildToken = 0;
+			this._onThemeChanged = () => {
+				if (isServer || !this._chart) return;
+				requestAnimationFrame(() => {
+					if (!this._chart) return;
+					const palette = this._colors;
+					if (palette?.length) this.dataChart?.setColors(palette);
+					else this.dataChart?._setColorResolver((c) => this._resolveColor(c));
+					this.rebuild();
+				});
+			};
+			this._applyQueued = false;
+			this._externalTooltip = (context) => {
+				const el = this._tooltipEl;
+				if (!el) return;
+				const tip = context.tooltip;
+				if (!tip || tip.opacity === 0) {
+					el.removeAttribute("data-open");
+					el.setAttribute("aria-hidden", "true");
+					return;
+				}
+				const title = tip.title ?? [];
+				const bodies = (tip.body ?? []).map((b) => b.lines ?? []);
+				const colors = tip.labelColors ?? [];
+				const parts = [];
+				for (const t of title) parts.push(`<div class="mono-chart-tooltip-title">${escapeHtml(String(t))}</div>`);
+				bodies.forEach((lines, i) => {
+					const swatch = colors[i]?.backgroundColor ?? colors[i]?.borderColor;
+					for (const line of lines) {
+						const m = /^(.*?):\s*(.+)$/.exec(String(line));
+						const text = m ? `<span class="mono-chart-tooltip-label">${escapeHtml(m[1])}</span><span class="mono-chart-tooltip-value">${escapeHtml(m[2])}</span>` : `<span class="mono-chart-tooltip-label">${escapeHtml(String(line))}</span>`;
+						parts.push(`<div class="mono-chart-tooltip-row">${swatch ? `<span class="mono-chart-tooltip-swatch" style="background:${escapeHtml(String(swatch))}"></span>` : ""}${text}</div>`);
+					}
+				});
+				el.innerHTML = parts.join("");
+				const width = el.parentElement?.clientWidth ?? context.chart.width;
+				const gap = 8;
+				el.setAttribute("data-open", "");
+				el.setAttribute("aria-hidden", "false");
+				const h = el.offsetHeight;
+				const w = el.offsetWidth;
+				const side = tip.caretY - h - gap < 0 ? "bottom" : "top";
+				el.setAttribute("data-side", side);
+				const x = Math.min(Math.max(tip.caretX, w / 2), Math.max(width - w / 2, w / 2));
+				el.style.left = `${x}px`;
+				el.style.top = `${tip.caretY}px`;
+			};
+			defineHybridPropAliases(this, [
+				"dataChart",
+				"chartOptions",
+				"aspectRatio",
+				"cssClass"
+			]);
+			defineHybridPropAlias(this, "controlChart", "dataChart");
+			for (const alias of ["css-class", "cssclass"]) Object.defineProperty(this, alias, {
+				get: () => this.cssClass,
+				set: (value) => this._setCssClass(value),
+				configurable: true,
+				enumerable: false
+			});
+		}
+		static {
+			this.monoPendingAuto = "data";
+		}
+		_monoPendingReady() {
+			const ctrl = this.dataChart;
+			if (!ctrl) return this.data != null || monoPendingGrace(this);
+			if (ctrl.loading) return false;
+			return monoPendingGrace(this) || ctrl.data().datasets.length > 0;
+		}
+		static {
+			this._rebuildKeys = [
+				"type",
+				"chartOptions",
+				"legend",
+				"title",
+				"stacked",
+				"aspectRatio"
+			];
+		}
+		static get observedAttributes() {
+			return [
+				...super.observedAttributes ?? [],
+				"aspectratio",
+				"chartoptions",
+				"css-class",
+				"cssclass",
+				"colors"
+			];
+		}
+		attributeChangedCallback(name, old, value) {
+			super.attributeChangedCallback(name, old, value);
+			if (old === value) return;
+			if (name === "css-class" || name === "cssclass") this._setCssClass(value);
+			else if (name === "colors") this.colors = value ?? void 0;
+		}
+		_setCssClass(value) {
+			if (value == null) {
+				this.cssClass = {};
+				this.cssClassName = "";
+				return;
+			}
+			if (typeof value === "object") {
+				this.cssClass = value;
+				return;
+			}
+			const trimmed = String(value).trim();
+			if (!trimmed) {
+				this.cssClass = {};
+				this.cssClassName = "";
+				return;
+			}
+			if (trimmed.startsWith("{") && trimmed.endsWith("}")) try {
+				this.cssClass = JSON.parse(trimmed);
+				return;
+			} catch {}
+			this.cssClassName = trimmed;
+		}
+		/** The live chart.js instance, or null before it mounts. */
+		get chart() {
+			return this._chart;
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this._subscribe();
+			if (!isServer) {
+				window.addEventListener("theme-changed", this._onThemeChanged);
+				this._watchMode();
+			}
+		}
+		disconnectedCallback() {
+			this._off?.();
+			this._off = void 0;
+			if (!isServer) {
+				window.removeEventListener("theme-changed", this._onThemeChanged);
+				this._modeObserver?.disconnect();
+				this._modeObserver = void 0;
+				this._modeQuery?.removeEventListener("change", this._onThemeChanged);
+				this._modeQuery = void 0;
+			}
+			this._destroyChart();
+			super.disconnectedCallback();
+		}
+		/**
+		* Dark mode is the same tokens flipped by the `.dark` class on `<html>` /
+		* `<body>` (or the OS, under `color-scheme: system`) — and nothing fires
+		* `theme-changed` for that: VitePress's appearance toggle and a consumer's
+		* own switch just swap the class. Watch the class and the media query and
+		* treat a flip exactly like a theme change.
+		*/
+		_watchMode() {
+			if (typeof MutationObserver === "undefined") return;
+			let dark = document.documentElement.classList.contains("dark") || document.body?.classList.contains("dark");
+			this._modeObserver = new MutationObserver(() => {
+				const next = document.documentElement.classList.contains("dark") || document.body?.classList.contains("dark");
+				if (next === dark) return;
+				dark = next;
+				this._onThemeChanged();
+			});
+			this._modeObserver.observe(document.documentElement, {
+				attributes: true,
+				attributeFilter: ["class"]
+			});
+			if (document.body) this._modeObserver.observe(document.body, {
+				attributes: true,
+				attributeFilter: ["class"]
+			});
+			this._modeQuery = window.matchMedia?.("(prefers-color-scheme: dark)");
+			this._modeQuery?.addEventListener?.("change", this._onThemeChanged);
+		}
+		willUpdate(changed) {
+			super.willUpdate?.(changed);
+			if (changed.has("dataChart")) this._subscribe();
+		}
+		_subscribe() {
+			this._off?.();
+			detachEventHandlers(this);
+			this._off = this.dataChart?.subscribe(() => {
+				this._scheduleApplyProps();
+				this.requestUpdate();
+			});
+			if (!isServer) this.dataChart?._setColorResolver((c) => this._resolveColor(c));
+			this._scheduleApplyProps();
+		}
+		/**
+		* Drive the apply from `update()` as well as `_subscribe()` — every render
+		* reaches here, so a controller that arrives late (or a `setProps` between
+		* subscriptions) can't be missed. Same arrangement as
+		* `table-controller-core`, which documents why `_subscribe` alone is fragile.
+		*/
+		update(changed) {
+			this._scheduleApplyProps();
+			super.update(changed);
+		}
+		/**
+		* Deferred + de-duplicated: the apply writes reactive props, and doing that
+		* inside the update cycle would trip Lit's change-in-update warning.
+		*/
+		_scheduleApplyProps() {
+			if (isServer) return;
+			if (this._applyQueued) return;
+			if (typeof queueMicrotask !== "function") {
+				this._applyControllerProps();
+				return;
+			}
+			this._applyQueued = true;
+			queueMicrotask(() => {
+				this._applyQueued = false;
+				this._applyControllerProps();
+			});
+		}
+		/**
+		* Pull `controlMonoChart({ props })` onto this element, so the template needs
+		* nothing but the controller binding.
+		*
+		* The CONTROLLER WINS for keys it declares (matching `controlMonoTable` and
+		* `controlMonoForm`); keys it doesn't mention are left to whatever the
+		* template set. `applyProps` supplies the skip-undefined, read-only and
+		* equality guards. `?.props` is optional-called so a controller built before
+		* this option existed simply contributes nothing.
+		*/
+		_applyControllerProps() {
+			applyProps(this, this.dataChart?.props?.());
+		}
+		/**
+		* Effective type. A preset's locked type wins (a `<mono-chart-pie>` is a pie),
+		* then an explicit element `type`, then the controller's, then `'bar'`.
+		*/
+		get _type() {
+			return this._presetType ?? this.type ?? this.dataChart?.type ?? "bar";
+		}
+		/** Effective data: the element's raw `data` wins, else the controller's. */
+		get _data() {
+			return this.data ?? this.dataChart?.data() ?? {
+				labels: [],
+				datasets: []
+			};
+		}
+		get _loading() {
+			return !!this.dataChart?.loading;
+		}
+		get _empty() {
+			const d = this._data;
+			return !d.datasets?.length || d.datasets.every((s) => !s.data?.length);
+		}
+		/** Palette from the `colors` prop, as an array. */
+		/** The raw `colors` prop as a list, before name resolution. */
+		get _colorList() {
+			const c = this.colors;
+			if (!c) return null;
+			if (Array.isArray(c)) return c.filter(Boolean);
+			return String(c).split(",").map((s) => s.trim()).filter(Boolean);
+		}
+		/**
+		* The palette handed to Chart.js: the `colors` list if given, else the single
+		* `color` accent, else null (the controller keeps its own default).
+		* Mono color NAMES are resolved to real values here — see `_resolveColor`.
+		*/
+		get _colors() {
+			const list = this._colorList ?? (this.color ? [this.color] : null);
+			if (!list?.length) return null;
+			return list.map((c) => this._resolveColor(c));
+		}
+		/**
+		* The element's own computed style scope.
+		*
+		* Read from the inner `.mono-chart` wrapper, not the host: in the shadow
+		* build the custom properties are declared inside the shadow root, so the
+		* host would return empty strings.
+		*/
+		_styleScope() {
+			if (isServer) return null;
+			return this.renderRoot?.querySelector?.(".mono-chart") ?? this;
+		}
+		/**
+		* Turn a mono color NAME into the value the canvas needs.
+		*
+		* Chart.js paints onto a bitmap and never resolves `var()`, so `success` (or
+		* a literal `var(--x)`) would render as transparent. Names map to the
+		* component's `--_mono-chart-*` resolvers, which chain through the public
+		* `--mono-chart-*` overrides down to the Basecoat tokens — so a consumer
+		* who re-themes the app gets re-themed charts for free. Anything that isn't
+		* a known name (a hex, `rgb()`, `hsl()`) is passed through untouched.
+		*/
+		_resolveColor(value) {
+			const name = value.trim();
+			if (!MONO_COLOR_NAMES.has(name)) return name;
+			const scope = this._styleScope();
+			if (!scope) return MONO_COLOR_FALLBACK[name] ?? name;
+			const prop = name.startsWith("chart-") ? `--_mono-chart-${name.slice(6)}` : `--_mono-chart-${name}`;
+			return getComputedStyle(scope).getPropertyValue(prop).trim() || MONO_COLOR_FALLBACK[name] || name;
+		}
+		/**
+		* The inks and type Chart.js paints the chrome with — read off the element's
+		* own box, where chart.css resolved them from the Basecoat tokens: legend
+		* and title in `--foreground`, ticks in `--muted-foreground`, the grid in
+		* `--border`, the tooltip as a popover, the page font at text-xs.
+		*/
+		_themeColors() {
+			const fallback = {
+				text: "oklch(0.372 0.039 257.29)",
+				muted: "oklch(0.554 0.041 257.42)",
+				grid: "oklch(0.929 0.013 255.51)",
+				tooltipBg: "oklch(1 0 0)",
+				tooltipColor: "oklch(0.372 0.039 257.29)",
+				tooltipBorder: "oklch(0.929 0.013 255.51)",
+				fontFamily: "ui-sans-serif, system-ui, sans-serif",
+				fontSize: 12,
+				radius: 8,
+				barRadius: 8
+			};
+			const scope = this._styleScope();
+			if (!scope) return fallback;
+			const cs = getComputedStyle(scope);
+			const read = (name, fb) => cs.getPropertyValue(name).trim() || fb;
+			const px = (v, fb, min = 1) => {
+				const n = parseFloat(v);
+				return Number.isFinite(n) && n >= min ? n : fb;
+			};
+			return {
+				text: read("--_mono-chart-text", fallback.text),
+				muted: read("--_mono-chart-muted", fallback.muted),
+				grid: read("--_mono-chart-grid", fallback.grid),
+				tooltipBg: read("--_mono-chart-tooltip-bg", fallback.tooltipBg),
+				tooltipColor: read("--_mono-chart-tooltip-color", fallback.tooltipColor),
+				tooltipBorder: read("--_mono-chart-tooltip-border", fallback.tooltipBorder),
+				fontFamily: cs.fontFamily || fallback.fontFamily,
+				fontSize: px(cs.fontSize, fallback.fontSize),
+				radius: px(cs.borderTopLeftRadius, fallback.radius, 0),
+				barRadius: px(getComputedStyle(this.renderRoot?.querySelector?.(".mono-chart-canvas-wrap") ?? scope).borderTopLeftRadius, fallback.barRadius, 0)
+			};
+		}
+		/** Merge the element's presentational props with the consumer's raw options. */
+		_buildOptions() {
+			const theme = this._themeColors();
+			const legendOn = this.legend !== false && this.legend !== "false";
+			const legendPos = typeof this.legend === "string" && this.legend !== "true" ? this.legend : "top";
+			const scaled = this._type !== "pie" && this._type !== "doughnut" && this._type !== "polarArea";
+			const base = {
+				responsive: true,
+				maintainAspectRatio: !this.height,
+				aspectRatio: this.aspectRatio,
+				font: {
+					family: theme.fontFamily,
+					size: theme.fontSize
+				},
+				color: theme.text,
+				plugins: {
+					legend: {
+						display: legendOn,
+						position: legendPos,
+						labels: {
+							color: theme.text,
+							font: {
+								family: theme.fontFamily,
+								size: theme.fontSize
+							},
+							boxWidth: theme.fontSize,
+							boxHeight: theme.fontSize,
+							useBorderRadius: true,
+							borderRadius: Math.round(theme.fontSize / 4)
+						}
+					},
+					title: this.title ? {
+						display: true,
+						text: this.title,
+						color: theme.text,
+						font: {
+							family: theme.fontFamily,
+							size: theme.fontSize + 2,
+							weight: 500
+						}
+					} : { display: false },
+					tooltip: {
+						enabled: false,
+						external: this._externalTooltip,
+						backgroundColor: theme.tooltipBg,
+						titleColor: theme.tooltipColor,
+						bodyColor: theme.tooltipColor,
+						borderColor: theme.tooltipBorder,
+						borderWidth: 1,
+						cornerRadius: theme.radius,
+						padding: {
+							x: 12,
+							y: 6
+						},
+						titleFont: {
+							family: theme.fontFamily,
+							size: theme.fontSize,
+							weight: 500
+						},
+						bodyFont: {
+							family: theme.fontFamily,
+							size: theme.fontSize
+						},
+						boxPadding: 4,
+						usePointStyle: true
+					}
+				},
+				onClick: (_e, els) => {
+					const hit = els?.[0];
+					if (!hit) return;
+					this.dataChart?._emitPoint?.(hit.datasetIndex, hit.index);
+				}
+			};
+			if (scaled) {
+				base.elements = { bar: { borderRadius: theme.barRadius } };
+				base.interaction = {
+					mode: "index",
+					intersect: false
+				};
+				base.scales = {
+					x: {
+						stacked: this.stacked,
+						ticks: {
+							color: theme.muted,
+							font: {
+								family: theme.fontFamily,
+								size: theme.fontSize
+							}
+						},
+						grid: { color: theme.grid },
+						border: { color: theme.grid }
+					},
+					y: {
+						stacked: this.stacked,
+						ticks: {
+							color: theme.muted,
+							font: {
+								family: theme.fontFamily,
+								size: theme.fontSize
+							}
+						},
+						grid: { color: theme.grid },
+						border: { color: theme.grid }
+					}
+				};
+			}
+			return deepMerge(deepMerge(base, this.dataChart?.options() ?? {}), this.chartOptions ?? {});
+		}
+		async firstUpdated(changed) {
+			super.firstUpdated?.(changed);
+			if (isServer) return;
+			this.dataChart?._setColorResolver((c) => this._resolveColor(c));
+			const palette = this._colors;
+			if (palette?.length) this.dataChart?.setColors(palette);
+			this._syncTypeToController();
+			await this._createChart();
+		}
+		updated(changed) {
+			super.updated?.(changed);
+			if (isServer) return;
+			if (changed.has("colors") || changed.has("color")) {
+				const palette = this._colors;
+				if (palette?.length) this.dataChart?.setColors(palette);
+			}
+			this._syncTypeToController();
+			if (!this._chart) {
+				if (!this._error && !this._empty) this._createChart();
+				return;
+			}
+			if (MonoChartCoreClass._rebuildKeys.some((k) => changed.has(k))) {
+				this.rebuild();
+				return;
+			}
+			if (this._chart.config?.type !== this._type) {
+				this.rebuild();
+				return;
+			}
+			this._applyData();
+		}
+		/**
+		* Tell the controller which type actually won.
+		*
+		* The projection depends on it: pie-family charts colour every SLICE, bar
+		* and line colour each DATASET. A preset (`<mono-chart-pie>`) fixes its type
+		* on the element, so without this the controller would still think it was
+		* projecting for the default `bar` and every slice would come out the same
+		* colour. `setType` early-returns when unchanged, so this settles in one
+		* extra update rather than looping.
+		*
+		* NOTE: the type is controller state, so pointing a bar element and a pie
+		* element at ONE shared controller makes them fight — give each its own.
+		*/
+		_syncTypeToController() {
+			const grid = this.dataChart;
+			if (grid && grid.type !== this._type) grid.setType(this._type);
+		}
+		async _createChart() {
+			if (isServer || this._chart) return;
+			if (!this._canvas) return;
+			const token = ++this._buildToken;
+			let Chart;
+			try {
+				Chart = await loadChartJs();
+			} catch (err) {
+				this._error = err?.message ?? String(err);
+				return;
+			}
+			if (token !== this._buildToken || !this.isConnected || !this._canvas) return;
+			try {
+				this._chart = new Chart(this._canvas, {
+					type: this._type,
+					data: this._cloneData(),
+					options: this._buildOptions()
+				});
+				this._error = "";
+				this.dataChart?._attachInstance(this._chart);
+				this._observeResize();
+			} catch (err) {
+				this._error = err?.message ?? String(err);
+			}
+		}
+		/**
+		* Hand chart.js its own copy. It mutates `data` in place (adding computed
+		* metadata), so sharing the controller's projected object would corrupt it.
+		*/
+		_cloneData() {
+			const d = this._data;
+			return {
+				labels: [...d.labels ?? []],
+				datasets: (d.datasets ?? []).map((s) => ({
+					...s,
+					data: [...s.data ?? []]
+				}))
+			};
+		}
+		_applyData() {
+			if (!this._chart) return;
+			const next = this._cloneData();
+			this._chart.data.labels = next.labels;
+			this._chart.data.datasets = next.datasets;
+			this._chart.update();
+		}
+		/** Destroy + recreate. Needed for `type` and structural option changes. */
+		rebuild() {
+			if (isServer) return;
+			this._destroyChart();
+			this._createChart();
+		}
+		_destroyChart() {
+			this._buildToken++;
+			this._ro?.disconnect();
+			this._ro = void 0;
+			try {
+				this._chart?.destroy();
+			} catch {}
+			this._chart = null;
+			this.dataChart?._attachInstance(null);
+			this._tooltipEl?.removeAttribute("data-open");
+		}
+		/**
+		* Chart.js `responsive` already listens for window resizes, but not for a
+		* container that changes size on its own (a sidebar opening, a flex reflow).
+		*/
+		_observeResize() {
+			if (this._ro || typeof ResizeObserver === "undefined") return;
+			const wrap = this.renderRoot?.querySelector?.(".mono-chart-canvas-wrap");
+			if (!wrap) return;
+			this._ro = new ResizeObserver(() => this._chart?.resize());
+			this._ro.observe(wrap);
+		}
+		_cls(base, key) {
+			const extra = this.cssClass?.[key];
+			return extra ? `${base} ${extra}` : base;
+		}
+		get _rootClasses() {
+			return [
+				"mono-chart",
+				this._loading ? "loading" : "",
+				this.cssClassName,
+				this.cssClass?.root
+			].filter(Boolean).join(" ");
+		}
+		_wrapStyle() {
+			const s = {};
+			const w = toCssSize(this.width);
+			const h = toCssSize(this.height);
+			if (w) s.width = w;
+			if (h) s.height = h;
+			return s;
+		}
+		renderChart() {
+			return html`
+        <div class=${this._rootClasses}>
+          ${this._error ? html`<div class=${this._cls("mono-chart-message error", "message")} role="alert">
+                ${this._error}
+              </div>` : nothing}
+          <div class="mono-chart-canvas-wrap" style=${styleMap(this._wrapStyle())}>
+            <canvas class=${this._cls("", "canvas")} role="img"></canvas>
+            <div class="mono-chart-tooltip" role="tooltip" aria-hidden="true"></div>
+          </div>
+        </div>
+      `;
+		}
+	}
+	__decorate([property({ attribute: false })], MonoChartCoreClass.prototype, "dataChart", void 0);
+	__decorate([property({ type: String })], MonoChartCoreClass.prototype, "type", void 0);
+	__decorate([property({ attribute: false })], MonoChartCoreClass.prototype, "data", void 0);
+	__decorate([property({ attribute: false })], MonoChartCoreClass.prototype, "chartOptions", void 0);
+	__decorate([property({ type: String })], MonoChartCoreClass.prototype, "width", void 0);
+	__decorate([property({ type: String })], MonoChartCoreClass.prototype, "height", void 0);
+	__decorate([property({
+		attribute: "aspect-ratio",
+		converter: numberStringConverter
+	})], MonoChartCoreClass.prototype, "aspectRatio", void 0);
+	__decorate([property()], MonoChartCoreClass.prototype, "legend", void 0);
+	__decorate([property({ type: String })], MonoChartCoreClass.prototype, "title", void 0);
+	__decorate([property({ converter: booleanStringConverter })], MonoChartCoreClass.prototype, "stacked", void 0);
+	__decorate([property({ type: String })], MonoChartCoreClass.prototype, "color", void 0);
+	__decorate([property({ attribute: false })], MonoChartCoreClass.prototype, "colors", void 0);
+	__decorate([property({ attribute: false })], MonoChartCoreClass.prototype, "cssClass", void 0);
+	__decorate([property({ attribute: false })], MonoChartCoreClass.prototype, "cssClassName", void 0);
+	__decorate([state()], MonoChartCoreClass.prototype, "_error", void 0);
+	__decorate([query("canvas")], MonoChartCoreClass.prototype, "_canvas", void 0);
+	__decorate([query(".mono-chart-tooltip")], MonoChartCoreClass.prototype, "_tooltipEl", void 0);
+	return MonoChartCoreClass;
+};
+/** Shallow-recursive merge; arrays and non-plain values are replaced wholesale. */
+function deepMerge(base, over) {
+	const out = { ...base };
+	for (const [k, v] of Object.entries(over)) {
+		const prev = out[k];
+		if (v && typeof v === "object" && !Array.isArray(v) && prev && typeof prev === "object" && !Array.isArray(prev)) out[k] = deepMerge(prev, v);
+		else out[k] = v;
+	}
+	return out;
+}
+//#endregion
+//#region src/components/chart/chart.css?raw
+var chart_default = "/* ============================================================================\r\n   mono-chart — a Chart.js canvas driven by `monoChart(...)` (or a raw chart.js\r\n   `data` object). The library is an OPTIONAL peer, loaded on demand; until it\r\n   resolves the element renders an empty, correctly-sized box so nothing jumps.\r\n\r\n   NOT attribute-styled, on purpose: the chart is a bitmap. This sheet declares\r\n   the palette and the inks as custom properties over the Basecoat tokens, and\r\n   the ELEMENT reads them back at mount (`_resolveColor`, `_themeColors`) and\r\n   hands Chart.js real values — a canvas cannot resolve `var()`. The two boxes\r\n   this sheet does paint (the message, the loading veil) keep their classes.\r\n\r\n   Tokens (ours → Basecoat):\r\n     --_mono-chart-1 … -5                  ≡ --chart-1 … --chart-5 (the default palette, in that order)\r\n     --_mono-chart-primary                 ≡ --primary\r\n     --_mono-chart-secondary               ≡ --muted-foreground (the \"secondary\" ink every field uses)\r\n     --_mono-chart-accent                  ≡ --chart-2 (Basecoat's --accent is a surface, not a series colour)\r\n     --_mono-chart-success/warning/danger/info ≡ --success / --warning / --destructive / --info\r\n     --_mono-chart-text                    ≡ --foreground (legend, title)\r\n     --_mono-chart-muted                   ≡ --muted-foreground (axis ticks, the empty message)\r\n     --_mono-chart-grid                    ≡ --border\r\n     --_mono-chart-surface                 ≡ --background (the hairline between slices)\r\n     --_mono-chart-tooltip-*               ≡ the select panel's popover: --mono-select-dropdown-{bg,color,radius,ring,shadow} → --popover … (the tooltip IS an element, painted here)\r\n     --_mono-chart-font                    ≡ text-xs, in the page font (inherited)\r\n     --_mono-chart-radius                  ≡ --mono-radius-md (tooltip corner, message box)\r\n     --_mono-chart-bar-radius              ≡ the field's corner chain (--mono-input-outline-radius → --mono-input-radius → --mono-radius-md)\r\n\r\n   Every `--mono-chart-<k>` is a public override; the flavours carry nothing —\r\n   the tokens they retune (border, foreground, popover, chart-n) reach the chart\r\n   through these chains. Dark mode is the same tokens flipped; the element\r\n   watches the mode class and repaints.\r\n   ============================================================================ */\r\n\r\nmono-chart,\r\nmono-chart-bar,\r\nmono-chart-line,\r\nmono-chart-pie,\r\nmono-chart-doughnut {\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\nmono-chart *,\r\nmono-chart-bar *,\r\nmono-chart-line *,\r\nmono-chart-pie *,\r\nmono-chart-doughnut * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.mono-chart {\r\n  position: relative;\r\n  width: 100%;\r\n  color: var(--_mono-chart-text);\r\n  /* the canvas inherits nothing; the element READS these two off this box */\r\n  font-family: var(--_mono-chart-font-family);\r\n  font-size: var(--_mono-chart-font);\r\n\r\n  /* Public customization API → private resolvers. The ELEMENT also reads these\r\n     at mount time and hands the resolved colors to Chart.js: canvas painting\r\n     can't resolve `var()`, so the palette has to cross into JS as real values. */\r\n  --_mono-chart-1: var(--mono-chart-1, var(--chart-1));\r\n  --_mono-chart-2: var(--mono-chart-2, var(--chart-2));\r\n  --_mono-chart-3: var(--mono-chart-3, var(--chart-3));\r\n  --_mono-chart-4: var(--mono-chart-4, var(--chart-4));\r\n  --_mono-chart-5: var(--mono-chart-5, var(--chart-5));\r\n\r\n  --_mono-chart-primary: var(--mono-chart-primary, var(--primary));\r\n  --_mono-chart-secondary: var(--mono-chart-secondary, var(--muted-foreground));\r\n  --_mono-chart-accent: var(--mono-chart-accent, var(--chart-2));\r\n  --_mono-chart-success: var(--mono-chart-success, var(--success));\r\n  --_mono-chart-warning: var(--mono-chart-warning, var(--warning));\r\n  --_mono-chart-danger: var(--mono-chart-danger, var(--destructive));\r\n  --_mono-chart-info: var(--mono-chart-info, var(--info));\r\n\r\n  --_mono-chart-text: var(--mono-chart-text, var(--foreground));\r\n  --_mono-chart-muted: var(--mono-chart-muted, var(--muted-foreground));\r\n  --_mono-chart-grid: var(--mono-chart-grid, var(--border));\r\n  --_mono-chart-surface: var(--mono-chart-surface, var(--background));\r\n\r\n  /* basecoat@1.0.2 styles/vega.css .combobox [data-popover] — bg-popover text-popover-foreground ring-foreground/10 rounded-md shadow-md ring-1\r\n     (a tooltip is a popover: the same chrome, at text-xs). It is the FLAVOUR's\r\n     popover: the corner, ring and shadow read the select panel's public knobs,\r\n     which every flavour writes (luma 3xl + shadow-lg, lyra 0, maia 2xl …). */\r\n  --_mono-chart-tooltip-bg: var(--mono-chart-tooltip-bg, var(--mono-select-dropdown-bg, var(--popover)));\r\n  --_mono-chart-tooltip-color: var(--mono-chart-tooltip-color, var(--mono-select-dropdown-color, var(--popover-foreground)));\r\n  --_mono-chart-tooltip-border: var(--mono-chart-tooltip-border, var(--border));\r\n  --_mono-chart-tooltip-radius: var(--mono-chart-tooltip-radius, var(--mono-select-dropdown-radius, var(--mono-radius-md)));\r\n  --_mono-chart-tooltip-ring: var(--mono-chart-tooltip-ring, var(--mono-select-dropdown-ring, 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent)));\r\n  --_mono-chart-tooltip-shadow: var(--mono-chart-tooltip-shadow, var(--mono-select-dropdown-shadow, var(--mono-shadow-md)));\r\n\r\n  --_mono-chart-font: var(--mono-chart-font, var(--mono-text-xs));\r\n  /* INHERIT, not --font-sans: every other mono control inherits the page font\r\n     for its labels, and a chart sits among them */\r\n  --_mono-chart-font-family: var(--mono-chart-font-family, inherit);\r\n  --_mono-chart-radius: var(--mono-chart-radius, var(--mono-radius-md));\r\n  /* The bars' corner IS the flavour's field corner — lyra squares a field through\r\n     `--mono-input-radius`, sera through `--mono-input-outline-radius`, maia and\r\n     luma pill it through the same knob — so bars are square where the fields are\r\n     and round where they are, with nothing set. Chart.js clamps it to half a bar. */\r\n  --_mono-chart-bar-radius: var(--mono-chart-bar-radius, var(--mono-input-outline-radius, var(--mono-input-radius, var(--mono-radius-md))));\r\n\r\n  /* Chart.js wants PIXELS and a custom property's computed value is still the\r\n     token string (`calc(…)`, `2rem`), so the two radii are painted onto real,\r\n     invisible border-radius properties here and read back computed. */\r\n  border-radius: var(--_mono-chart-radius);\r\n}\r\n\r\n/* The canvas box. Chart.js sets the canvas' intrinsic width/height itself; this\r\n   wrapper owns the LAYOUT size so `responsive: true` has something to measure. */\r\n.mono-chart-canvas-wrap {\r\n  position: relative;\r\n  width: 100%;\r\n  /* the bar corner, in px — see the root */\r\n  border-radius: var(--_mono-chart-bar-radius);\r\n}\r\n\r\n.mono-chart canvas {\r\n  display: block;\r\n  width: 100%;\r\n  max-width: 100%;\r\n}\r\n\r\n/* The tooltip — an HTML popover placed over the canvas by the element\r\n   (Chart.js's `tooltip.external`), not the bitmap one: a canvas can take a\r\n   colour and a corner, not the flavour's ring and shadow. Positioned from the\r\n   caret; `data-side` says which way it opened. */\r\n.mono-chart-tooltip {\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  z-index: 2;\r\n  display: none;\r\n  flex-direction: column;\r\n  gap: calc(var(--mono-spacing) * 0.5);\r\n  /* basecoat@1.0.2 styles/vega.css .combobox [data-popover] — bg-popover text-popover-foreground ring-foreground/10 rounded-md shadow-md ring-1; px-3 py-1.5 text-xs */\r\n  padding: calc(var(--mono-spacing) * 1.5) calc(var(--mono-spacing) * 3);\r\n  border-radius: var(--_mono-chart-tooltip-radius);\r\n  background: var(--_mono-chart-tooltip-bg);\r\n  color: var(--_mono-chart-tooltip-color);\r\n  box-shadow: var(--_mono-chart-tooltip-ring), var(--_mono-chart-tooltip-shadow);\r\n  font-size: var(--_mono-chart-font);\r\n  line-height: var(--mono-text-xs--lh);\r\n  white-space: nowrap;\r\n  pointer-events: none;\r\n  transform: translate(-50%, calc(-100% - calc(var(--mono-spacing) * 2)));\r\n  opacity: 0;\r\n  transition: opacity var(--mono-duration-fast, 100ms) var(--mono-ease);\r\n}\r\n\r\n.mono-chart-tooltip[data-open] {\r\n  display: flex;\r\n  opacity: 1;\r\n}\r\n\r\n/* no room above the point: open below it */\r\n.mono-chart-tooltip[data-side='bottom'] {\r\n  transform: translate(-50%, calc(var(--mono-spacing) * 2));\r\n}\r\n\r\n.mono-chart-tooltip-title {\r\n  font-weight: var(--mono-font-weight-medium);\r\n}\r\n\r\n.mono-chart-tooltip-row {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: calc(var(--mono-spacing) * 2);\r\n}\r\n\r\n/* the series swatch — a rounded chip, like the legend's */\r\n.mono-chart-tooltip-swatch {\r\n  flex: 0 0 auto;\r\n  width: calc(var(--mono-spacing) * 2.5);\r\n  height: calc(var(--mono-spacing) * 2.5);\r\n  border-radius: var(--mono-radius-sm);\r\n}\r\n\r\n.mono-chart-tooltip-value {\r\n  margin-inline-start: auto;\r\n  font-variant-numeric: tabular-nums;\r\n  padding-inline-start: calc(var(--mono-spacing) * 3);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .mono-chart-tooltip {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n/* Shown while the optional peer loads, when there is no data, or on error —\r\n   basecoat's empty-state idiom: a dashed hairline, muted text. */\r\n.mono-chart-message {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 6rem;\r\n  padding: calc(var(--mono-spacing) * 4);\r\n  font-size: var(--mono-text-sm);\r\n  line-height: var(--mono-text-sm--lh);\r\n  color: var(--_mono-chart-muted);\r\n  text-align: center;\r\n  border: var(--mono-border-width) dashed var(--_mono-chart-grid);\r\n  border-radius: var(--_mono-chart-radius);\r\n}\r\n\r\n.mono-chart-message.error {\r\n  color: var(--_mono-chart-danger);\r\n  border-color: color-mix(in oklab, var(--_mono-chart-danger) 45%, var(--_mono-chart-grid));\r\n}\r\n\r\n/* Loading veil — the canvas stays mounted so Chart.js keeps its size. */\r\n.mono-chart.loading .mono-chart-canvas-wrap {\r\n  opacity: 0.55;\r\n  transition: opacity var(--mono-duration) var(--mono-ease);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .mono-chart.loading .mono-chart-canvas-wrap {\r\n    transition: none;\r\n  }\r\n}\r\n";
+//#endregion
+//#region src/components/chart/mono-chart.shadow.ts
+var SHADOW_CHART_CSS$1 = toShadowCss(chart_default, { host: "mono-chart" });
+var MonoChartShadow = class MonoChartShadow extends withShadowUtilityStyles(MonoChartCore(LitElement)) {
+	static {
+		this.disableWarning?.("change-in-update");
+	}
+	static {
+		this.styles = [unsafeCSS(SHADOW_CHART_CSS$1)];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (isServer) return;
+		flushSsrHydration(this);
+	}
+	render() {
+		return this.renderChart();
+	}
+};
+MonoChartShadow = __decorate([customElement("mono-shadow-chart")], MonoChartShadow);
+//#endregion
+//#region src/components/chart/mono-chart-presets.shadow.ts
+var SHADOW_CHART_CSS = toShadowCss(chart_default, { host: "mono-chart" });
+var MonoChartBarShadow = class MonoChartBarShadow extends withShadowUtilityStyles(MonoChartCore(LitElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this._presetType = "bar";
+	}
+	static {
+		this.disableWarning?.("change-in-update");
+	}
+	static {
+		this.styles = [unsafeCSS(SHADOW_CHART_CSS)];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (isServer) return;
+		flushSsrHydration(this);
+	}
+	render() {
+		return this.renderChart();
+	}
+};
+MonoChartBarShadow = __decorate([customElement("mono-shadow-chart-bar")], MonoChartBarShadow);
+var MonoChartLineShadow = class MonoChartLineShadow extends withShadowUtilityStyles(MonoChartCore(LitElement)) {
+	constructor(..._args2) {
+		super(..._args2);
+		this._presetType = "line";
+	}
+	static {
+		this.disableWarning?.("change-in-update");
+	}
+	static {
+		this.styles = [unsafeCSS(SHADOW_CHART_CSS)];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (isServer) return;
+		flushSsrHydration(this);
+	}
+	render() {
+		return this.renderChart();
+	}
+};
+MonoChartLineShadow = __decorate([customElement("mono-shadow-chart-line")], MonoChartLineShadow);
+var MonoChartPieShadow = class MonoChartPieShadow extends withShadowUtilityStyles(MonoChartCore(LitElement)) {
+	constructor(..._args3) {
+		super(..._args3);
+		this._presetType = "pie";
+	}
+	static {
+		this.disableWarning?.("change-in-update");
+	}
+	static {
+		this.styles = [unsafeCSS(SHADOW_CHART_CSS)];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (isServer) return;
+		flushSsrHydration(this);
+	}
+	render() {
+		return this.renderChart();
+	}
+};
+MonoChartPieShadow = __decorate([customElement("mono-shadow-chart-pie")], MonoChartPieShadow);
+var MonoChartDoughnutShadow = class MonoChartDoughnutShadow extends withShadowUtilityStyles(MonoChartCore(LitElement)) {
+	constructor(..._args4) {
+		super(..._args4);
+		this._presetType = "doughnut";
+	}
+	static {
+		this.disableWarning?.("change-in-update");
+	}
+	static {
+		this.styles = [unsafeCSS(SHADOW_CHART_CSS)];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (isServer) return;
+		flushSsrHydration(this);
+	}
+	render() {
+		return this.renderChart();
+	}
+};
+MonoChartDoughnutShadow = __decorate([customElement("mono-shadow-chart-doughnut")], MonoChartDoughnutShadow);
+//#endregion
+//#region src/components/chart/chart-odata.ts
+/**
+* `MonoChartAgg` → the OData aggregate keyword. Every value the chart supports has
+* an exact equivalent, so the server path never has to fall back to draining.
+*/
+var ODATA_AGG = {
+	sum: "sum",
+	avg: "average",
+	min: "min",
+	max: "max",
+	count: "$count"
+};
+/** A dotted path (`Job.Budget`) addresses a nav property as `Job/Budget` in OData. */
+var toODataPath = (field) => field.replaceAll(".", "/");
+/**
+* Build `groupby((<groupBy>),aggregate(<field> with <agg> as <field>, …))`.
+*
+* Each aggregate is aliased back to **its own series field**, which is what lets
+* the result flow through the chart's existing projection untouched: one row per
+* bucket, and re-aggregating a single value is the identity. No special-casing
+* downstream, and a client-side roll-up and a server-side one render identically.
+*
+* `count` has no operand, so it emits `$count as <field>`.
+*/
+function buildChartApply(groupBy, series = []) {
+	const key = toODataPath(groupBy);
+	const aggregates = series.filter((s) => s?.field).map((s) => {
+		const agg = ODATA_AGG[s.agg ?? "sum"] ?? "sum";
+		return agg === "$count" ? `$count as ${s.field}` : `${toODataPath(s.field)} with ${agg} as ${s.field}`;
+	});
+	return aggregates.length ? `groupby((${key}),aggregate(${aggregates.join(",")}))` : `groupby((${key}))`;
+}
+/**
+* Compose a filter with a groupby: `filter(<expr>)/groupby(…)`.
+*
+* Filtering INSIDE `$apply` (rather than as a sibling `$filter`) is what keeps the
+* two composable — the filter runs first and the aggregation sees only matching
+* rows, which is the whole point of doing this server-side.
+*/
+function composeApply(apply, filter) {
+	const expr = arrayToODataString(filter);
+	return expr ? `filter(${expr})/${apply}` : apply;
+}
+/**
+* Compose the request an `odata` chart sends — pure, so the merge of
+* `odata.options` with the controller's base (`dataSourceOptions` /
+* `odataOptions`) and the `$apply` folding can be asserted without a network.
+*
+* The base's `filter` is AND-ed under `odata.options.filter`; its `select` /
+* `expand` / `sort` / `paginate` become load options; its `customQueryParams`
+* become raw params beside `$apply`. On the `$apply` path the composed filter
+* travels INSIDE the clause (that is what keeps it composable with the grouping)
+* and is removed from the load options so it is not also sent as a sibling
+* `$filter`; `paginate` is forced off so every bucket comes back.
+*/
+function buildChartOdataRequest(input) {
+	const base = input.base ?? {};
+	const { customQueryParams, ...rest } = mergeDataSourceOptions(input.options ?? {}, base);
+	const options = { ...rest };
+	const params = { ...customQueryParams ?? {} };
+	if (typeof input.aggregate === "function") {
+		const groupBy = input.groupBy;
+		if (!groupBy) throw new Error("[mono-chart] `odata.aggregate` needs a `groupBy` — there is nothing to group by.");
+		const apply = buildChartApply(groupBy, input.series);
+		const filter = options.filter;
+		params.$apply = input.aggregate({
+			apply,
+			filter,
+			odataFilter: arrayToODataString,
+			withFilter: (a, f) => composeApply(a, f === void 0 ? filter : f),
+			groupBy,
+			series: [...input.series]
+		});
+		delete options.filter;
+		options.paginate = false;
+	}
+	return {
+		options,
+		params,
+		aggregated: params.$apply !== void 0
+	};
+}
+//#endregion
+//#region src/components/chart/mono-data-chart.ts
+/**
+* Default palette, expressed as mono color NAMES rather than literals so a chart
+* follows the active theme out of the box — exactly like every other component.
+* These are Basecoat's own chart colours: the element resolves each name through
+* `--_mono-chart-<name>` → `--mono-chart-*` → `--chart-1` … `--chart-5` at paint
+* time, so a colour preset, a flavour or dark mode recolours charts too. Past
+* five series the roles follow, so a sixth dataset is still its own colour.
+*/
+var DEFAULT_COLORS = [
+	"chart-1",
+	"chart-2",
+	"chart-3",
+	"chart-4",
+	"chart-5",
+	"success",
+	"warning",
+	"danger"
+];
+/**
+* Values used when nobody has resolved a name yet — a controller used headlessly
+* (reading `data()` in Node), or before an element mounts. ONE's light tokens,
+* so the shape is right even without a DOM.
+*/
+var NAME_FALLBACK = {
+	"chart-1": "oklch(0.859 0.069 267.7)",
+	"chart-2": "oklch(0.735 0.12 268.04)",
+	"chart-3": "oklch(0.61 0.12 267.95)",
+	"chart-4": "oklch(0.485 0.119 267.92)",
+	"chart-5": "oklch(0.36 0.12 268.21)",
+	primary: "oklch(0.299 0.119 267.96)",
+	secondary: "oklch(0.554 0.041 257.42)",
+	accent: "oklch(0.735 0.12 268.04)",
+	success: "oklch(0.5239 0.0917 180.004)",
+	warning: "oklch(0.5423 0.1066 70.504)",
+	danger: "oklch(0.561 0.202 26.71)",
+	info: "oklch(0.431 0.163 267.72)",
+	surface: "oklch(0.973 0.007 268.55)"
+};
+/** Read a row field, honouring path expressions (`Job.Name`, `Items.[*].Total`). */
+function fieldValue(row, field) {
+	if (row == null) return void 0;
+	if (!isPath(field)) return row[field];
+	const v = getFieldValue(row, field);
+	return Array.isArray(v) ? v[0] : v;
+}
+/** Coerce to a finite number, or null when the value isn't numeric. */
+function num(value) {
+	if (value == null || value === "") return null;
+	const n = typeof value === "number" ? value : Number(value);
+	return Number.isFinite(n) ? n : null;
+}
+/** Apply an aggregate to a bucket of raw values. */
+function aggregate(values, agg) {
+	if (agg === "count") return values.length;
+	const nums = values.map(num).filter((n) => n != null);
+	if (!nums.length) return agg === "sum" ? 0 : null;
+	switch (agg) {
+		case "sum": return nums.reduce((a, b) => a + b, 0);
+		case "avg": return nums.reduce((a, b) => a + b, 0) / nums.length;
+		case "min": return Math.min(...nums);
+		case "max": return Math.max(...nums);
+		default: return null;
+	}
+}
+/** Parse `#rgb` / `#rrggbb` / `rgb(r,g,b)` to channels; null if unrecognised. */
+function toRgb(color) {
+	const s = color.trim();
+	const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(s);
+	if (hex) {
+		const h = hex[1].length === 3 ? hex[1].replace(/./g, (c) => c + c) : hex[1];
+		const n = parseInt(h, 16);
+		return [
+			n >> 16 & 255,
+			n >> 8 & 255,
+			n & 255
+		];
+	}
+	const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i.exec(s);
+	if (rgb) return [
+		Number(rgb[1]),
+		Number(rgb[2]),
+		Number(rgb[3])
+	];
+	return null;
+}
+/** Shift a color's lightness by `delta` (-1…1), preserving hue and saturation. */
+function shiftLightness(color, delta) {
+	const rgb = toRgb(color);
+	if (!rgb) return color;
+	const [r, g, b] = rgb.map((v) => v / 255);
+	const max = Math.max(r, g, b);
+	const min = Math.min(r, g, b);
+	const l = (max + min) / 2;
+	const d = max - min;
+	const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
+	let h = 0;
+	if (d !== 0) {
+		if (max === r) h = (g - b) / d % 6;
+		else if (max === g) h = (b - r) / d + 2;
+		else h = (r - g) / d + 4;
+		h *= 60;
+		if (h < 0) h += 360;
+	}
+	const nl = Math.min(.92, Math.max(.08, l + delta));
+	const c = (1 - Math.abs(2 * nl - 1)) * s;
+	const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+	const m = nl - c / 2;
+	const [r1, g1, b1] = h < 60 ? [
+		c,
+		x,
+		0
+	] : h < 120 ? [
+		x,
+		c,
+		0
+	] : h < 180 ? [
+		0,
+		c,
+		x
+	] : h < 240 ? [
+		0,
+		x,
+		c
+	] : h < 300 ? [
+		x,
+		0,
+		c
+	] : [
+		c,
+		0,
+		x
+	];
+	const out = [
+		r1,
+		g1,
+		b1
+	].map((v) => Math.round((v + m) * 255));
+	return `rgb(${out[0]}, ${out[1]}, ${out[2]})`;
+}
+/**
+* Make every entry visually distinct.
+*
+* A token set may ALIAS roles — in ONE, `--success` and `--teal` are the same
+* colour, and a consumer's own preset can fold two more. That's fine for UI (a chip is either "info" or
+* "secondary"), but a chart drawing two series in the same colour is unreadable.
+* On a collision, step the lightness until the colour is unused.
+*
+* Only applied to the DEFAULT palette — an explicit `colors` list is honoured
+* exactly as written, duplicates included.
+*/
+function distinctColors(list) {
+	const seen = /* @__PURE__ */ new Set();
+	return list.map((color) => {
+		let candidate = color;
+		for (let i = 1; seen.has(candidate.toLowerCase()) && i <= 6; i++) candidate = shiftLightness(color, (i % 2 ? 1 : -1) * .14 * Math.ceil(i / 2));
+		seen.add(candidate.toLowerCase());
+		return candidate;
+	});
+}
+/** True for a raw chart.js `data` object (as opposed to a row array / DataSource). */
+function isRawData(value) {
+	return !!value && typeof value === "object" && !Array.isArray(value) && Array.isArray(value.datasets);
+}
+/** Types that colour each POINT rather than each dataset. */
+function isPerPointType(type) {
+	return type === "pie" || type === "doughnut" || type === "polarArea";
+}
+function monoChart(source = null, opts = {}) {
+	let bound = null;
+	let raw = null;
+	let rows = [];
+	/** Rows per label index, so a click can report what produced the point. */
+	let buckets = [];
+	let projected = {
+		labels: [],
+		datasets: []
+	};
+	let instance = null;
+	/**
+	* How many drains are in flight. A COUNTER, not a flag: `bind()` starts one
+	* sync and a following `reload()` starts another, so two drains overlap — with
+	* a boolean the first one to finish cleared it and the chart reported "done"
+	* while the second was still fetching chunks.
+	*
+	* Also guards the re-entrant `changed` echo while a drain is running.
+	*/
+	let drainDepth = 0;
+	/**
+	* Whether `rows` came back already rolled up by the server (`odata.aggregate`).
+	* Read by `project()`, which must not re-apply each series' `agg` to a bucket
+	* that is already a single aggregated row.
+	*/
+	let preAggregated = false;
+	/**
+	* The `$apply`-through-the-store switch for a bound source: off by option
+	* (`serverApply: false`), or off for good once the backend rejected one.
+	*/
+	const applyGate = createApplyGate(opts.serverApply !== false);
+	let series = opts.series ? [...opts.series] : [];
+	let colors = opts.colors?.length ? [...opts.colors] : [...DEFAULT_COLORS];
+	/** Only the DEFAULT palette gets de-duplicated; an explicit list is honoured as written. */
+	let paletteIsDefault = !opts.colors?.length;
+	/**
+	* Turns a mono color NAME into a real value. Falls back to the static token
+	* values until an element installs the DOM-aware version — the controller has
+	* no DOM, and only the element can read the `--_mono-chart-*` tokens (which is
+	* also what makes the palette follow a live theme change).
+	*/
+	let resolveColor = (c) => NAME_FALLBACK[c] ?? c;
+	const notifier = createNotifier();
+	const notify = notifier.notify;
+	const elementProps = { ...opts.props ?? {} };
+	/** Build `{ labels, datasets }` from the current rows + series config. */
+	function project() {
+		if (raw) {
+			projected = raw;
+			buckets = [];
+			return;
+		}
+		const groupBy = opts.groupBy;
+		const labelField = opts.labelField ?? groupBy;
+		const specs = series.length ? series : inferSeries();
+		let labels;
+		let groups;
+		if (groupBy) {
+			const order = [];
+			const map = /* @__PURE__ */ new Map();
+			for (const row of rows) {
+				const value = fieldValue(row, groupBy);
+				const key = String(value);
+				let entry = map.get(key);
+				if (!entry) {
+					entry = {
+						label: value,
+						rows: []
+					};
+					map.set(key, entry);
+					order.push(key);
+				}
+				entry.rows.push(row);
+			}
+			labels = order.map((k) => map.get(String(k)).label);
+			groups = order.map((k) => map.get(String(k)).rows);
+		} else {
+			labels = labelField ? rows.map((r) => fieldValue(r, labelField)) : rows.map((_, i) => i + 1);
+			groups = rows.map((r) => [r]);
+		}
+		const perPoint = isPerPointType(ctrl.type);
+		const resolved = colors.map(resolveColor);
+		const palette = paletteIsDefault ? distinctColors(resolved) : resolved;
+		const datasets = specs.map((spec, i) => {
+			/**
+			* Rows that arrived pre-aggregated (`odata.aggregate`) are already one per
+			* bucket, so the series' own `agg` must NOT run again — it would re-reduce a
+			* single value. `sum` is the identity there for `sum`/`min`/`max`/`avg`, but
+			* `count` is not: counting one rolled-up row yields 1 and throws away the
+			* server's `$count`. Reading the value covers every agg uniformly.
+			*/
+			const agg = preAggregated ? "sum" : spec.agg ?? "sum";
+			const data = groups.map((bucket) => {
+				const values = bucket.map((row) => fieldValue(row, spec.field));
+				if ((preAggregated || !groupBy) && bucket.length === 1 && agg === "sum") return num(values[0]);
+				return aggregate(values, agg);
+			});
+			const color = spec.color ? resolveColor(spec.color) : palette[i % palette.length];
+			const base = {
+				label: spec.label ?? spec.field,
+				data,
+				backgroundColor: perPoint ? labels.map((_, j) => palette[j % palette.length]) : color,
+				borderColor: perPoint ? resolveColor("surface") : color
+			};
+			if (spec.type) base.type = spec.type;
+			return spec.dataset ? {
+				...base,
+				...spec.dataset
+			} : base;
+		});
+		projected = {
+			labels,
+			datasets
+		};
+		buckets = groups;
+	}
+	/**
+	* With no `series`, chart every numeric field on the first row except the
+	* label/group field — so `monoChart(rows, { labelField: 'month' })` just works.
+	*/
+	function inferSeries() {
+		const first = rows[0];
+		if (!first) return [];
+		const skip = new Set([opts.labelField, opts.groupBy].filter(Boolean));
+		return Object.keys(first).filter((k) => !skip.has(k) && num(first[k]) != null).map((field) => ({ field }));
+	}
+	const onChanged = () => {
+		if (drainDepth > 0) return;
+		sync();
+	};
+	/**
+	* Publish the loading state, notifying only on a real change.
+	*
+	* The DataSource's own `isLoading()` is NOT enough: a draining chart reads the
+	* STORE directly (`readAllRows`), which never goes through the DataSource and so
+	* never flips its loading flag. Reporting only `isLoading()` made the chart look
+	* finished while chunk after chunk was still in flight — `draining` is the half
+	* that covers it.
+	*/
+	function setLoading(next) {
+		if (ctrl.loading === next) return;
+		ctrl.loading = next;
+		notify();
+	}
+	const syncLoading = () => {
+		setLoading(drainDepth > 0 || (bound?.isLoading?.() ?? false));
+	};
+	const onLoadingChanged = () => {
+		syncLoading();
+		notify();
+	};
+	function detach() {
+		if (!bound) return;
+		bound.off("changed", onChanged);
+		bound.off("loadingChanged", onLoadingChanged);
+		bound.off("loadError", onLoadingChanged);
+		bound = null;
+	}
+	let dsOptionsSource = opts.dataSourceOptions;
+	let odataOptionsSource = opts.odataOptions;
+	let resolvedOpts = {};
+	/** The consumer's own `ds.filter(...)`, adopted (page path only). */
+	let externalBase = null;
+	/** What the source HELD after this controller's last `filter()` write (read back). */
+	let lastWrittenFilter = null;
+	let lastComposed = void 0;
+	let composeMemo = null;
+	function resolveBase() {
+		resolvedOpts = resolveDataSourceOptions(dsOptionsSource, odataOptionsSource);
+		return resolvedOpts;
+	}
+	/** A base `filter` for the source at hand: arrays and predicates as-is, a raw OData string dropped for an array source. */
+	function baseFilterFor(s) {
+		const f = resolvedOpts.filter;
+		if (f == null) return null;
+		if (typeof s?.store === "function" && !!s.store()) return f;
+		if (typeof f === "function") return f;
+		if (Array.isArray(f) && f.length === 1 && typeof f[0] === "string") return null;
+		return compileFilterPredicate(f);
+	}
+	/**
+	* `loadAll: false` — the source's own page is what renders, so the base goes
+	* onto the source. Adoption rule as in the grid: what the source holds that is
+	* not this controller's last write is the consumer's, and becomes the base.
+	*/
+	function applyBaseToSource(s) {
+		if (typeof s.filter === "function") {
+			const live = s.filter() ?? null;
+			if (live !== lastWrittenFilter) externalBase = live;
+			const own = baseFilterFor(s);
+			const remote = typeof s.store === "function" && !!s.store();
+			let next;
+			if (composeMemo && composeMemo.own === own && composeMemo.ext === externalBase) next = composeMemo.out;
+			else {
+				next = remote ? andFilters(own, externalBase) : andPredicates(own, externalBase);
+				composeMemo = {
+					own,
+					ext: externalBase,
+					out: next
+				};
+			}
+			if (next !== lastComposed || (s.filter() ?? null) !== lastWrittenFilter) {
+				s.filter(next);
+				lastComposed = next;
+				lastWrittenFilter = s.filter() ?? null;
+			}
+		}
+		if (resolvedOpts.select !== void 0 && typeof s.select === "function") s.select(toList(resolvedOpts.select) ?? null);
+		if (resolvedOpts.sort !== void 0 && typeof s.sort === "function") s.sort(normalizeSortList(resolvedOpts.sort));
+		const lo = typeof s.loadOptions === "function" ? s.loadOptions() : null;
+		if (lo && typeof lo === "object") Object.assign(lo, extraLoadOptions(resolvedOpts));
+	}
+	/**
+	* The bound source rolled up by the SERVER: ONE
+	* `$apply=filter(…)/groupby((groupBy),aggregate(…))` through the source's own
+	* store, one row per bucket, instead of draining every row to bucket them
+	* here. Same clause `odata.aggregate` builds, same transport the grid's header
+	* filter and summary use (`utils/data-source-apply`).
+	*
+	* `null` is the decline, and the drain is still the definition of the result:
+	* the path switched off (`serverApply: false`, or a backend that already
+	* rejected an `$apply` — the gate remembers), no `groupBy`, no explicit
+	* `series` (the clause needs the fields; `inferSeries` reads them off rows
+	* that are not there yet), a store that cannot carry an `$apply` (a
+	* CustomStore), a failed request, or rows that are not buckets (a server that
+	* ignored the clause hands back entities — `isRolledUp`).
+	*
+	* The filter is what the drain would see: the base ∧ the source's live
+	* `filter()` ∧ its search, folded INSIDE the clause.
+	*/
+	async function rollUpViaStore(s) {
+		if (applyGate.skip || !opts.groupBy) return null;
+		const specs = series.filter((sp) => sp?.field);
+		if (!specs.length) return null;
+		const store = typeof s.store === "function" ? s.store() : null;
+		if (!store) return null;
+		const apply = buildChartApply(opts.groupBy, specs);
+		const filter = andFilters(baseFilterFor(s), summaryFilterOf(s));
+		let rolled;
+		try {
+			rolled = await loadApply(store, composeApply(apply, filter));
+		} catch (err) {
+			applyGate.reject(err);
+			return null;
+		}
+		if (!rolled) return null;
+		return isRolledUp(rolled, [opts.groupBy, ...specs.map((sp) => sp.field)]) ? rolled : null;
+	}
+	/** Mirror the source's rows onto `ctrl`, re-project, then notify. */
+	async function sync() {
+		preAggregated = false;
+		resolveBase();
+		if (!bound) rows = [];
+		else if (opts.loadAll === false) rows = [...bound.items?.() ?? []];
+		else {
+			drainDepth++;
+			syncLoading();
+			try {
+				const rolled = await rollUpViaStore(bound);
+				if (rolled) {
+					rows = rolled;
+					preAggregated = true;
+				} else {
+					const base = resolvedOpts;
+					const filter = baseFilterFor(bound);
+					const loadOptions = extraLoadOptions(base);
+					const isArray = !(typeof bound.store === "function" && bound.store());
+					const drained = await readAllRows(bound, {
+						chunkSize: opts.chunkSize ?? 100,
+						...filter != null && !isArray ? { filter } : {},
+						...base.select !== void 0 ? { select: toList(base.select) } : {},
+						...base.sort !== void 0 ? { sort: normalizeSortList(base.sort) } : {},
+						...Object.keys(loadOptions).length ? { loadOptions } : {}
+					});
+					rows = isArray && typeof filter === "function" ? drained.filter(filter) : drained;
+				}
+			} finally {
+				drainDepth--;
+				syncLoading();
+			}
+		}
+		ctrl.items = rows;
+		project();
+		notify();
+	}
+	function bind(next) {
+		if (isRawData(next)) {
+			detach();
+			raw = next;
+			rows = [];
+			ctrl.items = rows;
+			ctrl.dataSource = null;
+			project();
+			notify();
+			return;
+		}
+		raw = null;
+		const src = Array.isArray(next) ? monoArraySource(next, { pageSize: 0 }) : next;
+		if (bound === src) return;
+		detach();
+		bound = src;
+		ctrl.dataSource = src;
+		if (!src) {
+			sync();
+			return;
+		}
+		src.on("changed", onChanged);
+		src.on("loadingChanged", onLoadingChanged);
+		src.on("loadError", onLoadingChanged);
+		sync();
+	}
+	/**
+	* Load through `monoOdataFetch`.
+	*
+	* With `odata.aggregate` this is ONE request: the server rolls the data up with
+	* `$apply` and returns a row per bucket, instead of the chart draining every row
+	* to sum them locally. Without it, rows are fetched normally and `options`
+	* (`select` / `filter` / `take`) is what keeps the payload small.
+	*
+	* `@mono-lit/utility` is imported on demand — it is an OPTIONAL peer, so a consumer that
+	* never sets `odata` neither installs nor loads it (same arrangement as
+	* `chart.js` itself).
+	*/
+	async function loadOdata() {
+		const od = opts.odata;
+		if (!od?.url) return;
+		let fetching;
+		try {
+			fetching = await import("@mono-lit/utility/fetching");
+		} catch (err) {
+			throw new Error("[mono-chart] `odata` needs the optional peer dependency \"@mono-lit/utility\". Install it in your app: pnpm add @mono-lit/utility" + (err?.message ? ` (original error: ${err.message})` : ""));
+		}
+		const request = buildChartOdataRequest({
+			options: od.options,
+			base: resolveBase(),
+			aggregate: od.aggregate,
+			groupBy: opts.groupBy,
+			series
+		});
+		setLoading(true);
+		try {
+			const res = await fetching.monoOdataFetch({
+				baseUrl: od.baseUrl,
+				configBaseUrl: od.configBaseUrl,
+				url: od.url,
+				method: od.method,
+				type: "data",
+				notif: false,
+				options: request.options,
+				...Object.keys(request.params).length ? { params: request.params } : {}
+			});
+			if (res?.error) throw new Error(res.error.message ?? "odata request failed");
+			rows = res?.data ?? [];
+			preAggregated = request.aggregated;
+		} finally {
+			setLoading(false);
+		}
+		ctrl.items = rows;
+		project();
+		notify();
+	}
+	async function reload() {
+		if (opts.odata?.url) {
+			await loadOdata();
+			return;
+		}
+		drainDepth++;
+		syncLoading();
+		try {
+			if (opts.loadAll === false && bound?.load) {
+				resolveBase();
+				applyBaseToSource(bound);
+				await bound.load();
+			}
+			await sync();
+		} finally {
+			drainDepth--;
+			syncLoading();
+		}
+	}
+	async function setDataSourceOptions(next) {
+		dsOptionsSource = next;
+		await reload();
+	}
+	async function setOdataOptions(next) {
+		odataOptionsSource = next;
+		await reload();
+	}
+	function resolvedDataSourceOptions() {
+		return resolvedOpts;
+	}
+	function setType(next) {
+		if (ctrl.type === next) return;
+		ctrl.type = next;
+		project();
+		notify();
+	}
+	function setSeries(next) {
+		series = [...next];
+		project();
+		notify();
+	}
+	function setColors(next) {
+		colors = next.length ? [...next] : [...DEFAULT_COLORS];
+		paletteIsDefault = !next.length;
+		project();
+		notify();
+	}
+	function setData(next) {
+		preAggregated = false;
+		bind(next);
+	}
+	/** Resolve a clicked point back to the rows that produced it. */
+	function pointEvent(datasetIndex, index) {
+		return {
+			index,
+			datasetIndex,
+			label: projected.labels?.[index],
+			value: projected.datasets[datasetIndex]?.data?.[index],
+			rows: buckets[index] ?? []
+		};
+	}
+	const ctrl = {
+		items: rows,
+		loading: false,
+		type: opts.type ?? "bar",
+		dataSource: null,
+		get instance() {
+			return instance;
+		},
+		data: () => projected,
+		options: () => opts.options ?? {},
+		props: () => elementProps,
+		/**
+		* Merge, not replace — a partial patch leaves everything else alone.
+		* `undefined` values pass straight through: `applyProps` skips them on the
+		* write side, so "not declared" can never clobber a value the template set.
+		*/
+		setProps(patch) {
+			if (!patch) return;
+			Object.assign(elementProps, patch);
+			notify();
+		},
+		setType,
+		setSeries,
+		setColors,
+		setData,
+		bind,
+		reload,
+		refresh: reload,
+		setDataSourceOptions,
+		setOdataOptions,
+		resolvedDataSourceOptions,
+		onPointClick: null,
+		subscribe: notifier.subscribe,
+		dispose() {
+			detach();
+			notifier.clear();
+			instance = null;
+		},
+		_attachInstance(next) {
+			instance = next;
+		},
+		_setColorResolver(fn) {
+			resolveColor = fn ?? ((c) => NAME_FALLBACK[c] ?? c);
+			project();
+			notify();
+		}
+	};
+	ctrl._emitPoint = (d, i) => {
+		ctrl.onPointClick?.(pointEvent(d, i));
+	};
+	if (source) bind(source);
+	else project();
+	if (!source && opts.odata?.url) loadOdata().catch((err) => {
+		console.error("[mono-chart] odata load failed:", err);
+	});
+	return ctrl;
+}
+//#endregion
+export { MonoChartBarShadow, MonoChartCore, MonoChartDoughnutShadow, MonoChartLineShadow, MonoChartPieShadow, MonoChartShadow, buildChartApply, composeApply, monoChart as controlMonoChart, monoChart, loadChartJs };