@pihanga2/shadcn 0.2.23 → 0.2.25

package/cards/swimlane/swimlane.component.js

@@ -1,14 +1,14 @@
 import "./swimlane.types.js";
-import { describeSwimlaneTarget as e, formatTs as t, projectPending as n, relatedCallIds as r, rowTouches as i } from "./swimlane.model.js";
+import { describeSwimlaneTarget as e, formatTs as t, projectPending as n, relatedCallIds as r, rowTouches as i, stepKeyOf as a, stepRows as o } from "./swimlane.model.js";
 import './swimlane.css';/* empty css         */
-import { memo as a, useEffect as o, useId as s, useLayoutEffect as c, useMemo as l, useRef as u, useState as d } from "react";
-import f from "clsx";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { memo as s, useEffect as c, useId as l, useLayoutEffect as u, useMemo as d, useRef as f, useState as p } from "react";
+import m from "clsx";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/cards/swimlane/swimlane.component.tsx
-var g = (e, t) => e.gutter + t * e.laneW + e.laneW / 2;
-function _(e, t, n, r, i, a, o, s = null) {
-	n.forEach((n, c) => {
-		let l = g(t, c);
+var v = (e, t) => e.gutter + t * e.laneW + e.laneW / 2;
+function y(e, t, n, r, i, a, o, s = null, c = {}, l = {}) {
+	n.forEach((n, u) => {
+		let d = v(t, u);
 		[[
 			r,
 			0,
@@ -17,45 +17,49 @@ function _(e, t, n, r, i, a, o, s = null) {
 			i,
 			t.mid,
 			t.rowH
-		]].forEach(([t, o, c], u) => {
-			let d = t[n];
-			d && (e.visuals.push(/* @__PURE__ */ m("line", {
-				className: `swl-ll swl-ll-${d.state}`,
-				x1: l,
-				x2: l,
+		]].forEach(([t, o, u], f) => {
+			let p = t[n];
+			p && (e.visuals.push(/* @__PURE__ */ g("line", {
+				className: `swl-ll swl-ll-${p.state}`,
+				x1: d,
+				x2: d,
 				y1: o,
-				y2: c
-			}, `ll-${n}-${u}`)), d.acts.forEach((t, d) => {
-				let p = l - 5 + d * 5, g = u === 1 && !r[n]?.acts.includes(t), _ = u === 0 && !i[n]?.acts.includes(t), v = `M${p},${o} V${c} M${p + 10},${o} V${c}` + (g ? ` M${p},${o} H${p + 10}` : "") + (_ ? ` M${p},${c} H${p + 10}` : "");
-				e.visuals.push(/* @__PURE__ */ h("g", {
-					className: f("swl-act", a === t ? "swl-hl" : s === t && "swl-hl-proc"),
-					children: [/* @__PURE__ */ m("rect", {
-						x: p,
+				y2: u
+			}, `ll-${n}-${f}`)), p.acts.forEach((t, p) => {
+				let h = d - 5 + p * 5, v = f === 1 && !r[n]?.acts.includes(t), y = f === 0 && !i[n]?.acts.includes(t), b = `M${h},${o} V${u} M${h + 10},${o} V${u}` + (v ? ` M${h},${o} H${h + 10}` : "") + (y ? ` M${h},${u} H${h + 10}` : ""), x = l[n];
+				e.visuals.push(/* @__PURE__ */ _("g", {
+					className: m("swl-act", c[n], a === t ? "swl-hl" : s === t && "swl-hl-proc"),
+					children: [/* @__PURE__ */ g("rect", {
+						x: h,
 						y: o,
 						width: 10,
-						height: c - o
-					}), /* @__PURE__ */ m("path", { d: v })]
-				}, `a-${t}-${u}`)), e.hits.push(/* @__PURE__ */ m("rect", {
+						height: u - o,
+						style: x
+					}), /* @__PURE__ */ g("path", {
+						d: b,
+						style: x
+					})]
+				}, `a-${t}-${f}`)), e.hits.push(/* @__PURE__ */ g("rect", {
 					className: "swl-hit",
-					x: p - 8,
+					x: h - 8,
 					y: o,
 					width: 26,
-					height: c - o,
+					height: u - o,
 					"data-kind": "activity",
 					"data-id": t,
 					"data-lane": n
-				}, `ha-${t}-${u}`));
+				}, `ha-${t}-${f}`));
 			}));
-		}), !r[n] && i[n] && e.visuals.push(/* @__PURE__ */ m("rect", {
+		}), !r[n] && i[n] && e.visuals.push(/* @__PURE__ */ g("rect", {
 			className: "swl-lane-head",
-			x: l - 16,
+			x: d - 16,
 			y: t.mid - 5,
 			width: 32,
 			height: 10,
 			rx: 2
-		}, `h-${n}`), /* @__PURE__ */ h("text", {
+		}, `h-${n}`), /* @__PURE__ */ _("text", {
 			className: "swl-lbl-muted",
-			x: l + 20,
+			x: d + 20,
 			y: t.mid + 3,
 			children: [
 				"+ ",
@@ -65,26 +69,26 @@ function _(e, t, n, r, i, a, o, s = null) {
 		}, `ht-${n}`));
 	});
 }
-function v(e, t, n, r) {
+function b(e, t, n, r) {
 	let i = n(r.from), a = n(r.to);
 	if (i < 0 || a < 0) return;
-	let o = g(t, i), s = g(t, a), c = f("swl-ar", r.cls, r.hl ? "swl-hl" : r.rel && "swl-hl-rel"), l = `url(#${t.mk}-${r.marker})`, u = {
+	let o = v(t, i), s = v(t, a), c = m("swl-ar", r.cls, r.hl ? "swl-hl" : r.rel && "swl-hl-rel"), l = `url(#${t.mk}-${r.marker})`, u = {
 		"data-kind": r.kind,
 		"data-id": r.hitId,
 		"data-row": r.rowId
 	};
 	if (r.from === r.to) {
 		let n = `M${o + 6},${t.mid - 9} h26 v16 h-20`;
-		e.visuals.push(/* @__PURE__ */ m("path", {
+		e.visuals.push(/* @__PURE__ */ g("path", {
 			className: c,
 			d: n,
 			markerEnd: l
-		}, "ar"), /* @__PURE__ */ m("text", {
+		}, "ar"), /* @__PURE__ */ g("text", {
 			className: "swl-lbl",
 			x: o + 38,
 			y: t.mid + 3,
 			children: r.label
-		}, "lb")), e.hits.push(/* @__PURE__ */ m("path", {
+		}, "lb")), e.hits.push(/* @__PURE__ */ g("path", {
 			className: "swl-hit",
 			d: n,
 			strokeWidth: 14,
@@ -93,23 +97,23 @@ function v(e, t, n, r) {
 		}, "hit"));
 		return;
 	}
-	let d = Math.sign(s - o), p = o + d * 6, h = s - d * 6;
-	e.visuals.push(/* @__PURE__ */ m("line", {
+	let d = Math.sign(s - o), f = o + d * 6, p = s - d * 6;
+	e.visuals.push(/* @__PURE__ */ g("line", {
 		className: c,
-		x1: p,
-		x2: h,
+		x1: f,
+		x2: p,
 		y1: t.mid,
 		y2: t.mid,
 		markerEnd: l
-	}, "ar"), /* @__PURE__ */ m("text", {
+	}, "ar"), /* @__PURE__ */ g("text", {
 		className: "swl-lbl",
-		x: Math.min(p, h) + 8,
+		x: Math.min(f, p) + 8,
 		y: t.mid - 5,
 		children: r.label
-	}, "lb")), e.hits.push(/* @__PURE__ */ m("line", {
+	}, "lb")), e.hits.push(/* @__PURE__ */ g("line", {
 		className: "swl-hit",
-		x1: p,
-		x2: h,
+		x1: f,
+		x2: p,
 		y1: t.mid,
 		y2: t.mid,
 		strokeWidth: 16,
@@ -117,164 +121,179 @@ function v(e, t, n, r) {
 		...u
 	}, "hit"));
 }
-var y = {
+var x = {
 	sync: ["swl-ar-sync", "sync"],
 	async: ["swl-ar-async", "async"],
 	event: ["swl-ar-event", "event"]
-}, b = a(function({ row: e, g: n, laneOrder: r, laneLabels: i, width: a, hl: o, rel: s, proc: c }) {
-	let l = {
+}, S = s(function({ row: e, g: t, laneOrder: n, laneLabels: r, laneActivityClassName: i, laneActivityStyle: o, width: s, hl: c, rel: l, proc: u, fmtTs: d, grouped: f, stepHl: p }) {
+	let h = {
 		visuals: [],
 		hits: []
-	}, u = (e) => r.indexOf(e);
-	_(l, n, r, e.pre, e.post, o, i, c);
-	let d = e.event;
-	switch (d.type) {
+	}, S = (e) => n.indexOf(e);
+	y(h, t, n, e.pre, e.post, c, r, u, i, o);
+	let C = e.event;
+	switch (C.type) {
 		case "call": {
-			let [t, r] = y[d.kind];
-			v(l, n, u, {
-				from: d.from,
-				to: d.to,
-				cls: t,
+			let [n, r] = x[C.kind];
+			b(h, t, S, {
+				from: C.from,
+				to: C.to,
+				cls: n,
 				marker: r,
-				label: d.label,
-				hitId: d.id,
+				label: C.label,
+				hitId: C.id,
 				kind: "transition",
 				rowId: e.id,
-				hl: o === d.id,
-				rel: s
+				hl: c === C.id,
+				rel: l
 			});
 			break;
 		}
 		case "reply":
-			e.route && v(l, n, u, {
+			e.route && b(h, t, S, {
 				from: e.route.to,
 				to: e.route.from,
-				cls: d.ok ? "swl-ar-reply" : "swl-ar-error",
-				marker: d.ok ? "reply" : "error",
-				label: d.label,
-				hitId: d.id,
+				cls: C.ok ? "swl-ar-reply" : "swl-ar-error",
+				marker: C.ok ? "reply" : "error",
+				label: C.label,
+				hitId: C.id,
 				kind: "transition",
 				rowId: e.id,
-				hl: o === d.id,
-				rel: s
+				hl: c === C.id,
+				rel: l
 			});
 			break;
 		case "done":
-			e.route && l.visuals.push(/* @__PURE__ */ h("text", {
+			e.route && h.visuals.push(/* @__PURE__ */ _("text", {
 				className: "swl-lbl-muted",
-				x: g(n, u(e.route.to)) + 14,
-				y: n.mid + 3,
+				x: v(t, S(e.route.to)) + 14,
+				y: t.mid + 3,
 				children: ["✓ processed ", e.route.label]
 			}, "dn"));
 			break;
 		case "state": {
-			let t = g(n, u(d.lane));
-			l.visuals.push(/* @__PURE__ */ m("circle", {
-				cx: t,
-				cy: n.mid,
+			let n = v(t, S(C.lane));
+			h.visuals.push(/* @__PURE__ */ g("circle", {
+				cx: n,
+				cy: t.mid,
 				r: 5,
-				className: `swl-dot-${d.state}`
-			}, "st"), /* @__PURE__ */ h("text", {
+				className: `swl-dot-${C.state}`
+			}, "st")), (C.showLabel ?? !0) && h.visuals.push(/* @__PURE__ */ _("text", {
 				className: "swl-lbl-muted",
-				x: t + 10,
-				y: n.mid + 3,
-				children: ["→ ", d.state]
-			}, "stl")), l.hits.push(/* @__PURE__ */ m("circle", {
+				x: n + 10,
+				y: t.mid + 3,
+				children: ["→ ", C.state]
+			}, "stl")), h.hits.push(/* @__PURE__ */ g("circle", {
 				className: "swl-hit",
-				cx: t,
-				cy: n.mid,
+				cx: n,
+				cy: t.mid,
 				r: 12,
 				"data-kind": "state",
 				"data-id": `state-${e.id}`,
-				"data-lane": d.lane,
+				"data-lane": C.lane,
 				"data-row": e.id
 			}, "sth"));
 			break;
 		}
 	}
-	return /* @__PURE__ */ h("svg", {
-		className: f("swl-row", e.fulfilled && "swl-arrived"),
-		width: a,
-		height: n.rowH,
+	return /* @__PURE__ */ _("svg", {
+		className: m("swl-row", e.fulfilled && "swl-arrived", f && "swl-grouped", p && "swl-hl-step"),
+		width: s,
+		height: t.rowH,
 		"data-row": e.id,
 		children: [
-			/* @__PURE__ */ m("text", {
+			f ? /* @__PURE__ */ g("line", {
+				className: "swl-ts-tie",
+				x1: 6,
+				x2: 6,
+				y1: 0,
+				y2: t.rowH
+			}) : /* @__PURE__ */ g("text", {
 				className: "swl-ts",
 				x: 0,
-				y: n.mid + 3,
-				children: t(d.ts)
+				y: t.mid + 3,
+				children: d(C.ts)
 			}),
-			e.fulfilled && /* @__PURE__ */ h("text", {
-				className: "swl-ok",
-				x: n.gutter - 16,
-				y: n.mid + 4,
-				children: [/* @__PURE__ */ m("title", { children: "replaced an outstanding message" }), "✓"]
+			e.fulfilled && (() => {
+				let e = C.type === "reply" && C.ok === !1;
+				return /* @__PURE__ */ _("text", {
+					className: m("swl-ok", e && "swl-ok-error"),
+					x: t.gutter - 16,
+					y: t.mid + 4,
+					children: [/* @__PURE__ */ g("title", { children: e ? "replaced an outstanding message (error)" : "replaced an outstanding message" }), e ? "✗" : "✓"]
+				});
+			})(),
+			h.visuals,
+			/* @__PURE__ */ g("rect", {
+				className: "swl-hit",
+				x: 0,
+				y: 0,
+				width: t.gutter - 2,
+				height: t.rowH,
+				"data-kind": "step",
+				"data-id": a(e),
+				"data-row": e.id
 			}),
-			l.visuals,
-			l.hits
+			h.hits
 		]
 	});
-}), x = a(function({ row: e, g: t, laneOrder: n, laneLabels: r, width: i, hl: a, rel: o, proc: s, now: c }) {
-	let l = {
+}), C = (e) => `${(e / 1e3).toFixed(1)}s`, w = s(function({ row: e, g: t, laneOrder: n, laneLabels: r, laneActivityClassName: i, laneActivityStyle: a, width: o, hl: s, rel: c, proc: l, now: u, formatWait: d = C }) {
+	let f = {
 		visuals: [],
 		hits: []
-	}, u = e.pending, d = c - u.since, p = u.timeoutMs != null && d > u.timeoutMs;
-	return _(l, t, n, e.pre, e.post, a, r, s), v(l, t, (e) => n.indexOf(e), {
-		from: u.from,
-		to: u.to,
-		cls: f("swl-ar-ghost", p && "swl-overdue"),
+	}, p = e.pending, h = u - p.since, g = p.timeoutMs != null && h > p.timeoutMs;
+	return y(f, t, n, e.pre, e.post, s, r, l, i, a), b(f, t, (e) => n.indexOf(e), {
+		from: p.from,
+		to: p.to,
+		cls: m("swl-ar-ghost", g && "swl-overdue"),
 		marker: "ghost",
-		label: `⌛ ${u.label}`,
-		hitId: u.id,
+		label: `⌛ ${p.label}`,
+		hitId: p.id,
 		kind: "pending",
-		hl: a === u.id,
-		rel: o
-	}), /* @__PURE__ */ h("svg", {
+		hl: s === p.id,
+		rel: c
+	}), /* @__PURE__ */ _("svg", {
 		className: "swl-row swl-ghost",
-		width: i,
+		width: o,
 		height: t.rowH,
 		children: [
-			/* @__PURE__ */ h("text", {
-				className: f("swl-ts", p && "swl-overdue"),
+			/* @__PURE__ */ _("text", {
+				className: m("swl-ts", g && "swl-overdue"),
 				x: 0,
 				y: t.mid + 3,
-				children: [
-					"waiting ",
-					(d / 1e3).toFixed(1),
-					"s"
-				]
+				children: ["waiting ", d(h)]
 			}),
-			l.visuals,
-			l.hits
+			f.visuals,
+			f.hits
 		]
 	});
-}), S = a(function({ snap: e, count: t, g: n, laneOrder: r, laneLabels: i, width: a, proc: o }) {
-	let s = {
+}), T = s(function({ snap: e, count: t, g: n, laneOrder: r, laneLabels: i, laneActivityClassName: a, laneActivityStyle: o, width: s, proc: c }) {
+	let l = {
 		visuals: [],
 		hits: []
 	};
-	return _(s, n, r, e, e, null, i, o), /* @__PURE__ */ h("svg", {
+	return y(l, n, r, e, e, null, i, c, a, o), /* @__PURE__ */ _("svg", {
 		className: "swl-row swl-now",
-		width: a,
+		width: s,
 		height: n.rowH,
 		children: [
-			/* @__PURE__ */ m("text", {
+			/* @__PURE__ */ g("text", {
 				className: "swl-now-lbl",
 				x: 0,
 				y: n.mid + 3,
 				children: "now"
 			}),
-			s.visuals,
-			/* @__PURE__ */ m("line", {
+			l.visuals,
+			/* @__PURE__ */ g("line", {
 				className: "swl-now-line",
 				x1: n.gutter - 6,
-				x2: a - 10,
+				x2: s - 10,
 				y1: n.mid,
 				y2: n.mid
 			}),
-			/* @__PURE__ */ h("text", {
+			/* @__PURE__ */ _("text", {
 				className: "swl-now-lbl",
-				x: a - 136,
+				x: s - 136,
 				y: n.mid - 4,
 				children: [
 					"▼ ",
@@ -285,64 +304,75 @@ var y = {
 		]
 	});
 });
-function C(e) {
-	let { model: t, hid: r, related: a, procId: s, clock: c, ...u } = e, [f, g] = d(() => Date.now()), _ = c ?? f, v = t.pending.length > 0;
-	o(() => {
-		if (!v || c != null) return;
-		let e = setInterval(() => g(Date.now()), 250);
+function ee(e) {
+	let { model: t, hid: r, related: a, procId: o, clock: s, formatWait: l, ...u } = e, [f, m] = p(() => Date.now()), v = s ?? f, y = t.pending.length > 0;
+	c(() => {
+		if (!y || s != null) return;
+		let e = setInterval(() => m(Date.now()), 250);
 		return () => clearInterval(e);
-	}, [v, c]);
-	let { current: y, pending: b } = t, C = l(() => n(y, b), [y, b]);
-	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(S, {
+	}, [y, s]);
+	let { current: b, pending: x } = t, S = d(() => n(b, x), [b, x]);
+	return /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(T, {
 		snap: t.current,
 		count: t.pending.length,
-		proc: s && i({
+		proc: o && i({
 			pre: t.current,
 			post: t.current
-		}, void 0, s) ? s : null,
+		}, void 0, o) ? o : null,
 		...u
-	}), C.map((e) => /* @__PURE__ */ m(x, {
+	}), S.map((e) => /* @__PURE__ */ g(w, {
 		row: e,
-		now: _,
+		now: v,
 		hl: r && i(e, e.pending.id, r) ? r : null,
 		rel: a.has(e.pending.id),
-		proc: s && i(e, void 0, s) ? s : null,
+		proc: o && i(e, void 0, o) ? o : null,
+		formatWait: l,
 		...u
 	}, e.id))] });
 }
-function w({ model: e, g: t, headH: n, width: r }) {
-	return /* @__PURE__ */ m("svg", {
+function te({ model: e, g: t, headH: n, width: r }) {
+	return /* @__PURE__ */ g("svg", {
 		width: r,
 		height: n,
 		children: e.laneOrder.map((r, i) => {
-			let a = g(t, i), o = e.current[r], s = n - 24;
-			return /* @__PURE__ */ h("g", { children: [
-				/* @__PURE__ */ m("text", {
+			let a = v(t, i), o = e.current[r], s = n - 24;
+			return /* @__PURE__ */ _("g", { children: [
+				/* @__PURE__ */ g("text", {
 					className: "swl-lane-name",
 					x: a + 4,
 					y: s,
 					transform: `rotate(-90 ${a + 4} ${s})`,
 					children: e.laneLabels[r] ?? r
 				}),
-				/* @__PURE__ */ m("circle", {
+				/* @__PURE__ */ g("circle", {
 					cx: a,
 					cy: n - 12,
 					r: 5,
 					className: `swl-dot-${o?.state}`,
-					children: /* @__PURE__ */ m("title", { children: o?.state })
+					children: /* @__PURE__ */ g("title", { children: o?.state })
 				}),
-				o && o.acts.length > 0 && /* @__PURE__ */ m("text", {
+				o && o.acts.length > 0 && /* @__PURE__ */ g("text", {
 					className: "swl-lbl-muted",
 					x: a + 9,
 					y: n - 8,
 					children: o.acts.length
+				}),
+				/* @__PURE__ */ g("rect", {
+					className: "swl-hit",
+					x: a - t.laneW / 2,
+					y: 0,
+					width: t.laneW,
+					height: n,
+					"data-kind": "lane",
+					"data-id": r,
+					"data-lane": r
 				})
 			] }, r);
 		})
 	});
 }
-function T({ mk: e }) {
-	let t = (t, n, r) => /* @__PURE__ */ m("marker", {
+function ne({ mk: e }) {
+	let t = (t, n, r) => /* @__PURE__ */ g("marker", {
 		id: `${e}-${t}`,
 		viewBox: "0 0 10 10",
 		refX: 9,
@@ -351,20 +381,20 @@ function T({ mk: e }) {
 		markerHeight: 9,
 		markerUnits: "userSpaceOnUse",
 		orient: "auto-start-reverse",
-		children: r ? /* @__PURE__ */ m("path", {
+		children: r ? /* @__PURE__ */ g("path", {
 			d: "M1,1 L9,5 L1,9",
 			className: n
-		}) : /* @__PURE__ */ m("path", {
+		}) : /* @__PURE__ */ g("path", {
 			d: "M0,0 L10,5 L0,10 z",
 			className: n
 		})
 	});
-	return /* @__PURE__ */ m("svg", {
+	return /* @__PURE__ */ g("svg", {
 		width: 0,
 		height: 0,
 		style: { position: "absolute" },
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ h("defs", { children: [
+		children: /* @__PURE__ */ _("defs", { children: [
 			t("sync", "swl-mk-sync", !1),
 			t("async", "swl-mk-async", !0),
 			t("event", "swl-mk-event", !0),
@@ -384,26 +414,29 @@ function D(e) {
 	}
 	return null;
 }
-var O = (t) => {
-	let { cardName: n, model: a, showPending: p = !0, autoFollow: g = !0, showTooltip: _ = !0, highlightId: v, laneWidth: y = 104, rowHeight: x = 30, headerHeight: S = 130, gutterWidth: O = 92, stickyTop: k = 0, now: A, className: j, onHoverChanged: M, onItemClicked: ee } = t, N = "swl" + s().replace(/[^a-zA-Z0-9_-]/g, ""), P = l(() => ({
-		laneW: y,
-		rowH: x,
+var O = (n) => {
+	let { cardName: s, model: h, showPending: v = !0, autoFollow: y = !0, showTooltip: b = !0, highlightId: x, laneWidth: C = 104, rowHeight: w = 30, headerHeight: T = 130, gutterWidth: O = 92, stickyTop: re = 0, now: k, formatTs: A = t, formatWait: ie, className: j, style: M, onHoverChanged: N, onItemClicked: ae } = n, P = "swl" + l().replace(/[^a-zA-Z0-9_-]/g, ""), F = d(() => ({
+		laneW: C,
+		rowH: w,
 		gutter: O,
-		mid: x / 2,
-		mk: N
+		mid: w / 2,
+		mk: P
 	}), [
-		y,
-		x,
+		C,
+		w,
 		O,
-		N
-	]), F = O + a.laneOrder.length * y + 140, I = {
-		g: P,
-		laneOrder: a.laneOrder,
-		laneLabels: a.laneLabels,
-		width: F
-	}, L = u(null), R = u(null), z = u(a);
-	z.current = a;
-	let [B, V] = d(null), H = u(null), U = (e) => {
+		P
+	]), I = O + h.laneOrder.length * C + 140, L = {
+		g: F,
+		laneOrder: h.laneOrder,
+		laneLabels: h.laneLabels,
+		laneActivityClassName: h.laneActivityClassName,
+		laneActivityStyle: h.laneActivityStyle,
+		width: I,
+		fmtTs: A
+	}, R = f(null), z = f(null), B = f(h);
+	B.current = h;
+	let [V, oe] = p(null), H = f(null), U = (e) => {
 		let t = e?.closest?.(".swl-hit");
 		if (!t) return null;
 		let n = t.dataset;
@@ -411,103 +444,120 @@ var O = (t) => {
 			kind: n.kind,
 			id: n.id,
 			lane: n.lane,
-			rowId: n.row == null ? void 0 : Number(n.row)
+			rowId: n.row
 		};
 	}, W = (e, t) => e === t || !!e && !!t && e.kind === t.kind && e.id === t.id, G = (e) => {
-		let t = z.current, n = e.kind === "state" ? void 0 : r(t, e.id), i = E(t, e) ?? void 0;
+		let t = B.current;
+		if (e.kind === "step") return { steps: o(t, e.id) };
+		if (e.kind === "lane") return { meta: t.laneMeta[e.id] };
+		if (e.kind === "state") {
+			let n = t.rows.find((t) => String(t.id) === e.rowId);
+			return {
+				related: void 0,
+				process: void 0,
+				meta: n && n.event.type === "state" ? n.event.meta : void 0
+			};
+		}
+		let n = r(t, e.id), i = E(t, e) ?? void 0, a = e.kind === "pending" ? t.pending.find((t) => t.id === e.id) : void 0, s = a ? a.meta : t.spans[e.id]?.meta;
 		return e.kind === "pending" ? {
-			pending: t.pending.find((t) => t.id === e.id),
+			pending: a,
 			span: t.spans[e.id],
 			related: n,
-			process: i
+			process: i,
+			meta: s
 		} : {
 			span: t.spans[e.id],
 			related: n,
-			process: i
+			process: i,
+			meta: s
 		};
 	}, K = (e, t) => {
-		let n = R.current;
+		let n = z.current;
 		n && (n.style.left = `${e + 14}px`, n.style.top = `${t + 14}px`);
 	}, q = (t, n) => {
 		let r = H.current;
 		if (W(r, t)) return;
-		H.current = t, V(t);
-		let i = R.current;
-		i && (t && _ ? (i.textContent = e(z.current, t, A ?? Date.now()), i.style.display = "block", K(n.clientX, n.clientY)) : i.style.display = "none"), M({
+		H.current = t, oe(t);
+		let i = z.current;
+		i && (t && b ? (i.textContent = e(B.current, t, k ?? Date.now(), A), i.style.display = "block", K(n.clientX, n.clientY)) : i.style.display = "none"), N({
 			target: t,
 			previous: r,
 			...t ? G(t) : {},
 			clientX: n.clientX,
 			clientY: n.clientY
 		});
-	}, J = (e) => {
+	}, se = (e) => {
 		let t = U(e.target);
 		t && q(t, e);
-	}, te = (e) => {
+	}, ce = (e) => {
 		let t = U(e.relatedTarget);
 		(!t || !W(t, H.current)) && q(t, e);
-	}, ne = (e) => {
-		H.current && _ && K(e.clientX, e.clientY);
-	}, re = (e) => {
+	}, le = (e) => {
+		H.current && b && K(e.clientX, e.clientY);
+	}, ue = (e) => {
 		let t = U(e.target);
-		t && ee({
+		t && ae({
 			target: t,
 			...G(t)
 		});
-	}, Y = B && B.kind !== "state" ? B.id : v ?? null, { spans: X } = a, Z = l(() => new Set(Y ? r({ spans: X }, Y) : []), [Y, X]), Q = B ? E(a, B) : null, $ = u(!0);
-	return o(() => {
-		if (!g) return;
-		let e = D(L.current), t = e ?? window, n = () => {
+	}, J = V && V.kind !== "state" && V.kind !== "step" && V.kind !== "lane" ? V.id : x ?? null, { spans: Y } = h, X = d(() => new Set(J ? r({ spans: Y }, J) : []), [J, Y]), Z = V ? E(h, V) : null, Q = V?.kind === "step" ? V.id : null, $ = f(!0);
+	return c(() => {
+		if (!y) return;
+		let e = D(R.current), t = e ?? window, n = () => {
 			$.current = e ? e.scrollTop + e.clientHeight >= e.scrollHeight - 40 : window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 40;
 		};
 		return t.addEventListener("scroll", n, { passive: !0 }), () => t.removeEventListener("scroll", n);
-	}, [g]), c(() => {
-		if (!g || !$.current) return;
-		let e = D(L.current);
+	}, [y]), u(() => {
+		if (!y || !$.current) return;
+		let e = D(R.current);
 		e ? e.scrollTop = e.scrollHeight : window.scrollTo(0, document.documentElement.scrollHeight);
 	}, [
-		g,
-		a.rows.length,
-		a.pending.length
-	]), /* @__PURE__ */ h("div", {
-		ref: L,
-		className: f("pihanga-swimlane", j),
-		"data-pihanga": n,
+		y,
+		h.rows.length,
+		h.pending.length
+	]), /* @__PURE__ */ _("div", {
+		ref: R,
+		className: m("pihanga-swimlane", j),
+		style: M,
+		"data-pihanga": s,
+		onPointerOver: se,
+		onPointerOut: ce,
+		onPointerMove: le,
+		onClick: ue,
 		children: [
-			/* @__PURE__ */ m(T, { mk: N }),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ g(ne, { mk: P }),
+			/* @__PURE__ */ g("div", {
 				className: "swl-header",
-				style: { top: k },
-				children: /* @__PURE__ */ m(w, {
-					model: a,
-					g: P,
-					headH: S,
-					width: F
+				style: { top: re },
+				children: /* @__PURE__ */ g(te, {
+					model: h,
+					g: F,
+					headH: T,
+					width: I
 				})
 			}),
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ _("div", {
 				className: "swl-rows",
-				onPointerOver: J,
-				onPointerOut: te,
-				onPointerMove: ne,
-				onClick: re,
-				children: [a.rows.map((e) => /* @__PURE__ */ m(b, {
+				children: [h.rows.map((e, t) => /* @__PURE__ */ g(S, {
 					row: e,
-					hl: Y && i(e, "id" in e.event ? e.event.id : void 0, Y) ? Y : null,
-					rel: "id" in e.event && e.event.type !== "done" && Z.has(e.event.id),
-					proc: Q && i(e, void 0, Q) ? Q : null,
-					...I
-				}, e.id)), p && /* @__PURE__ */ m(C, {
-					model: a,
-					hid: Y,
-					related: Z,
-					procId: Q,
-					clock: A,
-					...I
+					hl: J && i(e, "id" in e.event ? e.event.id : void 0, J) ? J : null,
+					rel: "id" in e.event && e.event.type !== "done" && X.has(e.event.id),
+					proc: Z && i(e, void 0, Z) ? Z : null,
+					grouped: e.event.step != null && e.event.step === h.rows[t - 1]?.event.step,
+					stepHl: Q != null && a(e) === Q,
+					...L
+				}, e.id)), v && /* @__PURE__ */ g(ee, {
+					model: h,
+					hid: J,
+					related: X,
+					procId: Z,
+					clock: k,
+					formatWait: ie,
+					...L
 				})]
 			}),
-			/* @__PURE__ */ m("div", {
-				ref: R,
+			/* @__PURE__ */ g("div", {
+				ref: z,
 				className: "swl-tooltip",
 				role: "tooltip"
 			})