@pie-element/number-line 0.1.0

package/dist/delivery/index.js

@@ -0,0 +1,109 @@
+import { data_converter_exports as e, lineIsSwitched as t, switchGraphLine as n, toGraphFormat as r, toSessionFormat as i } from "./data-converter.js";
+import { point_chooser_exports as a } from "./number-line/point-chooser/index.js";
+import o from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/cloneDeep.js";
+import { tick_utils_exports as s } from "./number-line/graph/tick-utils.js";
+import c from "./number-line/graph/index.js";
+import l from "./number-line/index.js";
+import u from "react";
+import { createRoot as d } from "react-dom/client";
+import { renderMath as f } from "@pie-element/shared-math-rendering-mathjax";
+//#region src/delivery/index.ts
+var p = class extends HTMLElement {
+	constructor() {
+		super(), this._root = null, this._mathObserver = null, this._mathRenderPending = !1;
+	}
+	_scheduleMathRender = () => {
+		this._mathRenderPending || (this._mathRenderPending = !0, requestAnimationFrame(() => {
+			this._mathObserver && this._mathObserver.disconnect(), f(this), this._mathRenderPending = !1, setTimeout(() => {
+				this._mathObserver && this._mathObserver.observe(this, {
+					childList: !0,
+					subtree: !0,
+					characterData: !1
+				});
+			}, 50);
+		}));
+	};
+	_initMathObserver() {
+		this._mathObserver || (this._mathObserver = new MutationObserver(() => {
+			this._scheduleMathRender();
+		}), this._mathObserver.observe(this, {
+			childList: !0,
+			subtree: !0,
+			characterData: !1
+		}));
+	}
+	_disconnectMathObserver() {
+		this._mathObserver &&= (this._mathObserver.disconnect(), null);
+	}
+	set model(e) {
+		this._model = e, this._applyInitialElements(), this._render(), this.dispatch("model-set");
+	}
+	set session(e) {
+		this._session = e, this._applyInitialElements(), this._render();
+	}
+	get session() {
+		return this._session;
+	}
+	connectedCallback() {
+		this._initMathObserver(), this._render();
+	}
+	isComplete() {
+		return this._session ? (this._session.answer || []).length > 0 : !1;
+	}
+	dispatch(e) {
+		this.dispatchEvent(new CustomEvent(e, {
+			bubbles: !0,
+			detail: { complete: this.isComplete() }
+		}));
+	}
+	dispatchSessionChanged() {
+		this.dispatch("session-changed");
+	}
+	addElement(e) {
+		this._session && (this._session.answer = this._session.answer || [], this._session.answer.push(i(e)), this.dispatchSessionChanged(), this._render());
+	}
+	moveElement(e, r, a) {
+		if (!this._session.answer[e]) throw Error("cant find element at index: ", e);
+		if (r.type === "line" && a.left === a.right) {
+			this._render();
+			return;
+		}
+		r.position = a;
+		let o = r.type === "line" && t(r) ? n(r) : r;
+		this._session.answer.splice(e, 1, i(o)), this.dispatchSessionChanged(), this._render();
+	}
+	deleteElements(e) {
+		this._session.answer = this._session.answer.filter((t, n) => !e.some((e) => e === n)), this.dispatchSessionChanged(), this._render();
+	}
+	undoElement() {
+		this._session.answer.pop(), this.dispatchSessionChanged(), this._render();
+	}
+	clearElements() {
+		this._session.answer = [], this.dispatchSessionChanged(), this._render();
+	}
+	_applyInitialElements() {
+		this._model && this._model.graph && this._model.graph.initialElements && this._session && (!this._session.answer || !this._session.answer.length) && (this._session.answer = o(this._model.graph.initialElements));
+	}
+	_render() {
+		if (this._model && this._session) {
+			this._session.answer || this._applyInitialElements();
+			let e = (this._session.answer || []).map(r), t = o(this._model);
+			t.correctResponse = t.correctResponse && t.correctResponse.map(r);
+			let n = {
+				model: t,
+				answer: e,
+				onAddElement: this.addElement.bind(this),
+				onMoveElement: this.moveElement.bind(this),
+				onDeleteElements: this.deleteElements.bind(this),
+				onUndoElement: this.undoElement.bind(this),
+				onClearElements: this.clearElements.bind(this)
+			}, i = u.createElement(l, n);
+			this._root ||= d(this), this._root.render(i), this._scheduleMathRender();
+		}
+	}
+	disconnectedCallback() {
+		this._disconnectMathObserver(), this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { c as Graph, l as NumberLineComponent, e as dataConverter, p as default, a as pointChooser, s as tickUtils };

package/dist/delivery/number-line/colors.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/colors.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare const selected: any;
+export declare const correct: any;
+export declare const incorrect: any;
+//# sourceMappingURL=colors.d.ts.map

package/dist/delivery/number-line/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/delivery/number-line/colors.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAIH,eAAO,MAAM,QAAQ,KAAsB,CAAC;AAC5C,eAAO,MAAM,OAAO,KAAkB,CAAC;AACvC,eAAO,MAAM,SAAS,KAAoB,CAAC"}

package/dist/delivery/number-line/colors.js

@@ -0,0 +1,5 @@
+import { color as e } from "@pie-lib/render-ui";
+//#region src/delivery/number-line/colors.ts
+var t = e.primaryDark(), n = e.correct(), r = e.incorrect();
+//#endregion
+export { n as correct, r as incorrect, t as selected };

package/dist/delivery/number-line/feedback.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/feedback.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+declare const Feedback: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        width: PropTypes.Requireable<number>;
+        message: PropTypes.Requireable<string>;
+        type: PropTypes.Requireable<string>;
+    };
+};
+export default Feedback;
+//# sourceMappingURL=feedback.d.ts.map

