@pie-element/number-line 13.1.2-next.1 → 13.1.2

package/docs/schemas/config.json

@@ -0,0 +1,256 @@
+{
+  "title": "Number Line Question Schema",
+  "type": "object",
+  "definitions": {
+    "feedbackType": {
+      "type": "string",
+      "enum": [
+        "default",
+        "custom"
+      ]
+    },
+    "pointType": {
+      "type": "string",
+      "enum": [
+        "full",
+        "empty"
+      ],
+      "description": "Describes whether the point is filled-in or empty."
+    },
+    "domainPosition": {
+      "type": "number",
+      "description": "The position within the domain."
+    },
+    "point": {
+      "type": "object",
+      "properties": {
+        "type": {
+          "type": "string",
+          "enum": [
+            "point"
+          ]
+        },
+        "pointType": {
+          "$ref": "#/definitions/pointType"
+        },
+        "domainPosition": {
+          "$ref": "#/definitions/domainPosition"
+        }
+      },
+      "required": [
+        "type",
+        "domainPosition",
+        "pointType"
+      ]
+    },
+    "ray": {
+      "type": "object",
+      "properties": {
+        "type": "string",
+        "type": {
+          "enum": [
+            "ray"
+          ]
+        },
+        "pointType": {
+          "$ref": "#/definitions/pointType"
+        },
+        "domainPosition": {
+          "$ref": "#/definitions/domainPosition"
+        },
+        "direction": {
+          "type": "string",
+          "enum": [
+            "positive",
+            "negative"
+          ]
+        }
+      },
+      "required": [
+        "type",
+        "pointType",
+        "direction",
+        "domainPosition"
+      ]
+    },
+    "line": {
+      "type": "object",
+      "properties": {
+        "leftPoint": {
+          "$ref": "#/definitions/pointType"
+        },
+        "rightPoint": {
+          "$ref": "#/definitions/pointType"
+        },
+        "domainPosition": {
+          "$ref": "#/definitions/domainPosition"
+        },
+        "size": {
+          "type": "number"
+        }
+      },
+      "required": [
+        "leftPoint",
+        "rightPoint",
+        "size",
+        "domainPosition"
+      ]
+    }
+  },
+  "properties": {
+    "correctResponse": {
+      "type": "array",
+      "description": "Describes the correct response of points, rays, lines to be displayed on the number line.",
+      "items": {
+        "oneOf": [
+          {
+            "$ref": "#/definitions/ray"
+          },
+          {
+            "$ref": "#/definitions/line"
+          },
+          {
+            "$ref": "#/definitions/point"
+          }
+        ]
+      }
+    },
+    "feedback": {
+      "type": "object",
+      "properties": {
+        "correctFeedbackType": {
+          "$ref": "#/definitions/feedbackType"
+        },
+        "partialFeedbackType": {
+          "$ref": "#/definitions/feedbackType"
+        },
+        "incorrectFeedbackType": {
+          "$ref": "#/definitions/feedbackType"
+        },
+        "correctFeedback": {
+          "type": "string",
+          "description": "Feedback to render if custom is the feedbackType"
+        },
+        "partialFeedback": {
+          "type": "string",
+          "description": "Feedback to render if custom is the feedbackType"
+        },
+        "incorrectFeedback": {
+          "type": "string",
+          "description": "Feedback to render if custom is the feedbackType"
+        }
+      }
+    },
+    "allowPartialScoring": {
+      "type": "boolean",
+      "description": "allow partial scoring"
+    },
+    "partialScoring": {
+      "type": "array",
+      "description": "An array of rules describing what percentage to give for the number of correct responses",
+      "items": {
+        "type": "object",
+        "properties": {
+          "numberOfCorrect": {
+            "type": "number"
+          },
+          "scorePercentage": {
+            "type": "number"
+          }
+        },
+        "required": [
+          "numberOfCorrect",
+          "scorePercentage"
+        ]
+      }
+    },
+    "model": {
+      "type": "object",
+      "properties": {
+        "config": {
+          "type": "object",
+          "description": "An object describing the various configuration properties of the component.",
+          "properties": {
+            "width": {
+              "type": "number",
+              "description": "The width of the component",
+              "minimum": 400,
+              "maximum": 1600
+            },
+            "height": {
+              "type": "number",
+              "description": "The height of the component",
+              "minimum": 300,
+              "maximum": 800
+            },
+            "domain": {
+              "type": "array",
+              "description": "A two-number array representing the minimum and maximum values to be displayed on the number line.",
+              "minItems": 2,
+              "maxItems": 2
+            },
+            "initialType": {
+              "type": "string",
+              "description": "The initial type of point, line, or ray to be set by the component.",
+              "enum": [
+                "PF",
+                "LEE",
+                "LEF",
+                "LFE",
+                "LFF",
+                "REP",
+                "REN",
+                "RFP",
+                "RFN"
+              ]
+            },
+            "snapPerTick": {
+              "type": "number",
+              "description": "The number of positions that are clickable between two ticks."
+            },
+            "exhibitOnly": {
+              "type": "boolean",
+              "description": "If true, the interacting with the component is disabled."
+            },
+            "maxNumberOfPoints": {
+              "type": "number",
+              "description": "The number of points which may be added to the component by the user."
+            },
+            "tickFrequency": {
+              "type": "number",
+              "description": "The total number of major ticks on the number line."
+            },
+            "availableTypes": {
+              "type": "object",
+              "description": "An object mapping point, ray, and line types to boolean values which specify whether or not the types are available for use in the component."
+            },
+            "initialElements": {
+              "type": "array",
+              "description": "Describes the elements that are to be initially displayed on the number line.",
+              "items": {
+                "oneOf": [
+                  {
+                    "$ref": "#/definitions/ray"
+                  },
+                  {
+                    "$ref": "#/definitions/line"
+                  },
+                  {
+                    "$ref": "#/definitions/point"
+                  }
+                ]
+              }
+            }
+          }
+        }
+      },
+      "required": [
+        "config"
+      ]
+    }
+  },
+  "required": [
+    "correctResponse",
+    "model"
+  ]
+}

