@mono-lit/helper 0.0.9 → 0.1.0

package/dist/ui/chart.js

@@ -1,805 +1,9 @@
-import { a as errorTitle, i as errorText, n as describeError } from "../normalize-error-D93O4q8g.js";
-import { f as toCssSize, y as monoPendingGrace } from "../mono-ui-kvLVIf1V.js";
-import { n as detachEventHandlers, t as applyProps } from "../element-props-xvw0EB7H.js";
-import { i as composeApply, n as buildChartApply, r as buildChartOdataRequest, t as monoChart } from "../mono-data-chart-NKPdAgVq.js";
+import { i as composeApply, n as buildChartApply, r as buildChartOdataRequest, t as monoChart } from "../mono-data-chart-ChF4J9RT.js";
 import { t as customElement } from "../mono-element-CKcT0rwv.js";
-import { a as defineHybridPropAliases, i as defineHybridPropAlias, o as numberStringConverter, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
-import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
-import { c as spinnerIcon, s as refreshIcon } from "../field-icons-t8rXRCKs.js";
-import { LitElement, html, isServer, nothing } from "lit";
-import { property, query, state } from "lit/decorators.js";
-import { styleMap } from "lit/directives/style-map.js";
+import { t as __decorate } from "../decorate-DbYFpi8R.js";
+import { n as loadChartJs, t as MonoChartCore } from "../chart-core-DV7hD3ZY.js";
+import { LitElement } from "lit";
 
-//#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.
-*/
-const MONO_COLOR_NAMES = /* @__PURE__ */ 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. */
-const 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.
-*/
-let _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.
-*/
-const 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.loadingText = "Loading…";
-			this.retryLabel = "Retry";
-			this.loading = false;
-			this.loadingError = null;
-			this._appFailure = null;
-			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._onRetry = (event) => {
-				event.stopPropagation();
-				const error = this._dsError;
-				if (!error) return;
-				const fromApp = !!this._appFailure;
-				dispatchMonoEvent(this, "retry", {
-					error,
-					source: fromApp ? "app" : "dataSource"
-				});
-				if (!fromApp) this.dataChart?.retry();
-			};
-			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",
-				"loadingText",
-				"loadingError"
-			]);
-			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) {
-			if (changed.has("loadingError")) {
-				const v = this.loadingError;
-				this._appFailure = v == null || v === false || v === "" ? null : describeError(v === true ? void 0 : v);
-			}
-			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;
-		}
-		/** The FIRST load (or a retry) is in flight — nothing to show yet, so a spinner. */
-		get _dsBusy() {
-			if (this.loading) return true;
-			const c = this.dataChart;
-			return !this.data && !!c && c.loading && !c.hasLoaded && !c.error;
-		}
-		/** The app's `loading-error`, else the controller's failed load (the peer-load `_error` is separate). */
-		get _dsError() {
-			if (this.loading) return null;
-			return this._appFailure ?? (this.data ? null : this.dataChart?.error ?? null);
-		}
-		/** Spinner over the first load; the failure + ↻ after one failed. */
-		_renderSourceState() {
-			const err = this._dsError;
-			if (err) return html`
-          <div class="mono-chart-state" mono-ds-state="error" role="alert">
-            <span class="mono-chart-state-text" title=${errorTitle(err)}>${errorText(err)}</span>
-            <button
-              type="button"
-              mono-ds-retry
-              aria-label=${this.retryLabel}
-              title=${this.retryLabel}
-              @click=${this._onRetry}
-            >
-              ${refreshIcon()}
-            </button>
-          </div>
-        `;
-			if (this._dsBusy) return html`
-          <div class="mono-chart-state" mono-ds-state="loading" role="status">
-            <span mono-ds-spinner>${spinnerIcon()}</span>
-            <span class="mono-chart-state-text">${this.loadingText}</span>
-          </div>
-        `;
-			return nothing;
-		}
-		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}
-          ?mono-ds-loading=${this._dsBusy}
-          ?mono-ds-error=${!!this._dsError}
-          aria-busy=${this._dsBusy ? "true" : nothing}
-        >
-          ${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>
-            ${this._renderSourceState()}
-          </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([property({
-		type: String,
-		attribute: "loading-text"
-	})], MonoChartCoreClass.prototype, "loadingText", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "retry-label"
-	})], MonoChartCoreClass.prototype, "retryLabel", void 0);
-	__decorate([property({ converter: booleanStringConverter })], MonoChartCoreClass.prototype, "loading", void 0);
-	__decorate([property({ attribute: "loading-error" })], MonoChartCoreClass.prototype, "loadingError", 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/mono-chart.ts
 let MonoChart = class MonoChart extends MonoChartCore(LitElement) {
 	createRenderRoot() {