package/dist/delivery/number-line/feedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../../../src/delivery/number-line/feedback.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAGH,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,OAAO,KAAiB,MAAM,OAAO,CAAC;AA+CtC,QAAA,MAAM,QAAQ;;;;;;;CAeb,CAAC;AAQF,eAAe,QAAQ,CAAC"}

package/dist/delivery/number-line/feedback.js

@@ -0,0 +1,57 @@
+import { useRef as e } from "react";
+import { styled as t } from "@mui/material/styles";
+import n from "prop-types";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { color as a } from "@pie-lib/render-ui";
+import { CSSTransition as o, TransitionGroup as s } from "react-transition-group";
+import { Correct as c, Incorrect as l, NothingSubmitted as u, PartiallyCorrect as d, ShowRationale as f } from "@pie-lib/icons";
+//#region src/delivery/number-line/feedback.tsx
+var p = (e) => {
+	switch (e) {
+		case "unanswered": return u;
+		case "correct": return c;
+		case "incorrect": return l;
+		case "partial": return d;
+		case "info": return f;
+		default: return;
+	}
+}, m = t("div")(({ $type: e }) => ({
+	marginTop: "10px",
+	backgroundColor: "#dddddd",
+	padding: "10px",
+	display: "flex",
+	alignItems: "center",
+	...e === "correct" && { backgroundColor: a.correct() },
+	...e === "incorrect" && { backgroundColor: a.incorrect() },
+	"& svg": { height: "30px" },
+	"& h1": {
+		padding: "0px",
+		margin: "0px"
+	}
+})), h = t("span")({
+	paddingLeft: "5px",
+	userSelect: "none"
+}), g = (t) => {
+	let { type: n, width: a, message: c } = t, l = p(n), u = e(null);
+	return /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r(o, {
+		classNames: "fb",
+		timeout: 300,
+		nodeRef: u,
+		children: /* @__PURE__ */ i(m, {
+			ref: u,
+			$type: n,
+			style: { width: a },
+			children: [/* @__PURE__ */ r(l, {
+				iconSet: "emoji",
+				shape: "square"
+			}), /* @__PURE__ */ r(h, { dangerouslySetInnerHTML: { __html: c } })]
+		}, "panel")
+	}, "fb") });
+};
+g.propTypes = {
+	width: n.number,
+	message: n.string,
+	type: n.string
+};
+//#endregion
+export { g as default };

