@mechane-ai/ui 0.2.1 → 0.3.0

package/dist/graph-DAfo72ZD.js

@@ -0,0 +1,230 @@
+import { i as e, l as t, n, o as r, t as i } from "./chart-input-Bti0gyzz.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";
+// packages/charts/src/graph/relation-graph.tsx
+var u = {
+	kVAEAm: "x1n2onr6",
+	$$css: !0
+}, d = {
+	canvas: (e, t) => [
+		u,
+		{
+			kzqmXN: e == null ? e : "x5lhr3w",
+			kZKoxP: t == null ? t : "x16ye13r",
+			$$css: !0
+		},
+		{
+			"--x-width": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(e),
+			"--x-height": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(t)
+		}
+	],
+	node: {
+		kVAEAm: "x10l6tqk",
+		k1xSpc: "x78zum5",
+		kXwgrk: "xdt5ytf",
+		kjj79g: "xl56j7k",
+		kB7OPa: "x9f619",
+		kg3NbH: "x1ri6wgn",
+		k8WAf4: "x4wz14",
+		kOIVth: "x1r8op4a",
+		kMzoRj: "xmkeg23",
+		ksu8eU: "x1y0btm7",
+		kVAM5u: "x1yww3zy",
+		kZ1KPB: "x1vo0akb",
+		kMwMTN: "xgl13c",
+		kWkggS: "x1l90twa",
+		k9WMMc: "x1yc453h",
+		kMv6JI: "xoedhln",
+		kAzted: "xgvaw1x xekz7sd",
+		$$css: !0
+	},
+	position: (e, t) => [{
+		kbCHJM: e == null ? e : "xgq9j65",
+		k87sOh: t == null ? t : "xjbys53",
+		$$css: !0
+	}, {
+		"--x-left": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(e),
+		"--x-top": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(t)
+	}],
+	size: (e, t) => [{
+		kzqmXN: e == null ? e : "x5lhr3w",
+		kZKoxP: t == null ? t : "x16ye13r",
+		$$css: !0
+	}, {
+		"--x-width": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(e),
+		"--x-height": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(t)
+	}],
+	tone: (e) => [{
+		kaZRDh: e == null ? e : "xsb5j7k",
+		$$css: !0
+	}, { "--x-borderLeftColor": e ?? void 0 }],
+	action: {
+		kkrTdU: "x1ypdohk",
+		kGzVvX: "x160po9z",
+		kPJHz1: "xnktsf1",
+		kZs9gx: "x1m2ab5f",
+		k7shQP: "x9v5kkp",
+		kiEn40: "x7s97pk",
+		$$css: !0
+	},
+	selected: {
+		kMeerF: "xhb1w9w",
+		kjBf7l: "xnoxefp",
+		k3XXqK: "xaatb59",
+		kInvED: "x1y3gkto",
+		$$css: !0
+	}
+}, f = 256, p = 1024, m = 256, h = 8192;
+function g({ title: n, 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
+	});
+	if (S !== null) return /* @__PURE__ */ c(i, {
+		title: n,
+		description: u,
+		message: S
+	});
+	let C = new Map(f.map((e) => [e.id, e])), w = v(p, C);
+	return w === null ? /* @__PURE__ */ c(i, {
+		title: n,
+		description: u,
+		message: "Every relationship must refer to two supplied nodes."
+	}) : /* @__PURE__ */ l(r, {
+		title: n,
+		description: u,
+		children: [f.length === 0 ? /* @__PURE__ */ c("p", {
+			className: "x1ghz6dp xv9cywu",
+			children: b
+		}) : /* @__PURE__ */ c("div", {
+			role: "region",
+			"aria-label": `${n} graph`,
+			tabIndex: 0,
+			className: "xysyzu8 xzuc9lq xmkeg23 x1y0btm7 x1yww3zy xnktsf1 x1m2ab5f x9v5kkp x1bqaal",
+			children: /* @__PURE__ */ l("div", {
+				...a.props(d.canvas(h, g)),
+				children: [/* @__PURE__ */ l("svg", {
+					width: h,
+					height: g,
+					"aria-hidden": !0,
+					className: "x10l6tqk x10a8y8t x1lliihq",
+					children: [
+						/* @__PURE__ */ c("defs", { children: /* @__PURE__ */ c("marker", {
+							id: x,
+							markerWidth: 8,
+							markerHeight: 8,
+							refX: 7,
+							refY: 4,
+							orient: "auto",
+							markerUnits: "userSpaceOnUse",
+							children: /* @__PURE__ */ c("path", {
+								d: "M0,0 L8,4 L0,8 Z",
+								className: "x2lfmbc"
+							})
+						}) }),
+						m.map((e) => /* @__PURE__ */ l("g", { children: [/* @__PURE__ */ c("rect", {
+							x: e.x,
+							y: e.y,
+							width: e.width,
+							height: e.height,
+							className: "x14xvmve xouukkm xnpr05h"
+						}), /* @__PURE__ */ c("text", {
+							x: e.x + 12,
+							y: e.y + 20,
+							className: "xee94xy xoedhln xut3y95",
+							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", {
+								d,
+								markerEnd: e.direction === "directed" ? `url(#${x})` : void 0,
+								className: "xbh8q5q x1ot5pd9 xhr4kjn",
+								children: /* @__PURE__ */ c("title", { children: e.label })
+							}, e.id);
+						})
+					]
+				}), f.map((e) => {
+					let n = [
+						...m.filter((t) => t.nodeIds.includes(e.id)).map((e) => e.label),
+						e.label,
+						e.description
+					].filter((e) => e !== void 0).join(", "), r = a.props(d.node, d.position(e.x, e.y), d.size(e.width, e.height), d.tone(t[e.tone]), y !== void 0 && d.action, y?.selectedId === e.id && d.selected), i = /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
+						className: "x118kxxs x1hyyzld xk50ysn xj0a0fe",
+						children: e.label
+					}), e.description !== void 0 && /* @__PURE__ */ c("span", {
+						className: "xut3y95 xam3yii xv9cywu xj0a0fe",
+						children: e.description
+					})] });
+					return y === void 0 ? /* @__PURE__ */ c("div", {
+						role: "group",
+						"aria-label": n,
+						...r,
+						children: i
+					}, e.id) : /* @__PURE__ */ c("button", {
+						type: "button",
+						"aria-label": n,
+						"aria-pressed": y.selectedId === e.id,
+						onClick: () => y.onSelect(e.id),
+						...r,
+						children: i
+					}, e.id);
+				})]
+			})
+		}), p.length > 0 && /* @__PURE__ */ l(e, {
+			label: "Relationships",
+			children: [m.length > 0 && /* @__PURE__ */ c("ul", {
+				className: "x1bw0ovo x1vyzsr4 xv9cywu",
+				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: "x1bw0ovo x1vyzsr4 xv9cywu",
+				children: w.map(({ edge: e, source: t, target: n }) => /* @__PURE__ */ l("li", { children: [
+					t.label,
+					" ",
+					e.direction === "directed" ? "→" : "↔",
+					" ",
+					n.label,
+					": ",
+					e.label
+				] }, e.id))
+			})]
+		})]
+	});
+}
+function _({ nodes: e, edges: t, groups: r, 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 || r.length > 256) return `This graph exceeds the render limit of 256 nodes, ${p} relationships, or 256 groups. Supply a smaller, labelled neighborhood.`;
+	let o = new Set(e.map((e) => e.id));
+	return !n(e) || !n(t) || !n(r) ? "Graph nodes, relationships, and groups must have unique identifiers." : [...e, ...r].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;
+		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." : r.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." : r.some((t) => t.nodeIds.some((n) => {
+		let r = e.find((e) => e.id === n);
+		if (r === void 0) return !1;
+		let i = r.x < t.x || r.x + r.width > t.x + t.width, a = r.y < t.y || r.y + r.height > t.y + t.height;
+		return i || a;
+	})) ? "A group box must contain the node boxes assigned to it." : null;
+}
+function v(e, t) {
+	let n = [];
+	for (let r of e) {
+		let e = t.get(r.sourceId), i = t.get(r.targetId);
+		if (e === void 0 || i === void 0) return null;
+		n.push({
+			edge: r,
+			source: e,
+			target: i
+		});
+	}
+	return n;
+}
+export { g as a, f as i, p as n, m as r, h as t };

