@lilt-ui/charts 0.11.0 → 0.12.0

package/dist/watch/board/chart-board.d.ts

@@ -79,12 +79,6 @@ export declare function useBoardItem(): {
     acknowledge: () => void;
     pin: (pinned: boolean) => void;
 };
-/**
- * A board of charts that arranges itself: what needs attention rises to the top, what you have
- * seen calms down, and what clears settles back. Nothing moves while you point at or work inside
- * the board; changes wait and apply when you leave, or when you ask.
- */
-export declare function ChartBoard({ children, 'aria-label': label, settleAfter, memory, storage, onEvent, toast, toolbar, status, motion: motionMode, className, style, }: ChartBoardProps): ReactElement;
 /**
  * The default tab for an item's card: what is going on, how new it is, and quiet actions to
  * acknowledge it or keep it pinned.
@@ -95,3 +89,5 @@ export declare function BoardItemTab(): ReactElement;
  * to finish reading; `useBoard` builds a summary of your own.
  */
 export declare function BoardToolbar(): ReactElement | null;
+/** ChartBoard with its own MotionScope, so it animates wherever it is rendered. */
+export declare function ChartBoard(props: ChartBoardProps): ReactElement;

package/dist/watch.js

@@ -1,8 +1,8 @@
 "use client";
-import { C as e, a as t, b as n, i as r, l as i, n as a, o, r as s, s as c, t as l } from "./report-context-UrwaoLYZ.js";
-import { Children as u, createContext as d, isValidElement as f, useCallback as p, useContext as m, useEffect as h, useMemo as g, useReducer as ee, useRef as _, useState as v } from "react";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
-import { AnimatePresence as S, motion as C } from "motion/react";
+import { C as e, a as t, b as n, i as r, l as i, n as a, o, r as s, s as c, t as l, w as u } from "./report-context-DLA3I57K.js";
+import { Children as d, createContext as f, isValidElement as ee, useCallback as p, useContext as m, useEffect as h, useMemo as g, useReducer as te, useRef as _, useState as v } from "react";
+import { AnimatePresence as y, m as b } from "motion/react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
 import { createPortal as w } from "react-dom";
 //#region src/watch/engine/rules.ts
 function T({ points: e = 6, severity: t = "warning", message: n = "Value has not changed" } = {}) {
@@ -153,7 +153,7 @@ function M(e) {
 	}).map((e) => e.id);
 }
 var N = (e) => e.sinceAt ?? e.raisedAt ?? Infinity, P = 8e3;