package/dist/delivery/number-line/graph/arrow.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/arrow.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare function Arrow({ x, y, direction, className }: {
+    x: any;
+    y: any;
+    direction: any;
+    className: any;
+}): React.JSX.Element;
+export declare namespace Arrow {
+    var propTypes: {
+        y: PropTypes.Requireable<number>;
+        x: PropTypes.Requireable<number>;
+        direction: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+    };
+    var defaultProps: {
+        y: number;
+        x: number;
+        direction: string;
+    };
+}
+export default Arrow;
+//# sourceMappingURL=arrow.d.ts.map

package/dist/delivery/number-line/graph/arrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.d.ts","sourceRoot":"","sources":["../../../../src/delivery/number-line/graph/arrow.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAQnC,wBAAgB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE;;;;;CAAA,qBAQnD;yBARe,KAAK;;;;;;;;;;;;;AAuBrB,eAAe,KAAK,CAAC"}

package/dist/delivery/number-line/graph/arrow.js

@@ -0,0 +1,27 @@
+import "react";
+import { styled as e } from "@mui/material/styles";
+import t from "prop-types";
+import { jsx as n } from "react/jsx-runtime";
+import { color as r } from "@pie-lib/render-ui";
+//#region src/delivery/number-line/graph/arrow.tsx
+var i = e("path")({ fill: r.primary() });
+function a({ x: e, y: t, direction: r, className: a }) {
+	let o = `translate(${e || 0},${t})`;
+	return r && r === "right" && (o += " rotate(180)"), /* @__PURE__ */ n(i, {
+		d: "m 0,0 8,-5 0,10 -8,-5",
+		transform: o,
+		className: a
+	});
+}
+a.propTypes = {
+	y: t.number,
+	x: t.number,
+	direction: t.oneOf(["left", "right"]),
+	className: t.string
+}, a.defaultProps = {
+	y: 0,
+	x: 0,
+	direction: "left"
+};
+//#endregion
+export { a as default };

package/dist/delivery/number-line/graph/elements/base.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/base.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import PropTypes from 'prop-types';
+export declare const basePropTypes: () => {
+    interval: PropTypes.Validator<number>;
+    domain: PropTypes.Requireable<PropTypes.InferProps<{
+        min: PropTypes.Validator<number>;
+        max: PropTypes.Validator<number>;
+    }>>;
+};
+//# sourceMappingURL=base.d.ts.map

package/dist/delivery/number-line/graph/elements/base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/delivery/number-line/graph/elements/base.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAGH,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,eAAO,MAAM,aAAa;;;;;;CAMxB,CAAC"}

package/dist/delivery/number-line/graph/elements/base.js

@@ -0,0 +1,11 @@
+import e from "prop-types";
+//#region src/delivery/number-line/graph/elements/base.ts
+var t = () => ({
+	interval: e.number.isRequired,
+	domain: e.shape({
+		min: e.number.isRequired,
+		max: e.number.isRequired
+	})
+});
+//#endregion
+export { t as basePropTypes };

package/dist/delivery/number-line/graph/elements/builder.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/builder.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare function buildElementModel(position: any, elementType: any, domain: any, interval: any): {
+    position: any;
+    type: string;
+    pointType: string;
+    leftPoint?: undefined;
+    rightPoint?: undefined;
+    direction?: undefined;
+} | {
+    type: string;
+    leftPoint: string;
+    rightPoint: string;
+    position: {
+        left: any;
+        right: any;
+    };
+    pointType?: undefined;
+    direction?: undefined;
+} | {
+    type: string;
+    direction: string;
+    pointType: string;
+    position: any;
+    leftPoint?: undefined;
+    rightPoint?: undefined;
+} | undefined;
+//# sourceMappingURL=builder.d.ts.map

