@lilt-ui/charts 0.9.2 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/README.md +36 -10
  3. package/dist/cards/activity-ring-card.d.ts +7 -2
  4. package/dist/cards/calendar-heatmap-card.d.ts +18 -0
  5. package/dist/cards/cartesian-card.d.ts +10 -2
  6. package/dist/cards/chart-card.d.ts +4 -1
  7. package/dist/cards/funnel-chart-card.d.ts +7 -2
  8. package/dist/cards/heatmap-chart-card.d.ts +7 -2
  9. package/dist/cards/horizontal-bar-chart-card.d.ts +7 -2
  10. package/dist/cards/keys.d.ts +2 -0
  11. package/dist/cards/observations-card.d.ts +87 -0
  12. package/dist/cards/radar-chart-card.d.ts +7 -2
  13. package/dist/cards/radial-chart-card.d.ts +7 -2
  14. package/dist/cards/range-select.d.ts +28 -0
  15. package/dist/cards/sankey-chart-card.d.ts +7 -2
  16. package/dist/cards/scatter-chart-card.d.ts +7 -2
  17. package/dist/cards/slope-chart-card.d.ts +7 -2
  18. package/dist/cards/stat-card.d.ts +7 -2
  19. package/dist/cards/strip-chart-card.d.ts +15 -0
  20. package/dist/cards/timeline-chart-card.d.ts +18 -0
  21. package/dist/cards/treemap-chart-card.d.ts +24 -0
  22. package/dist/chart.d.ts +1 -1
  23. package/dist/engine/keyed.d.ts +19 -0
  24. package/dist/engine/lifecycle.d.ts +1 -1
  25. package/dist/engine/sankey.d.ts +16 -0
  26. package/dist/finance/cards/depth-chart-card.d.ts +7 -2
  27. package/dist/finance/order-book.d.ts +7 -2
  28. package/dist/finance.js +334 -327
  29. package/dist/index.d.ts +14 -2
  30. package/dist/index.js +3336 -2217
  31. package/dist/lifecycle/chart-empty.d.ts +29 -0
  32. package/dist/marks/contract.d.ts +0 -2
  33. package/dist/motion/use-chart-motion.d.ts +5 -0
  34. package/dist/motion/use-departing.d.ts +7 -0
  35. package/dist/motion/use-snap-bars.d.ts +27 -0
  36. package/dist/{report-context-CVNzZBRd.js → report-context-UrwaoLYZ.js} +408 -231
  37. package/dist/{skeleton-block-Ha7mwDOY.js → skeleton-block-CPaKI7op.js} +2188 -1813
  38. package/dist/styles.css +1 -1
  39. package/dist/types.d.ts +14 -0
  40. package/dist/watch/board/board-state.d.ts +0 -2
  41. package/dist/watch.js +129 -127
  42. package/package.json +11 -10