package/lib/data-converter.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toSessionFormat = exports.toGraphFormat = exports.switchPosition = exports.switchGraphLine = exports.lineIsSwitched = void 0;
+const lineIsSwitched = line => {
+  let {
+    position
+  } = line;
+  return position.left > position.right;
+};
+exports.lineIsSwitched = lineIsSwitched;
+const switchGraphLine = line => {
+  let {
+    position
+  } = line;
+  if (position.left < position.right) {
+    return line;
+  }
+  let {
+    leftPoint: newRightPoint,
+    rightPoint: newLeftPoint
+  } = line;
+  return {
+    leftPoint: newLeftPoint,
+    rightPoint: newRightPoint,
+    position: switchPosition(position),
+    type: 'line'
+  };
+};
+exports.switchGraphLine = switchGraphLine;
+const switchPosition = p => {
+  let {
+    left: newRight,
+    right: newLeft
+  } = p;
+  return {
+    left: newLeft,
+    right: newRight
+  };
+};
+exports.switchPosition = switchPosition;
+const toSessionFormat = gf => {
+  if (gf.type === 'point') {
+    return {
+      type: 'point',
+      pointType: gf.pointType,
+      domainPosition: gf.position
+    };
+  } else if (gf.type === 'line') {
+    return {
+      type: 'line',
+      size: gf.position.right - gf.position.left,
+      domainPosition: gf.position.left,
+      leftPoint: gf.leftPoint,
+      rightPoint: gf.rightPoint
+    };
+  } else if (gf.type === 'ray') {
+    return {
+      type: 'ray',
+      domainPosition: gf.position,
+      pointType: gf.pointType,
+      direction: gf.direction
+    };
+  }
+};
+exports.toSessionFormat = toSessionFormat;
+const toGraphFormat = sf => {
+  if (sf.type === 'point') {
+    return {
+      type: 'point',
+      pointType: sf.pointType,
+      position: sf.domainPosition
+    };
+  } else if (sf.type === 'line') {
+    return {
+      type: 'line',
+      position: {
+        left: sf.domainPosition,
+        right: sf.domainPosition + sf.size
+      },
+      leftPoint: sf.leftPoint,
+      rightPoint: sf.rightPoint
+    };
+  } else if (sf.type === 'ray') {
+    return {
+      type: 'ray',
+      position: sf.domainPosition,
+      pointType: sf.pointType,
+      direction: sf.direction
+    };
+  }
+};
+exports.toGraphFormat = toGraphFormat;
+//# sourceMappingURL=data-converter.js.map