package/dist/delivery/number-line/graph/elements/builder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"builder.d.ts","sourceRoot":"","sources":["../../../../../src/delivery/number-line/graph/elements/builder.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,wBAAgB,iBAAiB,CAAC,QAAQ,KAAA,EAAE,WAAW,KAAA,EAAE,MAAM,KAAA,EAAE,QAAQ,KAAA;;;;;;;;;;;;;;;;;;;;;;;;cA0BxE"}

package/dist/delivery/number-line/graph/elements/builder.js

@@ -0,0 +1,30 @@
+//#region src/delivery/number-line/graph/elements/builder.ts
+function e(e, t, n, r) {
+	if (t.startsWith("p")) return {
+		position: e,
+		type: "point",
+		pointType: t.endsWith("e") ? "empty" : "full"
+	};
+	if (t.startsWith("l")) {
+		let i = e + r <= n.max ? e : e - r, a = i + r;
+		return {
+			type: "line",
+			leftPoint: t.charAt(1) === "e" ? "empty" : "full",
+			rightPoint: t.charAt(2) === "e" ? "empty" : "full",
+			position: {
+				left: i,
+				right: a
+			}
+		};
+	} else if (t.startsWith("r")) {
+		let n = t.charAt(1) === "f";
+		return {
+			type: "ray",
+			direction: t.charAt(2) === "p" ? "positive" : "negative",
+			pointType: n ? "full" : "empty",
+			position: e
+		};
+	}
+}
+//#endregion
+export { e as buildElementModel };

package/dist/delivery/number-line/graph/elements/line.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/line.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class Line extends React.Component {
+    static propTypes: {
+        empty: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            left: PropTypes.Validator<boolean>;
+            right: PropTypes.Validator<boolean>;
+        }>>>;
+        position: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            left: PropTypes.Validator<number>;
+            right: PropTypes.Validator<number>;
+        }>>>;
+        y: PropTypes.Requireable<number>;
+        selected: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        correct: PropTypes.Requireable<boolean>;
+        onMoveLine: PropTypes.Validator<(...args: any[]) => any>;
+        onToggleSelect: PropTypes.Validator<(...args: any[]) => any>;
+        onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragStop: PropTypes.Requireable<(...args: any[]) => any>;
+        interval: PropTypes.Validator<number>;
+        domain: PropTypes.Requireable<PropTypes.InferProps<{
+            min: PropTypes.Validator<number>;
+            max: PropTypes.Validator<number>;
+        }>>;
+    };
+    static defaultProps: {
+        selected: boolean;
+        y: number;
+        disabled: boolean;
+        correct: undefined;
+    };
+    static contextTypes: {
+        xScale: PropTypes.Validator<(...args: any[]) => any>;
+        snapValue: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    constructor(props: any);
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    onDrag(side: any, p: any): void;
+    onMove(side: any, d: any): void;
+    render(): React.JSX.Element;
+}
+export default Line;
+//# sourceMappingURL=line.d.ts.map

package/dist/delivery/number-line/graph/elements/line.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"line.d.ts","sourceRoot":"","sources":["../../../../../src/delivery/number-line/graph/elements/line.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAmDnC,qBAAa,IAAK,SAAQ,KAAK,CAAC,SAAS;IACvC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;MAkBd;IAEF,MAAM,CAAC,YAAY;;;;;MAKjB;IAEF,MAAM,CAAC,YAAY;;;MAGjB;gBAEU,KAAK,KAAA;IAQjB,gCAAgC,CAAC,SAAS,KAAA;IAO1C,MAAM,CAAC,IAAI,KAAA,EAAE,CAAC,KAAA;IASd,MAAM,CAAC,IAAI,KAAA,EAAE,CAAC,KAAA;IAOd,MAAM;CAkIP;AAED,eAAe,IAAI,CAAC"}