package/dist/index.js

@@ -1 +1 @@
-export { E as Badge, P as Button, l as Cell, f as Columns, o as CopyValue, n as Details, x as Dialog, p as Divider, b as Drawer, m as EmptyState, C as Field, D as Heading, F as IconButton, O as Identifier, w as Input, r as Inspector, d as ListFooter, a as Loading, s as Metric, c as MetricGrid, k as Muted, h as Notice, g as Panel, A as Prose, _ as Row, S as Select, t as SkipLink, v as Stack, j as Status, M as Subheading, u as Table, i as Tabs, N as Text, I as TextButton, L as TextLink, T as Textarea, y as Tooltip } from "./src-Czfi0YQa.js";
+export { l as Accordion, f as AlertDialog, n as Avatar, X as Badge, s as Breadcrumb, it as Button, C as Checkbox, u as Collapsible, I as Columns, S as Combobox, N as CopyValue, G as Dialog, L as Divider, W as Drawer, R as EmptyState, q as Field, _ as Fieldset, v as FilePicker, Z as Heading, at as IconButton, Q as Identifier, J as Input, y as InputGroup, c as Kbd, k as Loading, h as Menu, a as Meter, P as Metric, F as MetricGrid, $ as Muted, z as Notice, b as NumberField, B as Panel, m as Popover, p as Preview, o as Progress, et as Prose, w as RadioGroup, V as Row, K as Select, r as SettingsRow, A as Skeleton, j as SkeletonText, D as SkipLink, x as Slider, M as Spinner, H as Stack, tt as Status, nt as Subheading, T as Switch, O as Tabs, rt as Text, ot as TextButton, st as TextLink, Y as Textarea, i as Timestamp, d as Toast, E as ToggleGroup, U as Tooltip, t as Trace, g as themeProps } from "./src-E7YRJBMO.js";