package/lib/data-converter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-converter.js","names":["lineIsSwitched","line","position","left","right","exports","switchGraphLine","leftPoint","newRightPoint","rightPoint","newLeftPoint","switchPosition","type","p","newRight","newLeft","toSessionFormat","gf","pointType","domainPosition","size","direction","toGraphFormat","sf"],"sources":["../src/data-converter.js"],"sourcesContent":["export const lineIsSwitched = (line) => {\n  let { position } = line;\n  return position.left > position.right;\n};\n\nexport const switchGraphLine = (line) => {\n  let { position } = line;\n\n  if (position.left < position.right) {\n    return line;\n  }\n\n  let { leftPoint: newRightPoint, rightPoint: newLeftPoint } = line;\n\n  return {\n    leftPoint: newLeftPoint,\n    rightPoint: newRightPoint,\n    position: switchPosition(position),\n    type: 'line',\n  };\n};\n\nexport const switchPosition = (p) => {\n  let { left: newRight, right: newLeft } = p;\n  return { left: newLeft, right: newRight };\n};\n\nexport const toSessionFormat = (gf) => {\n  if (gf.type === 'point') {\n    return {\n      type: 'point',\n      pointType: gf.pointType,\n      domainPosition: gf.position,\n    };\n  } else if (gf.type === 'line') {\n    return {\n      type: 'line',\n      size: gf.position.right - gf.position.left,\n      domainPosition: gf.position.left,\n      leftPoint: gf.leftPoint,\n      rightPoint: gf.rightPoint,\n    };\n  } else if (gf.type === 'ray') {\n    return {\n      type: 'ray',\n      domainPosition: gf.position,\n      pointType: gf.pointType,\n      direction: gf.direction,\n    };\n  }\n};\n\nexport const toGraphFormat = (sf) => {\n  if (sf.type === 'point') {\n    return {\n      type: 'point',\n      pointType: sf.pointType,\n      position: sf.domainPosition,\n    };\n  } else if (sf.type === 'line') {\n    return {\n      type: 'line',\n      position: {\n        left: sf.domainPosition,\n        right: sf.domainPosition + sf.size,\n      },\n      leftPoint: sf.leftPoint,\n      rightPoint: sf.rightPoint,\n    };\n  } else if (sf.type === 'ray') {\n    return {\n      type: 'ray',\n      position: sf.domainPosition,\n      pointType: sf.pointType,\n      direction: sf.direction,\n    };\n  }\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/draggable/index.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Draggable = Draggable;
+var _react = _interopRequireDefault(require("react"));
+var _core = require("@dnd-kit/core");
+// Draggable.jsx
+
+/**
+ * Shared dnd-kit wrapper for Line + Point.
+ *
+ * Props:
+ *  - id: string (unique)
+ *  - disabled: boolean
+ *  - grid: [stepX] (like grid={[is]})
+ *  - bounds: { left: number, right: number } in px (like scaledLineBounds)
+ *  - onMouseDown: (event) => void
+ *  - onDragStart?: () => void
+ *  - onDragMove?: (deltaX: number) => void      // snapped + clamped
+ *  - onDragEnd?: (deltaX: number) => void       // snapped + clamped
+ *  - children: ({ setNodeRef, attributes, listeners, translateX, isDragging, onMouseDown }) => ReactNode
+ */
+function Draggable({
+  id,
+  disabled,
+  grid,
+  bounds,
+  onMouseDown,
+  onDragStart,
+  onDragMove,
+  onDragEnd,
+  children
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform
+  } = (0, _core.useDraggable)({
+    id,
+    disabled
+  });
+  const step = grid && grid[0] ? grid[0] : null;
+
+  // current transform.x from dnd-kit
+  let rawX = transform?.x ?? 0;
+
+  // grid snapping (grid={[step]})
+  if (step) {
+    rawX = Math.round(rawX / step) * step;
+  }
+
+  // clamp to bounds in px
+  if (bounds) {
+    if (typeof bounds.left === 'number') {
+      rawX = Math.max(bounds.left, rawX);
+    }
+    if (typeof bounds.right === 'number') {
+      rawX = Math.min(bounds.right, rawX);
+    }
+  }
+  const translateX = rawX;
+  const isDragging = !!transform;
+
+  // helpers to apply same snap+clamp to deltaX before callbacks
+  const snapClampDeltaX = deltaX => {
+    let x = deltaX;
+    if (step) {
+      x = Math.round(x / step) * step;
+    }
+    if (bounds) {
+      if (typeof bounds.left === 'number') {
+        x = Math.max(bounds.left, x);
+      }
+      if (typeof bounds.right === 'number') {
+        x = Math.min(bounds.right, x);
+      }
+    }
+    return x;
+  };
+  (0, _core.useDndMonitor)({
+    onDragStart(event) {
+      if (event.active.id !== id || disabled) return;
+      onDragStart?.();
+    },
+    onDragMove(event) {
+      if (event.active.id !== id || disabled) return;
+      const deltaX = event.delta.x || 0;
+      onDragMove?.(snapClampDeltaX(deltaX));
+    },
+    onDragEnd(event) {
+      if (event.active.id !== id || disabled) return;
+      const deltaX = event.delta.x || 0;
+      onDragEnd?.(snapClampDeltaX(deltaX));
+    }
+  });
+  const handleMouseDown = e => {
+    // same as before: prevent text selection
+    e.nativeEvent.preventDefault();
+    onMouseDown?.(e);
+  };
+  return children({
+    setNodeRef,
+    attributes,
+    listeners,
+    translateX,
+    isDragging,
+    onMouseDown: handleMouseDown
+  });
+}
+//# sourceMappingURL=index.js.map

package/lib/draggable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_core","Draggable","id","disabled","grid","bounds","onMouseDown","onDragStart","onDragMove","onDragEnd","children","attributes","listeners","setNodeRef","transform","useDraggable","step","rawX","x","Math","round","left","max","right","min","translateX","isDragging","snapClampDeltaX","deltaX","useDndMonitor","event","active","delta","handleMouseDown","e","nativeEvent","preventDefault"],"sources":["../../src/draggable/index.js"],"sourcesContent":["// Draggable.jsx\nimport React from 'react';\nimport { useDraggable, useDndMonitor } from '@dnd-kit/core';\n\n/**\n * Shared dnd-kit wrapper for Line + Point.\n *\n * Props:\n *  - id: string (unique)\n *  - disabled: boolean\n *  - grid: [stepX] (like grid={[is]})\n *  - bounds: { left: number, right: number } in px (like scaledLineBounds)\n *  - onMouseDown: (event) => void\n *  - onDragStart?: () => void\n *  - onDragMove?: (deltaX: number) => void      // snapped + clamped\n *  - onDragEnd?: (deltaX: number) => void       // snapped + clamped\n *  - children: ({ setNodeRef, attributes, listeners, translateX, isDragging, onMouseDown }) => ReactNode\n */\nexport function Draggable({\n  id,\n  disabled,\n  grid,\n  bounds,\n  onMouseDown,\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  children,\n}) {\n  const { attributes, listeners, setNodeRef, transform } = useDraggable({\n    id,\n    disabled,\n  });\n\n  const step = grid && grid[0] ? grid[0] : null;\n\n  // current transform.x from dnd-kit\n  let rawX = transform?.x ?? 0;\n\n  // grid snapping (grid={[step]})\n  if (step) {\n    rawX = Math.round(rawX / step) * step;\n  }\n\n  // clamp to bounds in px\n  if (bounds) {\n    if (typeof bounds.left === 'number') {\n      rawX = Math.max(bounds.left, rawX);\n    }\n    if (typeof bounds.right === 'number') {\n      rawX = Math.min(bounds.right, rawX);\n    }\n  }\n\n  const translateX = rawX;\n  const isDragging = !!transform;\n\n  // helpers to apply same snap+clamp to deltaX before callbacks\n  const snapClampDeltaX = (deltaX) => {\n    let x = deltaX;\n    if (step) {\n      x = Math.round(x / step) * step;\n    }\n    if (bounds) {\n      if (typeof bounds.left === 'number') {\n        x = Math.max(bounds.left, x);\n      }\n      if (typeof bounds.right === 'number') {\n        x = Math.min(bounds.right, x);\n      }\n    }\n    return x;\n  };\n\n  useDndMonitor({\n    onDragStart(event) {\n      if (event.active.id !== id || disabled) return;\n      onDragStart?.();\n    },\n    onDragMove(event) {\n      if (event.active.id !== id || disabled) return;\n      const deltaX = event.delta.x || 0;\n      onDragMove?.(snapClampDeltaX(deltaX));\n    },\n    onDragEnd(event) {\n      if (event.active.id !== id || disabled) return;\n      const deltaX = event.delta.x || 0;\n      onDragEnd?.(snapClampDeltaX(deltaX));\n    },\n  });\n\n  const handleMouseDown = (e) => {\n    // same as before: prevent text selection\n    e.nativeEvent.preventDefault();\n    onMouseDown?.(e);\n  };\n\n  return children({\n    setNodeRef,\n    attributes,\n    listeners,\n    translateX,\n    isDragging,\n    onMouseDown: handleMouseDown,\n  });\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/index.js

@@ -0,0 +1,196 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Graph", {
+  enumerable: true,
+  get: function () {
+    return _graph.default;
+  }
+});
+Object.defineProperty(exports, "NumberLineComponent", {
+  enumerable: true,
+  get: function () {
+    return _numberLine.default;
+  }
+});
+exports.tickUtils = exports.pointChooser = exports.default = exports.dataConverter = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _dataConverter = _interopRequireWildcard(require("./data-converter"));
+var dataConverter = _dataConverter;
+exports.dataConverter = _dataConverter;
+var pointChooser = _interopRequireWildcard(require("./number-line/point-chooser"));
+exports.pointChooser = pointChooser;
+var tickUtils = _interopRequireWildcard(require("./number-line/graph/tick-utils"));
+exports.tickUtils = tickUtils;
+var _graph = _interopRequireDefault(require("./number-line/graph"));
+var _numberLine = _interopRequireDefault(require("./number-line"));
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _lodashEs = require("lodash-es");
+var _mathRendering = require("@pie-lib/math-rendering");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//Expose some additional modules for configuration
+
+class NumberLine extends HTMLElement {
+  constructor() {
+    super();
+    (0, _defineProperty2.default)(this, "_scheduleMathRender", () => {
+      if (this._mathRenderPending) return;
+      this._mathRenderPending = true;
+      requestAnimationFrame(() => {
+        if (this._mathObserver) {
+          this._mathObserver.disconnect();
+        }
+        (0, _mathRendering.renderMath)(this);
+        this._mathRenderPending = false;
+        setTimeout(() => {
+          if (this._mathObserver) {
+            this._mathObserver.observe(this, {
+              childList: true,
+              subtree: true,
+              characterData: false
+            });
+          }
+        }, 50);
+      });
+    });
+    this._root = null;
+    this._mathObserver = null;
+    this._mathRenderPending = false;
+  }
+  _initMathObserver() {
+    if (this._mathObserver) return;
+    this._mathObserver = new MutationObserver(() => {
+      this._scheduleMathRender();
+    });
+    this._mathObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      characterData: false
+    });
+  }
+  _disconnectMathObserver() {
+    if (this._mathObserver) {
+      this._mathObserver.disconnect();
+      this._mathObserver = null;
+    }
+  }
+  set model(m) {
+    this._model = m;
+    this._applyInitialElements();
+    this._render();
+    this.dispatch('model-set');
+  }
+  set session(s) {
+    this._session = s;
+    this._applyInitialElements();
+    this._render();
+  }
+  get session() {
+    return this._session;
+  }
+  connectedCallback() {
+    this._initMathObserver();
+    this._render();
+  }
+  isComplete() {
+    return this._session ? (this._session.answer || []).length > 0 : false;
+  }
+  dispatch(type) {
+    this.dispatchEvent(new CustomEvent(type, {
+      bubbles: true,
+      detail: {
+        complete: this.isComplete()
+      }
+    }));
+  }
+  dispatchSessionChanged() {
+    this.dispatch('session-changed');
+  }
+  addElement(data) {
+    if (!this._session) {
+      return;
+    }
+    this._session.answer = this._session.answer || [];
+    this._session.answer.push((0, _dataConverter.toSessionFormat)(data));
+    this.dispatchSessionChanged();
+    this._render();
+  }
+  moveElement(index, el, position) {
+    let answer = this._session.answer[index];
+    if (!answer) {
+      throw new Error('cant find element at index: ', index);
+    }
+    if (el.type === 'line' && position.left === position.right) {
+      this._render();
+      return;
+    }
+
+    //set the new position
+    el.position = position;
+    let update = el.type === 'line' && (0, _dataConverter.lineIsSwitched)(el) ? (0, _dataConverter.switchGraphLine)(el) : el;
+    this._session.answer.splice(index, 1, (0, _dataConverter.toSessionFormat)(update));
+    this.dispatchSessionChanged();
+    this._render();
+  }
+  deleteElements(indices) {
+    this._session.answer = this._session.answer.filter((v, index) => {
+      return !indices.some(d => d === index);
+    });
+    this.dispatchSessionChanged();
+    this._render();
+  }
+  undoElement() {
+    this._session.answer.pop();
+    this.dispatchSessionChanged();
+    this._render();
+  }
+  clearElements() {
+    this._session.answer = [];
+    this.dispatchSessionChanged();
+    this._render();
+  }
+  _applyInitialElements() {
+    if (this._model && this._model.graph && this._model.graph.initialElements && this._session && (!this._session.answer || !this._session.answer.length)) {
+      this._session.answer = (0, _lodashEs.cloneDeep)(this._model.graph.initialElements);
+    }
+  }
+  _render() {
+    if (this._model && this._session) {
+      if (!this._session.answer) {
+        this._applyInitialElements();
+      }
+      let answer = (this._session.answer || []).map(_dataConverter.toGraphFormat);
+      let model = (0, _lodashEs.cloneDeep)(this._model);
+      model.correctResponse = model.correctResponse && model.correctResponse.map(_dataConverter.toGraphFormat);
+      let props = {
+        model,
+        answer,
+        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)
+      };
+      let el = /*#__PURE__*/_react.default.createElement(_numberLine.default, props);
+      if (!this._root) {
+        this._root = (0, _client.createRoot)(this);
+      }
+      this._root.render(el);
+
+      // schedule math rendering via observer pipeline (for initial render as well)
+      this._scheduleMathRender();
+    }
+  }
+  disconnectedCallback() {
+    this._disconnectMathObserver();
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = NumberLine;
+//# sourceMappingURL=index.js.map