@mono-lit/helper 0.0.8 → 0.0.10

package/dist/chart-core-DV7hD3ZY.js

@@ -0,0 +1,801 @@
+import { a as errorTitle, i as errorText, n as describeError } from "./normalize-error-BEcd1tmS.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 { 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-CAZf0F_k.js";
+import { c as spinnerIcon, s as refreshIcon } from "./field-icons-t8rXRCKs.js";
+import { html, isServer, nothing } 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.
+*/
+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
+export { loadChartJs as n, MonoChartCore as t };