@doenet/doenetml 0.7.25-dev.507 → 0.7.25-dev.508

package/{ellipsis-CGWbjf4O.js → ellipsis-BLIkiXMS.js}

@@ -1,6 +1,6 @@
-import { q as jsxRuntimeExports } from "./doenetml-u1YndSm7.js";
+import { q as jsxRuntimeExports } from "./doenetml-D-MlvjpX.js";
 import React__default from "react";
-import { u as useDoenetRenderer } from "./useDoenetRenderer-CUfcSgne.js";
+import { u as useDoenetRenderer } from "./useDoenetRenderer-UyWCNuKB.js";
 const ellipsis = React__default.memo(function Ellipsis(props) {
   let { id, SVs } = useDoenetRenderer(props);
   if (SVs.hidden) {

package/{em-0urWJrEp.js → em-DRpem1-2.js}

@@ -1,7 +1,7 @@
-import { q as jsxRuntimeExports } from "./doenetml-u1YndSm7.js";
+import { q as jsxRuntimeExports } from "./doenetml-D-MlvjpX.js";
 import React__default from "react";
-import { u as useDoenetRenderer } from "./useDoenetRenderer-CUfcSgne.js";
-import { r as renderMarkupBody } from "./markupRenderer-7jFjXtsT.js";
+import { u as useDoenetRenderer } from "./useDoenetRenderer-UyWCNuKB.js";
+import { r as renderMarkupBody } from "./markupRenderer-DACpRdKz.js";
 const em = React__default.memo(function Em(props) {
   const { id, SVs, children } = useDoenetRenderer(props);
   const body = renderMarkupBody({ SVs, children });

package/{embed-Dh_KMrqC.js → embed-rqTRzFAq.js}

@@ -1,6 +1,6 @@
-import { G as useRecordVisibilityChanges, q as jsxRuntimeExports } from "./doenetml-u1YndSm7.js";
+import { G as useRecordVisibilityChanges, q as jsxRuntimeExports } from "./doenetml-D-MlvjpX.js";
 import React__default, { useRef, useEffect } from "react";
-import { u as useDoenetRenderer } from "./useDoenetRenderer-CUfcSgne.js";
+import { u as useDoenetRenderer } from "./useDoenetRenderer-UyWCNuKB.js";
 import { s as sizeToCSS } from "./css-BJLDLYRJ.js";
 const embed = React__default.memo(function Embed(props) {
   let { id, SVs, actions, callAction } = useDoenetRenderer(props);

package/{feedback-lbIB9yRs.js → feedback-Cllga3c8.js}

@@ -1,9 +1,9 @@
-import { u as useT, v as useChromeLangDir, G as useRecordVisibilityChanges, q as jsxRuntimeExports } from "./doenetml-u1YndSm7.js";
+import { u as useT, v as useChromeLangDir, G as useRecordVisibilityChanges, q as jsxRuntimeExports } from "./doenetml-D-MlvjpX.js";
 import React__default, { useRef } from "react";
-import { u as useDoenetRenderer } from "./useDoenetRenderer-CUfcSgne.js";
-import { F as FontAwesomeIcon } from "./index.es-CVZDHLHO.js";
+import { u as useDoenetRenderer } from "./useDoenetRenderer-UyWCNuKB.js";
+import { F as FontAwesomeIcon } from "./index.es-BZY0c1t3.js";
 import { f as faComment } from "./index-CwWLcRpc.js";
-import { a as addCommasForCompositeRanges } from "./composites-B7gjrcIm.js";
+import { a as addCommasForCompositeRanges } from "./composites-CSSw1VLF.js";
 const feedback = React__default.memo(function Feedback(props) {
   let { id, SVs, children, actions, callAction } = useDoenetRenderer(props);
   const t = useT();

package/{figure-DURZ6MUy.js → figure-g0KPrh2g.js}

@@ -1,8 +1,8 @@
-import { G as useRecordVisibilityChanges, q as jsxRuntimeExports } from "./doenetml-u1YndSm7.js";
+import { G as useRecordVisibilityChanges, q as jsxRuntimeExports } from "./doenetml-D-MlvjpX.js";
 import React__default, { createElement, Component, useRef, useState } from "react";
-import { u as useDoenetRenderer } from "./useDoenetRenderer-CUfcSgne.js";
+import { u as useDoenetRenderer } from "./useDoenetRenderer-UyWCNuKB.js";
 import { _ as _setPrototypeOf, a as _objectWithoutPropertiesLoose, b as _extends } from "./setPrototypeOf-C-47lAIH.js";
-import { P as PropTypes } from "./index-DTp6nKt2.js";
+import { P as PropTypes } from "./index-jxUM0uwb.js";
 import { a as getBlockMarginWithOptionalTopSuppression } from "./nonInlineMediaLayout-CkXHaqzo.js";
 function _inheritsLoose(t, o) {
   t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);

package/{fillPatterns-CiqcTsVU.js → fillPatterns-Bkcc1kgf.js}

@@ -1,4 +1,4 @@
-import { E as encodeFillPatternColorToken } from "./doenetml-u1YndSm7.js";
+import { E as encodeFillPatternColorToken } from "./doenetml-D-MlvjpX.js";
 const warnedUnsupportedFillStyles = /* @__PURE__ */ new Set();
 function warnUnsupportedFillStyle(fillStyle) {
   if (warnedUnsupportedFillStyles.has(fillStyle)) {

package/{footnote-B7xEbVoh.js → footnote-NbaFHPVN.js}

@@ -1,7 +1,7 @@
-import { u as useT, q as jsxRuntimeExports, L as Button } from "./doenetml-u1YndSm7.js";
+import { u as useT, q as jsxRuntimeExports, L as Button } from "./doenetml-D-MlvjpX.js";
 import React__default, { useState } from "react";
-import { u as useDoenetRenderer } from "./useDoenetRenderer-CUfcSgne.js";
-import { T as TooltipProvider, a as TooltipAnchor, b as Tooltip } from "./tooltip-provider-DGFLtEVi.js";
+import { u as useDoenetRenderer } from "./useDoenetRenderer-UyWCNuKB.js";
+import { T as TooltipProvider, a as TooltipAnchor, b as Tooltip } from "./tooltip-provider-srILFzBI.js";
 const footnote = React__default.memo(function Footnote(props) {
   let { id, SVs } = useDoenetRenderer(props, false);
   let [isVisible, setIsVisible] = useState(false);

package/{fractionInput-CcM3yQ6H.js → fractionInput-CDrDh9Fv.js}

@@ -1,10 +1,10 @@
-import { F as useContentT, q as jsxRuntimeExports, T as MathJax } from "./doenetml-u1YndSm7.js";
+import { F as useContentT, q as jsxRuntimeExports, T as MathJax } from "./doenetml-D-MlvjpX.js";
 import React__default, { useRef } from "react";
-import { u as useDoenetRenderer } from "./useDoenetRenderer-CUfcSgne.js";
+import { u as useDoenetRenderer } from "./useDoenetRenderer-UyWCNuKB.js";
 /* empty css                   */
-import { c as calculateValidationState, u as useSubmitActionWithDelay, a as createCheckWorkComponent } from "./useSubmitActionWithDelay-DUYvY61i.js";
+import { c as calculateValidationState, u as useSubmitActionWithDelay, a as createCheckWorkComponent } from "./useSubmitActionWithDelay-Dlm36ClP.js";
 import { a as addValidationStateToShortDescription } from "./validationState-DI_lxk1a.js";
-import { D as DescriptionPopover } from "./Description-DfuIwBpF.js";
+import { D as DescriptionPopover } from "./Description-9xkiCcAk.js";
 const fractionInput = React__default.memo(function FractionInput(props) {
   let { id, SVs, actions, children, callAction } = useDoenetRenderer(props);
   const tContent = useContentT();

package/{graph-8Ybpt4il.js → graph-DEJxLN7s.js}

@@ -1,10 +1,10 @@
-import { q as jsxRuntimeExports, aM as roundForDisplay, H as Context, G as useRecordVisibilityChanges } from "./doenetml-u1YndSm7.js";
+import { q as jsxRuntimeExports, aM as roundForDisplay, H as Context, G as useRecordVisibilityChanges } from "./doenetml-D-MlvjpX.js";
 import React__default, { useState, useRef, useEffect, useMemo, createContext } from "react";
-import { u as useDoenetRenderer } from "./useDoenetRenderer-CUfcSgne.js";
-import Prefigure from "./prefigure-5X9DVBfV.js";
-import { a as accessibleLabelText, r as renderLabelWithLatex } from "./labelWithLatex-D3pZxBkq.js";
-import GraphFrame from "./GraphFrame-B_WIM5Fa.js";
-import { J as JSXGraphRenderer } from "./JSXGraphRenderer-D6iPo1FB.js";
+import { u as useDoenetRenderer } from "./useDoenetRenderer-UyWCNuKB.js";
+import Prefigure from "./prefigure-CjSd_o5R.js";
+import { a as accessibleLabelText, r as renderLabelWithLatex } from "./labelWithLatex-BVYdTe81.js";
+import GraphFrame from "./GraphFrame-BBe_OHun.js";
+import { J as JSXGraphRenderer } from "./JSXGraphRenderer-D-h7eH-Q.js";
 const GRAPH_CONTROL_CARD_STYLE = {
   width: "100%",
   boxSizing: "border-box",

package/{hint-dTCFBf4b.js → hint-DrALFzMS.js}

@@ -1,10 +1,10 @@
-import { u as useT, G as useRecordVisibilityChanges, v as useChromeLangDir, q as jsxRuntimeExports } from "./doenetml-u1YndSm7.js";
+import { u as useT, G as useRecordVisibilityChanges, v as useChromeLangDir, q as jsxRuntimeExports } from "./doenetml-D-MlvjpX.js";
 import React__default, { useRef } from "react";
-import { u as useDoenetRenderer } from "./useDoenetRenderer-CUfcSgne.js";
-import { F as FontAwesomeIcon } from "./index.es-CVZDHLHO.js";
+import { u as useDoenetRenderer } from "./useDoenetRenderer-UyWCNuKB.js";
+import { F as FontAwesomeIcon } from "./index.es-BZY0c1t3.js";
 import { b as faLightbulb } from "./index-BDlitCgu.js";
 import { a as faLightbulb$1 } from "./index-CwWLcRpc.js";
-import { a as addCommasForCompositeRanges } from "./composites-B7gjrcIm.js";
+import { a as addCommasForCompositeRanges } from "./composites-CSSw1VLF.js";
 import { c as clickToToggleLabel } from "./disclosure-axyZa36E.js";
 const hint = React__default.memo(function Hint(props) {
   let { id, SVs, children, actions, callAction } = useDoenetRenderer(props);

package/{hovercard-store-BGkBLOUR.js → hovercard-store-C6w9Xi6E.js}

@@ -1,4 +1,4 @@
-import { ae as createStoreContext, aq as PopoverScopedContextProvider, ar as PopoverContextProvider, $ as createHook, a1 as invariant, as as usePortalRef, at as useIsMouseMoving, au as useBooleanEvent, a2 as useStoreState, ak as chain, av as addGlobalEventListener, aw as useLiveRef, a7 as useSafeLayoutEffect, ag as useWrapElement, q as jsxRuntimeExports, a5 as useMergeRefs, ax as usePopover, ah as isFalsyBooleanCallback, al as useEvent, aj as sync, ay as hasFocusWithin, af as createDialogComponent, Y as forwardRef, Z as createElement, az as disabledFromProps, aA as useFocusable, aB as createPopoverStore, an as defaultValue, am as createStore, ap as useStoreProps, aC as usePopoverStoreProps } from "./doenetml-u1YndSm7.js";
+import { ae as createStoreContext, aq as PopoverScopedContextProvider, ar as PopoverContextProvider, $ as createHook, a1 as invariant, as as usePortalRef, at as useIsMouseMoving, au as useBooleanEvent, a2 as useStoreState, ak as chain, av as addGlobalEventListener, aw as useLiveRef, a7 as useSafeLayoutEffect, ag as useWrapElement, q as jsxRuntimeExports, a5 as useMergeRefs, ax as usePopover, ah as isFalsyBooleanCallback, al as useEvent, aj as sync, ay as hasFocusWithin, af as createDialogComponent, Y as forwardRef, Z as createElement, az as disabledFromProps, aA as useFocusable, aB as createPopoverStore, an as defaultValue, am as createStore, ap as useStoreProps, aC as usePopoverStoreProps } from "./doenetml-D-MlvjpX.js";
 import { useRef, useCallback, useEffect, useContext, createContext, useState } from "react";
 const ctx = createStoreContext([PopoverContextProvider], [PopoverScopedContextProvider]);
 const useHovercardProviderContext = ctx.useProviderContext;

package/{hr-KjzPCylH.js → hr-D60yVJF8.js}

@@ -1,6 +1,6 @@
-import { q as jsxRuntimeExports } from "./doenetml-u1YndSm7.js";
+import { q as jsxRuntimeExports } from "./doenetml-D-MlvjpX.js";
 import React__default from "react";
-import { u as useDoenetRenderer } from "./useDoenetRenderer-CUfcSgne.js";
+import { u as useDoenetRenderer } from "./useDoenetRenderer-UyWCNuKB.js";
 const hr = React__default.memo(function Hr(props) {
   let { id, SVs } = useDoenetRenderer(props);
   if (SVs.hidden) {

package/{image-BY2kWQDS.js → image-D2AAKAkE.js}

@@ -1,15 +1,15 @@
-import { A as DocContext, G as useRecordVisibilityChanges, H as Context, q as jsxRuntimeExports, g as getMediaLicenseDisplay } from "./doenetml-u1YndSm7.js";
+import { A as DocContext, G as useRecordVisibilityChanges, H as Context, q as jsxRuntimeExports, g as getMediaLicenseDisplay } from "./doenetml-D-MlvjpX.js";
 import React__default, { useContext, useRef, useMemo } from "react";
-import { j as jxg } from "./JSXGraphRenderer-D6iPo1FB.js";
-import { BoardContext, IMAGE_LAYER_OFFSET } from "./graph-8Ybpt4il.js";
-import { u as useDoenetRenderer } from "./useDoenetRenderer-CUfcSgne.js";
+import { j as jxg } from "./JSXGraphRenderer-D-h7eH-Q.js";
+import { BoardContext, IMAGE_LAYER_OFFSET } from "./graph-DEJxLN7s.js";
+import { u as useDoenetRenderer } from "./useDoenetRenderer-UyWCNuKB.js";
 import { s as sizeToCSS } from "./css-BJLDLYRJ.js";
-import { D as DescriptionPopover, a as DescriptionAsDetails } from "./Description-DfuIwBpF.js";
+import { D as DescriptionPopover, a as DescriptionAsDetails } from "./Description-9xkiCcAk.js";
 import { g as getNonInlineMediaLayoutStyles } from "./nonInlineMediaLayout-CkXHaqzo.js";
-import { N as NonInlineMediaWrapper } from "./NonInlineMediaWrapper-Ddzb1tjn.js";
+import { N as NonInlineMediaWrapper } from "./NonInlineMediaWrapper-DqF3Wxsr.js";
 import { u as usePointerDragState, a as useBoardPointerTracking } from "./useBoardPointerTracking-DV6a8Wvg.js";
 import { u as useDraggableRefs } from "./useDraggableRefs-QaTfkVuD.js";
-import { d as detachAnchoredGraphElement, a as attachAnchoredGraphDragHandlers } from "./useAnchoredGraphDragHandler-BFxdkMVn.js";
+import { d as detachAnchoredGraphElement, a as attachAnchoredGraphDragHandlers } from "./useAnchoredGraphDragHandler-DxzKZzL0.js";
 import { u as useJSXGraphCleanup } from "./useJSXGraphCleanup-BNk4sn6x.js";
 const image = React__default.memo(function Image(props) {
   let { componentIdx, id, SVs, children, actions, callAction } = useDoenetRenderer(props, false);

package/{index-DTp6nKt2.js → index-jxUM0uwb.js}

@@ -1,4 +1,4 @@
-import { aL as getDefaultExportFromCjs } from "./doenetml-u1YndSm7.js";
+import { aL as getDefaultExportFromCjs } from "./doenetml-D-MlvjpX.js";
 var propTypes = { exports: {} };
 var reactIs = { exports: {} };
 var reactIs_production_min = {};

package/{index.es-CVZDHLHO.js → index.es-BZY0c1t3.js}

@@ -1,4 +1,4 @@
-import { P as PropTypes } from "./index-DTp6nKt2.js";
+import { P as PropTypes } from "./index-jxUM0uwb.js";
 import React__default from "react";
 function _defineProperty$1(e, r2, t2) {
   return (r2 = _toPropertyKey$1(r2)) in e ? Object.defineProperty(e, r2, {

package/index.js

@@ -1,4 +1,4 @@
-import { D, a, c, b, d, f, g, e, h, i, m, j, r, s, k, l } from "./doenetml-u1YndSm7.js";
+import { D, a, c, b, d, f, g, e, h, i, m, j, r, s, k, l } from "./doenetml-D-MlvjpX.js";
 export {
   D as DoenetEditor,
   a as DoenetViewer,

package/{label-BtGqQYDT.js → label-C9mDUeLa.js}

@@ -1,14 +1,14 @@
-import { A as DocContext, H as Context, q as jsxRuntimeExports, B as textRendererStyle } from "./doenetml-u1YndSm7.js";
+import { A as DocContext, H as Context, q as jsxRuntimeExports, B as textRendererStyle } from "./doenetml-D-MlvjpX.js";
 import React__default, { useRef, useContext } from "react";
-import { j as jxg, c as computeLabelMaskCssStyle } from "./JSXGraphRenderer-D6iPo1FB.js";
-import { BoardContext, TEXT_LAYER_OFFSET } from "./graph-8Ybpt4il.js";
-import { u as useDoenetRenderer } from "./useDoenetRenderer-CUfcSgne.js";
-import { D as DynamicMath } from "./DynamicMath-MXYV2Z9s.js";
+import { j as jxg, c as computeLabelMaskCssStyle } from "./JSXGraphRenderer-D-h7eH-Q.js";
+import { BoardContext, TEXT_LAYER_OFFSET } from "./graph-DEJxLN7s.js";
+import { u as useDoenetRenderer } from "./useDoenetRenderer-UyWCNuKB.js";
+import { D as DynamicMath } from "./DynamicMath-Bmg5p72t.js";
 import { g as getPositionFromAnchorByCoordinate } from "./graph-W6vrFcBu.js";
-import { ChoiceInputInlineContext } from "./choiceInput-CHRv9fJO.js";
+import { ChoiceInputInlineContext } from "./choiceInput-CP_MrBMk.js";
 import { u as usePointerDragState, a as useBoardPointerTracking } from "./useBoardPointerTracking-DV6a8Wvg.js";
 import { u as useDraggableRefs } from "./useDraggableRefs-QaTfkVuD.js";
-import { d as detachAnchoredGraphElement, a as attachAnchoredGraphDragHandlers } from "./useAnchoredGraphDragHandler-BFxdkMVn.js";
+import { d as detachAnchoredGraphElement, a as attachAnchoredGraphDragHandlers } from "./useAnchoredGraphDragHandler-DxzKZzL0.js";
 import { u as useJSXGraphCleanup } from "./useJSXGraphCleanup-BNk4sn6x.js";
 const label = React__default.memo(function Label(props) {
   let { componentIdx, id, SVs, actions, callAction } = useDoenetRenderer(props);

package/{labelWithLatex-D3pZxBkq.js → labelWithLatex-BVYdTe81.js}

@@ -1,5 +1,5 @@
-import { q as jsxRuntimeExports } from "./doenetml-u1YndSm7.js";
-import { D as DynamicMath } from "./DynamicMath-MXYV2Z9s.js";
+import { q as jsxRuntimeExports } from "./doenetml-D-MlvjpX.js";
+import { D as DynamicMath } from "./DynamicMath-Bmg5p72t.js";
 function renderLabelWithLatex({
   label,
   labelHasLatex

package/legend-C6fv77U1.js

@@ -0,0 +1,437 @@
+import { A as DocContext, M as deepCompare, q as jsxRuntimeExports, C as loadMathJax } from "./doenetml-D-MlvjpX.js";
+import React__default, { useContext, useRef, useEffect } from "react";
+import { j as jxg } from "./JSXGraphRenderer-D-h7eH-Q.js";
+import { u as useDoenetRenderer } from "./useDoenetRenderer-UyWCNuKB.js";
+import { BoardContext, BASE_LAYER_OFFSET, LINE_LAYER_OFFSET, POINT_LAYER_OFFSET, TEXT_LAYER_OFFSET } from "./graph-DEJxLN7s.js";
+import { s as styleToDash } from "./styleToDash-DWb71gbd.js";
+import { e as resolveBackgroundColor, b as resolveCanvasColor, f as resolveTextColor, g as resolvePanelBorderColor } from "./styleColors-CKo0M7P-.js";
+const ORIGIN = [0, 0];
+const legend = React__default.memo(function Legend(props) {
+  let { id, SVs } = useDoenetRenderer(props);
+  const board = useContext(BoardContext);
+  const { darkMode } = useContext(DocContext) || {};
+  const entries = useRef([]);
+  const box = useRef(null);
+  const previousDependencies = useRef(null);
+  const layoutGeneration = useRef(0);
+  const boxFillColor = resolveBackgroundColor(SVs.selectedStyle, darkMode) || resolveCanvasColor(darkMode);
+  const boxBorderColor = resolvePanelBorderColor(darkMode);
+  const labelTextColor = resolveTextColor(SVs.selectedStyle, darkMode);
+  const boxLayer = 10 * SVs.layer + BASE_LAYER_OFFSET;
+  const lineSwatchLayer = 10 * SVs.layer + LINE_LAYER_OFFSET;
+  const markerSwatchLayer = 10 * SVs.layer + POINT_LAYER_OFFSET;
+  const labelLayer = 10 * SVs.layer + TEXT_LAYER_OFFSET;
+  useEffect(() => {
+    return () => {
+      deleteLegend();
+    };
+  }, []);
+  function baseGeometry() {
+    const { xMin, xMax, yMin, yMax } = SVs.graphLimits;
+    const legendDy = (yMax - yMin) * 0.06;
+    const legendLineLength = (xMax - xMin) * 0.05;
+    const legendDx = (xMax - xMin) * 0.02;
+    const baseLegendX = xMin + (xMax - xMin) * 0.05;
+    const legendY = SVs.position.slice(0, 5) === "upper" ? yMin + (yMax - yMin) * 0.95 : yMin + (yMax - yMin) * 0.05 + legendDy * SVs.legendElements.length;
+    return {
+      xMax,
+      legendDy,
+      legendLineLength,
+      legendDx,
+      baseLegendX,
+      legendY,
+      atRight: SVs.position.slice(-5) === "right"
+    };
+  }
+  function syncEntries() {
+    if (board === null) {
+      return false;
+    }
+    let usedMathJax = false;
+    for (const [ind, element] of SVs.legendElements.entries()) {
+      const previous = entries.current[ind] ?? null;
+      const entry = {
+        swatch: syncSwatch(board, previous, element),
+        swatchType: element.swatchType,
+        ...syncLabel(board, previous, element)
+      };
+      usedMathJax ||= entry.labelContent?.hasLatex ?? false;
+      entries.current[ind] = entry;
+    }
+    removeEntries(SVs.legendElements.length);
+    return usedMathJax;
+  }
+  function syncSwatch(board2, previous, element) {
+    if (previous) {
+      if (previous.swatchType === element.swatchType) {
+        applySwatchStyle(previous.swatch, element);
+        return previous.swatch;
+      }
+      board2.removeObject(previous.swatch);
+    }
+    if (element.swatchType === "marker") {
+      return board2.create("point", ORIGIN, {
+        ...markerAttributes(element),
+        strokeColor: "none",
+        fixed: true,
+        highlight: false,
+        withLabel: false,
+        showInfoBox: false,
+        layer: markerSwatchLayer
+      });
+    }
+    if (element.swatchType === "rectangle") {
+      return board2.create("polygon", [ORIGIN, ORIGIN, ORIGIN, ORIGIN], {
+        ...fillAttributes(element),
+        fixed: true,
+        highlight: false,
+        layer: lineSwatchLayer,
+        vertices: { visible: false },
+        borders: {
+          ...strokeAttributes(element),
+          fixed: true,
+          highlight: false,
+          layer: lineSwatchLayer
+        }
+      });
+    }
+    return board2.create("segment", [ORIGIN, [1, 0]], {
+      ...strokeAttributes(element),
+      fixed: true,
+      highlight: false,
+      layer: lineSwatchLayer
+    });
+  }
+  function syncLabel(board2, previous, element) {
+    const label = element.label;
+    const hasLatex = label?.hasLatex ?? false;
+    const shown = previous?.labelContent ?? null;
+    let txt = previous?.label ?? null;
+    if (txt && (!label || shown?.hasLatex !== hasLatex || previous?.labelLayer !== labelLayer)) {
+      board2.removeObject(txt);
+      txt = null;
+    }
+    if (!label) {
+      return { label: null, labelContent: null, labelLayer: null };
+    }
+    if (txt) {
+      if (shown?.value !== label.value) {
+        txt.setText(label.value);
+      }
+      txt.setAttribute({
+        strokeColor: labelTextColor,
+        highlightStrokeColor: labelTextColor
+      });
+    } else {
+      const textAttrs = {
+        fixed: true,
+        highlight: false,
+        layer: labelLayer,
+        strokeColor: labelTextColor,
+        highlightStrokeColor: labelTextColor,
+        // A label is an absolutely positioned div inside the board, so
+        // left to itself it is only as wide as the room left between
+        // where it sits and the board's right edge, and wraps to fit.
+        // Its width is what the legend is laid out from, and it is
+        // measured wherever the label happens to be standing at the
+        // time, so a label that may wrap measures differently
+        // depending on where it is measured. Kept on one line, its
+        // width is its own — and it runs past the graph's edge rather
+        // than wrapping into the row below it (see #1750).
+        cssStyle: "white-space: nowrap"
+      };
+      if (hasLatex) {
+        textAttrs.useMathJax = true;
+        textAttrs.parse = false;
+      }
+      txt = board2.create(
+        "text",
+        [...ORIGIN, label.value],
+        textAttrs
+      );
+    }
+    return {
+      label: txt,
+      labelContent: { value: label.value, hasLatex },
+      labelLayer
+    };
+  }
+  function applySwatchStyle(swatch, element) {
+    if (element.swatchType === "marker") {
+      swatch.setAttribute({
+        ...markerAttributes(element),
+        layer: markerSwatchLayer
+      });
+    } else if (element.swatchType === "rectangle") {
+      swatch.setAttribute({
+        ...fillAttributes(element),
+        layer: lineSwatchLayer
+      });
+      for (const border of swatch.borders) {
+        border.setAttribute({
+          ...strokeAttributes(element),
+          layer: lineSwatchLayer
+        });
+      }
+    } else {
+      swatch.setAttribute({
+        ...strokeAttributes(element),
+        layer: lineSwatchLayer
+      });
+    }
+  }
+  function syncBox() {
+    if (board === null) {
+      return;
+    }
+    const wanted = SVs.boxed && SVs.legendElements.length > 0;
+    if (!wanted) {
+      if (box.current) {
+        board.removeObject(box.current);
+        box.current = null;
+      }
+      return;
+    }
+    const boxAttributes = {
+      fillColor: boxFillColor,
+      fillOpacity: 1,
+      layer: boxLayer
+    };
+    const borderAttributes = {
+      strokeColor: boxBorderColor,
+      strokeWidth: 1,
+      strokeOpacity: 1,
+      layer: boxLayer
+    };
+    if (box.current) {
+      box.current.setAttribute(boxAttributes);
+      for (const border of box.current.borders) {
+        border.setAttribute(borderAttributes);
+      }
+      return;
+    }
+    box.current = board.create(
+      "polygon",
+      [ORIGIN, ORIGIN, ORIGIN, ORIGIN],
+      {
+        ...boxAttributes,
+        fixed: true,
+        highlight: false,
+        vertices: { visible: false },
+        borders: {
+          ...borderAttributes,
+          fixed: true,
+          highlight: false
+        }
+      }
+    );
+  }
+  function positionLegend(geometry) {
+    if (board === null) {
+      return;
+    }
+    const {
+      xMax,
+      legendDx,
+      legendDy,
+      legendLineLength,
+      legendY,
+      baseLegendX,
+      atRight
+    } = geometry;
+    let maxTextWidth = 0;
+    for (const { label } of entries.current) {
+      if (label) {
+        maxTextWidth = Math.max(
+          maxTextWidth,
+          label.rendNode.offsetWidth
+        );
+      }
+    }
+    maxTextWidth /= board.unitX;
+    const legendX = atRight ? Math.max(
+      baseLegendX,
+      xMax - legendLineLength - 3 * legendDx - maxTextWidth
+    ) : baseLegendX;
+    if (box.current) {
+      movePolygon(
+        box.current,
+        boxCorners(
+          geometry,
+          legendX,
+          maxTextWidth,
+          entries.current.length
+        )
+      );
+    }
+    for (const [ind, entry] of entries.current.entries()) {
+      const y = legendY - ind * legendDy;
+      if (entry.swatchType === "marker") {
+        movePoint(entry.swatch, [
+          legendX + legendLineLength / 2,
+          y
+        ]);
+      } else if (entry.swatchType === "rectangle") {
+        movePolygon(
+          entry.swatch,
+          rectangleSwatchCorners(geometry, legendX, y)
+        );
+      } else {
+        const line = entry.swatch;
+        movePoint(line.point1, [legendX, y]);
+        movePoint(line.point2, [legendX + legendLineLength, y]);
+        line.needsUpdate = true;
+        line.update();
+      }
+      if (entry.label) {
+        movePoint(entry.label, [
+          legendX + legendLineLength + legendDx,
+          y
+        ]);
+      }
+    }
+  }
+  function layoutLegend() {
+    if (board === null) {
+      return;
+    }
+    const generation = ++layoutGeneration.current;
+    const geometry = baseGeometry();
+    const usedMathJax = syncEntries();
+    syncBox();
+    board.updateRenderer();
+    positionLegend(geometry);
+    board.updateRenderer();
+    if (usedMathJax) {
+      layOutAfterTypesetting().then(() => {
+        if (layoutGeneration.current !== generation) {
+          return;
+        }
+        positionLegend(geometry);
+        board.updateRenderer();
+      }).catch((e) => {
+        console.error(
+          "Failed to lay out the legend after typesetting",
+          e
+        );
+      });
+    }
+  }
+  function removeEntries(length) {
+    for (const entry of entries.current.slice(length)) {
+      board?.removeObject(entry.swatch);
+      if (entry.label) {
+        board?.removeObject(entry.label);
+      }
+    }
+    entries.current.length = length;
+  }
+  async function layOutAfterTypesetting() {
+    const mathJax = await loadMathJax();
+    await mathJax.startup?.promise;
+  }
+  function deleteLegend() {
+    layoutGeneration.current++;
+    removeEntries(0);
+    if (box.current) {
+      board?.removeObject(box.current);
+      box.current = null;
+    }
+  }
+  if (board) {
+    const dependencies = {
+      hidden: SVs.hidden,
+      legendElements: [...SVs.legendElements],
+      graphLimits: { ...SVs.graphLimits },
+      position: SVs.position,
+      layer: SVs.layer,
+      boxed: SVs.boxed,
+      boxFillColor,
+      boxBorderColor,
+      labelTextColor
+    };
+    if (!deepCompare(previousDependencies.current, dependencies)) {
+      if (SVs.hidden) {
+        deleteLegend();
+      } else {
+        layoutLegend();
+      }
+    }
+    previousDependencies.current = dependencies;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { id }) });
+  }
+  if (SVs.hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { id }) });
+});
+function markerAttributes(element) {
+  return {
+    fillColor: element.markerColor,
+    fillOpacity: element.lineOpacity,
+    size: element.markerSize,
+    face: normalizeStyle(element.markerStyle)
+  };
+}
+function strokeAttributes(element) {
+  return {
+    strokeColor: element.lineColor,
+    strokeWidth: element.lineWidth,
+    strokeOpacity: element.lineOpacity,
+    dash: styleToDash(element.lineStyle)
+  };
+}
+function fillAttributes(element) {
+  return {
+    fillColor: element.filled ? element.fillColor : "none",
+    fillOpacity: element.fillOpacity
+  };
+}
+function rectangleSwatchCorners(geometry, legendX, y) {
+  const { legendDy, legendLineLength } = geometry;
+  return [
+    [legendX, y + legendDy / 4],
+    [legendX + legendLineLength, y + legendDy / 4],
+    [legendX + legendLineLength, y - legendDy / 4],
+    [legendX, y - legendDy / 4]
+  ];
+}
+function boxCorners(geometry, legendX, maxTextWidth, rowCount) {
+  const { legendDx, legendDy, legendLineLength, legendY } = geometry;
+  const padX = legendDx / 2;
+  const padY = legendDy / 4;
+  const left = legendX - padX;
+  const right = legendX + legendLineLength + legendDx + maxTextWidth + padX;
+  const top = legendY + legendDy / 2 + padY;
+  const bottom = legendY - (rowCount - 1) * legendDy - legendDy / 2 - padY;
+  return [
+    [left, top],
+    [right, top],
+    [right, bottom],
+    [left, bottom]
+  ];
+}
+function normalizeStyle(style) {
+  if (style === "triangle") {
+    return "triangleup";
+  } else {
+    return style;
+  }
+}
+function movePoint(object, coords) {
+  object.coords.setCoordinates(jxg.COORDS_BY_USER, coords);
+  object.needsUpdate = true;
+  object.update();
+}
+function movePolygon(polygon, corners) {
+  for (let i = 0; i < corners.length; i++) {
+    movePoint(polygon.vertices[i], corners[i]);
+    polygon.borders[i].needsUpdate = true;
+    polygon.borders[i].update();
+  }
+  polygon.needsUpdate = true;
+  polygon.update();
+}
+export {
+  legend as default
+};