-function te({ alerts: e, reducedMotion: t, onView: n, onDismiss: r }) {
+function ne({ alerts: e, reducedMotion: t, onView: n, onDismiss: r }) {
 	let [i, a] = v(null);
 	h(() => a(document.body), []);
 	let [o, s] = v(!1), c = e.some((e) => e.severity === "critical"), l = e.map((e) => `${e.id}:${e.severity}`).join(), u = _(r);
@@ -171,10 +171,10 @@ function te({ alerts: e, reducedMotion: t, onView: n, onDismiss: r }) {
 		y: 16,
 		filter: "blur(6px)"
 	};
-	return w(/* @__PURE__ */ b("div", {
+	return w(/* @__PURE__ */ S("div", {
 		"data-lilt-chart": "",
 		className: "lilt-toast-region",
-		children: /* @__PURE__ */ b(S, { children: d ? /* @__PURE__ */ x(C.div, {
+		children: /* @__PURE__ */ S(y, { children: d ? /* @__PURE__ */ C(b.div, {
 			role: "group",
 			"aria-label": "Chart alert",
 			className: "lilt-toast",
@@ -198,29 +198,29 @@ function te({ alerts: e, reducedMotion: t, onView: n, onDismiss: r }) {
 				e.currentTarget.contains(e.relatedTarget) || s(!1);
 			},
 			children: [
-				/* @__PURE__ */ b("span", {
+				/* @__PURE__ */ S("span", {
 					className: "lilt-toast__text",
-					children: e.length === 1 ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("strong", { children: d.title }), d.reason ? /* @__PURE__ */ b("span", {
+					children: e.length === 1 ? /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("strong", { children: d.title }), d.reason ? /* @__PURE__ */ S("span", {
 						className: "lilt-toast__reason",
 						children: d.reason
-					}) : null] }) : /* @__PURE__ */ x("strong", { children: [e.length, " charts need attention"] })
+					}) : null] }) : /* @__PURE__ */ C("strong", { children: [e.length, " charts need attention"] })
 				}),
-				/* @__PURE__ */ b("button", {
+				/* @__PURE__ */ S("button", {
 					type: "button",
 					className: "lilt-toast__view",
 					onClick: n,
 					children: "View"
 				}),
-				/* @__PURE__ */ b("button", {
+				/* @__PURE__ */ S("button", {
 					type: "button",
 					className: "lilt-card-badge__clear",
 					"aria-label": "Dismiss",
 					onClick: r,
-					children: /* @__PURE__ */ b("svg", {
+					children: /* @__PURE__ */ S("svg", {
 						"aria-hidden": "true",
 						viewBox: "0 0 16 16",
 						fill: "none",
-						children: /* @__PURE__ */ b("path", {
+						children: /* @__PURE__ */ S("path", {
 							d: "m4 4 8 8M12 4l-8 8",
 							stroke: "currentColor",
 							strokeWidth: "1.5",
@@ -234,12 +234,12 @@ function te({ alerts: e, reducedMotion: t, onView: n, onDismiss: r }) {
 }
 //#endregion
 //#region src/watch/board/chart-board.tsx
-function ne({ children: e }) {
-	return /* @__PURE__ */ b(y, { children: e });
+function re({ children: e }) {
+	return /* @__PURE__ */ S(x, { children: e });
 }
-var F = d(null), re = d(null);
-function I() {
-	let e = m(F);
+var ie = f(null), ae = f(null);
+function F() {
+	let e = m(ie);
 	if (!e) throw Error("Lilt Charts: useBoard must be used inside a ChartBoard.");
 	let t = Object.values(e.state);
 	return {
@@ -252,8 +252,8 @@ function I() {
 		pin: e.pin
 	};
 }
-function L() {
-	let e = m(F), t = m(re);
+function I() {
+	let e = m(ie), t = m(ae);
 	if (!e || !t) throw Error("Lilt Charts: useBoardItem must be used inside a BoardItem.");
 	return {
 		item: e.state[t],
@@ -263,74 +263,74 @@ function L() {
 		pin: (n) => e.pin(t, n)
 	};
 }
-var ie = 500;
-function R({ children: t, "aria-label": n, settleAfter: r = 8e3, memory: i, storage: a, onEvent: o, toast: s = !1, toolbar: c = !0, status: l = !0, motion: d = "auto", className: m, style: y }) {
-	let S = g(() => u.toArray(t).flatMap((e) => f(e) && e.type === ne ? [e.props] : []), [t]), w = g(() => new Map(S.map((e) => [e.id, e.title])), [S]), [T, E] = ee(O, S, (e) => e.reduce((e, t, n) => O(e, {
+var oe = 500;
+function L({ children: t, "aria-label": n, settleAfter: r = 8e3, memory: i, storage: a, onEvent: o, toast: s = !1, toolbar: c = !0, status: l = !0, motion: u = "auto", className: f, style: m }) {
+	let y = g(() => d.toArray(t).flatMap((e) => ee(e) && e.type === re ? [e.props] : []), [t]), x = g(() => new Map(y.map((e) => [e.id, e.title])), [y]), [w, T] = te(O, y, (e) => e.reduce((e, t, n) => O(e, {
 		type: "register",
 		id: t.id,
 		order: n
-	}), {})), D = S.map((e) => e.id).join("\0");
+	}), {})), E = y.map((e) => e.id).join("\0");
 	h(() => {
-		let e = new Set(S.map((e) => e.id));
-		S.forEach((e, t) => E({
+		let e = new Set(y.map((e) => e.id));
+		y.forEach((e, t) => T({
 			type: "register",
 			id: e.id,
 			order: t
 		}));
-		for (let t of Object.keys(T)) e.has(t) || E({
+		for (let t of Object.keys(w)) e.has(t) || T({
 			type: "unregister",
 			id: t
 		});
-	}, [D]);
-	let k = M(T), A = k.join("\0"), [j, N] = v(k), [P, I] = v(!1), L = _(void 0), R = () => {
-		clearTimeout(L.current), I(!0);
-	}, z = () => {
-		clearTimeout(L.current), L.current = setTimeout(() => I(!1), ie);
+	}, [E]);
+	let D = M(w), k = D.join("\0"), [A, j] = v(D), [N, P] = v(!1), F = _(void 0), I = () => {
+		clearTimeout(F.current), P(!0);
+	}, L = () => {
+		clearTimeout(F.current), F.current = setTimeout(() => P(!1), oe);
 	};
-	h(() => () => clearTimeout(L.current), []), h(() => {
-		P || N(k);
-	}, [P, A]);
-	let B = [...j.filter((e) => T[e]), ...k.filter((e) => !j.includes(e))], ue = B.join("|"), fe = B.join("\0") !== A, pe = p(() => N(M(T)), [T]);
+	h(() => () => clearTimeout(F.current), []), h(() => {
+		N || j(D);
+	}, [N, k]);
+	let R = [...A.filter((e) => w[e]), ...D.filter((e) => !A.includes(e))], z = R.join("|"), B = R.join("\0") !== k, V = p(() => j(M(w)), [w]);
 	h(() => {
-		let e = Object.values(T).filter((e) => e.alarm === "cleared" && e.clearedAt !== null).map((e) => setTimeout(() => E({
+		let e = Object.values(w).filter((e) => e.alarm === "cleared" && e.clearedAt !== null).map((e) => setTimeout(() => T({
 			type: "settle",
 			id: e.id
 		}), Math.max(0, e.clearedAt + r - Date.now())));
 		return () => e.forEach(clearTimeout);
-	}, [T, r]);
-	let V = e(d), H = _(/* @__PURE__ */ new Map()), me = _(/* @__PURE__ */ new Map());
+	}, [w, r]);
+	let H = e(u), U = _(/* @__PURE__ */ new Map()), pe = _(/* @__PURE__ */ new Map());
 	h(() => {
 		if (typeof IntersectionObserver > "u") return;
 		let e = new IntersectionObserver((e) => {
 			for (let t of e) {
 				let e = t.target.dataset.boardItem;
-				e && me.current.set(e, t.intersectionRatio >= .5);
+				e && pe.current.set(e, t.intersectionRatio >= .5);
 			}
 		}, { threshold: [
 			0,
 			.5,
 			1
 		] });
-		return H.current.forEach((t) => e.observe(t)), () => e.disconnect();
-	}, [D]);
-	let [U, he] = v(null), ge = _(V);
-	ge.current = V;
-	let W = p((e) => {
-		let t = H.current.get(e);
+		return U.current.forEach((t) => e.observe(t)), () => e.disconnect();
+	}, [E]);
+	let [W, me] = v(null), he = _(H);
+	he.current = H;
+	let G = p((e) => {
+		let t = U.current.get(e);
 		t && (t.scrollIntoView?.({
-			behavior: ge.current ? "auto" : "smooth",
+			behavior: he.current ? "auto" : "smooth",
 			block: "center"
-		}), t.focus({ preventScroll: !0 }), he(e));
+		}), t.focus({ preventScroll: !0 }), me(e));
 	}, []);
 	h(() => {
-		if (!U) return;
-		let e = setTimeout(() => he(null), 1600);
+		if (!W) return;
+		let e = setTimeout(() => me(null), 1600);
 		return () => clearTimeout(e);
-	}, [U]);
-	let [_e, G] = v([]), K = _(null), q = _(0);
+	}, [W]);
+	let [ge, K] = v([]), q = _(null), J = _(0);
 	h(() => {
 		let e = () => {
-			K.current !== null && (document.title = K.current), K.current = null, q.current = 0;
+			q.current !== null && (document.title = q.current), q.current = null, J.current = 0;
 		}, t = () => {
 			document.visibilityState === "visible" && e();
 		};
@@ -338,35 +338,35 @@ function R({ children: t, "aria-label": n, settleAfter: r = 8e3, memory: i, stor
 			document.removeEventListener("visibilitychange", t), e();
 		};
 	}, []);
-	let [ve, ye] = v({
+	let [_e, ve] = v({
 		polite: "",
 		assertive: ""
-	}), be = _(T), J = _({
+	}), ye = _(w), Y = _({
 		onEvent: o,
-		titles: w,
+		titles: x,
 		toast: s
 	});
-	J.current = {
+	Y.current = {
 		onEvent: o,
-		titles: w,
+		titles: x,
 		toast: s
 	}, h(() => {
-		let e = be.current;
-		be.current = T;
+		let e = ye.current;
+		ye.current = w;
 		let t = [], n = [], r = [], i = /* @__PURE__ */ new Set();
-		for (let a of Object.values(T)) {
+		for (let a of Object.values(w)) {
 			let o = e[a.id];
 			if (!o) continue;
-			let s = se(o, a);
+			let s = le(o, a);
 			if (!s) continue;
-			let c = J.current.titles.get(a.id) ?? a.id;
-			J.current.onEvent?.({
+			let c = Y.current.titles.get(a.id) ?? a.id;
+			Y.current.onEvent?.({
 				type: s,
 				id: a.id,
 				title: c,
 				item: a,
-				show: () => W(a.id)
-			}), s === "raised" || s === "escalated" ? me.current.get(a.id) || r.push({
+				show: () => G(a.id)
+			}), s === "raised" || s === "escalated" ? pe.current.get(a.id) || r.push({
 				id: a.id,
 				title: c,
 				reason: a.why ?? a.reason,
@@ -375,33 +375,33 @@ function R({ children: t, "aria-label": n, settleAfter: r = 8e3, memory: i, stor
 			let l = a.reason ? `: ${a.reason}${a.since ? ` since ${a.since}` : ""}` : "";
 			s === "raised" || s === "escalated" ? (a.severity === "critical" ? n : t).push(`${c} needs attention${l}.${a.why ? ` ${a.why}.` : ""}`) : s === "cleared" && t.push(`${c} is back to normal.`);
 		}
-		if ((t.length || n.length) && ye({
+		if ((t.length || n.length) && ve({
 			polite: t.join(" "),
 			assertive: n.join(" ")
-		}), J.current.toast) {
+		}), Y.current.toast) {
 			if (r.length || i.size) {
 				let e = new Set(r.map((e) => e.id));
-				G((t) => [...t.filter((t) => !e.has(t.id) && !i.has(t.id)), ...r].sort((e, t) => oe(e.severity) - oe(t.severity)));
+				K((t) => [...t.filter((t) => !e.has(t.id) && !i.has(t.id)), ...r].sort((e, t) => ce(e.severity) - ce(t.severity)));
 			}
-			r.length && document.visibilityState === "hidden" && (K.current ??= document.title, q.current += r.length, document.title = `(${q.current}) ${K.current}`);
+			r.length && document.visibilityState === "hidden" && (q.current ??= document.title, J.current += r.length, document.title = `(${J.current}) ${q.current}`);
 		}
-	}, [T, W]);
-	let Y = i ? `lilt-board:${i}` : null, X = _(null), [xe, Se] = v(() => /* @__PURE__ */ new Set()), Z = g(() => a ?? ce(), [a]);
+	}, [w, G]);
+	let X = i ? `lilt-board:${i}` : null, Z = _(null), [be, xe] = v(() => /* @__PURE__ */ new Set()), Q = g(() => a ?? ue(), [a]);
 	h(() => {
-		if (!Y || !Z) return;
-		let e = Z.get(Y);
+		if (!X || !Q) return;
+		let e = Q.get(X);
 		try {
-			X.current = e === null ? null : new Set(JSON.parse(e));
+			Z.current = e === null ? null : new Set(JSON.parse(e));
 		} catch {
-			X.current = null;
+			Z.current = null;
 		}
-	}, [Y, Z]);
-	let Q = (e) => `${e.id}@${e.sinceAt ?? e.since ?? ""}`, Ce = Object.values(T).filter((e) => e.alarm !== "normal" && e.alarm !== "cleared").map(Q).sort().join("\0");
+	}, [X, Q]);
+	let Se = (e) => `${e.id}@${e.sinceAt ?? e.since ?? ""}`, Ce = Object.values(w).filter((e) => e.alarm !== "normal" && e.alarm !== "cleared").map(Se).sort().join("\0");
 	h(() => {
-		if (!Y || !Z) return;
-		let e = X.current, t = Object.values(T).filter((e) => e.alarm === "active" || e.alarm === "acknowledged");
-		e && Se(new Set(t.filter((t) => t.alarm === "active" && !e.has(Q(t))).map((e) => e.id)));
-		let n = () => Z.set(Y, JSON.stringify(t.map(Q))), r = () => {
+		if (!X || !Q) return;
+		let e = Z.current, t = Object.values(w).filter((e) => e.alarm === "active" || e.alarm === "acknowledged");
+		e && xe(new Set(t.filter((t) => t.alarm === "active" && !e.has(Se(t))).map((e) => e.id)));
+		let n = () => Q.set(X, JSON.stringify(t.map(Se))), r = () => {
 			document.visibilityState === "hidden" && n();
 		};
 		return window.addEventListener("pagehide", n), document.addEventListener("visibilitychange", r), () => {
@@ -409,65 +409,65 @@ function R({ children: t, "aria-label": n, settleAfter: r = 8e3, memory: i, stor
 		};
 	}, [
 		Ce,
-		Y,
-		Z
+		X,
+		Q
 	]);
-	let we = p((e) => E({
+	let we = p((e) => T({
 		type: "acknowledge",
 		id: e,
 		now: Date.now()
-	}), []), Te = p((e, t) => E({
+	}), []), Te = p((e, t) => T({
 		type: "pin",
 		id: e,
 		pinned: t
 	}), []), Ee = g(() => ({
-		state: T,
-		titles: w,
-		fresh: xe,
+		state: w,
+		titles: x,
+		fresh: be,
 		acknowledge: we,
 		pin: Te,
-		pending: fe,
-		apply: pe
+		pending: B,
+		apply: V
 	}), [
-		T,
 		w,
-		xe,
+		x,
+		be,
 		we,
 		Te,
-		fe,
-		pe
-	]), De = new Map(S.map((e) => [e.id, e])), $ = _e.filter((e) => T[e.id]);
-	return /* @__PURE__ */ x(F.Provider, {
+		B,
+		V
+	]), De = new Map(y.map((e) => [e.id, e])), $ = ge.filter((e) => w[e.id]);
+	return /* @__PURE__ */ C(ie.Provider, {
 		value: Ee,
-		children: [/* @__PURE__ */ x("section", {
+		children: [/* @__PURE__ */ C("section", {
 			"data-lilt-chart": "",
-			className: ["lilt-board", m].filter(Boolean).join(" "),
-			style: y,
+			className: ["lilt-board", f].filter(Boolean).join(" "),
+			style: m,
 			"aria-label": n,
-			onPointerEnter: R,
-			onPointerLeave: z,
-			onFocus: R,
+			onPointerEnter: I,
+			onPointerLeave: L,
+			onFocus: I,
 			onBlur: (e) => {
-				e.currentTarget.contains(e.relatedTarget) || z();
+				e.currentTarget.contains(e.relatedTarget) || L();
 			},
 			children: [
-				c ? /* @__PURE__ */ b(de, {}) : null,
-				/* @__PURE__ */ b(C.div, {
+				c ? /* @__PURE__ */ S(fe, {}) : null,
+				/* @__PURE__ */ S(b.div, {
 					layoutRoot: !0,
 					className: "lilt-board__grid",
-					children: B.map((e) => {
-						let t = De.get(e), n = T[e];
-						return !t || !n ? null : /* @__PURE__ */ b(C.div, {
+					children: R.map((e) => {
+						let t = De.get(e), n = w[e];
+						return !t || !n ? null : /* @__PURE__ */ S(b.div, {
 							ref: (t) => {
-								t ? H.current.set(e, t) : H.current.delete(e);
+								t ? U.current.set(e, t) : U.current.delete(e);
 							},
 							role: "group",
 							"aria-label": t.title,
 							tabIndex: -1,
 							"data-board-item": e,
-							"data-flash": U === e || void 0,
-							layout: !V && "position",
-							layoutDependency: ue,
+							"data-flash": W === e || void 0,
+							layout: !H && "position",
+							layoutDependency: z,
 							transition: {
 								type: "spring",
 								stiffness: 420,
@@ -479,14 +479,14 @@ function R({ children: t, "aria-label": n, settleAfter: r = 8e3, memory: i, stor
 							"data-severity": n.severity ?? void 0,
 							"data-pinned": n.pinned || void 0,
 							style: t.span === 2 ? { gridColumn: "span 2" } : void 0,
-							children: /* @__PURE__ */ b(re.Provider, {
+							children: /* @__PURE__ */ S(ae.Provider, {
 								value: e,
-								children: /* @__PURE__ */ b(le, {
+								children: /* @__PURE__ */ S(de, {
 									item: n,
 									status: l,
-									children: /* @__PURE__ */ b(ae, {
+									children: /* @__PURE__ */ S(se, {
 										id: e,
-										dispatch: E,
+										dispatch: T,
 										children: t.children
 									})
 								})
@@ -494,48 +494,48 @@ function R({ children: t, "aria-label": n, settleAfter: r = 8e3, memory: i, stor
 						}, e);
 					})
 				}),
-				/* @__PURE__ */ b("div", {
+				/* @__PURE__ */ S("div", {
 					className: "lilt-chart__sr-only",
 					"aria-live": "polite",
-					children: ve.polite
+					children: _e.polite
 				}),
-				/* @__PURE__ */ b("div", {
+				/* @__PURE__ */ S("div", {
 					className: "lilt-chart__sr-only",
 					"aria-live": "assertive",
-					children: ve.assertive
+					children: _e.assertive
 				})
 			]
-		}), s ? /* @__PURE__ */ b(te, {
+		}), s ? /* @__PURE__ */ S(ne, {
 			alerts: $,
-			reducedMotion: V,
+			reducedMotion: H,
 			onView: () => {
-				$[0] && W($[0].id), G([]);
+				$[0] && G($[0].id), K([]);
 			},
-			onDismiss: () => G([])
+			onDismiss: () => K([])
 		}) : null]
 	});
 }
-function ae({ id: e, dispatch: t, children: n }) {
+function se({ id: e, dispatch: t, children: n }) {
 	let r = p((n) => t({
 		type: "report",
 		id: e,
 		report: n,
 		now: Date.now()
 	}), [t, e]);
-	return /* @__PURE__ */ b(l.Provider, {
+	return /* @__PURE__ */ S(l.Provider, {
 		value: r,
 		children: n
 	});
 }
-var oe = (e) => e === "critical" ? 0 : 1;
-function se(e, t) {
+var ce = (e) => e === "critical" ? 0 : 1;
+function le(e, t) {
 	return e.alarm === t.alarm ? t.alarm === "active" && e.severity === "warning" && t.severity === "critical" ? "escalated" : null : {
 		active: e.alarm === "acknowledged" ? "escalated" : "raised",
 		acknowledged: "acknowledged",
 		cleared: "cleared"
 	}[t.alarm] ?? null;
 }
-function ce() {
+function ue() {
 	return typeof window > "u" ? null : {
 		get: (e) => {
 			try {
@@ -551,74 +551,74 @@ function ce() {
 		}
 	};
 }
-function le({ item: e, status: t, children: n }) {
+function de({ item: e, status: t, children: n }) {
 	let r = t && (e.alarm !== "normal" || e.pinned), a = g(() => ({
-		badge: r ? /* @__PURE__ */ b(B, {}) : void 0,
+		badge: r ? /* @__PURE__ */ S(z, {}) : void 0,
 		tone: e.alarm === "active" ? e.severity : null,
-		handle: t && !r ? /* @__PURE__ */ b(ue, {}) : void 0
+		handle: t && !r ? /* @__PURE__ */ S(B, {}) : void 0
 	}), [
 		r,
 		t,
 		e.alarm,
 		e.severity
 	]);
-	return /* @__PURE__ */ b(i.Provider, {
+	return /* @__PURE__ */ S(i.Provider, {
 		value: a,
 		children: n
 	});
 }
-var z = new Intl.DateTimeFormat(void 0, {
+var R = new Intl.DateTimeFormat(void 0, {
 	hour: "numeric",
 	minute: "2-digit"
 });
-function B() {
-	let { item: e, title: t, fresh: r, acknowledge: i, pin: a } = L(), o = e.alarm === "active" ? "Needs attention" : e.alarm === "acknowledged" ? `Seen ${z.format(e.acknowledgedAt)}` : e.alarm === "cleared" ? "Back to normal" : "Pinned";
-	return /* @__PURE__ */ x("span", {
+function z() {
+	let { item: e, title: t, fresh: r, acknowledge: i, pin: a } = I(), o = e.alarm === "active" ? "Needs attention" : e.alarm === "acknowledged" ? `Seen ${R.format(e.acknowledgedAt)}` : e.alarm === "cleared" ? "Back to normal" : "Pinned";
+	return /* @__PURE__ */ C("span", {
 		className: "lilt-board-tab",
 		"data-alarm": e.alarm,
 		"data-severity": e.severity ?? void 0,
-		children: [/* @__PURE__ */ x("span", {
+		children: [/* @__PURE__ */ C("span", {
 			className: "lilt-board-tab__state",
-			children: [o, r ? /* @__PURE__ */ b("span", {
+			children: [o, r ? /* @__PURE__ */ S("span", {
 				className: "lilt-board-tab__new",
 				children: "· New"
 			}) : null]
-		}), /* @__PURE__ */ x("span", {
+		}), /* @__PURE__ */ C("span", {
 			className: "lilt-board-tab__actions",
-			children: [e.alarm === "active" ? /* @__PURE__ */ b("button", {
+			children: [e.alarm === "active" ? /* @__PURE__ */ S("button", {
 				type: "button",
 				className: "lilt-board-tab__action",
 				onClick: i,
 				children: "Acknowledge"
-			}) : null, /* @__PURE__ */ b("button", {
+			}) : null, /* @__PURE__ */ S("button", {
 				type: "button",
 				className: "lilt-card-badge__clear lilt-board-tab__pin",
 				"aria-pressed": e.pinned,
 				"aria-label": e.pinned ? `Unpin ${t}` : `Pin ${t}`,
 				title: e.pinned ? "Unpin" : "Keep at the top",
 				onClick: () => a(!e.pinned),
-				children: /* @__PURE__ */ b(n, { release: e.pinned })
+				children: /* @__PURE__ */ S(n, { release: e.pinned })
 			})]
 		})]
 	});
 }
-function ue() {
-	let { title: e, pin: t } = L();
-	return /* @__PURE__ */ b("button", {
+function B() {
+	let { title: e, pin: t } = I();
+	return /* @__PURE__ */ S("button", {
 		type: "button",
 		className: "lilt-board-handle",
 		"aria-pressed": !1,
 		"aria-label": `Pin ${e}`,
 		title: "Keep at the top",
 		onClick: () => t(!0),
-		children: /* @__PURE__ */ b(n, {})
+		children: /* @__PURE__ */ S(n, {})
 	});
 }
-function de() {
-	let { pending: e, apply: t } = I();
-	return e ? /* @__PURE__ */ b("div", {
+function fe() {
+	let { pending: e, apply: t } = F();
+	return e ? /* @__PURE__ */ S("div", {
 		className: "lilt-board__toolbar",
-		children: /* @__PURE__ */ b("button", {
+		children: /* @__PURE__ */ S("button", {
 			type: "button",
 			className: "lilt-board__apply",
 			onClick: t,
@@ -626,5 +626,11 @@ function de() {
 		})
 	}) : null;
 }
+function V(e) {
+	return /* @__PURE__ */ S(u, {
+		layout: !0,
+		children: /* @__PURE__ */ S(L, { ...e })
+	});
+}
 //#endregion
-export { ne as BoardItem, B as BoardItemTab, de as BoardToolbar, R as ChartBoard, O as boardReducer, a as describeExplanation, t as describeFlag, c as evaluateNormal, s as explainDeviation, r as explainReadings, T as flatline, E as jump, M as rankBoard, o as trackNormalStatus, I as useBoard, L as useBoardItem };
+export { re as BoardItem, z as BoardItemTab, fe as BoardToolbar, V as ChartBoard, O as boardReducer, a as describeExplanation, t as describeFlag, c as evaluateNormal, s as explainDeviation, r as explainReadings, T as flatline, E as jump, M as rankBoard, o as trackNormalStatus, F as useBoard, I as useBoardItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lilt-ui/charts",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Beautiful, key-typed React chart cards with linked hover, targets, forecasts, finance charts, and calm motion.",
   "keywords": [
     "react",