@mechane-ai/elements 0.9.0 → 0.11.0

package/dist/charts/graph.js

@@ -1,15 +1,15 @@
-import { o as e, r as t, t as n } from "../chart-frame-RL1hCWBC.js";
-import { n as r, t as i } from "../chart-input-Bm3ot1yD.js";
-import * as a from "@stylexjs/stylex";
-import { useId as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { a as e, n as t, r as n, s as r, t as i } from "../chart-frame-Bczk5sWj.js";
+import { n as a, t as o } from "../chart-input-CbzVN76m.js";
+import * as s from "@stylexjs/stylex";
+import { useId as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 // packages/charts/src/graph/relation-graph.tsx
-var u = {
+var f = {
 	kVAEAm: "x1n2onr6",
 	$$css: !0
-}, d = {
+}, p = {
 	canvas: (e, t) => [
-		u,
+		f,
 		{
 			kzqmXN: e == null ? e : "x5lhr3w",
 			kZKoxP: t == null ? t : "x16ye13r",
@@ -37,6 +37,7 @@ var u = {
 		kWkggS: "xpvm0e4",
 		k9WMMc: "x1yc453h",
 		kMv6JI: "x1hz01jw",
+		k63SB2: "xj57cvi",
 		kAzted: "xaeotn9 xwu7q15",
 		$$css: !0
 	},
@@ -62,151 +63,184 @@ var u = {
 	}, { "--x-borderLeftColor": e ?? void 0 }],
 	action: {
 		kkrTdU: "x1ypdohk",
+		k3XXqK: "x1t137rt",
 		kGzVvX: "xzro8vx",
+		kSReZ0: "x1ecmtor",
 		kPJHz1: "x13qnu6",
 		kZs9gx: "x19rmrnh",
 		k7shQP: "x9v5kkp",
-		kiEn40: "x7s97pk",
+		kiEn40: "x1bqaal",
 		$$css: !0
 	},
 	selected: {
 		kMeerF: "x12ei19c",
 		kjBf7l: "xx9gdjd",
 		k3XXqK: "xaatb59",
-		kInvED: "x1y3gkto",
+		kInvED: "x2ssjo2",
 		$$css: !0
 	}
-}, f = 256, p = 1024, m = 256, h = 8192;
-function g({ title: r, description: u, nodes: f, edges: p, groups: m = [], width: h, height: g, selection: y, emptyLabel: b }) {
-	let x = o(), S = _({
-		nodes: f,
-		edges: p,
-		groups: m,
-		width: h,
-		height: g
+}, m = 256, h = 1024, g = 256, _ = 8192;
+function v({ title: a, description: f, nodes: m, edges: h, groups: g = [], width: _, height: v, selection: x, emptyLabel: S }) {
+	let C = c(), w = y({
+		nodes: m,
+		edges: h,
+		groups: g,
+		width: _,
+		height: v
 	});
-	if (S !== null) return /* @__PURE__ */ c(i, {
-		title: r,
-		description: u,
-		message: S
+	if (w !== null) return /* @__PURE__ */ u(o, {
+		title: a,
+		description: f,
+		message: w
 	});
-	let C = new Map(f.map((e) => [e.id, e])), w = v(p, C);
-	return w === null ? /* @__PURE__ */ c(i, {
-		title: r,
-		description: u,
+	let T = new Map(m.map((e) => [e.id, e])), E = b(h, T), D = x?.selectedId === void 0 ? void 0 : T.get(x.selectedId), O = m.length > 0;
+	return E === null ? /* @__PURE__ */ u(o, {
+		title: a,
+		description: f,
 		message: "Every relationship must refer to two supplied nodes."
-	}) : /* @__PURE__ */ l(t, {
-		title: r,
-		description: u,
-		children: [f.length === 0 ? /* @__PURE__ */ c("p", {
-			className: "x1ghz6dp x153jb6y",
-			children: b
-		}) : /* @__PURE__ */ c("div", {
+	}) : /* @__PURE__ */ d(n, {
+		title: a,
+		description: f,
+		footer: x !== void 0 && O ? /* @__PURE__ */ u(e, { children: D === void 0 ? "Select a node to inspect its record." : [D.label, D.description].filter((e) => e !== void 0).join(" · ") }) : void 0,
+		children: [O ? /* @__PURE__ */ u("div", {
 			role: "region",
-			"aria-label": `${r} graph`,
+			"aria-label": `${a} graph`,
 			tabIndex: 0,
-			className: "xysyzu8 xzuc9lq xmkeg23 x1y0btm7 x1ey3b81 x13qnu6 x19rmrnh x9v5kkp x1bqaal",
-			children: /* @__PURE__ */ l("div", {
-				...a.props(d.canvas(h, g)),
-				children: [/* @__PURE__ */ l("svg", {
-					width: h,
-					height: g,
+			className: "xysyzu8 xzuc9lq xeuugli x1t137rt xmkeg23 x1y0btm7 x1ey3b81 x13qnu6 x19rmrnh x9v5kkp x1bqaal",
+			children: /* @__PURE__ */ d("div", {
+				...s.props(p.canvas(_, v)),
+				children: [/* @__PURE__ */ d("svg", {
+					width: _,
+					height: v,
 					"aria-hidden": !0,
 					className: "x10l6tqk x10a8y8t x1lliihq",
 					children: [
-						/* @__PURE__ */ c("defs", { children: /* @__PURE__ */ c("marker", {
-							id: x,
+						/* @__PURE__ */ u("defs", { children: /* @__PURE__ */ u("marker", {
+							id: C,
 							markerWidth: 8,
 							markerHeight: 8,
 							refX: 7,
 							refY: 4,
 							orient: "auto",
 							markerUnits: "userSpaceOnUse",
-							children: /* @__PURE__ */ c("path", {
+							children: /* @__PURE__ */ u("path", {
 								d: "M0,0 L8,4 L0,8 Z",
 								className: "x8futc7"
 							})
 						}) }),
-						m.map((e) => /* @__PURE__ */ l("g", { children: [/* @__PURE__ */ c("rect", {
+						g.map((e) => /* @__PURE__ */ d("g", { children: [/* @__PURE__ */ u("rect", {
 							x: e.x,
 							y: e.y,
 							width: e.width,
 							height: e.height,
 							className: "x2wnxhi x13hfdr1 xnpr05h"
-						}), /* @__PURE__ */ c("text", {
-							x: e.x + 12,
-							y: e.y + 20,
-							className: "x1q7gtio x1hz01jw xy8obcc",
-							children: e.label
+						}), /* @__PURE__ */ u("svg", {
+							x: e.x,
+							y: e.y,
+							width: e.width,
+							height: e.height,
+							overflow: "hidden",
+							children: /* @__PURE__ */ u("text", {
+								x: 12,
+								y: 20,
+								className: "x1q7gtio x1hz01jw xy8obcc",
+								children: e.label
+							})
 						})] }, e.id)),
-						w.map(({ edge: e, source: t, target: n }) => {
-							let r = t.x < n.x, i = t.x + (r ? t.width : 0), a = n.x + (r ? 0 : n.width), o = t.y + t.height / 2, s = n.y + n.height / 2, l = (i + a) / 2, u = t.x + t.width / 2, d = t.id === n.id ? `M${u - 12},${t.y} C${u - 48},${t.y - 36} ${u + 48},${t.y - 36} ${u + 12},${t.y}` : `M${i},${o} C${l},${o} ${l},${s} ${a},${s}`;
-							return /* @__PURE__ */ c("path", {
+						E.map(({ edge: e, source: t, target: n }) => {
+							let r = t.x < n.x, i = t.x + (r ? t.width : 0), a = n.x + (r ? 0 : n.width), o = t.y + t.height / 2, s = n.y + n.height / 2, c = (i + a) / 2, l = t.x + t.width / 2, d = t.id === n.id ? `M${l - 12},${t.y} C${l - 48},${t.y - 36} ${l + 48},${t.y - 36} ${l + 12},${t.y}` : `M${i},${o} C${c},${o} ${c},${s} ${a},${s}`;
+							return /* @__PURE__ */ u("path", {
 								d,
-								markerEnd: e.direction === "directed" ? `url(#${x})` : void 0,
+								markerEnd: e.direction === "directed" ? `url(#${C})` : void 0,
 								className: "xbh8q5q x1crw9hw xhr4kjn",
-								children: /* @__PURE__ */ c("title", { children: e.label })
+								children: /* @__PURE__ */ u("title", { children: e.label })
 							}, e.id);
 						})
 					]
-				}), f.map((t) => {
-					let n = [
-						...m.filter((e) => e.nodeIds.includes(t.id)).map((e) => e.label),
-						t.label,
-						t.description
-					].filter((e) => e !== void 0).join(", "), r = a.props(d.node, d.position(t.x, t.y), d.size(t.width, t.height), d.tone(e[t.tone]), y !== void 0 && d.action, y?.selectedId === t.id && d.selected), i = /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
-						className: "xtqrqnz x1778rvt xk50ysn xj0a0fe",
-						children: t.label
-					}), t.description !== void 0 && /* @__PURE__ */ c("span", {
-						className: "xy8obcc xas2l8k x153jb6y xj0a0fe",
-						children: t.description
+				}), m.map((e) => {
+					let t = [
+						...g.filter((t) => t.nodeIds.includes(e.id)).map((e) => e.label),
+						e.label,
+						e.description
+					].filter((e) => e !== void 0).join(", "), n = s.props(p.node, p.position(e.x, e.y), p.size(e.width, e.height), p.tone(r[e.tone]), x !== void 0 && p.action, x?.selectedId === e.id && p.selected), i = /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("span", {
+						className: "xtqrqnz x1778rvt xk4h15q xb3r6kr xlyipyv xuxw1ft",
+						children: e.label
+					}), e.description !== void 0 && e.height >= 56 && /* @__PURE__ */ u("span", {
+						className: "xy8obcc xas2l8k x153jb6y xb3r6kr xlyipyv xuxw1ft",
+						children: e.description
 					})] });
-					return y === void 0 ? /* @__PURE__ */ c("div", {
+					return x === void 0 ? /* @__PURE__ */ u("div", {
 						role: "group",
-						"aria-label": n,
-						...r,
+						"aria-label": t,
+						title: t,
+						...n,
 						children: i
-					}, t.id) : /* @__PURE__ */ c("button", {
+					}, e.id) : /* @__PURE__ */ u("button", {
 						type: "button",
-						"aria-label": n,
-						"aria-pressed": y.selectedId === t.id,
-						onClick: () => y.onSelect(t.id),
-						...r,
+						"aria-label": t,
+						title: t,
+						"aria-pressed": x.selectedId === e.id,
+						onClick: () => x.onSelect(e.id),
+						...n,
 						children: i
-					}, t.id);
+					}, e.id);
 				})]
 			})
-		}), p.length > 0 && /* @__PURE__ */ l(n, {
-			label: "Relationships",
-			children: [m.length > 0 && /* @__PURE__ */ c("ul", {
-				className: "xo02m6d xv06hpe x153jb6y",
-				children: m.map((e) => /* @__PURE__ */ l("li", { children: [
-					e.label,
-					": ",
-					e.nodeIds.map((e) => C.get(e)?.label).join(", ")
-				] }, e.id))
-			}), /* @__PURE__ */ c("ul", {
-				className: "xo02m6d xv06hpe x153jb6y",
-				children: w.map(({ edge: e, source: t, target: n }) => /* @__PURE__ */ l("li", { children: [
-					t.label,
-					" ",
-					e.direction === "directed" ? "→" : "↔",
-					" ",
-					n.label,
-					": ",
-					e.label
-				] }, e.id))
-			})]
-		})]
+		}) : /* @__PURE__ */ u("p", {
+			className: "x1ghz6dp x153jb6y",
+			children: S
+		}), O ? /* @__PURE__ */ d(i, {
+			label: "Graph data",
+			children: [
+				/* @__PURE__ */ u("ul", {
+					"aria-label": "Nodes",
+					className: "x1ghz6dp x1717udv xe8uvvx",
+					children: m.map((e) => /* @__PURE__ */ u("li", { children: /* @__PURE__ */ u(t, {
+						label: [e.label, e.description].filter((e) => e !== void 0).join(", "),
+						selected: x?.selectedId === e.id,
+						onSelect: x === void 0 ? void 0 : () => x.onSelect(e.id),
+						children: /* @__PURE__ */ d("span", {
+							className: "xrvj5dj xfko13i xeuugli xh8yej3",
+							children: [/* @__PURE__ */ u("span", { children: e.label }), e.description !== void 0 && /* @__PURE__ */ u("span", {
+								className: "x153jb6y xy8obcc xas2l8k",
+								children: e.description
+							})]
+						})
+					}) }, e.id))
+				}),
+				g.length > 0 && /* @__PURE__ */ u("ul", {
+					"aria-label": "Groups",
+					className: "xo02m6d xv06hpe x153jb6y xj0a0fe",
+					children: g.map((e) => /* @__PURE__ */ d("li", { children: [
+						e.label,
+						": ",
+						e.nodeIds.map((e) => T.get(e)?.label).join(", ")
+					] }, e.id))
+				}),
+				E.length > 0 && /* @__PURE__ */ u("ul", {
+					"aria-label": "Relationships",
+					className: "xo02m6d xv06hpe x153jb6y xj0a0fe",
+					children: E.map(({ edge: e, source: t, target: n }) => /* @__PURE__ */ d("li", { children: [
+						t.label,
+						" ",
+						e.direction === "directed" ? "→" : "↔",
+						" ",
+						n.label,
+						": ",
+						e.label
+					] }, e.id))
+				})
+			]
+		}) : null]
 	});
 }
-function _({ nodes: e, edges: t, groups: n, width: i, height: a }) {
-	if (!Number.isFinite(i) || i <= 0 || i > 8192 || !Number.isFinite(a) || a <= 0 || a > 8192) return `Graph dimensions must be finite, positive, and at most ${h} pixels.`;
-	if (e.length > 256 || t.length > 1024 || n.length > 256) return `This graph exceeds the render limit of 256 nodes, ${p} relationships, or 256 groups. Supply a smaller, labelled neighborhood.`;
+function y({ nodes: e, edges: t, groups: n, width: r, height: i }) {
+	if (!Number.isFinite(r) || r <= 0 || r > 8192 || !Number.isFinite(i) || i <= 0 || i > 8192) return `Graph dimensions must be finite, positive, and at most ${_} pixels.`;
+	if (e.length > 256 || t.length > 1024 || n.length > 256) return `This graph exceeds the render limit of 256 nodes, ${h} relationships, or 256 groups. Supply a smaller, labelled neighborhood.`;
 	let o = new Set(e.map((e) => e.id));
-	return !r(e) || !r(t) || !r(n) ? "Graph nodes, relationships, and groups must have unique identifiers." : [...e, ...n].some((e) => {
+	return !a(e) || !a(t) || !a(n) ? "Graph nodes, relationships, and groups must have unique identifiers." : [...e, ...n].some((e) => {
 		if (!Number.isFinite(e.width) || !Number.isFinite(e.height) || e.width <= 0 || e.height <= 0) return !0;
-		let t = !Number.isFinite(e.x) || e.x < 0 || e.x + e.width > i, n = !Number.isFinite(e.y) || e.y < 0 || e.y + e.height > a;
+		let t = !Number.isFinite(e.x) || e.x < 0 || e.x + e.width > r, n = !Number.isFinite(e.y) || e.y < 0 || e.y + e.height > i;
 		return t || n;
 	}) ? "Graph boxes must have finite, positive dimensions and fit inside the supplied canvas." : e.some((e) => e.width < 44 || e.height < 44) ? "Graph node boxes must be at least 44 by 44 pixels." : t.some((t) => t.sourceId === t.targetId && e.some((e) => e.id === t.sourceId && e.y < 36)) ? "A self-relationship needs at least 36 pixels of space above its node." : n.some((e) => new Set(e.nodeIds).size !== e.nodeIds.length || e.nodeIds.some((e) => !o.has(e))) ? "Each group must contain unique references to supplied nodes." : n.some((t) => t.nodeIds.some((n) => {
 		let r = e.find((e) => e.id === n);
@@ -215,7 +249,7 @@ function _({ nodes: e, edges: t, groups: n, width: i, height: a }) {
 		return i || a;
 	})) ? "A group box must contain the node boxes assigned to it." : null;
 }
-function v(e, t) {
+function b(e, t) {
 	let n = [];
 	for (let r of e) {
 		let e = t.get(r.sourceId), i = t.get(r.targetId);
@@ -228,4 +262,4 @@ function v(e, t) {
 	}
 	return n;
 }
-export { h as MAX_RELATION_DIMENSION, p as MAX_RELATION_EDGES, m as MAX_RELATION_GROUPS, f as MAX_RELATION_NODES, g as RelationGraph };
+export { _ as MAX_RELATION_DIMENSION, h as MAX_RELATION_EDGES, g as MAX_RELATION_GROUPS, m as MAX_RELATION_NODES, v as RelationGraph };

package/dist/charts/hierarchy.js

@@ -1,6 +1,6 @@
-import { i as e, r as t, t as n } from "../categorical-values-DYRiw5Qd.js";
-import { a as r, o as i, r as a } from "../chart-frame-RL1hCWBC.js";
-import { t as o } from "../chart-input-Bm3ot1yD.js";
+import { i as e, r as t, t as n } from "../categorical-values-FYc43JCa.js";
+import { o as r, r as i, s as a } from "../chart-frame-Bczk5sWj.js";
+import { t as o } from "../chart-input-CbzVN76m.js";
 import { t as s } from "../plot-width--OgdohB5.js";
 import * as c from "@stylexjs/stylex";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
@@ -30,7 +30,7 @@ function m({ title: m, description: h, items: g, formatValue: _, selection: v, h
 		tone: "neutral",
 		children: w
 	}, (e) => e.children === void 0 ? void 0 : [...e.children]).sum((e) => e.value);
-	return /* @__PURE__ */ u(a, {
+	return /* @__PURE__ */ u(i, {
 		title: m,
 		description: h,
 		children: [
@@ -51,14 +51,14 @@ function m({ title: m, description: h, items: g, formatValue: _, selection: v, h
 						size: [C, y],
 						paddingInner: 2,
 						children: (e) => e.leaves().map((e) => {
-							let t = e.x1 - e.x0 > 96 && e.y1 - e.y0 > 40;
+							let t = e.x1 - e.x0 > 96 && e.y1 - e.y0 > 40, n = Math.max(1, Math.floor((e.x1 - e.x0 - 16) / 7)), i = e.data.label.length > n ? `${e.data.label.slice(0, n - 1)}…` : e.data.label;
 							return /* @__PURE__ */ u("g", { children: [
 								/* @__PURE__ */ l("rect", {
 									x: e.x0,
 									y: e.y0,
 									width: e.x1 - e.x0,
 									height: e.y1 - e.y0,
-									fill: i[e.data.tone],
+									fill: a[e.data.tone],
 									fillOpacity: .18,
 									...c.props(p.treeRect, v?.selectedId === e.data.id && r.selected)
 								}),
@@ -77,7 +77,7 @@ function m({ title: m, description: h, items: g, formatValue: _, selection: v, h
 										x: 8,
 										y: 18,
 										className: "xlrhuyr x1hz01jw xy8obcc",
-										children: e.data.label.slice(0, Math.floor((e.x1 - e.x0 - 16) / 7))
+										children: i
 									}), _(e.data.value).length * 12 < e.x1 - e.x0 - 16 && /* @__PURE__ */ l("text", {
 										x: 8,
 										y: 34,