package/dist/delivery/number-line/graph/elements/line.js

@@ -0,0 +1,189 @@
+import e from "../../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isEqual.js";
+import t from "../../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isNumber.js";
+import { Draggable as n } from "../../../draggable/index.js";
+import r from "./point.js";
+import { basePropTypes as i } from "./base.js";
+import a from "react";
+import { styled as o } from "@mui/material/styles";
+import s from "prop-types";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { color as u } from "@pie-lib/render-ui";
+//#region src/delivery/number-line/graph/elements/line.tsx
+var d = "150ms", f = o("g")(({ $disabled: e, $selected: t, $correct: n }) => ({
+	"& .line-handle": {
+		stroke: u.primary(),
+		cursor: "pointer",
+		strokeWidth: "5px",
+		transition: `opacity ${d} linear, 
+    stroke-width ${d} linear,
+    stroke ${d} linear`
+	},
+	"&.dnd-kit-dragging": {
+		opacity: .6,
+		"& .line-handle": {
+			opacity: 1,
+			strokeWidth: "12px"
+		}
+	},
+	...e && {
+		cursor: "not-allowed",
+		opacity: .8
+	},
+	...t && { "& .line-handle": { stroke: u.primaryDark() } },
+	...n === !0 && { "& .line-handle": {
+		cursor: "inherit",
+		stroke: u.correct()
+	} },
+	...n === !1 && { "& .line-handle": {
+		cursor: "inherit",
+		stroke: u.incorrect()
+	} }
+})), p = class extends a.Component {
+	static propTypes = {
+		...i(),
+		empty: s.shape({
+			left: s.bool.isRequired,
+			right: s.bool.isRequired
+		}).isRequired,
+		position: s.shape({
+			left: s.number.isRequired,
+			right: s.number.isRequired
+		}).isRequired,
+		y: s.number,
+		selected: s.bool,
+		disabled: s.bool,
+		correct: s.bool,
+		onMoveLine: s.func.isRequired,
+		onToggleSelect: s.func.isRequired,
+		onDragStart: s.func,
+		onDragStop: s.func
+	};
+	static defaultProps = {
+		selected: !1,
+		y: 0,
+		disabled: !1,
+		correct: void 0
+	};
+	static contextTypes = {
+		xScale: s.func.isRequired,
+		snapValue: s.func.isRequired
+	};
+	constructor(e) {
+		super(e), this.state = {
+			left: null,
+			right: null
+		};
+	}
+	UNSAFE_componentWillReceiveProps(e) {
+		if (e) {
+			let { position: t } = e;
+			this.setState({
+				left: t.left,
+				right: t.right
+			});
+		}
+	}
+	onDrag(e, t) {
+		let { domain: n } = this.props;
+		if (t >= n.min && t <= n.max) {
+			let n = {};
+			n[e] = t, this.setState(n);
+		}
+	}
+	onMove(e, t) {
+		let { position: n } = this.props, r = {
+			left: n.left,
+			right: n.right
+		};
+		r[e] = t, this.props.onMoveLine(r);
+	}
+	render() {
+		let { interval: i, empty: a, position: o, domain: s, y: u, selected: d, disabled: p, correct: m } = this.props, { xScale: h } = this.context, { onDrag: g, onMove: _ } = this, v = _.bind(this, "left"), y = _.bind(this, "right"), b = g.bind(this, "left"), x = g.bind(this, "right"), S = t(this.state.left) ? this.state.left : o.left, C = t(this.state.right) ? this.state.right : o.right, w = h(i) - h(0), T = (e) => e.nativeEvent.preventDefault(), E = () => {
+			this.props.onToggleSelect();
+		}, D = () => {
+			this.props.onToggleSelect();
+		}, O = (t) => {
+			if (Math.abs(t) < w / 10) {
+				this.props.onToggleSelect();
+				return;
+			}
+			let n = h.invert(t + h(0)), r = {
+				left: o.left + n,
+				right: o.right + n
+			};
+			e(r, this.props.position) || this.props.onMoveLine(r);
+		}, k = {
+			left: (s.min - o.left) / i * w,
+			right: (s.max - o.right) / i * w
+		}, A = {
+			interval: i,
+			selected: d,
+			disabled: p,
+			correct: m
+		};
+		return /* @__PURE__ */ c(n, {
+			id: `line-${o.left}-${o.right}-${u}`,
+			disabled: p,
+			grid: [w],
+			bounds: k,
+			onMouseDown: T,
+			onDragEnd: O,
+			children: ({ setNodeRef: e, attributes: t, listeners: n, translateX: i, isDragging: g, onMouseDown: _ }) => /* @__PURE__ */ c(f, {
+				ref: e,
+				$disabled: p,
+				$selected: d,
+				$correct: m,
+				className: g ? "dnd-kit-dragging" : void 0,
+				onMouseDown: _,
+				...t,
+				children: /* @__PURE__ */ l("g", {
+					transform: `translate(${i}, ${u})`,
+					children: [
+						/* @__PURE__ */ c("rect", {
+							x: h(S),
+							width: Math.abs(h(C) - h(S)),
+							fill: "red",
+							fillOpacity: "0.0",
+							y: "-8",
+							height: 16,
+							onClick: D
+						}),
+						/* @__PURE__ */ c("line", {
+							className: "line-handle",
+							x1: h(S),
+							x2: h(C),
+							onClick: E,
+							...n
+						}),
+						/* @__PURE__ */ c(r, {
+							...A,
+							empty: a.left,
+							bounds: {
+								left: s.min - o.left,
+								right: s.max - o.left
+							},
+							position: o.left,
+							onDrag: b,
+							onMove: v,
+							onClick: D
+						}),
+						/* @__PURE__ */ c(r, {
+							...A,
+							empty: a.right,
+							bounds: {
+								left: s.min - o.right,
+								right: s.max - o.right
+							},
+							position: o.right,
+							onDrag: x,
+							onMove: y,
+							onClick: D
+						})
+					]
+				})
+			})
+		});
+	}
+};
+//#endregion
+export { p as default };