package/dist/types.d.ts CHANGED
@@ -174,6 +174,8 @@ interface ChartCommonProps<T> {
174
174
  status?: ChartStatus;
175
175
  /** How the skeleton moves while `status` is loading. Defaults to `shimmer`. */
176
176
  loadingStyle?: ChartLoadingStyle;
177
+ /** What the plot shows when there is no data: `dots` (default), `shape`, an element, or `null`. */
178
+ empty?: ChartEmptyState;
177
179
  error?: string;
178
180
  renderRetry?: () => ReactNode;
179
181
  motion?: ChartMotion;
@@ -528,6 +530,18 @@ export interface ChartLegendValue {
528
530
  * Moving skeletons on a page share one clock, so they move in step.
529
531
  */
530
532
  export type ChartLoadingStyle = 'shimmer' | 'draw' | 'breathe';
533
+ /**
534
+ * How a chart with nothing to draw looks: `dots` (the default) gathers a quiet dot field around
535
+ * the message, and `shape` lays the chart's own outline behind it at a whisper. Both stay still
536
+ * and always say so, so an empty chart never reads as loading.
537
+ */
538
+ export type ChartEmptyLook = 'dots' | 'shape';
539
+ /**
540
+ * What a chart shows when the period has no data: a built-in look, your own element (for example
541
+ * `<ChartEmpty>No visits yet</ChartEmpty>`, or any component), or `null` for nothing at all. The
542
+ * chart places it in the plot area; what it says and draws is yours.
543
+ */
544
+ export type ChartEmptyState = ChartEmptyLook | ReactElement | null;
531
545
  /**
532
546
  * How a legend lays out its entries: value `cards` (the default), compact `inline` labels, `list`
533
547
  * rows with values aligned right, color-tinted `pills`, or `bars` where each value also draws a
@@ -70,5 +70,3 @@ export declare function boardReducer(state: BoardState, action: BoardAction): Bo
70
70
  * rest in their written order.
71
71
  */
72
72
  export declare function rankBoard(state: BoardState): string[];
73
- /** Items that need attention now. */
74
- export declare const needsAttention: (state: BoardState) => BoardItemState[];
package/dist/watch.js CHANGED
@@ -1,11 +1,11 @@
1
1
  "use client";
2
- import { S as e, a as t, i as n, l as r, n as i, o as a, r as o, s, t as c, y as l } from "./report-context-CVNzZBRd.js";
2
+ 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";
3
3
  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";
4
4
  import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
5
- import { AnimatePresence as S, motion as te } from "motion/react";
6
- import { createPortal as C } from "react-dom";
5
+ import { AnimatePresence as S, motion as C } from "motion/react";
6
+ import { createPortal as w } from "react-dom";
7
7
  //#region src/watch/engine/rules.ts
8
- function w({ points: e = 6, severity: t = "warning", message: n = "Value has not changed" } = {}) {
8
+ function T({ points: e = 6, severity: t = "warning", message: n = "Value has not changed" } = {}) {
9
9
  return {
10
10
  severity: t,
11
11
  message: n,
@@ -18,7 +18,7 @@ function w({ points: e = 6, severity: t = "warning", message: n = "Value has not
18
18
  }
19
19
  };
20
20
  }
21
- function T({ by: e, direction: t = "both", severity: n = "warning", message: r }) {
21
+ function E({ by: e, direction: t = "both", severity: n = "warning", message: r }) {
22
22
  return {
23
23
  severity: n,
24
24
  message: r ?? (t === "down" ? "Sudden drop" : t === "up" ? "Sudden rise" : "Sudden change"),
@@ -41,7 +41,7 @@ function T({ by: e, direction: t = "both", severity: n = "warning", message: r }
41
41
  }
42
42
  //#endregion
43
43
  //#region src/watch/board/board-state.ts
44
- var E = (e, t) => ({
44
+ var D = (e, t) => ({
45
45
  id: e,
46
46
  order: t,
47
47
  alarm: "normal",
@@ -56,13 +56,13 @@ var E = (e, t) => ({
56
56
  acknowledgedAt: null,
57
57
  clearedAt: null
58
58
  });
59
- function D(e, t) {
59
+ function O(e, t) {
60
60
  if (t.type === "register") {
61
61
  let n = e[t.id];
62
62
  return n?.order === t.order ? e : {
63
63
  ...e,
64
64
  [t.id]: {
65
- ...n ?? E(t.id, t.order),
65
+ ...n ?? D(t.id, t.order),
66
66
  order: t.order
67
67
  }
68
68
  };
@@ -74,13 +74,13 @@ function D(e, t) {
74
74
  }
75
75
  let n = e[t.id];
76
76
  if (!n) return e;
77
- let r = O(n, t);
77
+ let r = k(n, t);
78
78
  return r === n ? e : {
79
79
  ...e,
80
80
  [t.id]: r
81
81
  };
82
82
  }
83
- function O(e, t) {
83
+ function k(e, t) {
84
84
  switch (t.type) {
85
85
  case "report": {
86
86
  let { report: n, now: r } = t;
@@ -126,40 +126,40 @@ function O(e, t) {
126
126
  pinned: t.pinned
127
127
  };
128
128
  case "settle": return e.alarm === "cleared" ? {
129
- ...E(e.id, e.order),
129
+ ...D(e.id, e.order),
130
130
  pinned: e.pinned
131
131
  } : e;
132
132
  default: return e;
133
133
  }
134
134
  }
135
- var k = {
135
+ var A = {
136
136
  active: 1,
137
137
  acknowledged: 2,
138
138
  cleared: 3,
139
139
  normal: 4
140
- }, A = (e) => e === "critical" ? 0 : 1;
141
- function j(e) {
140
+ }, j = (e) => e === "critical" ? 0 : 1;
141
+ function M(e) {
142
142
  return Object.values(e).sort((e, t) => {
143
- let n = e.pinned ? 0 : k[e.alarm], r = t.pinned ? 0 : k[t.alarm];
143
+ let n = e.pinned ? 0 : A[e.alarm], r = t.pinned ? 0 : A[t.alarm];
144
144
  if (n !== r) return n - r;
145
145
  if (n === 1 || n === 2) {
146
- let n = A(e.severity) - A(t.severity);
146
+ let n = j(e.severity) - j(t.severity);
147
147
  if (n !== 0) return n;
148
- let r = M(e) - M(t);
148
+ let r = N(e) - N(t);
149
149
  if (r !== 0) return r;
150
150
  if (e.score !== t.score) return t.score - e.score;
151
151
  }
152
152
  return e.order - t.order;
153
153
  }).map((e) => e.id);
154
154
  }
155
- var M = (e) => e.sinceAt ?? e.raisedAt ?? Infinity, N = 8e3;
156
- function ne({ alerts: e, reducedMotion: t, onView: n, onDismiss: r }) {
155
+ var N = (e) => e.sinceAt ?? e.raisedAt ?? Infinity, P = 8e3;
156
+ function te({ alerts: e, reducedMotion: t, onView: n, onDismiss: r }) {
157
157
  let [i, a] = v(null);
158
158
  h(() => a(document.body), []);
159
159
  let [o, s] = v(!1), c = e.some((e) => e.severity === "critical"), l = e.map((e) => `${e.id}:${e.severity}`).join(), u = _(r);
160
160
  if (u.current = r, h(() => {
161
161
  if (!e.length || c || o) return;
162
- let t = setTimeout(() => u.current(), N);
162
+ let t = setTimeout(() => u.current(), P);
163
163
  return () => clearTimeout(t);
164
164
  }, [
165
165
  l,
@@ -171,10 +171,10 @@ function ne({ alerts: e, reducedMotion: t, onView: n, onDismiss: r }) {
171
171
  y: 16,
172
172
  filter: "blur(6px)"
173
173
  };
174
- return C(/* @__PURE__ */ b("div", {
174
+ return w(/* @__PURE__ */ b("div", {
175
175
  "data-lilt-chart": "",
176
176
  className: "lilt-toast-region",
177
- children: /* @__PURE__ */ b(S, { children: d ? /* @__PURE__ */ x(te.div, {
177
+ children: /* @__PURE__ */ b(S, { children: d ? /* @__PURE__ */ x(C.div, {
178
178
  role: "group",
179
179
  "aria-label": "Chart alert",
180
180
  className: "lilt-toast",
@@ -234,12 +234,12 @@ function ne({ alerts: e, reducedMotion: t, onView: n, onDismiss: r }) {
234
234
  }
235
235
  //#endregion
236
236
  //#region src/watch/board/chart-board.tsx
237
- function re({ children: e }) {
237
+ function ne({ children: e }) {
238
238
  return /* @__PURE__ */ b(y, { children: e });
239
239
  }
240
- var P = d(null), ie = d(null);
241
- function F() {
242
- let e = m(P);
240
+ var F = d(null), re = d(null);
241
+ function I() {
242
+ let e = m(F);
243
243
  if (!e) throw Error("Lilt Charts: useBoard must be used inside a ChartBoard.");
244
244
  let t = Object.values(e.state);
245
245
  return {
@@ -252,8 +252,8 @@ function F() {
252
252
  pin: e.pin
253
253
  };
254
254
  }
255
- function I() {
256
- let e = m(P), t = m(ie);
255
+ function L() {
256
+ let e = m(F), t = m(re);
257
257
  if (!e || !t) throw Error("Lilt Charts: useBoardItem must be used inside a BoardItem.");
258
258
  return {
259
259
  item: e.state[t],
@@ -263,48 +263,48 @@ function I() {
263
263
  pin: (n) => e.pin(t, n)
264
264
  };
265
265
  }
266
- var ae = 500;
267
- 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: d = "auto", className: m, style: y }) {
268
- let S = g(() => u.toArray(t).flatMap((e) => f(e) && e.type === re ? [e.props] : []), [t]), C = g(() => new Map(S.map((e) => [e.id, e.title])), [S]), [w, T] = ee(D, S, (e) => e.reduce((e, t, n) => D(e, {
266
+ var ie = 500;
267
+ 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 }) {
268
+ 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, {
269
269
  type: "register",
270
270
  id: t.id,
271
271
  order: n
272
- }), {})), E = S.map((e) => e.id).join("\0");
272
+ }), {})), D = S.map((e) => e.id).join("\0");
273
273
  h(() => {
274
274
  let e = new Set(S.map((e) => e.id));
275
- S.forEach((e, t) => T({
275
+ S.forEach((e, t) => E({
276
276
  type: "register",
277
277
  id: e.id,
278
278
  order: t
279
279
  }));
280
- for (let t of Object.keys(w)) e.has(t) || T({
280
+ for (let t of Object.keys(T)) e.has(t) || E({
281
281
  type: "unregister",
282
282
  id: t
283
283
  });
284
- }, [E]);
285
- let O = j(w), k = O.join("\0"), [A, M] = v(O), [N, F] = v(!1), I = _(void 0), L = () => {
286
- clearTimeout(I.current), F(!0);
287
- }, R = () => {
288
- clearTimeout(I.current), I.current = setTimeout(() => F(!1), ae);
284
+ }, [D]);
285
+ let k = M(T), A = k.join("\0"), [j, N] = v(k), [P, I] = v(!1), L = _(void 0), R = () => {
286
+ clearTimeout(L.current), I(!0);
287
+ }, z = () => {
288
+ clearTimeout(L.current), L.current = setTimeout(() => I(!1), ie);
289
289
  };
290
- h(() => () => clearTimeout(I.current), []), h(() => {
291
- N || M(O);
292
- }, [N, k]);
293
- let z = [...A.filter((e) => w[e]), ...O.filter((e) => !A.includes(e))], B = z.join("\0") !== k, fe = p(() => M(j(w)), [w]);
290
+ h(() => () => clearTimeout(L.current), []), h(() => {
291
+ P || N(k);
292
+ }, [P, A]);
293
+ 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]);
294
294
  h(() => {
295
- let e = Object.values(w).filter((e) => e.alarm === "cleared" && e.clearedAt !== null).map((e) => setTimeout(() => T({
295
+ let e = Object.values(T).filter((e) => e.alarm === "cleared" && e.clearedAt !== null).map((e) => setTimeout(() => E({
296
296
  type: "settle",
297
297
  id: e.id
298
298
  }), Math.max(0, e.clearedAt + r - Date.now())));
299
299
  return () => e.forEach(clearTimeout);
300
- }, [w, r]);
301
- let V = e(d), H = _(/* @__PURE__ */ new Map()), pe = _(/* @__PURE__ */ new Map());
300
+ }, [T, r]);
301
+ let V = e(d), H = _(/* @__PURE__ */ new Map()), me = _(/* @__PURE__ */ new Map());
302
302
  h(() => {
303
303
  if (typeof IntersectionObserver > "u") return;
304
304
  let e = new IntersectionObserver((e) => {
305
305
  for (let t of e) {
306
306
  let e = t.target.dataset.boardItem;
307
- e && pe.current.set(e, t.intersectionRatio >= .5);
307
+ e && me.current.set(e, t.intersectionRatio >= .5);
308
308
  }
309
309
  }, { threshold: [
310
310
  0,
@@ -312,22 +312,22 @@ function L({ children: t, "aria-label": n, settleAfter: r = 8e3, memory: i, stor
312
312
  1
313
313
  ] });
314
314
  return H.current.forEach((t) => e.observe(t)), () => e.disconnect();
315
- }, [E]);
316
- let [U, me] = v(null), he = _(V);
317
- he.current = V;
315
+ }, [D]);
316
+ let [U, he] = v(null), ge = _(V);
317
+ ge.current = V;
318
318
  let W = p((e) => {
319
319
  let t = H.current.get(e);
320
320
  t && (t.scrollIntoView?.({
321
- behavior: he.current ? "auto" : "smooth",
321
+ behavior: ge.current ? "auto" : "smooth",
322
322
  block: "center"
323
- }), t.focus({ preventScroll: !0 }), me(e));
323
+ }), t.focus({ preventScroll: !0 }), he(e));
324
324
  }, []);
325
325
  h(() => {
326
326
  if (!U) return;
327
- let e = setTimeout(() => me(null), 1600);
327
+ let e = setTimeout(() => he(null), 1600);
328
328
  return () => clearTimeout(e);
329
329
  }, [U]);
330
- let [ge, G] = v([]), K = _(null), q = _(0);
330
+ let [_e, G] = v([]), K = _(null), q = _(0);
331
331
  h(() => {
332
332
  let e = () => {
333
333
  K.current !== null && (document.title = K.current), K.current = null, q.current = 0;
@@ -338,26 +338,26 @@ function L({ children: t, "aria-label": n, settleAfter: r = 8e3, memory: i, stor
338
338
  document.removeEventListener("visibilitychange", t), e();
339
339
  };
340
340
  }, []);
341
- let [_e, ve] = v({
341
+ let [ve, ye] = v({
342
342
  polite: "",
343
343
  assertive: ""
344
- }), ye = _(w), J = _({
344
+ }), be = _(T), J = _({
345
345
  onEvent: o,
346
- titles: C,
346
+ titles: w,
347
347
  toast: s
348
348
  });
349
349
  J.current = {
350
350
  onEvent: o,
351
- titles: C,
351
+ titles: w,
352
352
  toast: s
353
353
  }, h(() => {
354
- let e = ye.current;
355
- ye.current = w;
354
+ let e = be.current;
355
+ be.current = T;
356
356
  let t = [], n = [], r = [], i = /* @__PURE__ */ new Set();
357
- for (let a of Object.values(w)) {
357
+ for (let a of Object.values(T)) {
358
358
  let o = e[a.id];
359
359
  if (!o) continue;
360
- let s = ce(o, a);
360
+ let s = se(o, a);
361
361
  if (!s) continue;
362
362
  let c = J.current.titles.get(a.id) ?? a.id;
363
363
  J.current.onEvent?.({
@@ -366,7 +366,7 @@ function L({ children: t, "aria-label": n, settleAfter: r = 8e3, memory: i, stor
366
366
  title: c,
367
367
  item: a,
368
368
  show: () => W(a.id)
369
- }), s === "raised" || s === "escalated" ? pe.current.get(a.id) || r.push({
369
+ }), s === "raised" || s === "escalated" ? me.current.get(a.id) || r.push({
370
370
  id: a.id,
371
371
  title: c,
372
372
  reason: a.why ?? a.reason,
@@ -375,18 +375,18 @@ function L({ children: t, "aria-label": n, settleAfter: r = 8e3, memory: i, stor
375
375
  let l = a.reason ? `: ${a.reason}${a.since ? ` since ${a.since}` : ""}` : "";
376
376
  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.`);
377
377
  }
378
- if ((t.length || n.length) && ve({
378
+ if ((t.length || n.length) && ye({
379
379
  polite: t.join(" "),
380
380
  assertive: n.join(" ")
381
381
  }), J.current.toast) {
382
382
  if (r.length || i.size) {
383
383
  let e = new Set(r.map((e) => e.id));
384
- G((t) => [...t.filter((t) => !e.has(t.id) && !i.has(t.id)), ...r].sort((e, t) => se(e.severity) - se(t.severity)));
384
+ G((t) => [...t.filter((t) => !e.has(t.id) && !i.has(t.id)), ...r].sort((e, t) => oe(e.severity) - oe(t.severity)));
385
385
  }
386
386
  r.length && document.visibilityState === "hidden" && (K.current ??= document.title, q.current += r.length, document.title = `(${q.current}) ${K.current}`);
387
387
  }
388
- }, [w, W]);
389
- let Y = i ? `lilt-board:${i}` : null, X = _(null), [be, xe] = v(() => /* @__PURE__ */ new Set()), Z = g(() => a ?? le(), [a]);
388
+ }, [T, W]);
389
+ let Y = i ? `lilt-board:${i}` : null, X = _(null), [xe, Se] = v(() => /* @__PURE__ */ new Set()), Z = g(() => a ?? ce(), [a]);
390
390
  h(() => {
391
391
  if (!Y || !Z) return;
392
392
  let e = Z.get(Y);
@@ -396,11 +396,11 @@ function L({ children: t, "aria-label": n, settleAfter: r = 8e3, memory: i, stor
396
396
  X.current = null;
397
397
  }
398
398
  }, [Y, Z]);
399
- let Q = (e) => `${e.id}@${e.sinceAt ?? e.since ?? ""}`, Se = Object.values(w).filter((e) => e.alarm !== "normal" && e.alarm !== "cleared").map(Q).sort().join("\0");
399
+ 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");
400
400
  h(() => {
401
401
  if (!Y || !Z) return;
402
- let e = X.current, t = Object.values(w).filter((e) => e.alarm === "active" || e.alarm === "acknowledged");
403
- e && xe(new Set(t.filter((t) => t.alarm === "active" && !e.has(Q(t))).map((e) => e.id)));
402
+ let e = X.current, t = Object.values(T).filter((e) => e.alarm === "active" || e.alarm === "acknowledged");
403
+ e && Se(new Set(t.filter((t) => t.alarm === "active" && !e.has(Q(t))).map((e) => e.id)));
404
404
  let n = () => Z.set(Y, JSON.stringify(t.map(Q))), r = () => {
405
405
  document.visibilityState === "hidden" && n();
406
406
  };
@@ -408,55 +408,56 @@ function L({ children: t, "aria-label": n, settleAfter: r = 8e3, memory: i, stor
408
408
  window.removeEventListener("pagehide", n), document.removeEventListener("visibilitychange", r), n();
409
409
  };
410
410
  }, [
411
- Se,
411
+ Ce,
412
412
  Y,
413
413
  Z
414
414
  ]);
415
- let Ce = p((e) => T({
415
+ let we = p((e) => E({
416
416
  type: "acknowledge",
417
417
  id: e,
418
418
  now: Date.now()
419
- }), []), we = p((e, t) => T({
419
+ }), []), Te = p((e, t) => E({
420
420
  type: "pin",
421
421
  id: e,
422
422
  pinned: t
423
- }), []), Te = g(() => ({
424
- state: w,
425
- titles: C,
426
- fresh: be,
427
- acknowledge: Ce,
428
- pin: we,
429
- pending: B,
430
- apply: fe
423
+ }), []), Ee = g(() => ({
424
+ state: T,
425
+ titles: w,
426
+ fresh: xe,
427
+ acknowledge: we,
428
+ pin: Te,
429
+ pending: fe,
430
+ apply: pe
431
431
  }), [
432
+ T,
432
433
  w,
433
- C,
434
- be,
435
- Ce,
434
+ xe,
436
435
  we,
437
- B,
438
- fe
439
- ]), Ee = new Map(S.map((e) => [e.id, e])), $ = ge.filter((e) => w[e.id]);
440
- return /* @__PURE__ */ x(P.Provider, {
441
- value: Te,
436
+ Te,
437
+ fe,
438
+ pe
439
+ ]), De = new Map(S.map((e) => [e.id, e])), $ = _e.filter((e) => T[e.id]);
440
+ return /* @__PURE__ */ x(F.Provider, {
441
+ value: Ee,
442
442
  children: [/* @__PURE__ */ x("section", {
443
443
  "data-lilt-chart": "",
444
444
  className: ["lilt-board", m].filter(Boolean).join(" "),
445
445
  style: y,
446
446
  "aria-label": n,
447
- onPointerEnter: L,
448
- onPointerLeave: R,
449
- onFocus: L,
447
+ onPointerEnter: R,
448
+ onPointerLeave: z,
449
+ onFocus: R,
450
450
  onBlur: (e) => {
451
- e.currentTarget.contains(e.relatedTarget) || R();
451
+ e.currentTarget.contains(e.relatedTarget) || z();
452
452
  },
453
453
  children: [
454
454
  c ? /* @__PURE__ */ b(de, {}) : null,
455
- /* @__PURE__ */ b("div", {
455
+ /* @__PURE__ */ b(C.div, {
456
+ layoutRoot: !0,
456
457
  className: "lilt-board__grid",
457
- children: z.map((e) => {
458
- let t = Ee.get(e), n = w[e];
459
- return !t || !n ? null : /* @__PURE__ */ b(te.div, {
458
+ children: B.map((e) => {
459
+ let t = De.get(e), n = T[e];
460
+ return !t || !n ? null : /* @__PURE__ */ b(C.div, {
460
461
  ref: (t) => {
461
462
  t ? H.current.set(e, t) : H.current.delete(e);
462
463
  },
@@ -466,6 +467,7 @@ function L({ children: t, "aria-label": n, settleAfter: r = 8e3, memory: i, stor
466
467
  "data-board-item": e,
467
468
  "data-flash": U === e || void 0,
468
469
  layout: !V && "position",
470
+ layoutDependency: ue,
469
471
  transition: {
470
472
  type: "spring",
471
473
  stiffness: 420,
@@ -477,14 +479,14 @@ function L({ children: t, "aria-label": n, settleAfter: r = 8e3, memory: i, stor
477
479
  "data-severity": n.severity ?? void 0,
478
480
  "data-pinned": n.pinned || void 0,
479
481
  style: t.span === 2 ? { gridColumn: "span 2" } : void 0,
480
- children: /* @__PURE__ */ b(ie.Provider, {
482
+ children: /* @__PURE__ */ b(re.Provider, {
481
483
  value: e,
482
- children: /* @__PURE__ */ b(ue, {
484
+ children: /* @__PURE__ */ b(le, {
483
485
  item: n,
484
486
  status: l,
485
- children: /* @__PURE__ */ b(oe, {
487
+ children: /* @__PURE__ */ b(ae, {
486
488
  id: e,
487
- dispatch: T,
489
+ dispatch: E,
488
490
  children: t.children
489
491
  })
490
492
  })
@@ -495,15 +497,15 @@ function L({ children: t, "aria-label": n, settleAfter: r = 8e3, memory: i, stor
495
497
  /* @__PURE__ */ b("div", {
496
498
  className: "lilt-chart__sr-only",
497
499
  "aria-live": "polite",
498
- children: _e.polite
500
+ children: ve.polite
499
501
  }),
500
502
  /* @__PURE__ */ b("div", {
501
503
  className: "lilt-chart__sr-only",
502
504
  "aria-live": "assertive",
503
- children: _e.assertive
505
+ children: ve.assertive
504
506
  })
505
507
  ]
506
- }), s ? /* @__PURE__ */ b(ne, {
508
+ }), s ? /* @__PURE__ */ b(te, {
507
509
  alerts: $,
508
510
  reducedMotion: V,
509
511
  onView: () => {
@@ -513,27 +515,27 @@ function L({ children: t, "aria-label": n, settleAfter: r = 8e3, memory: i, stor
513
515
  }) : null]
514
516
  });
515
517
  }
516
- function oe({ id: e, dispatch: t, children: n }) {
518
+ function ae({ id: e, dispatch: t, children: n }) {
517
519
  let r = p((n) => t({
518
520
  type: "report",
519
521
  id: e,
520
522
  report: n,
521
523
  now: Date.now()
522
524
  }), [t, e]);
523
- return /* @__PURE__ */ b(c.Provider, {
525
+ return /* @__PURE__ */ b(l.Provider, {
524
526
  value: r,
525
527
  children: n
526
528
  });
527
529
  }
528
- var se = (e) => e === "critical" ? 0 : 1;
529
- function ce(e, t) {
530
+ var oe = (e) => e === "critical" ? 0 : 1;
531
+ function se(e, t) {
530
532
  return e.alarm === t.alarm ? t.alarm === "active" && e.severity === "warning" && t.severity === "critical" ? "escalated" : null : {
531
533
  active: e.alarm === "acknowledged" ? "escalated" : "raised",
532
534
  acknowledged: "acknowledged",
533
535
  cleared: "cleared"
534
536
  }[t.alarm] ?? null;
535
537
  }
536
- function le() {
538
+ function ce() {
537
539
  return typeof window > "u" ? null : {
538
540
  get: (e) => {
539
541
  try {
@@ -549,35 +551,35 @@ function le() {
549
551
  }
550
552
  };
551
553
  }
552
- function ue({ item: e, status: t, children: n }) {
553
- let i = t && (e.alarm !== "normal" || e.pinned), a = g(() => ({
554
- badge: i ? /* @__PURE__ */ b(z, {}) : void 0,
554
+ function le({ item: e, status: t, children: n }) {
555
+ let r = t && (e.alarm !== "normal" || e.pinned), a = g(() => ({
556
+ badge: r ? /* @__PURE__ */ b(B, {}) : void 0,
555
557
  tone: e.alarm === "active" ? e.severity : null,
556
- handle: t && !i ? /* @__PURE__ */ b(B, {}) : void 0
558
+ handle: t && !r ? /* @__PURE__ */ b(ue, {}) : void 0
557
559
  }), [
558
- i,
560
+ r,
559
561
  t,
560
562
  e.alarm,
561
563
  e.severity
562
564
  ]);
563
- return /* @__PURE__ */ b(r.Provider, {
565
+ return /* @__PURE__ */ b(i.Provider, {
564
566
  value: a,
565
567
  children: n
566
568
  });
567
569
  }
568
- var R = new Intl.DateTimeFormat(void 0, {
570
+ var z = new Intl.DateTimeFormat(void 0, {
569
571
  hour: "numeric",
570
572
  minute: "2-digit"
571
573
  });
572
- function z() {
573
- let { item: e, title: t, fresh: n, acknowledge: r, pin: i } = I(), a = e.alarm === "active" ? "Needs attention" : e.alarm === "acknowledged" ? `Seen ${R.format(e.acknowledgedAt)}` : e.alarm === "cleared" ? "Back to normal" : "Pinned";
574
+ function B() {
575
+ 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";
574
576
  return /* @__PURE__ */ x("span", {
575
577
  className: "lilt-board-tab",
576
578
  "data-alarm": e.alarm,
577
579
  "data-severity": e.severity ?? void 0,
578
580
  children: [/* @__PURE__ */ x("span", {
579
581
  className: "lilt-board-tab__state",
580
- children: [a, n ? /* @__PURE__ */ b("span", {
582
+ children: [o, r ? /* @__PURE__ */ b("span", {
581
583
  className: "lilt-board-tab__new",
582
584
  children: "· New"
583
585
  }) : null]
@@ -586,7 +588,7 @@ function z() {
586
588
  children: [e.alarm === "active" ? /* @__PURE__ */ b("button", {
587
589
  type: "button",
588
590
  className: "lilt-board-tab__action",
589
- onClick: r,
591
+ onClick: i,
590
592
  children: "Acknowledge"
591
593
  }) : null, /* @__PURE__ */ b("button", {
592
594
  type: "button",
@@ -594,14 +596,14 @@ function z() {
594
596
  "aria-pressed": e.pinned,
595
597
  "aria-label": e.pinned ? `Unpin ${t}` : `Pin ${t}`,
596
598
  title: e.pinned ? "Unpin" : "Keep at the top",
597
- onClick: () => i(!e.pinned),
598
- children: /* @__PURE__ */ b(l, { release: e.pinned })
599
+ onClick: () => a(!e.pinned),
600
+ children: /* @__PURE__ */ b(n, { release: e.pinned })
599
601
  })]
600
602
  })]
601
603
  });
602
604
  }
603
- function B() {
604
- let { title: e, pin: t } = I();
605
+ function ue() {
606
+ let { title: e, pin: t } = L();
605
607
  return /* @__PURE__ */ b("button", {
606
608
  type: "button",
607
609
  className: "lilt-board-handle",
@@ -609,11 +611,11 @@ function B() {
609
611
  "aria-label": `Pin ${e}`,
610
612
  title: "Keep at the top",
611
613
  onClick: () => t(!0),
612
- children: /* @__PURE__ */ b(l, {})
614
+ children: /* @__PURE__ */ b(n, {})
613
615
  });
614
616
  }
615
617
  function de() {
616
- let { pending: e, apply: t } = F();
618
+ let { pending: e, apply: t } = I();
617
619
  return e ? /* @__PURE__ */ b("div", {
618
620
  className: "lilt-board__toolbar",
619
621
  children: /* @__PURE__ */ b("button", {
@@ -625,4 +627,4 @@ function de() {
625
627
  }) : null;
626
628
  }
627
629
  //#endregion
628
- export { re as BoardItem, z as BoardItemTab, de as BoardToolbar, L as ChartBoard, D as boardReducer, i as describeExplanation, t as describeFlag, s as evaluateNormal, o as explainDeviation, n as explainReadings, w as flatline, T as jump, j as rankBoard, a as trackNormalStatus, F as useBoard, I as useBoardItem };
630
+ 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 };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lilt-ui/charts",
3
- "version": "0.9.2",
3
+ "version": "0.11.0",
4
4
  "description": "Beautiful, key-typed React chart cards with linked hover, targets, forecasts, finance charts, and calm motion.",
5
5
  "keywords": [
6
6
  "react",
@@ -59,6 +59,15 @@
59
59
  "sideEffects": [
60
60
  "./dist/styles.css"
61
61
  ],
62
+ "scripts": {
63
+ "build": "vite build",
64
+ "prepublishOnly": "pnpm build",
65
+ "typecheck": "tsc --noEmit && pnpm build && pnpm run typecheck:consumer",
66
+ "typecheck:consumer": "tsc --noEmit --strict --target ES2022 --module ESNext --moduleResolution Bundler --skipLibCheck consumer/typecheck.ts",
67
+ "lint": "eslint src",
68
+ "test": "pnpm build && vitest run",
69
+ "format:check": "prettier --check src vite.config.ts tsconfig.json"
70
+ },
62
71
  "dependencies": {
63
72
  "@number-flow/react": "^0.6.2",
64
73
  "d3-array": "^3.2.4",
@@ -72,13 +81,5 @@
72
81
  "peerDependencies": {
73
82
  "react": "^19.0.0",
74
83
  "react-dom": "^19.0.0"
75
- },
76
- "scripts": {
77
- "build": "vite build",
78
- "typecheck": "tsc --noEmit && pnpm build && pnpm run typecheck:consumer",
79
- "typecheck:consumer": "tsc --noEmit --strict --target ES2022 --module ESNext --moduleResolution Bundler --skipLibCheck consumer/typecheck.ts",
80
- "lint": "eslint src",
81
- "test": "pnpm build && vitest run",
82
- "format:check": "prettier --check src vite.config.ts tsconfig.json"
83
84
  }
84
- }
85
+ }