@powerduck/schema-designer 0.1.0

package/dist/chunk-BXFABOMJ.js

@@ -0,0 +1,1475 @@
+import { normalizeMaximumLength, sanitizePlainText, findVariableTokens, tokenAtPosition, escapeCssAttrValue, truncateInsertion, createVariableCompletionSource, createTokenDecorations } from './chunk-P5B3HSPY.js';
+import { memo, useRef, useState, useLayoutEffect, useMemo, useCallback, useEffect } from 'react';
+import { Box } from '@chakra-ui/react';
+import { completionKeymap, acceptCompletion, autocompletion } from '@codemirror/autocomplete';
+import { history, historyKeymap, defaultKeymap } from '@codemirror/commands';
+import { Annotation, Compartment, EditorState } from '@codemirror/state';
+import { EditorView, drawSelection, placeholder, keymap, ViewPlugin, Decoration } from '@codemirror/view';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/react/variableTextEditor/VariableTextEditor.module.css
+var VariableTextEditor_default = {
+  root: "VariableTextEditor_root",
+  variableToken: "VariableTextEditor_variableToken",
+  variableToken_unknown: "VariableTextEditor_variableToken_unknown",
+  variableToken_environment: "VariableTextEditor_variableToken_environment",
+  variableToken_secret: "VariableTextEditor_variableToken_secret",
+  variableToken_request: "VariableTextEditor_variableToken_request",
+  variableToken_dynamic: "VariableTextEditor_variableToken_dynamic",
+  hoverPopover: "VariableTextEditor_hoverPopover",
+  hoverPopoverArrow: "VariableTextEditor_hoverPopoverArrow",
+  popoverHeader: "VariableTextEditor_popoverHeader",
+  popoverType: "VariableTextEditor_popoverType",
+  popoverValue: "VariableTextEditor_popoverValue",
+  popoverDesc: "VariableTextEditor_popoverDesc"
+};
+var EMPTY_VARIABLES = Object.freeze([]);
+var TOKEN_SELECTOR = `.${VariableTextEditor_default.variableToken}`;
+var HOVER_OPEN_DELAY = 260;
+var HOVER_CLOSE_DELAY = 50;
+var POPOVER_GAP = 14;
+var VIEWPORT_MARGIN = 12;
+var POPOVER_MAX_WIDTH = 360;
+var POPOVER_FALLBACK_HEIGHT = 200;
+var MAX_PENDING_CONTROLLED_VALUES = 16;
+var ExternalValueUpdate = Annotation.define();
+var VariablesSnapshotUpdate = Annotation.define();
+function variablesEqual(a, b) {
+  if (a === b) return true;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) {
+    const left = a[i];
+    const right = b[i];
+    if (left.name !== right.name || left.value !== right.value || left.description !== right.description || left.type !== right.type || left.color !== right.color || left.backgroundColor !== right.backgroundColor) {
+      return false;
+    }
+  }
+  return true;
+}
+function mergeRanges(ranges) {
+  if (ranges.length <= 1) return ranges.slice();
+  const sorted = ranges.filter((range) => range.to > range.from).slice().sort((a, b) => {
+    if (a.from !== b.from) return a.from - b.from;
+    return a.to - b.to;
+  });
+  if (sorted.length <= 1) return sorted;
+  const result = [];
+  let current = {
+    from: sorted[0].from,
+    to: sorted[0].to
+  };
+  for (let i = 1; i < sorted.length; i += 1) {
+    const next = sorted[i];
+    if (next.from <= current.to) {
+      current.to = Math.max(current.to, next.to);
+      continue;
+    }
+    result.push(current);
+    current = {
+      from: next.from,
+      to: next.to
+    };
+  }
+  result.push(current);
+  return result;
+}
+function createInputInvariantFilter(maxLengthRef, allowLineBreaksRef, isComposingRef) {
+  return EditorState.transactionFilter.of((transaction) => {
+    if (!transaction.docChanged) {
+      return transaction;
+    }
+    if (isComposingRef.current) {
+      return transaction;
+    }
+    const newDoc = transaction.newDoc;
+    const invalidRanges = [];
+    if (!allowLineBreaksRef.current) {
+      const text = newDoc.toString();
+      const newlineRegex = /[\r\n\u2028\u2029]+/g;
+      let match;
+      while ((match = newlineRegex.exec(text)) !== null) {
+        const from = match.index;
+        const to = from + match[0].length;
+        invalidRanges.push({ from, to });
+      }
+    }
+    const limit = maxLengthRef.current;
+    if (Number.isFinite(limit) && newDoc.length > limit) {
+      invalidRanges.push({
+        from: Math.max(0, Math.floor(limit)),
+        to: newDoc.length
+      });
+    }
+    if (invalidRanges.length === 0) {
+      return transaction;
+    }
+    const merged = mergeRanges(invalidRanges);
+    return [
+      transaction,
+      {
+        changes: merged.map(({ from, to }) => ({
+          from,
+          to,
+          insert: ""
+        })),
+        sequential: true
+      }
+    ];
+  });
+}
+var VariableDecorationPlugin = class {
+  constructor(view, getSnapshot, tokenIndexRef, classes) {
+    this.getSnapshot = getSnapshot;
+    this.tokenIndexRef = tokenIndexRef;
+    this.classes = classes;
+    this.rebuild(view.state);
+  }
+  getSnapshot;
+  tokenIndexRef;
+  classes;
+  decorations = Decoration.none;
+  rebuild(state) {
+    const snapshot = this.getSnapshot();
+    const doc = state.doc.toString();
+    const tokens = findVariableTokens(doc, snapshot.variables);
+    this.tokenIndexRef.current = {
+      doc,
+      variablesVersion: snapshot.version,
+      tokens
+    };
+    this.decorations = createTokenDecorations(
+      state,
+      snapshot.variables,
+      this.classes,
+      tokens
+    );
+  }
+  update(update) {
+    if (update.docChanged || update.transactions.some(
+      (transaction) => transaction.annotation(VariablesSnapshotUpdate) !== void 0
+    ))
+      this.rebuild(update.state);
+  }
+};
+function createVariableDecorationExtension(snapshotRef, tokenIndexRef) {
+  const getSnapshot = () => snapshotRef.current;
+  const plugin = ViewPlugin.fromClass(
+    class extends VariableDecorationPlugin {
+      constructor(view) {
+        super(view, getSnapshot, tokenIndexRef, VariableTextEditor_default);
+      }
+    },
+    {
+      decorations: (plugin2) => plugin2.decorations
+    }
+  );
+  return plugin;
+}
+function createVariableCompletionExtension(variables) {
+  return autocompletion({
+    override: [createVariableCompletionSource(variables)],
+    activateOnTyping: true,
+    defaultKeymap: false
+  });
+}
+var VariableTextEditor = memo(
+  (props) => {
+    const {
+      value,
+      variables: variablesProp,
+      disabled = false,
+      readOnly = false,
+      placeholder: placeholder$1 = "",
+      ariaLabel = "Variable text editor",
+      className,
+      autoFocus = false,
+      submitOnEnter = false,
+      minHeight = 32,
+      expansionMode = "inline",
+      safePadding = 8,
+      maxFocusedHeight = 320,
+      maxLength,
+      allowLineBreaks = false,
+      onChange,
+      onSubmit,
+      onFocus,
+      onBlur
+    } = props;
+    const variables = variablesProp ?? EMPTY_VARIABLES;
+    const safeMaxLength = normalizeMaximumLength(maxLength);
+    const normalizedValue = sanitizePlainText(
+      value,
+      safeMaxLength,
+      allowLineBreaks
+    );
+    const safeMinHeight = Number.isFinite(minHeight) ? Math.max(32, Math.round(minHeight)) : 32;
+    const safeMaxHeight = Number.isFinite(maxFocusedHeight) ? Math.max(safeMinHeight, Math.round(maxFocusedHeight)) : Math.max(safeMinHeight, 320);
+    const hostRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const viewRef = useRef(null);
+    const destroyedRef = useRef(false);
+    const isComposingRef = useRef(false);
+    const pendingCompositionSyncRef = useRef(false);
+    const initialValueRef = useRef(normalizedValue);
+    const editorValueRef = useRef(normalizedValue);
+    const lastAcknowledgedPropValueRef = useRef(normalizedValue);
+    const pendingEmittedValuesRef = useRef([]);
+    const [hover, setHover] = useState(null);
+    const hoverRef = useRef(null);
+    const [focused, setFocused] = useState(false);
+    const focusedRef = useRef(false);
+    const [focusedHeight, setFocusedHeight] = useState(safeMinHeight);
+    const focusedHeightRef = useRef(safeMinHeight);
+    const [wrapped, setWrapped] = useState(false);
+    const wrappedRef = useRef(false);
+    const anchorRef = useRef(null);
+    const [overlayStyle, setOverlayStyle] = useState();
+    useLayoutEffect(() => {
+      if (!focused || expansionMode !== "overlay") {
+        setOverlayStyle(void 0);
+        return;
+      }
+      let frame = 0;
+      const position = () => {
+        frame = 0;
+        const anchor = anchorRef.current;
+        if (!anchor) return;
+        const rect = anchor.getBoundingClientRect();
+        if (rect.bottom <= 0 || rect.top >= window.innerHeight) {
+          viewRef.current?.contentDOM.blur();
+          return;
+        }
+        const height = Math.min(focusedHeight, window.innerHeight - 16);
+        const top = Math.max(
+          8,
+          Math.min(rect.top, window.innerHeight - height - 8)
+        );
+        setOverlayStyle({
+          position: "fixed",
+          top,
+          left: Math.max(8, rect.left),
+          width: Math.min(
+            rect.width,
+            window.innerWidth - Math.max(8, rect.left) - 8
+          ),
+          maxHeight: Math.max(safeMinHeight, window.innerHeight - top - 8),
+          zIndex: 1100
+        });
+      };
+      const schedule = () => {
+        if (!frame) frame = requestAnimationFrame(position);
+      };
+      position();
+      window.addEventListener("scroll", schedule, true);
+      window.addEventListener("resize", schedule);
+      const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
+      if (anchorRef.current) observer?.observe(anchorRef.current);
+      return () => {
+        cancelAnimationFrame(frame);
+        observer?.disconnect();
+        window.removeEventListener("scroll", schedule, true);
+        window.removeEventListener("resize", schedule);
+      };
+    }, [focused, expansionMode, focusedHeight, safeMinHeight]);
+    const [popoverPosition, setPopoverPosition] = useState(null);
+    const activeTokenKeyRef = useRef(null);
+    const lastPointerTokenKeyRef = useRef(null);
+    const openTimerRef = useRef(null);
+    const closeTimerRef = useRef(null);
+    const frameRef = useRef(null);
+    const pointerRafRef = useRef(null);
+    const repositionRafRef = useRef(null);
+    const resizeObserverRef = useRef(null);
+    const tooltipResizeObserverRef = useRef(null);
+    const pointerInEditorRef = useRef(false);
+    const pointerInPopoverRef = useRef(false);
+    const markPopoverPointerDownUntilRef = useRef(0);
+    const variablesSnapshotRef = useRef({
+      variables,
+      version: 1
+    });
+    const disabledRef = useRef(disabled);
+    const readOnlyRef = useRef(readOnly);
+    const submitOnEnterRef = useRef(submitOnEnter);
+    const allowLineBreaksRef = useRef(allowLineBreaks);
+    const maxLengthRef = useRef(safeMaxLength);
+    const onChangeRef = useRef(onChange);
+    const onSubmitRef = useRef(onSubmit);
+    const onFocusRef = useRef(onFocus);
+    const onBlurRef = useRef(onBlur);
+    const editableCompartmentRef = useRef(new Compartment());
+    const variableDecorationCompartmentRef = useRef(new Compartment());
+    const variableCompletionCompartmentRef = useRef(new Compartment());
+    const placeholderCompartmentRef = useRef(new Compartment());
+    const ariaCompartmentRef = useRef(new Compartment());
+    const wrappingCompartmentRef = useRef(new Compartment());
+    const tokenIndexRef = useRef({
+      doc: normalizedValue,
+      variablesVersion: variablesSnapshotRef.current.version,
+      tokens: []
+    });
+    const pendingPointerRef = useRef(null);
+    const rootStyle = useMemo(
+      () => ({
+        "--editor-min-height": `${safeMinHeight}px`,
+        "--editor-max-focused-height": `${safeMaxHeight}px`,
+        "--editor-padding-block": `${Number.isFinite(safePadding) ? Math.max(0, safePadding) : 8}px`,
+        "--editor-focused-height": `${focusedHeight}px`
+      }),
+      [focusedHeight, safeMaxHeight, safeMinHeight, safePadding]
+    );
+    const sameRect = useCallback(
+      (a, b, eps = 0.01) => {
+        return Math.abs(a.left - b.left) < eps && Math.abs(a.top - b.top) < eps && Math.abs(a.width - b.width) < eps && Math.abs(a.height - b.height) < eps;
+      },
+      []
+    );
+    useEffect(() => {
+      focusedHeightRef.current = focusedHeight;
+    }, [focusedHeight]);
+    useEffect(() => {
+      wrappedRef.current = wrapped;
+    }, [wrapped]);
+    const cancelOpen = useCallback(() => {
+      if (openTimerRef.current !== null) {
+        window.clearTimeout(openTimerRef.current);
+        openTimerRef.current = null;
+      }
+    }, []);
+    const cancelClose = useCallback(() => {
+      if (closeTimerRef.current !== null) {
+        window.clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+    }, []);
+    const cancelFrame = useCallback(() => {
+      if (frameRef.current !== null) {
+        window.cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      }
+    }, []);
+    const cancelRepositionFrame = useCallback(() => {
+      if (repositionRafRef.current !== null) {
+        window.cancelAnimationFrame(repositionRafRef.current);
+        repositionRafRef.current = null;
+      }
+    }, []);
+    const commitHover = useCallback(
+      (next) => {
+        if (destroyedRef.current) {
+          return;
+        }
+        const current = hoverRef.current;
+        if (!current && !next) {
+          return;
+        }
+        if (current && next && current.tokenKey === next.tokenKey && sameRect(current.rect, next.rect)) {
+          return;
+        }
+        hoverRef.current = next;
+        activeTokenKeyRef.current = next?.tokenKey ?? null;
+        setHover(next);
+        if (!next) {
+          setPopoverPosition(null);
+        }
+      },
+      [sameRect]
+    );
+    const closeHover = useCallback(() => {
+      cancelOpen();
+      cancelClose();
+      cancelRepositionFrame();
+      commitHover(null);
+    }, [cancelClose, cancelOpen, cancelRepositionFrame, commitHover]);
+    const markPopoverPointerDown = useCallback(() => {
+      markPopoverPointerDownUntilRef.current = Date.now() + 150;
+    }, []);
+    const requestFinalClose = useCallback(() => {
+      cancelClose();
+      closeTimerRef.current = window.setTimeout(() => {
+        closeTimerRef.current = null;
+        if (destroyedRef.current) {
+          return;
+        }
+        if (Date.now() < markPopoverPointerDownUntilRef.current) {
+          return;
+        }
+        const shouldClose = !pointerInEditorRef.current && !pointerInPopoverRef.current && !focusedRef.current;
+        if (!shouldClose) {
+          return;
+        }
+        closeHover();
+        setWrapped(false);
+        setFocusedHeight(safeMinHeight);
+      }, HOVER_CLOSE_DELAY);
+    }, [cancelClose, closeHover, safeMinHeight]);
+    const scheduleClose = useCallback(() => {
+      cancelClose();
+      closeTimerRef.current = window.setTimeout(() => {
+        closeTimerRef.current = null;
+        if (destroyedRef.current) {
+          return;
+        }
+        if (Date.now() < markPopoverPointerDownUntilRef.current) {
+          return;
+        }
+        if (tooltipRef.current?.matches(":hover, :focus-within")) {
+          return;
+        }
+        commitHover(null);
+      }, HOVER_CLOSE_DELAY);
+    }, [cancelClose, commitHover]);
+    const getTokensCurrent = useCallback(
+      (view) => {
+        const doc = view.state.doc.toString();
+        const snapshot = variablesSnapshotRef.current;
+        const cached = tokenIndexRef.current;
+        if (cached.doc === doc && cached.variablesVersion === snapshot.version) {
+          return cached.tokens;
+        }
+        const tokens = findVariableTokens(doc, snapshot.variables);
+        tokenIndexRef.current = {
+          doc,
+          variablesVersion: snapshot.version,
+          tokens
+        };
+        return tokens;
+      },
+      []
+    );
+    const getTokenAtPointer = useCallback(
+      (snapshot) => {
+        const view = viewRef.current;
+        if (destroyedRef.current || !view) {
+          return null;
+        }
+        const tokens = getTokensCurrent(view);
+        if (!tokens.length) {
+          return null;
+        }
+        const pos = view.posAtCoords({
+          x: snapshot.clientX,
+          y: snapshot.clientY
+        });
+        if (pos == null) {
+          return null;
+        }
+        return tokenAtPosition(tokens, pos) ?? null;
+      },
+      [getTokensCurrent]
+    );
+    const fullLineTokenRectFromView = useCallback(
+      (view, from, to) => {
+        if (view.state.doc.length === 0) return null;
+        const host = view.dom;
+        const selector = `${TOKEN_SELECTOR}[data-variable-from="${escapeCssAttrValue(String(from))}"][data-variable-to="${escapeCssAttrValue(String(to))}"]`;
+        const element = host.querySelector(selector);
+        if (element) {
+          const tokenRect = element.getBoundingClientRect();
+          const lineElement = element.closest(".cm-line");
+          const lineRect = lineElement?.getBoundingClientRect();
+          const editorRect = view.dom.getBoundingClientRect();
+          const top2 = Math.max(editorRect.top, lineRect?.top ?? tokenRect.top);
+          const bottom2 = Math.min(
+            editorRect.bottom,
+            lineRect?.bottom ?? tokenRect.bottom
+          );
+          const height2 = Math.max(tokenRect.height, bottom2 - top2);
+          const width2 = tokenRect.width;
+          if (width2 <= 0 || height2 <= 0) {
+            return null;
+          }
+          return new DOMRect(tokenRect.left, top2, width2, height2);
+        }
+        const startCoords = view.coordsAtPos(from);
+        const endCoords = view.coordsAtPos(to);
+        if (!startCoords || !endCoords) {
+          return null;
+        }
+        const left = startCoords.left;
+        const right = endCoords.right;
+        const top = Math.min(startCoords.top, endCoords.top);
+        const bottom = Math.max(startCoords.bottom, endCoords.bottom);
+        const width = right - left;
+        const height = bottom - top;
+        if (width <= 0 || height <= 0) {
+          return null;
+        }
+        return new DOMRect(left, top, width, height);
+      },
+      []
+    );
+    const buildHoverFromToken = useCallback(
+      (view, token) => {
+        if (destroyedRef.current) {
+          return null;
+        }
+        const rect = fullLineTokenRectFromView(view, token.from, token.to);
+        if (!rect || rect.width <= 0 || rect.height <= 0) {
+          return null;
+        }
+        const tokenKey = `${token.from}:${token.to}:${token.name}`;
+        return {
+          tokenKey,
+          rect,
+          from: token.from,
+          to: token.to,
+          name: token.name,
+          variable: token.variable
+        };
+      },
+      [fullLineTokenRectFromView]
+    );
+    const showToken = useCallback(
+      (token) => {
+        if (destroyedRef.current) {
+          return;
+        }
+        const view = viewRef.current;
+        if (!view || disabledRef.current) {
+          return;
+        }
+        const nextHover = buildHoverFromToken(view, token);
+        if (!nextHover) {
+          closeHover();
+          return;
+        }
+        if (activeTokenKeyRef.current === nextHover.tokenKey && hoverRef.current && hoverRef.current.tokenKey === nextHover.tokenKey && sameRect(hoverRef.current.rect, nextHover.rect)) {
+          return;
+        }
+        commitHover(nextHover);
+      },
+      [buildHoverFromToken, closeHover, commitHover, sameRect]
+    );
+    const scheduleOpen = useCallback(
+      (snapshot, token) => {
+        cancelClose();
+        cancelOpen();
+        openTimerRef.current = window.setTimeout(() => {
+          openTimerRef.current = null;
+          if (destroyedRef.current) {
+            return;
+          }
+          const view = viewRef.current;
+          if (!view || disabledRef.current) {
+            return;
+          }
+          const tokens = getTokensCurrent(view);
+          const latest = tokens.find(
+            (candidate) => candidate.from === token.from && candidate.to === token.to && candidate.token === token.token
+          );
+          if (!latest) {
+            return;
+          }
+          const latestToken = getTokenAtPointer(snapshot);
+          if (!latestToken || latestToken.from !== latest.from || latestToken.to !== latest.to) {
+            return;
+          }
+          showToken(latest);
+        }, HOVER_OPEN_DELAY);
+      },
+      [cancelClose, cancelOpen, getTokenAtPointer, getTokensCurrent, showToken]
+    );
+    const flushPointer = useCallback(() => {
+      pointerRafRef.current = null;
+      const snapshot = pendingPointerRef.current;
+      pendingPointerRef.current = null;
+      if (!snapshot || destroyedRef.current) {
+        return;
+      }
+      pointerInEditorRef.current = true;
+      const token = getTokenAtPointer(snapshot);
+      if (token) {
+        const tokenKey = `${token.from}:${token.to}:${token.name}`;
+        if (lastPointerTokenKeyRef.current !== tokenKey) {
+          lastPointerTokenKeyRef.current = tokenKey;
+          scheduleOpen(snapshot, token);
+        } else if (!hoverRef.current) {
+          scheduleOpen(snapshot, token);
+        }
+        return;
+      }
+      lastPointerTokenKeyRef.current = null;
+      if (hoverRef.current) {
+        requestFinalClose();
+      } else {
+        cancelOpen();
+      }
+    }, [cancelOpen, getTokenAtPointer, requestFinalClose, scheduleOpen]);
+    const schedulePointerFlush = useCallback(
+      (event) => {
+        pendingPointerRef.current = {
+          clientX: event.clientX,
+          clientY: event.clientY
+        };
+        if (pointerRafRef.current !== null) {
+          return;
+        }
+        pointerRafRef.current = window.requestAnimationFrame(flushPointer);
+      },
+      [flushPointer]
+    );
+    const handlePointerMove = useCallback(
+      (event) => {
+        schedulePointerFlush(event);
+      },
+      [schedulePointerFlush]
+    );
+    const handleHostPointerEnter = useCallback(() => {
+      pointerInEditorRef.current = true;
+    }, []);
+    const handleHostPointerLeave = useCallback(() => {
+      pointerInEditorRef.current = false;
+      cancelOpen();
+      requestFinalClose();
+    }, [cancelOpen, requestFinalClose]);
+    const handleTooltipPointerEnter = useCallback(() => {
+      pointerInPopoverRef.current = true;
+      cancelClose();
+    }, [cancelClose]);
+    const handleTooltipPointerLeave = useCallback(() => {
+      pointerInPopoverRef.current = false;
+      requestFinalClose();
+    }, [requestFinalClose]);
+    const measureFocusedHeight = useCallback(() => {
+      if (destroyedRef.current || !focusedRef.current) {
+        return;
+      }
+      const expectedView = viewRef.current;
+      if (!expectedView) {
+        return;
+      }
+      if (frameRef.current !== null) {
+        return;
+      }
+      frameRef.current = window.requestAnimationFrame(() => {
+        frameRef.current = null;
+        if (destroyedRef.current) {
+          return;
+        }
+        if (viewRef.current !== expectedView) {
+          return;
+        }
+        if (!focusedRef.current) {
+          return;
+        }
+        const content = expectedView.contentDOM;
+        const measuredRaw = Math.max(
+          safeMinHeight,
+          Math.ceil(content.scrollHeight)
+        );
+        const stableHeight = measuredRaw <= safeMinHeight + 2 ? safeMinHeight : measuredRaw;
+        const nextHeight = Math.min(stableHeight, safeMaxHeight);
+        const nextWrapped = stableHeight > safeMinHeight;
+        const currentHeight = focusedHeightRef.current;
+        const currentWrapped = wrappedRef.current;
+        if (nextHeight === currentHeight && nextWrapped === currentWrapped) {
+          return;
+        }
+        focusedHeightRef.current = nextHeight;
+        wrappedRef.current = nextWrapped;
+        setFocusedHeight(nextHeight);
+        setWrapped(nextWrapped);
+      });
+    }, [safeMaxHeight, safeMinHeight]);
+    const calculatePopoverPosition = useCallback(
+      (rect, width, height) => {
+        const safeWidth = Math.min(
+          POPOVER_MAX_WIDTH,
+          Math.max(1, window.innerWidth - VIEWPORT_MARGIN * 2)
+        );
+        const actualWidth = Math.min(
+          safeWidth,
+          Math.max(1, width || safeWidth)
+        );
+        const actualHeight = Math.max(1, height || POPOVER_FALLBACK_HEIGHT);
+        const tokenCenter = rect.left + rect.width / 2;
+        const left = Math.max(
+          VIEWPORT_MARGIN,
+          Math.min(
+            tokenCenter - actualWidth / 2,
+            window.innerWidth - actualWidth - VIEWPORT_MARGIN
+          )
+        );
+        const canPlaceBelow = rect.bottom + POPOVER_GAP + actualHeight <= window.innerHeight - VIEWPORT_MARGIN;
+        const canPlaceAbove = rect.top - POPOVER_GAP - actualHeight >= VIEWPORT_MARGIN;
+        const showAbove = !canPlaceBelow && canPlaceAbove;
+        const top = showAbove ? Math.max(VIEWPORT_MARGIN, rect.top - actualHeight - POPOVER_GAP) : Math.min(
+          Math.max(VIEWPORT_MARGIN, rect.bottom + POPOVER_GAP),
+          Math.max(
+            VIEWPORT_MARGIN,
+            window.innerHeight - actualHeight - VIEWPORT_MARGIN
+          )
+        );
+        return {
+          left,
+          top,
+          placement: showAbove ? "top" : "bottom",
+          arrowLeft: Math.max(
+            12,
+            Math.min(tokenCenter - left, actualWidth - 12)
+          )
+        };
+      },
+      []
+    );
+    const repositionPopover = useCallback(() => {
+      if (destroyedRef.current) {
+        return;
+      }
+      const currentHover = hoverRef.current;
+      if (!currentHover) {
+        return;
+      }
+      const tooltip = tooltipRef.current;
+      const rect = currentHover.rect;
+      const tooltipRect = tooltip?.getBoundingClientRect();
+      const width = tooltipRect?.width || Math.min(POPOVER_MAX_WIDTH, window.innerWidth - VIEWPORT_MARGIN * 2);
+      const height = tooltipRect?.height || POPOVER_FALLBACK_HEIGHT;
+      const next = calculatePopoverPosition(rect, width, height);
+      setPopoverPosition((previous) => {
+        if (previous && previous.left === next.left && previous.top === next.top && previous.placement === next.placement && previous.arrowLeft === next.arrowLeft) {
+          return previous;
+        }
+        return next;
+      });
+    }, [calculatePopoverPosition]);
+    const schedulePopoverReposition = useCallback(() => {
+      if (repositionRafRef.current !== null) {
+        return;
+      }
+      repositionRafRef.current = window.requestAnimationFrame(() => {
+        repositionRafRef.current = null;
+        repositionPopover();
+      });
+    }, [repositionPopover]);
+    const applyExternalValue = useCallback(
+      (view, nextValue) => {
+        if (destroyedRef.current || viewRef.current !== view) {
+          return false;
+        }
+        const currentDoc = view.state.doc.toString();
+        if (currentDoc === nextValue) {
+          editorValueRef.current = currentDoc;
+          return false;
+        }
+        closeHover();
+        view.dispatch({
+          changes: {
+            from: 0,
+            to: currentDoc.length,
+            insert: nextValue
+          },
+          annotations: ExternalValueUpdate.of(true)
+        });
+        editorValueRef.current = nextValue;
+        return true;
+      },
+      [closeHover]
+    );
+    useLayoutEffect(() => {
+      disabledRef.current = disabled;
+      readOnlyRef.current = readOnly;
+      submitOnEnterRef.current = submitOnEnter;
+      allowLineBreaksRef.current = allowLineBreaks;
+      maxLengthRef.current = safeMaxLength;
+      onChangeRef.current = onChange;
+      onSubmitRef.current = onSubmit;
+      onFocusRef.current = onFocus;
+      onBlurRef.current = onBlur;
+    }, [
+      disabled,
+      readOnly,
+      submitOnEnter,
+      allowLineBreaks,
+      safeMaxLength,
+      onChange,
+      onSubmit,
+      onFocus,
+      onBlur
+    ]);
+    const measurementRef = useRef(measureFocusedHeight);
+    const minimumHeightRef = useRef(safeMinHeight);
+    useLayoutEffect(() => {
+      measurementRef.current = measureFocusedHeight;
+      minimumHeightRef.current = safeMinHeight;
+      measureFocusedHeight();
+    }, [measureFocusedHeight, safeMinHeight]);
+    useLayoutEffect(() => {
+      const host = hostRef.current;
+      if (!host || viewRef.current) {
+        return;
+      }
+      destroyedRef.current = false;
+      const editable = !disabledRef.current && !readOnlyRef.current;
+      const view = new EditorView({
+        parent: host,
+        state: EditorState.create({
+          doc: initialValueRef.current,
+          extensions: [
+            history(),
+            drawSelection({
+              cursorBlinkRate: 1200
+            }),
+            EditorState.allowMultipleSelections.of(false),
+            editableCompartmentRef.current.of([
+              EditorState.readOnly.of(!editable),
+              EditorView.editable.of(editable)
+            ]),
+            /**
+             * P0:
+             *
+             * All document invariants are enforced at the transaction level.
+             */
+            createInputInvariantFilter(
+              maxLengthRef,
+              allowLineBreaksRef,
+              isComposingRef
+            ),
+            wrappingCompartmentRef.current.of([]),
+            EditorView.updateListener.of((update) => {
+              if (update.docChanged) {
+                closeHover();
+                const newLength = update.state.doc.length;
+                if (newLength === 0) {
+                  hoverRef.current = null;
+                  activeTokenKeyRef.current = null;
+                  lastPointerTokenKeyRef.current = null;
+                  setHover(null);
+                  setPopoverPosition(null);
+                  cancelRepositionFrame();
+                }
+              }
+              if (!update.docChanged) {
+                return;
+              }
+              const isExternal = update.transactions.some(
+                (transaction) => transaction.annotation(ExternalValueUpdate) === true
+              );
+              const rawValue = update.state.doc.toString();
+              editorValueRef.current = rawValue;
+              if (isComposingRef.current) {
+                pendingCompositionSyncRef.current = true;
+                return;
+              }
+              if (isExternal) {
+                return;
+              }
+              const nextValue = sanitizePlainText(
+                rawValue,
+                maxLengthRef.current,
+                allowLineBreaksRef.current
+              );
+              if (nextValue !== rawValue) {
+                return;
+              }
+              if (focusedRef.current) {
+                measurementRef.current();
+              }
+              pendingEmittedValuesRef.current.push(nextValue);
+              if (pendingEmittedValuesRef.current.length > MAX_PENDING_CONTROLLED_VALUES) {
+                pendingEmittedValuesRef.current = pendingEmittedValuesRef.current.slice(
+                  -MAX_PENDING_CONTROLLED_VALUES
+                );
+              }
+              onChangeRef.current?.(nextValue);
+            }),
+            variableDecorationCompartmentRef.current.of(
+              createVariableDecorationExtension(
+                variablesSnapshotRef,
+                tokenIndexRef
+              )
+            ),
+            variableCompletionCompartmentRef.current.of(
+              createVariableCompletionExtension(
+                variablesSnapshotRef.current.variables
+              )
+            ),
+            placeholderCompartmentRef.current.of(
+              placeholder$1 ? placeholder(placeholder$1) : []
+            ),
+            ariaCompartmentRef.current.of(
+              EditorView.contentAttributes.of({
+                "aria-label": ariaLabel,
+                "aria-disabled": disabledRef.current ? "true" : "false",
+                "aria-readonly": readOnlyRef.current ? "true" : "false",
+                spellcheck: "false",
+                autocapitalize: "off",
+                autocomplete: "off"
+              })
+            ),
+            keymap.of([
+              ...completionKeymap,
+              ...historyKeymap,
+              ...defaultKeymap
+            ]),
+            EditorView.domEventHandlers({
+              compositionstart() {
+                isComposingRef.current = true;
+                return false;
+              },
+              compositionend() {
+                isComposingRef.current = false;
+                queueMicrotask(() => {
+                  if (destroyedRef.current || viewRef.current !== view) {
+                    return;
+                  }
+                  if (!pendingCompositionSyncRef.current) {
+                    return;
+                  }
+                  pendingCompositionSyncRef.current = false;
+                  const rawValue = view.state.doc.toString();
+                  const normalized = sanitizePlainText(
+                    rawValue,
+                    maxLengthRef.current,
+                    allowLineBreaksRef.current
+                  );
+                  if (normalized !== rawValue) {
+                    view.dispatch({
+                      changes: {
+                        from: 0,
+                        to: rawValue.length,
+                        insert: normalized
+                      },
+                      annotations: ExternalValueUpdate.of(true)
+                    });
+                    editorValueRef.current = normalized;
+                    pendingEmittedValuesRef.current.push(normalized);
+                    onChangeRef.current?.(normalized);
+                    return;
+                  }
+                  editorValueRef.current = rawValue;
+                  pendingEmittedValuesRef.current.push(rawValue);
+                  onChangeRef.current?.(rawValue);
+                });
+                return false;
+              },
+              keydown(event, currentView) {
+                if (event.isComposing || isComposingRef.current || disabledRef.current || readOnlyRef.current)
+                  return false;
+                if (event.key !== "Enter") {
+                  return false;
+                }
+                if (allowLineBreaksRef.current) {
+                  return false;
+                }
+                if (acceptCompletion(currentView)) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  return true;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                if (submitOnEnterRef.current) {
+                  onSubmitRef.current?.(currentView.state.doc.toString());
+                }
+                return true;
+              },
+              beforeinput(event, currentView) {
+                if (disabledRef.current || readOnlyRef.current) {
+                  event.preventDefault();
+                  return true;
+                }
+                if (isComposingRef.current) {
+                  return false;
+                }
+                if (!event.inputType.startsWith("insert")) {
+                  return false;
+                }
+                const text = event.data;
+                if (!allowLineBreaksRef.current) {
+                  if (event.inputType === "insertLineBreak" || event.inputType === "insertParagraph" || event.inputType === "insertNewline") {
+                    event.preventDefault();
+                    return true;
+                  }
+                  if (text != null && /[\r\n\u2028\u2029]/.test(text)) {
+                    event.preventDefault();
+                    return true;
+                  }
+                }
+                if (!text) {
+                  return false;
+                }
+                const normalizedInsert = allowLineBreaksRef.current ? text : text.replace(/[\r\n\u2028\u2029]+/g, " ");
+                const selection = currentView.state.selection.main;
+                const insert = truncateInsertion(
+                  normalizedInsert,
+                  currentView.state.doc.length,
+                  selection.to - selection.from,
+                  maxLengthRef.current
+                );
+                if (insert === text) {
+                  return false;
+                }
+                event.preventDefault();
+                if (insert) {
+                  currentView.dispatch(
+                    currentView.state.replaceSelection(insert)
+                  );
+                }
+                return true;
+              },
+              paste(event, currentView) {
+                if (disabledRef.current || readOnlyRef.current) {
+                  event.preventDefault();
+                  return true;
+                }
+                const text = event.clipboardData?.getData("text/plain");
+                if (text === void 0) {
+                  return false;
+                }
+                event.preventDefault();
+                const normalizedInsert = allowLineBreaksRef.current ? text : text.replace(/[\r\n\u2028\u2029]+/g, " ");
+                const selection = currentView.state.selection.main;
+                const insert = truncateInsertion(
+                  normalizedInsert,
+                  currentView.state.doc.length,
+                  selection.to - selection.from,
+                  maxLengthRef.current
+                );
+                if (insert) {
+                  currentView.dispatch(
+                    currentView.state.replaceSelection(insert)
+                  );
+                }
+                return true;
+              },
+              drop(event, currentView) {
+                if (disabledRef.current || readOnlyRef.current) {
+                  event.preventDefault();
+                  return true;
+                }
+                const text = event.dataTransfer?.getData("text/plain");
+                if (text === void 0) {
+                  return false;
+                }
+                event.preventDefault();
+                const normalizedInsert = allowLineBreaksRef.current ? text : text.replace(/[\r\n\u2028\u2029]+/g, " ");
+                const position = currentView.posAtCoords({
+                  x: event.clientX,
+                  y: event.clientY
+                });
+                const selection = currentView.state.selection.main;
+                const hasSelection = !selection.empty && position != null;
+                let from;
+                let to;
+                let replacedLength;
+                if (hasSelection) {
+                  from = selection.from;
+                  to = selection.to;
+                  replacedLength = to - from;
+                } else {
+                  from = position ?? selection.from;
+                  to = from;
+                  replacedLength = 0;
+                }
+                const insert = truncateInsertion(
+                  normalizedInsert,
+                  currentView.state.doc.length,
+                  replacedLength,
+                  maxLengthRef.current
+                );
+                if (insert) {
+                  currentView.dispatch({
+                    changes: {
+                      from,
+                      to,
+                      insert
+                    },
+                    selection: {
+                      anchor: from + insert.length
+                    },
+                    scrollIntoView: true,
+                    userEvent: "input.drop"
+                  });
+                }
+                return true;
+              },
+              focus() {
+                if (destroyedRef.current || viewRef.current !== view) {
+                  return false;
+                }
+                focusedRef.current = true;
+                setFocused(true);
+                view.dispatch({
+                  effects: wrappingCompartmentRef.current.reconfigure([
+                    EditorView.lineWrapping
+                  ])
+                });
+                queueMicrotask(() => {
+                  if (destroyedRef.current || viewRef.current !== view) {
+                    return;
+                  }
+                  if (!view.hasFocus) {
+                    return;
+                  }
+                  measurementRef.current();
+                });
+                onFocusRef.current?.();
+                return false;
+              },
+              blur() {
+                if (destroyedRef.current || viewRef.current !== view) {
+                  return false;
+                }
+                focusedRef.current = false;
+                setFocused(false);
+                setWrapped(false);
+                focusedHeightRef.current = minimumHeightRef.current;
+                setFocusedHeight(minimumHeightRef.current);
+                scheduleClose();
+                view.dispatch({
+                  effects: wrappingCompartmentRef.current.reconfigure([])
+                });
+                onBlurRef.current?.();
+                return false;
+              }
+            })
+          ]
+        })
+      });
+      viewRef.current = view;
+      editorValueRef.current = view.state.doc.toString();
+      if (typeof ResizeObserver !== "undefined") {
+        resizeObserverRef.current = new ResizeObserver(() => {
+          if (destroyedRef.current) {
+            return;
+          }
+          const currentView = viewRef.current;
+          if (!currentView || currentView !== view) {
+            return;
+          }
+          if (focusedRef.current) {
+            measurementRef.current();
+          }
+        });
+        resizeObserverRef.current.observe(host);
+      }
+      if (autoFocus && editable) {
+        queueMicrotask(() => {
+          if (destroyedRef.current || viewRef.current !== view) {
+            return;
+          }
+          if (!view.hasFocus) {
+            view.focus();
+          }
+        });
+      }
+      return () => {
+        destroyedRef.current = true;
+        focusedRef.current = false;
+        isComposingRef.current = false;
+        pendingCompositionSyncRef.current = false;
+        cancelOpen();
+        cancelClose();
+        cancelFrame();
+        cancelRepositionFrame();
+        resizeObserverRef.current?.disconnect();
+        resizeObserverRef.current = null;
+        tooltipResizeObserverRef.current?.disconnect();
+        tooltipResizeObserverRef.current = null;
+        if (pointerRafRef.current !== null) {
+          window.cancelAnimationFrame(pointerRafRef.current);
+          pointerRafRef.current = null;
+        }
+        pendingPointerRef.current = null;
+        hoverRef.current = null;
+        activeTokenKeyRef.current = null;
+        lastPointerTokenKeyRef.current = null;
+        tokenIndexRef.current = {
+          doc: "",
+          variablesVersion: variablesSnapshotRef.current.version,
+          tokens: []
+        };
+        setHover(null);
+        setPopoverPosition(null);
+        if (viewRef.current === view) {
+          viewRef.current = null;
+        }
+        try {
+          view.destroy();
+        } catch {
+        }
+      };
+    }, []);
+    useEffect(() => {
+      const view = viewRef.current;
+      if (!view || destroyedRef.current) {
+        return;
+      }
+      if (isComposingRef.current) {
+        return;
+      }
+      const nextValue = normalizedValue;
+      const currentDoc = view.state.doc.toString();
+      if (currentDoc === nextValue) {
+        editorValueRef.current = currentDoc;
+        lastAcknowledgedPropValueRef.current = nextValue;
+        pendingEmittedValuesRef.current = [];
+        return;
+      }
+      if (nextValue === lastAcknowledgedPropValueRef.current) {
+        return;
+      }
+      const pendingIndex = pendingEmittedValuesRef.current.indexOf(nextValue);
+      if (pendingIndex !== -1) {
+        lastAcknowledgedPropValueRef.current = nextValue;
+        pendingEmittedValuesRef.current = pendingEmittedValuesRef.current.slice(
+          pendingIndex + 1
+        );
+        return;
+      }
+      pendingEmittedValuesRef.current = [];
+      lastAcknowledgedPropValueRef.current = nextValue;
+      applyExternalValue(view, nextValue);
+    }, [applyExternalValue, normalizedValue]);
+    useEffect(() => {
+      const view = viewRef.current;
+      if (!view || destroyedRef.current) {
+        return;
+      }
+      const editableNow = !disabled && !readOnly;
+      if (!editableNow) {
+        closeHover();
+        if (view.hasFocus) {
+          try {
+            view.contentDOM.blur();
+          } catch {
+          }
+        }
+        focusedRef.current = false;
+        setFocused(false);
+        setWrapped(false);
+        focusedHeightRef.current = safeMinHeight;
+        setFocusedHeight(safeMinHeight);
+        view.dispatch({
+          effects: wrappingCompartmentRef.current.reconfigure([])
+        });
+      }
+      view.dispatch({
+        effects: [
+          editableCompartmentRef.current.reconfigure([
+            EditorState.readOnly.of(!editableNow),
+            EditorView.editable.of(editableNow)
+          ]),
+          ariaCompartmentRef.current.reconfigure(
+            EditorView.contentAttributes.of({
+              "aria-label": ariaLabel,
+              "aria-disabled": disabled ? "true" : "false",
+              "aria-readonly": readOnly ? "true" : "false",
+              spellcheck: "false",
+              autocapitalize: "off",
+              autocomplete: "off"
+            })
+          )
+        ]
+      });
+    }, [ariaLabel, closeHover, disabled, readOnly, safeMinHeight]);
+    useEffect(() => {
+      const view = viewRef.current;
+      if (!view || destroyedRef.current) {
+        return;
+      }
+      const currentSnapshot = variablesSnapshotRef.current;
+      if (variablesEqual(currentSnapshot.variables, variables)) {
+        return;
+      }
+      closeHover();
+      activeTokenKeyRef.current = null;
+      lastPointerTokenKeyRef.current = null;
+      const nextVersion = currentSnapshot.version + 1;
+      variablesSnapshotRef.current = {
+        variables,
+        version: nextVersion
+      };
+      tokenIndexRef.current = {
+        doc: view.state.doc.toString(),
+        variablesVersion: nextVersion,
+        tokens: []
+      };
+      view.dispatch({
+        annotations: VariablesSnapshotUpdate.of(nextVersion)
+      });
+      view.dispatch({
+        effects: variableCompletionCompartmentRef.current.reconfigure(
+          createVariableCompletionExtension(variables)
+        )
+      });
+    }, [closeHover, variables]);
+    useEffect(() => {
+      const view = viewRef.current;
+      if (!view || destroyedRef.current) {
+        return;
+      }
+      view.dispatch({
+        effects: placeholderCompartmentRef.current.reconfigure(
+          placeholder$1 ? placeholder(placeholder$1) : []
+        )
+      });
+    }, [placeholder$1]);
+    useLayoutEffect(() => {
+      if (!hover) {
+        tooltipResizeObserverRef.current?.disconnect();
+        tooltipResizeObserverRef.current = null;
+        setPopoverPosition(null);
+        return;
+      }
+      setPopoverPosition(null);
+      repositionPopover();
+      if (typeof ResizeObserver !== "undefined" && tooltipRef.current) {
+        tooltipResizeObserverRef.current?.disconnect();
+        const observer = new ResizeObserver(() => {
+          schedulePopoverReposition();
+        });
+        observer.observe(tooltipRef.current);
+        tooltipResizeObserverRef.current = observer;
+      }
+      return () => {
+        tooltipResizeObserverRef.current?.disconnect();
+        tooltipResizeObserverRef.current = null;
+      };
+    }, [hover?.tokenKey, repositionPopover, schedulePopoverReposition]);
+    useEffect(() => {
+      if (!hover?.tokenKey) {
+        return;
+      }
+      const reposition = () => {
+        if (destroyedRef.current || repositionRafRef.current !== null) {
+          return;
+        }
+        const view = viewRef.current;
+        const latestHover = hoverRef.current;
+        if (!view || !latestHover || view.state.doc.length === 0) {
+          closeHover();
+          return;
+        }
+        repositionRafRef.current = window.requestAnimationFrame(() => {
+          repositionRafRef.current = null;
+          if (destroyedRef.current) {
+            return;
+          }
+          const view2 = viewRef.current;
+          const latestHover2 = hoverRef.current;
+          if (!view2 || !latestHover2) {
+            closeHover();
+            return;
+          }
+          const tokens = getTokensCurrent(view2);
+          const latest = tokens.find(
+            (token) => `${token.from}:${token.to}:${token.name}` === latestHover2.tokenKey
+          );
+          if (!latest) {
+            closeHover();
+            return;
+          }
+          const rect = fullLineTokenRectFromView(view2, latest.from, latest.to);
+          if (!rect) {
+            closeHover();
+            return;
+          }
+          if (!sameRect(latestHover2.rect, rect)) {
+            commitHover({
+              tokenKey: latestHover2.tokenKey,
+              rect,
+              from: latest.from,
+              to: latest.to,
+              name: latest.name,
+              variable: latest.variable
+            });
+          }
+          repositionPopover();
+        });
+      };
+      window.addEventListener("resize", reposition, { passive: true });
+      window.addEventListener("scroll", reposition, {
+        passive: true,
+        capture: true
+      });
+      return () => {
+        window.removeEventListener("resize", reposition);
+        window.removeEventListener("scroll", reposition, true);
+        cancelRepositionFrame();
+      };
+    }, [
+      cancelRepositionFrame,
+      closeHover,
+      commitHover,
+      fullLineTokenRectFromView,
+      getTokensCurrent,
+      hover?.tokenKey,
+      repositionPopover,
+      sameRect
+    ]);
+    const popoverStyle = useMemo(() => {
+      if (!popoverPosition) {
+        return {
+          position: "fixed",
+          zIndex: 999999,
+          pointerEvents: "auto",
+          left: 0,
+          top: 0,
+          visibility: "hidden"
+        };
+      }
+      return {
+        position: "fixed",
+        zIndex: 999999,
+        pointerEvents: "auto",
+        left: popoverPosition.left,
+        top: popoverPosition.top,
+        visibility: "visible",
+        "--popover-arrow-left": `${popoverPosition.arrowLeft}px`
+      };
+    }, [popoverPosition]);
+    const popoverNode = hover ? /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref: tooltipRef,
+        className: VariableTextEditor_default.hoverPopover,
+        style: popoverStyle,
+        "data-placement": popoverPosition?.placement ?? "bottom",
+        onPointerEnter: handleTooltipPointerEnter,
+        onPointerLeave: handleTooltipPointerLeave,
+        onPointerDown: markPopoverPointerDown,
+        children: [
+          /* @__PURE__ */ jsx(Box, { className: VariableTextEditor_default.hoverPopoverArrow }),
+          /* @__PURE__ */ jsx(Box, { className: VariableTextEditor_default.popoverHeader, children: hover.variable?.name ?? hover.name }),
+          /* @__PURE__ */ jsx(Box, { className: VariableTextEditor_default.popoverType, children: hover.variable?.type ?? "Undefined variable" }),
+          hover.variable?.value !== void 0 ? /* @__PURE__ */ jsx("div", { className: VariableTextEditor_default.popoverValue, children: hover.variable.value }) : null,
+          hover.variable?.description ? /* @__PURE__ */ jsx(Box, { className: VariableTextEditor_default.popoverDesc, children: hover.variable.description }) : !hover.variable ? /* @__PURE__ */ jsx(Box, { className: VariableTextEditor_default.popoverDesc, children: "This variable is not defined in the current environment." }) : null
+        ]
+      }
+    ) : null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: anchorRef,
+        style: {
+          minWidth: 0,
+          width: "100%",
+          height: expansionMode === "overlay" ? safeMinHeight : void 0
+        },
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            ref: hostRef,
+            className: [VariableTextEditor_default.root, className ?? ""].filter(Boolean).join(" "),
+            style: { ...rootStyle, ...overlayStyle },
+            "data-focused": focused ? "" : void 0,
+            "data-wrapped": focused && wrapped ? "" : void 0,
+            "data-multiline": allowLineBreaks ? "" : void 0,
+            "data-disabled": disabled ? "" : void 0,
+            "data-readonly": readOnly ? "" : void 0,
+            onPointerEnter: handleHostPointerEnter,
+            onPointerMove: handlePointerMove,
+            onPointerLeave: handleHostPointerLeave,
+            children: popoverNode
+          }
+        )
+      }
+    );
+  }
+);
+VariableTextEditor.displayName = "VariableTextEditor";
+
+export { VariableTextEditor };