package/dist/delivery/number-line/graph/elements/point.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/point.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class Point extends React.Component {
+    static defaultProps: {
+        y: number;
+        selected: boolean;
+        empty: boolean;
+        disabled: boolean;
+        correct: undefined;
+    };
+    static propTypes: {
+        interval: PropTypes.Validator<number>;
+        position: PropTypes.Validator<number>;
+        bounds: PropTypes.Requireable<PropTypes.InferProps<{
+            left: PropTypes.Validator<number>;
+            right: PropTypes.Validator<number>;
+        }>>;
+        selected: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        correct: PropTypes.Requireable<boolean>;
+        empty: PropTypes.Requireable<boolean>;
+        y: PropTypes.Requireable<number>;
+        onMove: PropTypes.Validator<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onDrag: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragStop: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static contextTypes: {
+        xScale: PropTypes.Validator<(...args: any[]) => any>;
+        snapValue: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    render(): React.JSX.Element;
+}
+export default Point;
+//# sourceMappingURL=point.d.ts.map

package/dist/delivery/number-line/graph/elements/point.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../../../src/delivery/number-line/graph/elements/point.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AA8CnC,qBAAa,KAAM,SAAQ,KAAK,CAAC,SAAS;IACxC,MAAM,CAAC,YAAY;;;;;;MAMjB;IAEF,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;MAiBd;IAEF,MAAM,CAAC,YAAY;;;MAGjB;IAEF,MAAM;CA8HP;AAED,eAAe,KAAK,CAAC"}