@pie-lib/graphing-solution-set 5.0.1-next.20261004041321 → 5.0.1-next.20261004165705

package/dist/grid-setup.js

@@ -1,9 +1,9 @@
 import "react";
 import e from "prop-types";
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
-import { styled as i } from "@mui/material/styles";
-import * as a from "@pie-lib/render-ui";
-import { InputContainer as o, color as s } from "@pie-lib/render-ui";
+import * as t from "@pie-lib/render-ui";
+import { InputContainer as n, color as r } from "@pie-lib/render-ui";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { styled as s } from "@mui/material/styles";
 import c from "@pie-lib/editable-html-tip-tap";
 import { Accordion as l, AccordionDetails as u, AccordionSummary as d, Typography as f } from "@mui/material";
 import p from "@mui/icons-material/ExpandMore";
@@ -15,49 +15,49 @@ function g(e) {
 function _(e, t) {
 	return !e || g(e) ? e : g(e.default) ? e.default : t && g(e[t]) ? e[t] : t && g(e[t]?.default) ? e[t].default : e;
 }
-var v = _(o, "InputContainer") || _(x.InputContainer, "InputContainer"), y = a, b = y.default, x = b && typeof b == "object" ? b : y, S = i("div")(() => ({ width: "450px" })), C = i("div")(() => ({
+var v = _(n, "InputContainer") || _(x.InputContainer, "InputContainer"), y = t, b = y.default, x = b && typeof b == "object" ? b : y, S = s("div")(() => ({ width: "450px" })), C = s("div")(() => ({
 	display: "flex",
 	flexDirection: "column",
 	width: "100%"
-})), w = i("div")(() => ({
+})), w = s("div")(() => ({
 	display: "flex",
 	flexDirection: "column",
 	alignItems: "center"
-})), T = i("div")(() => ({
+})), T = s("div")(() => ({
 	display: "flex",
 	justifyContent: "space-around",
 	alignItems: "center"
-})), E = i("div")(({ theme: e }) => ({
+})), E = s("div")(({ theme: e }) => ({
 	width: "130px",
 	margin: `${e.spacing(1)} ${e.spacing(.5)}`
-})), D = i("div")(({ theme: e }) => ({
+})), D = s("div")(({ theme: e }) => ({
 	width: "160px",
 	margin: `${e.spacing(1)} ${e.spacing(.5)}`,
 	"& .MuiFormControl-root": { width: "100%" }
-})), O = i("div")(({ theme: e }) => ({
+})), O = s("div")(({ theme: e }) => ({
 	width: "230px",
 	margin: `${e.spacing(1)} ${e.spacing(.5)}`,
 	"& .MuiFormControl-root": { width: "100%" }
-})), k = i(f)(({ theme: e }) => ({
+})), k = s(f)(({ theme: e }) => ({
 	fontStyle: "italic",
 	margin: `${e.spacing(1)} 0`
-})), A = i("div")(() => ({
+})), A = s("div")(() => ({
 	display: "flex",
 	justifyContent: "space-between",
 	alignItems: "center"
-})), j = i(f)(() => ({ color: s.disabled() })), M = i("div")(({ theme: e }) => ({ paddingTop: e.spacing(2) })), N = (e) => {
-	let { disabled: t, displayedFields: i, labelValue: a, labelValues: o, gridValue: s, gridValues: c, onChange: l } = e, { labelStep: u = {}, step: d = {} } = i;
-	return /* @__PURE__ */ r(w, { children: [d && d.enabled && /* @__PURE__ */ n(D, { children: /* @__PURE__ */ n(m, {
+})), j = s(f)(() => ({ color: r.disabled() })), M = s("div")(({ theme: e }) => ({ paddingTop: e.spacing(2) })), N = (e) => {
+	let { disabled: t, displayedFields: n, labelValue: r, labelValues: i, gridValue: s, gridValues: c, onChange: l } = e, { labelStep: u = {}, step: d = {} } = n;
+	return /* @__PURE__ */ o(w, { children: [d && d.enabled && /* @__PURE__ */ a(D, { children: /* @__PURE__ */ a(m, {
 		label: d.label || "",
 		value: s,
 		customValues: c,
 		variant: "outlined",
 		disabled: t,
 		onChange: (e, t) => l("step", t)
-	}) }), u && u.enabled && /* @__PURE__ */ n(D, { children: /* @__PURE__ */ n(m, {
+	}) }), u && u.enabled && /* @__PURE__ */ a(D, { children: /* @__PURE__ */ a(m, {
 		label: u.label || "",
-		value: a,
-		customValues: o,
+		value: r,
+		customValues: i,
 		variant: "outlined",
 		disabled: t,
 		onChange: (e, t) => l("labelStep", t)
@@ -73,13 +73,13 @@ N.propTypes = {
 	onChange: e.func
 };
 var P = (e) => {
-	let { disabled: t, displayedFields: i, displayHeader: a, label: o, maxValue: s, minValue: l, onChange: u, type: d } = e, { axisLabel: p = {}, min: h = {}, max: g = {} } = i;
-	return /* @__PURE__ */ r(w, { children: [
-		a && /* @__PURE__ */ r(f, {
+	let { disabled: t, displayedFields: n, displayHeader: r, label: i, maxValue: s, minValue: l, onChange: u, type: d } = e, { axisLabel: p = {}, min: h = {}, max: g = {} } = n;
+	return /* @__PURE__ */ o(w, { children: [
+		r && /* @__PURE__ */ o(f, {
 			variant: "subtitle2",
-			children: [/* @__PURE__ */ n("i", { children: d === "domain" ? "x" : "y" }), "-axis"]
+			children: [/* @__PURE__ */ a("i", { children: d === "domain" ? "x" : "y" }), "-axis"]
 		}),
-		h && h.enabled && /* @__PURE__ */ n(D, { children: /* @__PURE__ */ n(m, {
+		h && h.enabled && /* @__PURE__ */ a(D, { children: /* @__PURE__ */ a(m, {
 			label: h.label || "",
 			value: l,
 			min: -1e4,
@@ -88,7 +88,7 @@ var P = (e) => {
 			disabled: t,
 			onChange: (e, t) => u("min", t)
 		}) }),
-		g && g.enabled && /* @__PURE__ */ n(D, { children: /* @__PURE__ */ n(m, {
+		g && g.enabled && /* @__PURE__ */ a(D, { children: /* @__PURE__ */ a(m, {
 			label: g.label || "",
 			value: s,
 			min: l + .05,
@@ -97,11 +97,11 @@ var P = (e) => {
 			disabled: t,
 			onChange: (e, t) => u("max", t)
 		}) }),
-		p && p.enabled && /* @__PURE__ */ n(D, { children: /* @__PURE__ */ n(v, {
+		p && p.enabled && /* @__PURE__ */ a(D, { children: /* @__PURE__ */ a(v, {
 			label: p.label || "",
-			children: /* @__PURE__ */ n(M, { children: /* @__PURE__ */ n(c, {
+			children: /* @__PURE__ */ a(M, { children: /* @__PURE__ */ a(c, {
 				onChange: (e) => u("axisLabel", e),
-				markup: o || "",
+				markup: i || "",
 				charactersLimit: 5,
 				onKeyDown: (e) => e.key === "Enter",
 				activePlugins: [
@@ -125,10 +125,10 @@ P.propTypes = {
 	onChange: e.func
 };
 var F = (e) => {
-	let { domain: i, displayedFields: a = {}, gridValues: o = {}, includeAxes: s, labelValues: c = {}, onChange: g, onChangeView: _, range: v, size: y, sizeConstraints: b, standardGrid: x } = e, D = {
+	let { domain: t, displayedFields: n = {}, gridValues: r = {}, includeAxes: s, labelValues: c = {}, onChange: g, onChangeView: _, range: v, size: y, sizeConstraints: b, standardGrid: x } = e, D = {
 		min: 2,
 		max: 41
-	}, { axisLabel: M = {}, dimensionsEnabled: F, includeAxesEnabled: I, labelStep: L = {}, min: R = {}, max: z = {}, standardGridEnabled: B, step: V = {} } = a || {}, H = R.enabled || z.enabled || M.enabled || V.enabled || L.enabled, U = {
+	}, { axisLabel: M = {}, dimensionsEnabled: F, includeAxesEnabled: I, labelStep: L = {}, min: R = {}, max: z = {}, standardGridEnabled: B, step: V = {} } = n || {}, H = R.enabled || z.enabled || M.enabled || V.enabled || L.enabled, U = {
 		step: V,
 		labelStep: L
 	}, W = {
@@ -136,31 +136,31 @@ var F = (e) => {
 		max: z,
 		axisLabel: M
 	}, G = (e) => {
-		let t = (e) => {
-			let t = e === "domain" ? i : v;
+		let n = (e) => {
+			let n = e === "domain" ? t : v;
 			return {
 				min: 1,
-				max: t.max < D.min || t.max > D.max ? 16 : t.max,
+				max: n.max < D.min || n.max > D.max ? 16 : n.max,
 				step: 1,
 				labelStep: 0
 			};
-		}, n = {
-			...v,
-			...e ? { labelStep: 1 } : t("range")
 		}, r = {
-			...i,
-			...e ? { labelStep: 1 } : t("domain")
+			...v,
+			...e ? { labelStep: 1 } : n("range")
+		}, i = {
+			...t,
+			...e ? { labelStep: 1 } : n("domain")
 		};
 		g({
 			includeAxes: e,
-			range: n,
-			domain: r
+			range: r,
+			domain: i
 		});
 	}, K = (e) => {
 		g({
 			standardGrid: e,
 			range: {
-				...i,
+				...t,
 				axisLabel: v.axisLabel
 			},
 			graph: {
@@ -174,24 +174,24 @@ var F = (e) => {
 			[e]: t
 		};
 		x && (n.height = t), g({ graph: n });
-	}, J = (e, t) => {
-		i[e] = t, x && e !== "axisLabel" && (v[e] = t), g({
-			domain: i,
+	}, J = (e, n) => {
+		t[e] = n, x && e !== "axisLabel" && (v[e] = n), g({
+			domain: t,
 			range: v
 		});
 	}, Y = (e, t) => {
 		v[e] = t, g({ range: v });
-	}, X = /* @__PURE__ */ r(t, { children: [
-		/* @__PURE__ */ r(T, { children: [/* @__PURE__ */ n(P, {
+	}, X = /* @__PURE__ */ o(i, { children: [
+		/* @__PURE__ */ o(T, { children: [/* @__PURE__ */ a(P, {
 			displayedFields: W,
 			displayHeader: H,
 			type: "domain",
-			minValue: i.min,
-			maxValue: i.max,
-			label: i.axisLabel,
+			minValue: t.min,
+			maxValue: t.max,
+			label: t.axisLabel,
 			includeAxes: s,
 			onChange: J
-		}), /* @__PURE__ */ n(P, {
+		}), /* @__PURE__ */ a(P, {
 			displayedFields: W,
 			displayHeader: H,
 			type: "range",
@@ -202,32 +202,32 @@ var F = (e) => {
 			includeAxes: s,
 			onChange: Y
 		})] }),
-		(R.enabled || z.enabled) && /* @__PURE__ */ n(k, { children: "If you want the axis to be visible, use a zero or negative Min Value, and a positive Max Value" }),
-		(V.enabled || L.enabled) && /* @__PURE__ */ r(T, { children: [/* @__PURE__ */ n(N, {
+		(R.enabled || z.enabled) && /* @__PURE__ */ a(k, { children: "If you want the axis to be visible, use a zero or negative Min Value, and a positive Max Value" }),
+		(V.enabled || L.enabled) && /* @__PURE__ */ o(T, { children: [/* @__PURE__ */ a(N, {
 			displayedFields: U,
-			gridValue: i.step,
-			labelValue: i.labelStep,
-			gridValues: o.domain || [],
+			gridValue: t.step,
+			labelValue: t.labelStep,
+			gridValues: r.domain || [],
 			labelValues: c.domain || [],
 			onChange: J
-		}), /* @__PURE__ */ n(N, {
+		}), /* @__PURE__ */ a(N, {
 			disabled: x,
 			displayedFields: U,
 			gridValue: v.step,
 			labelValue: v.labelStep,
-			gridValues: o.range || [],
+			gridValues: r.range || [],
 			labelValues: c.range || [],
 			onChange: Y
 		})] }),
-		L.enabled && /* @__PURE__ */ n(k, { children: "For unnumbered gridlines, enter a label interval of 0" })
-	] }), Z = z.enabled ? /* @__PURE__ */ r(w, { children: [/* @__PURE__ */ n(O, { children: /* @__PURE__ */ n(m, {
+		L.enabled && /* @__PURE__ */ a(k, { children: "For unnumbered gridlines, enter a label interval of 0" })
+	] }), Z = z.enabled ? /* @__PURE__ */ o(w, { children: [/* @__PURE__ */ a(O, { children: /* @__PURE__ */ a(m, {
 		label: "Number of Vertical Gridlines",
-		value: i.max,
+		value: t.max,
 		min: !s && D.min,
 		max: !s && D.max,
 		variant: "outlined",
 		onChange: (e, t) => J("max", t)
-	}) }), /* @__PURE__ */ n(O, { children: /* @__PURE__ */ n(m, {
+	}) }), /* @__PURE__ */ a(O, { children: /* @__PURE__ */ a(m, {
 		label: "Number of Horizontal Gridlines",
 		value: v.max,
 		min: !s && D.min,
@@ -236,38 +236,38 @@ var F = (e) => {
 		disabled: x,
 		onChange: (e, t) => Y("max", t)
 	}) })] }) : null;
-	return /* @__PURE__ */ n(S, { children: /* @__PURE__ */ r(l, {
+	return /* @__PURE__ */ a(S, { children: /* @__PURE__ */ o(l, {
 		onChange: _,
 		TransitionProps: { timeout: {
 			enter: 225,
 			exit: 195
 		} },
-		children: [/* @__PURE__ */ n(d, {
-			expandIcon: /* @__PURE__ */ n(p, {}),
-			children: /* @__PURE__ */ n(f, {
+		children: [/* @__PURE__ */ a(d, {
+			expandIcon: /* @__PURE__ */ a(p, {}),
+			children: /* @__PURE__ */ a(f, {
 				variant: "subtitle1",
 				children: "Customize Grid Setup"
 			})
-		}), /* @__PURE__ */ n(u, { children: /* @__PURE__ */ r(C, { children: [
-			I && /* @__PURE__ */ n(h, {
+		}), /* @__PURE__ */ a(u, { children: /* @__PURE__ */ o(C, { children: [
+			I && /* @__PURE__ */ a(h, {
 				label: "Include axes and labels?",
 				toggle: G,
 				checked: s
 			}),
-			B && /* @__PURE__ */ n(h, {
+			B && /* @__PURE__ */ a(h, {
 				label: "Constrain to standard coordinate grid?",
 				toggle: K,
 				checked: x
 			}),
 			s ? X : Z,
-			F && /* @__PURE__ */ r(A, { children: [
-				/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n(f, { children: "Dimensions(px)" }), /* @__PURE__ */ r(j, { children: [
+			F && /* @__PURE__ */ o(A, { children: [
+				/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a(f, { children: "Dimensions(px)" }), /* @__PURE__ */ o(j, { children: [
 					"Min ",
 					b.min,
 					", Max ",
 					b.max
 				] })] }),
-				/* @__PURE__ */ n(E, { children: /* @__PURE__ */ n(m, {
+				/* @__PURE__ */ a(E, { children: /* @__PURE__ */ a(m, {
 					label: "Width",
 					value: y.width,
 					min: b.min,
@@ -276,7 +276,7 @@ var F = (e) => {
 					variant: "outlined",
 					onChange: (e, t) => q("width", t)
 				}) }),
-				/* @__PURE__ */ n(E, { children: /* @__PURE__ */ n(m, {
+				/* @__PURE__ */ a(E, { children: /* @__PURE__ */ a(m, {
 					label: "Height",
 					value: y.height,
 					min: b.min,

package/dist/labels.js

@@ -2,10 +2,10 @@ import { clsx as e } from "./node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist
 import t from "react";
 import n from "prop-types";
 import { types as r } from "@pie-lib/plot";
-import { Fragment as i, jsx as a } from "react/jsx-runtime";
-import { styled as o } from "@mui/material/styles";
-import * as s from "@pie-lib/render-ui";
-import { Readable as c, color as l } from "@pie-lib/render-ui";
+import * as i from "@pie-lib/render-ui";
+import { Readable as a, color as o } from "@pie-lib/render-ui";
+import { Fragment as s, jsx as c } from "react/jsx-runtime";
+import { styled as l } from "@mui/material/styles";
 import u from "@pie-lib/editable-html-tip-tap";
 //#region src/labels.tsx
 function d(e) {
@@ -14,7 +14,7 @@ function d(e) {
 function f(e, t) {
 	return !e || d(e) ? e : d(e.default) ? e.default : t && d(e[t]) ? e[t] : t && d(e[t]?.default) ? e[t].default : e;
 }
-var p = f(c, "Readable") || f(g.Readable, "Readable"), m = s, h = m.default, g = h && typeof h == "object" ? h : m, _ = {
+var p = f(a, "Readable") || f(g.Readable, "Readable"), m = i, h = m.default, g = h && typeof h == "object" ? h : m, _ = {
 	left: -90,
 	top: 0,
 	bottom: 0,
@@ -37,8 +37,8 @@ var p = f(c, "Readable") || f(g.Readable, "Readable"), m = s, h = m.default, g =
 	axisLabel: `${b}-axisLabel`,
 	disabledAxisLabel: `${b}-disabledAxisLabel`,
 	bottomLabel: `${b}-bottomLabel`
-}, S = o("div")(({ theme: e }) => ({
-	[`& .${x.label}`]: { fill: l.defaults.SECONDARY },
+}, S = l("div")(({ theme: e }) => ({
+	[`& .${x.label}`]: { fill: o.defaults.SECONDARY },
 	[`& .${x.axisLabel}`]: {
 		fontSize: e.typography.fontSize - 2,
 		textAlign: "center",
@@ -58,27 +58,27 @@ var p = f(c, "Readable") || f(g.Readable, "Readable"), m = s, h = m.default, g =
 	};
 	static defaultProps = { onChange: () => {} };
 	render() {
-		let { disabledLabel: t, placeholder: n, text: r, side: i, graphProps: o, onChange: s, mathMlOptions: c = {} } = this.props, { size: l, domain: d, range: f } = o, m = (l.height || 500) + (f.padding || 0) * 2, h = (l.width || 500) + (d.padding || 0) * 2, g = v(i, h, m), _ = i === "left" || i === "right" ? m : h, b = y(i, 36), C = i === "bottom" ? 58 : 54, w = [
+		let { disabledLabel: t, placeholder: n, text: r, side: i, graphProps: a, onChange: o, mathMlOptions: s = {} } = this.props, { size: l, domain: d, range: f } = a, m = (l.height || 500) + (f.padding || 0) * 2, h = (l.width || 500) + (d.padding || 0) * 2, g = v(i, h, m), _ = i === "left" || i === "right" ? m : h, b = y(i, 36), C = i === "bottom" ? 58 : 54, w = [
 			"bold",
 			"italic",
 			"underline",
 			"strikethrough",
 			"math"
 		];
-		return /* @__PURE__ */ a(S, { children: /* @__PURE__ */ a("foreignObject", {
+		return /* @__PURE__ */ c(S, { children: /* @__PURE__ */ c("foreignObject", {
 			x: -(_ / 2),
 			y: b,
 			width: _,
 			height: C,
 			transform: g,
 			textAnchor: "middle",
-			children: /* @__PURE__ */ a(p, { children: /* @__PURE__ */ a(u, {
+			children: /* @__PURE__ */ c(p, { children: /* @__PURE__ */ c(u, {
 				className: e({
 					[x.bottomLabel]: i === "bottom",
 					[x.disabledAxisLabel]: t
 				}, x.axisLabel),
 				markup: r || "",
-				onChange: s,
+				onChange: o,
 				placeholder: !t && n,
 				toolbarOpts: {
 					position: i === "bottom" ? "top" : "bottom",
@@ -86,7 +86,7 @@ var p = f(c, "Readable") || f(g.Readable, "Readable"), m = s, h = m.default, g =
 					noBorder: !0
 				},
 				activePlugins: w,
-				mathMlOptions: c
+				mathMlOptions: s
 			}) })
 		}) });
 	}
@@ -113,21 +113,21 @@ var p = f(c, "Readable") || f(g.Readable, "Readable"), m = s, h = m.default, g =
 		});
 	};
 	render() {
-		let { disabledLabels: e, placeholders: t = {}, value: n = {}, graphProps: r, mathMlOptions: o = {} } = this.props;
-		return /* @__PURE__ */ a(i, { children: [
+		let { disabledLabels: e, placeholders: t = {}, value: n = {}, graphProps: r, mathMlOptions: i = {} } = this.props;
+		return /* @__PURE__ */ c(s, { children: [
 			"left",
 			"top",
 			"bottom",
 			"right"
-		].map((i) => /* @__PURE__ */ a(C, {
-			side: i,
-			text: n[i],
+		].map((a) => /* @__PURE__ */ c(C, {
+			side: a,
+			text: n[a],
 			disabledLabel: e,
-			placeholder: t[i],
+			placeholder: t[a],
 			graphProps: r,
-			onChange: (e) => this.onChangeLabel(e, i),
-			mathMlOptions: o
-		}, i)) });
+			onChange: (e) => this.onChangeLabel(e, a),
+			mathMlOptions: i
+		}, a)) });
 	}
 });
 //#endregion

package/dist/mark-label.js

@@ -4,19 +4,19 @@ import { useDebounce as n } from "./use-debounce.js";
 import { useCallback as r, useEffect as i, useState as a } from "react";
 import o from "prop-types";
 import { types as s } from "@pie-lib/plot";
-import c from "@pie-lib/translator";
-import { jsx as l } from "react/jsx-runtime";
-import { styled as u } from "@mui/material/styles";
-import { color as d } from "@pie-lib/render-ui";
+import { color as c } from "@pie-lib/render-ui";
+import l from "@pie-lib/translator";
+import { jsx as u } from "react/jsx-runtime";
+import { styled as d } from "@mui/material/styles";
 //#region src/mark-label.tsx
-var { translator: f } = c, p = u(t, { shouldForwardProp: (e) => !["disabled", "markDisabled"].includes(e) })(({ theme: e, disabled: t, markDisabled: n }) => ({ "& input": {
+var { translator: f } = l, p = d(t, { shouldForwardProp: (e) => !["disabled", "markDisabled"].includes(e) })(({ theme: e, disabled: t, markDisabled: n }) => ({ "& input": {
 	float: "right",
 	padding: e.spacing(.5),
 	fontFamily: e.typography.fontFamily,
 	fontSize: e.typography.fontSize,
-	border: `solid 1px ${t ? d.defaults.PRIMARY_DARK : n ? d.disabled() : d.defaults.SECONDARY}`,
+	border: `solid 1px ${t ? c.defaults.PRIMARY_DARK : n ? c.disabled() : c.defaults.SECONDARY}`,
 	borderRadius: "3px",
-	color: n ? d.disabled() : d.defaults.PRIMARY_DARK,
+	color: n ? c.disabled() : c.defaults.PRIMARY_DARK,
 	background: t || n ? e.palette.background.paper : "transparent"
 } })), m = (e, t, n) => {
 	n ||= {
@@ -49,11 +49,11 @@ var { translator: f } = c, p = u(t, { shouldForwardProp: (e) => !["disabled", "m
 		};
 	}
 }, g = (t) => {
-	let [o, s] = a(null), c = r((e) => s(e)), { mark: u, graphProps: d, disabled: g, inputRef: _, language: v } = t, [y, b] = a(u.label), x = (e) => b(e.target.value), S = n(y, 200);
+	let [o, s] = a(null), c = r((e) => s(e)), { mark: l, graphProps: d, disabled: g, inputRef: _, language: v } = t, [y, b] = a(l.label), x = (e) => b(e.target.value), S = n(y, 200);
 	i(() => {
-		b(u.label);
-	}, [u.label]), i(() => {
-		typeof S == "string" && S !== u.label && t.onChange(S);
+		b(l.label);
+	}, [l.label]), i(() => {
+		typeof S == "string" && S !== l.label && t.onChange(S);
 	}, [S]);
 	let C = o ? o.getBoundingClientRect() : {
 		width: 0,
@@ -61,19 +61,19 @@ var { translator: f } = c, p = u(t, { shouldForwardProp: (e) => !["disabled", "m
 	}, w = {
 		position: "fixed",
 		pointerEvents: "auto",
-		...h(d, u, C, m(d, u, C))
-	}, T = g || u.disabled;
-	return /* @__PURE__ */ l(p, {
+		...h(d, l, C, m(d, l, C))
+	}, T = g || l.disabled;
+	return /* @__PURE__ */ u(p, {
 		inputRef: (e) => {
 			c(e), _(e);
 		},
-		"aria-label": Number.isFinite(u.x) && Number.isFinite(u.y) ? f.t("graphing.markLabel", {
+		"aria-label": Number.isFinite(l.x) && Number.isFinite(l.y) ? f.t("graphing.markLabel", {
 			lng: v,
-			x: e(u.x),
-			y: e(u.y)
+			x: e(l.x),
+			y: e(l.y)
 		}) : f.t("graphing.label", { lng: v }),
 		disabled: T,
-		markDisabled: u.disabled,
+		markDisabled: l.disabled,
 		value: y,
 		style: w,
 		onChange: x

package/dist/tool-menu.js

@@ -1,6 +1,6 @@
 import e from "react";
 import t from "prop-types";
-import { uniqueId as n } from "@pie-element/shared-lodash";
+import { createUniqueId as n } from "@pie-lib/render-ui";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { styled as a } from "@mui/material/styles";
 import { Button as o, Radio as s, Typography as c } from "@mui/material";
@@ -11,7 +11,7 @@ var l = class extends e.Component {
 		disabled: t.bool,
 		onChange: t.func
 	};
-	idPrefix = n("gss-tool-menu-");
+	idPrefix = n("gss-tool-menu");
 	onChangeRadioValue = (e) => {
 		let { gssLineData: t, onChange: n } = this.props, r = t.selectedTool;
 		t.selectedTool = e.target.value, n(t, r);
@@ -30,7 +30,7 @@ var l = class extends e.Component {
 					children: [/* @__PURE__ */ i("div", {
 						className: "radioFieldInner",
 						children: [/* @__PURE__ */ r(s, {
-							name: "select-line-radio-buttons",
+							name: `${this.idPrefix}-line`,
 							onChange: this.onChangeRadioValue,
 							value: "lineA",
 							disabled: !!t,
@@ -68,7 +68,7 @@ var l = class extends e.Component {
 					children: [/* @__PURE__ */ i("div", {
 						className: "radioFieldInner",
 						children: [/* @__PURE__ */ r(s, {
-							name: "select-line-radio-buttons",
+							name: `${this.idPrefix}-line`,
 							onChange: this.onChangeRadioValue,
 							value: "lineB",
 							disabled: !!t,
@@ -106,7 +106,7 @@ var l = class extends e.Component {
 					children: /* @__PURE__ */ i("div", {
 						className: "radioFieldInner",
 						children: [/* @__PURE__ */ r(s, {
-							name: "select-line-radio-buttons",
+							name: `${this.idPrefix}-line`,
 							onChange: this.onChangeRadioValue,
 							value: "solutionSet",
 							disabled: !!t,

package/dist/tools/line/component.js

@@ -1,9 +1,10 @@
 import { getAdjustedGraphLimits as e, thinnerShapesNeeded as t } from "../../utils.js";
-import { ArrowMarker as n, genUid as r } from "../shared/arrow-head.js";
-import { lineBase as i, lineToolComponent as a, styles as o } from "../shared/line/index.js";
+import { ArrowMarker as n } from "../shared/arrow-head.js";
+import { lineBase as r, lineToolComponent as i, styles as a } from "../shared/line/index.js";
 import "react";
-import s from "prop-types";
-import { trig as c, types as l } from "@pie-lib/plot";
+import o from "prop-types";
+import { trig as s, types as c } from "@pie-lib/plot";
+import { useUniqueId as l } from "@pie-lib/render-ui";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 import { styled as f } from "@mui/material/styles";
 //#region src/tools/line/component.tsx
@@ -12,22 +13,22 @@ var p = f("line", { shouldForwardProp: (e) => ![
 	"disabled",
 	"correctness"
 ].includes(e) })(({ theme: e, fill: t, disabled: n, correctness: r }) => ({
-	...t === "Solid" ? o.line(e) : o.dashedLine(e),
-	...n && o.disabled(e),
-	...r === "correct" && o.correct(e, "stroke"),
-	...r === "incorrect" && o.incorrect(e, "stroke"),
-	...r === "missing" && o.missing(e, "stroke")
+	...t === "Solid" ? a.line(e) : a.dashedLine(e),
+	...n && a.disabled(e),
+	...r === "correct" && a.correct(e, "stroke"),
+	...r === "incorrect" && a.incorrect(e, "stroke"),
+	...r === "missing" && a.missing(e, "stroke")
 })), m = f(n, { shouldForwardProp: (e) => !["suffix"].includes(e) })(({ theme: e, suffix: t }) => ({
-	...t === "enabled" && o.arrow(e),
-	...t === "disabled" && o.disabledArrow(e),
-	...t === "correct" && o.correct(e),
-	...t === "incorrect" && o.incorrect(e),
-	...t === "missing" && o.missing(e)
+	...t === "enabled" && a.arrow(e),
+	...t === "disabled" && a.disabledArrow(e),
+	...t === "correct" && a.correct(e),
+	...t === "incorrect" && a.incorrect(e),
+	...t === "missing" && a.missing(e)
 })), h = (n) => {
-	let i = r(), { className: a, correctness: o, disabled: s, graphProps: l, fill: f = "Solid", from: h, to: g, ..._ } = n, { scale: v } = l, { domain: y, range: b } = e(l), [x, S] = c.edges(y, b)(h, g), C = o || s && "disabled" || "enabled";
+	let r = l("arrow"), { className: i, correctness: a, disabled: o, graphProps: c, fill: f = "Solid", from: h, to: g, ..._ } = n, { scale: v } = c, { domain: y, range: b } = e(c), [x, S] = s.edges(y, b)(h, g), C = a || o && "disabled" || "enabled";
 	return /* @__PURE__ */ d("g", { children: [/* @__PURE__ */ u("defs", { children: /* @__PURE__ */ u(m, {
-		size: t(l) ? 4 : 5,
-		id: `${n.markerId || i}-${C}`,
+		size: t(c) ? 4 : 5,
+		id: `${n.markerId || r}-${C}`,
 		suffix: C
 	}) }), /* @__PURE__ */ u(p, {
 		x1: v.x(x.x),
@@ -35,24 +36,24 @@ var p = f("line", { shouldForwardProp: (e) => ![
 		x2: v.x(S.x),
 		y2: v.y(S.y),
 		fill: f,
-		disabled: s,
-		correctness: o,
-		className: a,
-		markerEnd: `url(#${n.markerId || i}-${C})`,
-		markerStart: `url(#${n.markerId || i}-${C})`,
+		disabled: o,
+		correctness: a,
+		className: i,
+		markerEnd: `url(#${n.markerId || r}-${C})`,
+		markerStart: `url(#${n.markerId || r}-${C})`,
 		..._
 	})] });
 };
 h.propTypes = {
-	className: s.string,
-	fill: s.string,
-	correctness: s.string,
-	disabled: s.bool,
-	graphProps: l.GraphPropsType,
-	from: l.PointType,
-	to: l.PointType,
-	markerId: s.string
+	className: o.string,
+	fill: o.string,
+	correctness: o.string,
+	disabled: o.bool,
+	graphProps: c.GraphPropsType,
+	from: c.PointType,
+	to: c.PointType,
+	markerId: o.string
 };
-var g = a(i(h));
+var g = i(r(h));
 //#endregion
 export { h as ArrowedLine, g as default };

package/dist/tools/shared/arrow-head.d.ts

@@ -17,7 +17,6 @@ export declare const ArrowHead: {
         transform: string;
     };
 };
-export declare const genUid: () => string;
 export declare const ArrowMarker: {
     ({ id, size, className }: {
         id: any;