@likec4/diagram 1.0.0-next.1 → 1.0.0-next.11

package/dist/cjs/index.cjs

@@ -0,0 +1,4596 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const core$1 = require("@likec4/core");
+const core = require("@mantine/core");
+const react = require("react");
+const react$1 = require("@xyflow/react");
+const clsx = require("clsx");
+const reactTracked = require("react-tracked");
+const framerMotion = require("framer-motion");
+var scope = "_2t65ix0";
+function useSyncedRef(value) {
+  const ref = react.useRef(value);
+  ref.current = value;
+  return react.useMemo(() => Object.freeze({
+    get current() {
+      return ref.current;
+    }
+  }), []);
+}
+function useUnmountEffect(effect) {
+  const effectRef = useSyncedRef(effect);
+  react.useEffect(() => () => {
+    effectRef.current();
+  }, []);
+}
+function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
+  const timeout = react.useRef();
+  const waitTimeout = react.useRef();
+  const cb = react.useRef(callback);
+  const lastCall = react.useRef();
+  const clear = () => {
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+      timeout.current = void 0;
+    }
+    if (waitTimeout.current) {
+      clearTimeout(waitTimeout.current);
+      waitTimeout.current = void 0;
+    }
+  };
+  useUnmountEffect(clear);
+  react.useEffect(() => {
+    cb.current = callback;
+  }, deps);
+  return react.useMemo(() => {
+    const execute = () => {
+      clear();
+      if (!lastCall.current)
+        return;
+      const context = lastCall.current;
+      lastCall.current = void 0;
+      cb.current.apply(context.this, context.args);
+    };
+    const wrapped = function(...args) {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+      lastCall.current = { args, this: this };
+      timeout.current = setTimeout(execute, delay);
+      if (maxWait > 0 && !waitTimeout.current) {
+        waitTimeout.current = setTimeout(execute, maxWait);
+      }
+    };
+    Object.defineProperties(wrapped, {
+      length: { value: callback.length },
+      name: { value: `${callback.name || "anonymous"}__debounced__${delay}` }
+    });
+    return wrapped;
+  }, [delay, maxWait, ...deps]);
+}
+const isBrowser = typeof window !== "undefined" && typeof navigator !== "undefined" && typeof document !== "undefined";
+const basicDepsComparator = (d1, d2) => {
+  if (d1 === d2)
+    return true;
+  if (d1.length !== d2.length)
+    return false;
+  for (const [i, element] of d1.entries()) {
+    if (element !== d2[i]) {
+      return false;
+    }
+  }
+  return true;
+};
+function useCustomCompareEffect(callback, deps, comparator = basicDepsComparator, effectHook = react.useEffect, ...effectHookRestArgs) {
+  const dependencies = react.useRef();
+  if (dependencies.current === void 0 || isBrowser && !comparator(dependencies.current, deps)) {
+    dependencies.current = deps;
+  }
+  effectHook(callback, dependencies.current, ...effectHookRestArgs);
+}
+function useDebouncedEffect(callback, deps, delay, maxWait = 0) {
+  react.useEffect(useDebouncedCallback(callback, deps, delay, maxWait), deps);
+}
+function resolveHookState(nextState, previousState) {
+  if (typeof nextState === "function")
+    return nextState(previousState);
+  return nextState;
+}
+const useCustomCompareMemo = (factory, deps, comparator) => {
+  const dependencies = react.useRef();
+  if (dependencies.current === void 0 || !comparator(dependencies.current, deps)) {
+    dependencies.current = deps;
+  }
+  return react.useMemo(factory, dependencies.current);
+};
+function useToggle(initialState = false, ignoreReactEvents = true) {
+  const [state, setState] = react.useState(initialState);
+  const ignoreReactEventsRef = useSyncedRef(ignoreReactEvents);
+  return [
+    state,
+    react.useCallback((nextState) => {
+      setState((previousState) => {
+        if (nextState === void 0 || ignoreReactEventsRef.current && typeof nextState === "object" && (nextState.constructor.name === "SyntheticBaseEvent" || typeof nextState._reactName === "string")) {
+          return !previousState;
+        }
+        return Boolean(resolveHookState(nextState, previousState));
+      });
+    }, [])
+  ];
+}
+var getOwnPropertyNames = Object.getOwnPropertyNames, getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+function combineComparators(comparatorA, comparatorB) {
+  return function isEqual(a, b, state) {
+    return comparatorA(a, b, state) && comparatorB(a, b, state);
+  };
+}
+function createIsCircular(areItemsEqual) {
+  return function isCircular(a, b, state) {
+    if (!a || !b || typeof a !== "object" || typeof b !== "object") {
+      return areItemsEqual(a, b, state);
+    }
+    var cache = state.cache;
+    var cachedA = cache.get(a);
+    var cachedB = cache.get(b);
+    if (cachedA && cachedB) {
+      return cachedA === b && cachedB === a;
+    }
+    cache.set(a, b);
+    cache.set(b, a);
+    var result = areItemsEqual(a, b, state);
+    cache.delete(a);
+    cache.delete(b);
+    return result;
+  };
+}
+function getStrictProperties(object) {
+  return getOwnPropertyNames(object).concat(getOwnPropertySymbols(object));
+}
+var hasOwn = Object.hasOwn || function(object, property) {
+  return hasOwnProperty.call(object, property);
+};
+function sameValueZeroEqual(a, b) {
+  return a || b ? a === b : a === b || a !== a && b !== b;
+}
+var OWNER = "_owner";
+var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor, keys$1 = Object.keys;
+function areArraysEqual(a, b, state) {
+  var index = a.length;
+  if (b.length !== index) {
+    return false;
+  }
+  while (index-- > 0) {
+    if (!state.equals(a[index], b[index], index, index, a, b, state)) {
+      return false;
+    }
+  }
+  return true;
+}
+function areDatesEqual(a, b) {
+  return sameValueZeroEqual(a.getTime(), b.getTime());
+}
+function areMapsEqual(a, b, state) {
+  if (a.size !== b.size) {
+    return false;
+  }
+  var matchedIndices = {};
+  var aIterable = a.entries();
+  var index = 0;
+  var aResult;
+  var bResult;
+  while (aResult = aIterable.next()) {
+    if (aResult.done) {
+      break;
+    }
+    var bIterable = b.entries();
+    var hasMatch = false;
+    var matchIndex = 0;
+    while (bResult = bIterable.next()) {
+      if (bResult.done) {
+        break;
+      }
+      var _a = aResult.value, aKey = _a[0], aValue = _a[1];
+      var _b = bResult.value, bKey = _b[0], bValue = _b[1];
+      if (!hasMatch && !matchedIndices[matchIndex] && (hasMatch = state.equals(aKey, bKey, index, matchIndex, a, b, state) && state.equals(aValue, bValue, aKey, bKey, a, b, state))) {
+        matchedIndices[matchIndex] = true;
+      }
+      matchIndex++;
+    }
+    if (!hasMatch) {
+      return false;
+    }
+    index++;
+  }
+  return true;
+}
+function areObjectsEqual(a, b, state) {
+  var properties = keys$1(a);
+  var index = properties.length;
+  if (keys$1(b).length !== index) {
+    return false;
+  }
+  var property;
+  while (index-- > 0) {
+    property = properties[index];
+    if (property === OWNER && (a.$$typeof || b.$$typeof) && a.$$typeof !== b.$$typeof) {
+      return false;
+    }
+    if (!hasOwn(b, property) || !state.equals(a[property], b[property], property, property, a, b, state)) {
+      return false;
+    }
+  }
+  return true;
+}
+function areObjectsEqualStrict(a, b, state) {
+  var properties = getStrictProperties(a);
+  var index = properties.length;
+  if (getStrictProperties(b).length !== index) {
+    return false;
+  }
+  var property;
+  var descriptorA;
+  var descriptorB;
+  while (index-- > 0) {
+    property = properties[index];
+    if (property === OWNER && (a.$$typeof || b.$$typeof) && a.$$typeof !== b.$$typeof) {
+      return false;
+    }
+    if (!hasOwn(b, property)) {
+      return false;
+    }
+    if (!state.equals(a[property], b[property], property, property, a, b, state)) {
+      return false;
+    }
+    descriptorA = getOwnPropertyDescriptor(a, property);
+    descriptorB = getOwnPropertyDescriptor(b, property);
+    if ((descriptorA || descriptorB) && (!descriptorA || !descriptorB || descriptorA.configurable !== descriptorB.configurable || descriptorA.enumerable !== descriptorB.enumerable || descriptorA.writable !== descriptorB.writable)) {
+      return false;
+    }
+  }
+  return true;
+}
+function arePrimitiveWrappersEqual(a, b) {
+  return sameValueZeroEqual(a.valueOf(), b.valueOf());
+}
+function areRegExpsEqual(a, b) {
+  return a.source === b.source && a.flags === b.flags;
+}
+function areSetsEqual(a, b, state) {
+  if (a.size !== b.size) {
+    return false;
+  }
+  var matchedIndices = {};
+  var aIterable = a.values();
+  var aResult;
+  var bResult;
+  while (aResult = aIterable.next()) {
+    if (aResult.done) {
+      break;
+    }
+    var bIterable = b.values();
+    var hasMatch = false;
+    var matchIndex = 0;
+    while (bResult = bIterable.next()) {
+      if (bResult.done) {
+        break;
+      }
+      if (!hasMatch && !matchedIndices[matchIndex] && (hasMatch = state.equals(aResult.value, bResult.value, aResult.value, bResult.value, a, b, state))) {
+        matchedIndices[matchIndex] = true;
+      }
+      matchIndex++;
+    }
+    if (!hasMatch) {
+      return false;
+    }
+  }
+  return true;
+}
+function areTypedArraysEqual(a, b) {
+  var index = a.length;
+  if (b.length !== index) {
+    return false;
+  }
+  while (index-- > 0) {
+    if (a[index] !== b[index]) {
+      return false;
+    }
+  }
+  return true;
+}
+var ARGUMENTS_TAG = "[object Arguments]";
+var BOOLEAN_TAG = "[object Boolean]";
+var DATE_TAG = "[object Date]";
+var MAP_TAG = "[object Map]";
+var NUMBER_TAG = "[object Number]";
+var OBJECT_TAG = "[object Object]";
+var REG_EXP_TAG = "[object RegExp]";
+var SET_TAG = "[object Set]";
+var STRING_TAG = "[object String]";
+var isArray = Array.isArray;
+var isTypedArray = typeof ArrayBuffer === "function" && ArrayBuffer.isView ? ArrayBuffer.isView : null;
+var assign = Object.assign;
+var getTag = Object.prototype.toString.call.bind(Object.prototype.toString);
+function createEqualityComparator(_a) {
+  var areArraysEqual2 = _a.areArraysEqual, areDatesEqual2 = _a.areDatesEqual, areMapsEqual2 = _a.areMapsEqual, areObjectsEqual2 = _a.areObjectsEqual, arePrimitiveWrappersEqual2 = _a.arePrimitiveWrappersEqual, areRegExpsEqual2 = _a.areRegExpsEqual, areSetsEqual2 = _a.areSetsEqual, areTypedArraysEqual2 = _a.areTypedArraysEqual;
+  return function comparator(a, b, state) {
+    if (a === b) {
+      return true;
+    }
+    if (a == null || b == null || typeof a !== "object" || typeof b !== "object") {
+      return a !== a && b !== b;
+    }
+    var constructor = a.constructor;
+    if (constructor !== b.constructor) {
+      return false;
+    }
+    if (constructor === Object) {
+      return areObjectsEqual2(a, b, state);
+    }
+    if (isArray(a)) {
+      return areArraysEqual2(a, b, state);
+    }
+    if (isTypedArray != null && isTypedArray(a)) {
+      return areTypedArraysEqual2(a, b, state);
+    }
+    if (constructor === Date) {
+      return areDatesEqual2(a, b, state);
+    }
+    if (constructor === RegExp) {
+      return areRegExpsEqual2(a, b, state);
+    }
+    if (constructor === Map) {
+      return areMapsEqual2(a, b, state);
+    }
+    if (constructor === Set) {
+      return areSetsEqual2(a, b, state);
+    }
+    var tag = getTag(a);
+    if (tag === DATE_TAG) {
+      return areDatesEqual2(a, b, state);
+    }
+    if (tag === REG_EXP_TAG) {
+      return areRegExpsEqual2(a, b, state);
+    }
+    if (tag === MAP_TAG) {
+      return areMapsEqual2(a, b, state);
+    }
+    if (tag === SET_TAG) {
+      return areSetsEqual2(a, b, state);
+    }
+    if (tag === OBJECT_TAG) {
+      return typeof a.then !== "function" && typeof b.then !== "function" && areObjectsEqual2(a, b, state);
+    }
+    if (tag === ARGUMENTS_TAG) {
+      return areObjectsEqual2(a, b, state);
+    }
+    if (tag === BOOLEAN_TAG || tag === NUMBER_TAG || tag === STRING_TAG) {
+      return arePrimitiveWrappersEqual2(a, b, state);
+    }
+    return false;
+  };
+}
+function createEqualityComparatorConfig(_a) {
+  var circular = _a.circular, createCustomConfig = _a.createCustomConfig, strict = _a.strict;
+  var config = {
+    areArraysEqual: strict ? areObjectsEqualStrict : areArraysEqual,
+    areDatesEqual,
+    areMapsEqual: strict ? combineComparators(areMapsEqual, areObjectsEqualStrict) : areMapsEqual,
+    areObjectsEqual: strict ? areObjectsEqualStrict : areObjectsEqual,
+    arePrimitiveWrappersEqual,
+    areRegExpsEqual,
+    areSetsEqual: strict ? combineComparators(areSetsEqual, areObjectsEqualStrict) : areSetsEqual,
+    areTypedArraysEqual: strict ? areObjectsEqualStrict : areTypedArraysEqual
+  };
+  if (createCustomConfig) {
+    config = assign({}, config, createCustomConfig(config));
+  }
+  if (circular) {
+    var areArraysEqual$1 = createIsCircular(config.areArraysEqual);
+    var areMapsEqual$1 = createIsCircular(config.areMapsEqual);
+    var areObjectsEqual$1 = createIsCircular(config.areObjectsEqual);
+    var areSetsEqual$1 = createIsCircular(config.areSetsEqual);
+    config = assign({}, config, {
+      areArraysEqual: areArraysEqual$1,
+      areMapsEqual: areMapsEqual$1,
+      areObjectsEqual: areObjectsEqual$1,
+      areSetsEqual: areSetsEqual$1
+    });
+  }
+  return config;
+}
+function createInternalEqualityComparator(compare) {
+  return function(a, b, _indexOrKeyA, _indexOrKeyB, _parentA, _parentB, state) {
+    return compare(a, b, state);
+  };
+}
+function createIsEqual(_a) {
+  var circular = _a.circular, comparator = _a.comparator, createState = _a.createState, equals = _a.equals, strict = _a.strict;
+  if (createState) {
+    return function isEqual(a, b) {
+      var _a2 = createState(), _b = _a2.cache, cache = _b === void 0 ? circular ? /* @__PURE__ */ new WeakMap() : void 0 : _b, meta = _a2.meta;
+      return comparator(a, b, {
+        cache,
+        equals,
+        meta,
+        strict
+      });
+    };
+  }
+  if (circular) {
+    return function isEqual(a, b) {
+      return comparator(a, b, {
+        cache: /* @__PURE__ */ new WeakMap(),
+        equals,
+        meta: void 0,
+        strict
+      });
+    };
+  }
+  var state = {
+    cache: void 0,
+    equals,
+    meta: void 0,
+    strict
+  };
+  return function isEqual(a, b) {
+    return comparator(a, b, state);
+  };
+}
+var deepEqual = createCustomEqual();
+createCustomEqual({ strict: true });
+createCustomEqual({ circular: true });
+createCustomEqual({
+  circular: true,
+  strict: true
+});
+var shallowEqual = createCustomEqual({
+  createInternalComparator: function() {
+    return sameValueZeroEqual;
+  }
+});
+createCustomEqual({
+  strict: true,
+  createInternalComparator: function() {
+    return sameValueZeroEqual;
+  }
+});
+createCustomEqual({
+  circular: true,
+  createInternalComparator: function() {
+    return sameValueZeroEqual;
+  }
+});
+createCustomEqual({
+  circular: true,
+  createInternalComparator: function() {
+    return sameValueZeroEqual;
+  },
+  strict: true
+});
+function createCustomEqual(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  var _a = options.circular, circular = _a === void 0 ? false : _a, createCustomInternalComparator = options.createInternalComparator, createState = options.createState, _b = options.strict, strict = _b === void 0 ? false : _b;
+  var config = createEqualityComparatorConfig(options);
+  var comparator = createEqualityComparator(config);
+  var equals = createCustomInternalComparator ? createCustomInternalComparator(comparator) : createInternalEqualityComparator(comparator);
+  return createIsEqual({ circular, comparator, createState, equals, strict });
+}
+var modalContent = "_1yqpph0";
+var modalBody = "_1yqpph1";
+var modalHeader = "_1yqpph2";
+var modalCloseButtonBox = "_1yqpph3";
+var modalCloseButton = "_1yqpph4";
+function useSetState(initialState) {
+  const [state, _setState] = react.useState(initialState);
+  const setState = react.useCallback(
+    (statePartial) => _setState((current) => {
+      const next = {
+        ...current,
+        ...typeof statePartial === "function" ? statePartial(current) : statePartial
+      };
+      return shallowEqual(current, next) ? current : next;
+    }),
+    []
+  );
+  return [state, setState];
+}
+function useUpdateEffect(callback, deps) {
+  const render = react.useRef(false);
+  const effect = react.useRef(false);
+  useCustomCompareEffect(
+    () => {
+      const mounted = render.current;
+      const run = mounted && effect.current;
+      if (run) {
+        return callback();
+      }
+      effect.current = true;
+    },
+    deps,
+    shallowEqual
+  );
+  react.useEffect(() => {
+    render.current = true;
+    return () => {
+      render.current = false;
+    };
+  }, []);
+}
+var cssReactFlow = "_2h8g8h0";
+var cssDisablePan = "_2h8g8h1";
+var cssTransparentBg = "_2h8g8h2";
+var cssNoControls = "_2h8g8h3";
+const theme = core.createTheme({
+  primaryColor: "indigo",
+  cursorType: "pointer",
+  headings: {
+    fontWeight: "500",
+    sizes: {
+      h1: {
+        // fontSize: '2rem',
+        fontWeight: "600"
+      },
+      h2: {
+        // fontSize: '1.85rem',
+      }
+    }
+  }
+});
+function EnsureMantine({ colorMode, children }) {
+  const mantineCtx = react.useContext(core.MantineContext);
+  if (mantineCtx) {
+    mantineCtx.getRootElement;
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.MantineProvider,
+    {
+      ...colorMode && {
+        forceColorScheme: colorMode
+      },
+      theme,
+      defaultColorScheme: "auto",
+      children
+    }
+  );
+}
+const useDiagramStateValue = ({
+  isNodeInteractive,
+  view,
+  fitViewPadding,
+  readonly,
+  disableHovercards,
+  eventHandlers
+}) => {
+  const hasEventHandlers = {
+    hasOnChange: !!eventHandlers.onChange,
+    hasOnNavigateTo: !!eventHandlers.onNavigateTo,
+    hasOnNodeClick: !!eventHandlers.onNodeClick,
+    hasOnNodeContextMenu: !!eventHandlers.onNodeContextMenu,
+    hasOnCanvasContextMenu: !!eventHandlers.onCanvasContextMenu,
+    hasOnEdgeContextMenu: !!eventHandlers.onEdgeContextMenu,
+    hasOnContextMenu: !!eventHandlers.onNodeContextMenu || !!eventHandlers.onCanvasContextMenu || !!eventHandlers.onEdgeContextMenu,
+    hasOnEdgeClick: !!eventHandlers.onEdgeClick,
+    hasOnCanvasClick: !!eventHandlers.onCanvasClick || !!eventHandlers.onCanvasDblClick
+  };
+  const [state, setState] = useSetState({
+    viewportInitialized: false,
+    // User moved the viewport
+    viewportMoved: false,
+    hoveredNodeId: null,
+    hoveredEdgeId: null
+  });
+  const readonlyProps = {
+    readonly,
+    disableHovercards,
+    isNodeInteractive,
+    viewId: view.id,
+    viewLayout: view.autoLayout,
+    viewWidth: view.width,
+    viewHeight: view.height,
+    fitViewPadding
+  };
+  const _state = useCustomCompareMemo(
+    () => ({
+      ...readonlyProps,
+      ...hasEventHandlers,
+      ...state
+    }),
+    [state, readonlyProps, hasEventHandlers],
+    shallowEqual
+  );
+  return [_state, setState];
+};
+const {
+  Provider: DiagramStateProvider,
+  useTracked: useDiagramStateTracked,
+  useTrackedState: useDiagramState,
+  useUpdate: useUpdateDiagramState,
+  useSelector: useDiagramStateSelector
+} = /* @__PURE__ */ reactTracked.createContainer(useDiagramStateValue, {
+  concurrentMode: false,
+  stateContextName: "DiagramStateContext"
+});
+var wrapper = "_14qhjro0";
+function KeepAspectRatio({
+  children,
+  width,
+  height,
+  enabled,
+  className,
+  style,
+  ...rest
+}) {
+  if (!enabled) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Box,
+    {
+      ...rest,
+      className: clsx(wrapper, className),
+      style: {
+        ...style,
+        aspectRatio: `${width}/${height}`,
+        maxHeight: height
+      },
+      children
+    }
+  );
+}
+var __spreadArray = function(to, from, pack) {
+  if (pack || arguments.length === 2)
+    for (var i = 0, l = from.length, ar; i < l; i++) {
+      if (ar || !(i in from)) {
+        if (!ar)
+          ar = Array.prototype.slice.call(from, 0, i);
+        ar[i] = from[i];
+      }
+    }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+function purry(fn, args, lazyFactory) {
+  var callArgs = Array.from(args);
+  var diff = fn.length - args.length;
+  if (diff === 0) {
+    return fn.apply(void 0, callArgs);
+  }
+  if (diff === 1) {
+    var ret = function(data) {
+      return fn.apply(void 0, __spreadArray([data], callArgs, false));
+    };
+    var lazy = lazyFactory !== null && lazyFactory !== void 0 ? lazyFactory : fn.lazy;
+    return lazy === void 0 ? ret : Object.assign(ret, { lazy, lazyArgs: args });
+  }
+  throw new Error("Wrong number of arguments");
+}
+function isTruthy(data) {
+  return Boolean(data);
+}
+function hasAtLeast() {
+  var args = [];
+  for (var _i = 0; _i < arguments.length; _i++) {
+    args[_i] = arguments[_i];
+  }
+  return purry(hasAtLeastImplementation, args);
+}
+var hasAtLeastImplementation = function(data, minimum) {
+  return data.length >= minimum;
+};
+function isNullish(data) {
+  return data === null || data === void 0;
+}
+function keys() {
+  return purry(Object.keys, arguments);
+}
+(function(keys2) {
+  keys2.strict = keys2;
+})(keys || (keys = {}));
+function takeWhile() {
+  return purry(_takeWhile, arguments);
+}
+function _takeWhile(array, fn) {
+  var ret = [];
+  for (var _i = 0, array_1 = array; _i < array_1.length; _i++) {
+    var item = array_1[_i];
+    if (!fn(item)) {
+      break;
+    }
+    ret.push(item);
+  }
+  return ret;
+}
+var XYFlowNode;
+((XYFlowNode2) => {
+  function isCompound(node) {
+    return react$1.isNode(node) && node.type === "compound";
+  }
+  XYFlowNode2.isCompound = isCompound;
+  function isElement(node) {
+    return react$1.isNode(node) && node.type === "element";
+  }
+  XYFlowNode2.isElement = isElement;
+  XYFlowNode2.is = (node) => isCompound(node) || isElement(node);
+})(XYFlowNode || (XYFlowNode = {}));
+var XYFlowEdge;
+((XYFlowEdge2) => {
+  XYFlowEdge2.isRelationship = (e) => e.type === "relationship" && isTruthy(e.data);
+})(XYFlowEdge || (XYFlowEdge = {}));
+function createMap() {
+  return new IndexedMap();
+}
+class IndexedMap {
+  constructor() {
+    __publicField(this, "index", {});
+    __publicField(this, "array", []);
+  }
+  /**
+   * Returns the number of items in the array.
+   */
+  size() {
+    return this.array.length;
+  }
+  /**
+   * Returns true if the array is empty.
+   */
+  empty() {
+    return this.array.length === 0;
+  }
+  /**
+   * Returns the item at the given array index.
+   *
+   * @param index The integer index of the desired item.
+   */
+  itemAt(index) {
+    return this.array[index];
+  }
+  /**
+   * Returns true if the key is in the array, false otherwise.
+   *
+   * @param key The key to locate in the array.
+   */
+  contains(key) {
+    return this.index[key.id()] !== void 0;
+  }
+  /**
+   * Returns the pair associated with the given key, or undefined.
+   *
+   * @param key The key to locate in the array.
+   */
+  find(key) {
+    const i = this.index[key.id()];
+    return i === void 0 ? void 0 : this.array[i];
+  }
+  /**
+   * Returns the pair associated with the key if it exists.
+   *
+   * If the key does not exist, a new pair will be created and
+   * inserted using the value created by the given factory.
+   *
+   * @param key The key to locate in the array.
+   * @param factory The function which creates the default value.
+   */
+  setDefault(key, factory) {
+    const i = this.index[key.id()];
+    if (i === void 0) {
+      const pair = new Pair(key, factory());
+      this.index[key.id()] = this.array.length;
+      this.array.push(pair);
+      return pair;
+    } else {
+      return this.array[i];
+    }
+  }
+  /**
+   * Insert the pair into the array and return the pair.
+   *
+   * This will overwrite any existing entry in the array.
+   *
+   * @param key The key portion of the pair.
+   * @param value The value portion of the pair.
+   */
+  insert(key, value) {
+    const pair = new Pair(key, value);
+    const i = this.index[key.id()];
+    if (i === void 0) {
+      this.index[key.id()] = this.array.length;
+      this.array.push(pair);
+    } else {
+      this.array[i] = pair;
+    }
+    return pair;
+  }
+  /**
+   * Removes and returns the pair for the given key, or undefined.
+   *
+   * @param key The key to remove from the map.
+   */
+  erase(key) {
+    const i = this.index[key.id()];
+    if (i === void 0) {
+      return void 0;
+    }
+    this.index[key.id()] = void 0;
+    const pair = this.array[i];
+    const last = this.array.pop();
+    if (pair !== last) {
+      this.array[i] = last;
+      this.index[last.first.id()] = i;
+    }
+    return pair;
+  }
+  /**
+   * Create a copy of this associative array.
+   */
+  copy() {
+    const copy = new IndexedMap();
+    for (let i = 0; i < this.array.length; i++) {
+      const pair = this.array[i].copy();
+      copy.array[i] = pair;
+      copy.index[pair.first.id()] = i;
+    }
+    return copy;
+  }
+}
+class Pair {
+  /**
+   * Construct a new Pair object.
+   *
+   * @param first The first item of the pair.
+   * @param second The second item of the pair.
+   */
+  constructor(first, second) {
+    __publicField(this, "first");
+    __publicField(this, "second");
+    this.first = first;
+    this.second = second;
+  }
+  /**
+   * Create a copy of the pair.
+   */
+  copy() {
+    return new Pair(this.first, this.second);
+  }
+}
+class Variable {
+  constructor(name = "") {
+    __publicField(this, "_name");
+    __publicField(this, "_value", 0);
+    __publicField(this, "_context", null);
+    __publicField(this, "_id", VarId++);
+    this._name = name;
+  }
+  /**
+   * Returns the unique id number of the variable.
+   * @private
+   */
+  id() {
+    return this._id;
+  }
+  /**
+   * Returns the name of the variable.
+   *
+   * @return {String} name of the variable
+   */
+  name() {
+    return this._name;
+  }
+  /**
+   * Set the name of the variable.
+   *
+   * @param {String} name Name of the variable
+   */
+  setName(name) {
+    this._name = name;
+  }
+  /**
+   * Returns the user context object of the variable.
+   * @private
+   */
+  context() {
+    return this._context;
+  }
+  /**
+   * Set the user context object of the variable.
+   * @private
+   */
+  setContext(context) {
+    this._context = context;
+  }
+  /**
+   * Returns the value of the variable.
+   *
+   * @return {Number} Calculated value
+   */
+  value() {
+    return this._value;
+  }
+  /**
+   * Set the value of the variable.
+   * @private
+   */
+  setValue(value) {
+    this._value = value;
+  }
+  /**
+   * Creates a new Expression by adding a number, variable or expression
+   * to the variable.
+   *
+   * @param {Number|Variable|Expression} value Value to add.
+   * @return {Expression} expression
+   */
+  plus(value) {
+    return new Expression(this, value);
+  }
+  /**
+   * Creates a new Expression by substracting a number, variable or expression
+   * from the variable.
+   *
+   * @param {Number|Variable|Expression} value Value to substract.
+   * @return {Expression} expression
+   */
+  minus(value) {
+    return new Expression(this, typeof value === "number" ? -value : [-1, value]);
+  }
+  /**
+   * Creates a new Expression by multiplying with a fixed number.
+   *
+   * @param {Number} coefficient Coefficient to multiply with.
+   * @return {Expression} expression
+   */
+  multiply(coefficient) {
+    return new Expression([coefficient, this]);
+  }
+  /**
+   * Creates a new Expression by dividing with a fixed number.
+   *
+   * @param {Number} coefficient Coefficient to divide by.
+   * @return {Expression} expression
+   */
+  divide(coefficient) {
+    return new Expression([1 / coefficient, this]);
+  }
+  /**
+   * Returns the JSON representation of the variable.
+   * @private
+   */
+  toJSON() {
+    return {
+      name: this._name,
+      value: this._value
+    };
+  }
+  toString() {
+    return this._context + "[" + this._name + ":" + this._value + "]";
+  }
+}
+let VarId = 0;
+class Expression {
+  constructor() {
+    __publicField(this, "_terms");
+    __publicField(this, "_constant");
+    let parsed = parseArgs(arguments);
+    this._terms = parsed.terms;
+    this._constant = parsed.constant;
+  }
+  /**
+   * Returns the mapping of terms in the expression.
+   *
+   * This *must* be treated as const.
+   * @private
+   */
+  terms() {
+    return this._terms;
+  }
+  /**
+   * Returns the constant of the expression.
+   * @private
+   */
+  constant() {
+    return this._constant;
+  }
+  /**
+   * Returns the computed value of the expression.
+   *
+   * @private
+   * @return {Number} computed value of the expression
+   */
+  value() {
+    let result = this._constant;
+    for (let i = 0, n = this._terms.size(); i < n; i++) {
+      let pair = this._terms.itemAt(i);
+      result += pair.first.value() * pair.second;
+    }
+    return result;
+  }
+  /**
+   * Creates a new Expression by adding a number, variable or expression
+   * to the expression.
+   *
+   * @param {Number|Variable|Expression} value Value to add.
+   * @return {Expression} expression
+   */
+  plus(value) {
+    return new Expression(this, value);
+  }
+  /**
+   * Creates a new Expression by substracting a number, variable or expression
+   * from the expression.
+   *
+   * @param {Number|Variable|Expression} value Value to substract.
+   * @return {Expression} expression
+   */
+  minus(value) {
+    return new Expression(this, typeof value === "number" ? -value : [-1, value]);
+  }
+  /**
+   * Creates a new Expression by multiplying with a fixed number.
+   *
+   * @param {Number} coefficient Coefficient to multiply with.
+   * @return {Expression} expression
+   */
+  multiply(coefficient) {
+    return new Expression([coefficient, this]);
+  }
+  /**
+   * Creates a new Expression by dividing with a fixed number.
+   *
+   * @param {Number} coefficient Coefficient to divide by.
+   * @return {Expression} expression
+   */
+  divide(coefficient) {
+    return new Expression([1 / coefficient, this]);
+  }
+  isConstant() {
+    return this._terms.size() == 0;
+  }
+  toString() {
+    let result = this._terms.array.map(function(pair) {
+      return pair.second + "*" + pair.first.toString();
+    }).join(" + ");
+    if (!this.isConstant() && this._constant !== 0) {
+      result += " + ";
+    }
+    result += this._constant;
+    return result;
+  }
+}
+function parseArgs(args) {
+  let constant = 0;
+  let factory = () => 0;
+  let terms = createMap();
+  for (let i = 0, n = args.length; i < n; ++i) {
+    let item = args[i];
+    if (typeof item === "number") {
+      constant += item;
+    } else if (item instanceof Variable) {
+      terms.setDefault(item, factory).second += 1;
+    } else if (item instanceof Expression) {
+      constant += item.constant();
+      let terms2 = item.terms();
+      for (let j = 0, k = terms2.size(); j < k; j++) {
+        let termPair = terms2.itemAt(j);
+        terms.setDefault(termPair.first, factory).second += termPair.second;
+      }
+    } else if (item instanceof Array) {
+      if (item.length !== 2) {
+        throw new Error("array must have length 2");
+      }
+      let value = item[0];
+      let value2 = item[1];
+      if (typeof value !== "number") {
+        throw new Error("array item 0 must be a number");
+      }
+      if (value2 instanceof Variable) {
+        terms.setDefault(value2, factory).second += value;
+      } else if (value2 instanceof Expression) {
+        constant += value2.constant() * value;
+        let terms2 = value2.terms();
+        for (let j = 0, k = terms2.size(); j < k; j++) {
+          let termPair = terms2.itemAt(j);
+          terms.setDefault(termPair.first, factory).second += termPair.second * value;
+        }
+      } else {
+        throw new Error("array item 1 must be a variable or expression");
+      }
+    } else {
+      throw new Error("invalid Expression argument: " + item);
+    }
+  }
+  return { terms, constant };
+}
+const _Strength = class _Strength {
+  /**
+   * Create a new symbolic strength.
+   *
+   * @param a strong
+   * @param b medium
+   * @param c weak
+   * @param [w] weight
+   * @return strength
+   */
+  static create(a, b, c, w = 1) {
+    let result = 0;
+    result += Math.max(0, Math.min(1e3, a * w)) * 1e6;
+    result += Math.max(0, Math.min(1e3, b * w)) * 1e3;
+    result += Math.max(0, Math.min(1e3, c * w));
+    return result;
+  }
+  /**
+   * Clip a symbolic strength to the allowed min and max.
+   * @private
+   */
+  static clip(value) {
+    return Math.max(0, Math.min(_Strength.required, value));
+  }
+};
+/**
+ * The 'required' symbolic strength.
+ */
+__publicField(_Strength, "required", _Strength.create(1e3, 1e3, 1e3));
+/**
+ * The 'strong' symbolic strength.
+ */
+__publicField(_Strength, "strong", _Strength.create(1, 0, 0));
+/**
+ * The 'medium' symbolic strength.
+ */
+__publicField(_Strength, "medium", _Strength.create(0, 1, 0));
+/**
+ * The 'weak' symbolic strength.
+ */
+__publicField(_Strength, "weak", _Strength.create(0, 0, 1));
+let Strength = _Strength;
+var Operator;
+(function(Operator2) {
+  Operator2[Operator2["Le"] = 0] = "Le";
+  Operator2[Operator2["Ge"] = 1] = "Ge";
+  Operator2[Operator2["Eq"] = 2] = "Eq";
+})(Operator || (Operator = {}));
+class Constraint {
+  constructor(expression, operator, rhs, strength = Strength.required) {
+    __publicField(this, "_expression");
+    __publicField(this, "_operator");
+    __publicField(this, "_strength");
+    __publicField(this, "_id", CnId++);
+    this._operator = operator;
+    this._strength = Strength.clip(strength);
+    if (rhs === void 0 && expression instanceof Expression) {
+      this._expression = expression;
+    } else {
+      this._expression = expression.minus(rhs);
+    }
+  }
+  /**
+   * Returns the unique id number of the constraint.
+   * @private
+   */
+  id() {
+    return this._id;
+  }
+  /**
+   * Returns the expression of the constraint.
+   *
+   * @return {Expression} expression
+   */
+  expression() {
+    return this._expression;
+  }
+  /**
+   * Returns the relational operator of the constraint.
+   *
+   * @return {Operator} linear constraint operator
+   */
+  op() {
+    return this._operator;
+  }
+  /**
+   * Returns the strength of the constraint.
+   *
+   * @return {Number} strength
+   */
+  strength() {
+    return this._strength;
+  }
+  toString() {
+    return this._expression.toString() + " " + ["<=", ">=", "="][this._operator] + " 0 (" + this._strength.toString() + ")";
+  }
+}
+let CnId = 0;
+class Solver {
+  /**
+   * Construct a new Solver.
+   */
+  constructor() {
+    /**
+     * @type {number} - The max number of solver iterations before an error
+     * is thrown, in order to prevent infinite iteration. Default: `10,000`.
+     */
+    __publicField(this, "maxIterations", 1e3);
+    __publicField(this, "_cnMap", createCnMap());
+    __publicField(this, "_rowMap", createRowMap());
+    __publicField(this, "_varMap", createVarMap());
+    __publicField(this, "_editMap", createEditMap());
+    __publicField(this, "_infeasibleRows", []);
+    __publicField(this, "_objective", new Row());
+    __publicField(this, "_artificial", null);
+    __publicField(this, "_idTick", 0);
+  }
+  /**
+   * Creates and add a constraint to the solver.
+   *
+   * @param {Expression|Variable} lhs Left hand side of the expression
+   * @param {Operator} operator Operator
+   * @param {Expression|Variable|Number} rhs Right hand side of the expression
+   * @param {Number} [strength=Strength.required] Strength
+   */
+  createConstraint(lhs, operator, rhs, strength = Strength.required) {
+    let cn = new Constraint(lhs, operator, rhs, strength);
+    this.addConstraint(cn);
+    return cn;
+  }
+  /**
+   * Add a constraint to the solver.
+   *
+   * @param {Constraint} constraint Constraint to add to the solver
+   */
+  addConstraint(constraint) {
+    let cnPair = this._cnMap.find(constraint);
+    if (cnPair !== void 0) {
+      throw new Error("duplicate constraint");
+    }
+    let data = this._createRow(constraint);
+    let row = data.row;
+    let tag = data.tag;
+    let subject = this._chooseSubject(row, tag);
+    if (subject.type() === SymbolType.Invalid && row.allDummies()) {
+      if (!nearZero(row.constant())) {
+        throw new Error("unsatisfiable constraint");
+      } else {
+        subject = tag.marker;
+      }
+    }
+    if (subject.type() === SymbolType.Invalid) {
+      if (!this._addWithArtificialVariable(row)) {
+        throw new Error("unsatisfiable constraint");
+      }
+    } else {
+      row.solveFor(subject);
+      this._substitute(subject, row);
+      this._rowMap.insert(subject, row);
+    }
+    this._cnMap.insert(constraint, tag);
+    this._optimize(this._objective);
+  }
+  /**
+   * Remove a constraint from the solver.
+   *
+   * @param {Constraint} constraint Constraint to remove from the solver
+   */
+  removeConstraint(constraint) {
+    let cnPair = this._cnMap.erase(constraint);
+    if (cnPair === void 0) {
+      throw new Error("unknown constraint");
+    }
+    this._removeConstraintEffects(constraint, cnPair.second);
+    let marker = cnPair.second.marker;
+    let rowPair = this._rowMap.erase(marker);
+    if (rowPair === void 0) {
+      let leaving = this._getMarkerLeavingSymbol(marker);
+      if (leaving.type() === SymbolType.Invalid) {
+        throw new Error("failed to find leaving row");
+      }
+      rowPair = this._rowMap.erase(leaving);
+      rowPair.second.solveForEx(leaving, marker);
+      this._substitute(marker, rowPair.second);
+    }
+    this._optimize(this._objective);
+  }
+  /**
+   * Test whether the solver contains the constraint.
+   *
+   * @param {Constraint} constraint Constraint to test for
+   * @return {Bool} true or false
+   */
+  hasConstraint(constraint) {
+    return this._cnMap.contains(constraint);
+  }
+  /**
+   * Get an array of the current constraints.
+   *
+   * @return {Constraint[]}
+   */
+  getConstraints() {
+    return this._cnMap.array.map(({ first }) => first);
+  }
+  /**
+   * Add an edit variable to the solver.
+   *
+   * @param {Variable} variable Edit variable to add to the solver
+   * @param {Number} strength Strength, should be less than `Strength.required`
+   */
+  addEditVariable(variable, strength) {
+    let editPair = this._editMap.find(variable);
+    if (editPair !== void 0) {
+      throw new Error("duplicate edit variable");
+    }
+    strength = Strength.clip(strength);
+    if (strength === Strength.required) {
+      throw new Error("bad required strength");
+    }
+    let expr = new Expression(variable);
+    let cn = new Constraint(expr, Operator.Eq, void 0, strength);
+    this.addConstraint(cn);
+    let tag = this._cnMap.find(cn).second;
+    let info = { tag, constraint: cn, constant: 0 };
+    this._editMap.insert(variable, info);
+  }
+  /**
+   * Remove an edit variable from the solver.
+   *
+   * @param {Variable} variable Edit variable to remove from the solver
+   */
+  removeEditVariable(variable) {
+    let editPair = this._editMap.erase(variable);
+    if (editPair === void 0) {
+      throw new Error("unknown edit variable");
+    }
+    this.removeConstraint(editPair.second.constraint);
+  }
+  /**
+   * Test whether the solver contains the edit variable.
+   *
+   * @param {Variable} variable Edit variable to test for
+   * @return {Bool} true or false
+   */
+  hasEditVariable(variable) {
+    return this._editMap.contains(variable);
+  }
+  /**
+   * Suggest the value of an edit variable.
+   *
+   * @param {Variable} variable Edit variable to suggest a value for
+   * @param {Number} value Suggested value
+   */
+  suggestValue(variable, value) {
+    let editPair = this._editMap.find(variable);
+    if (editPair === void 0) {
+      throw new Error("unknown edit variable");
+    }
+    let rows = this._rowMap;
+    let info = editPair.second;
+    let delta = value - info.constant;
+    info.constant = value;
+    let marker = info.tag.marker;
+    let rowPair = rows.find(marker);
+    if (rowPair !== void 0) {
+      if (rowPair.second.add(-delta) < 0) {
+        this._infeasibleRows.push(marker);
+      }
+      this._dualOptimize();
+      return;
+    }
+    let other = info.tag.other;
+    rowPair = rows.find(other);
+    if (rowPair !== void 0) {
+      if (rowPair.second.add(delta) < 0) {
+        this._infeasibleRows.push(other);
+      }
+      this._dualOptimize();
+      return;
+    }
+    for (let i = 0, n = rows.size(); i < n; ++i) {
+      let rowPair2 = rows.itemAt(i);
+      let row = rowPair2.second;
+      let coeff = row.coefficientFor(marker);
+      if (coeff !== 0 && row.add(delta * coeff) < 0 && rowPair2.first.type() !== SymbolType.External) {
+        this._infeasibleRows.push(rowPair2.first);
+      }
+    }
+    this._dualOptimize();
+  }
+  /**
+   * Update the values of the variables.
+   */
+  updateVariables() {
+    let vars2 = this._varMap;
+    let rows = this._rowMap;
+    for (let i = 0, n = vars2.size(); i < n; ++i) {
+      let pair = vars2.itemAt(i);
+      let rowPair = rows.find(pair.second);
+      if (rowPair !== void 0) {
+        pair.first.setValue(rowPair.second.constant());
+      } else {
+        pair.first.setValue(0);
+      }
+    }
+  }
+  /**
+   * Get the symbol for the given variable.
+   *
+   * If a symbol does not exist for the variable, one will be created.
+   * @private
+   */
+  _getVarSymbol(variable) {
+    let factory = () => this._makeSymbol(SymbolType.External);
+    return this._varMap.setDefault(variable, factory).second;
+  }
+  /**
+   * Create a new Row object for the given constraint.
+   *
+   * The terms in the constraint will be converted to cells in the row.
+   * Any term in the constraint with a coefficient of zero is ignored.
+   * This method uses the `_getVarSymbol` method to get the symbol for
+   * the variables added to the row. If the symbol for a given cell
+   * variable is basic, the cell variable will be substituted with the
+   * basic row.
+   *
+   * The necessary slack and error variables will be added to the row.
+   * If the constant for the row is negative, the sign for the row
+   * will be inverted so the constant becomes positive.
+   *
+   * Returns the created Row and the tag for tracking the constraint.
+   * @private
+   */
+  _createRow(constraint) {
+    let expr = constraint.expression();
+    let row = new Row(expr.constant());
+    let terms = expr.terms();
+    for (let i = 0, n = terms.size(); i < n; ++i) {
+      let termPair = terms.itemAt(i);
+      if (!nearZero(termPair.second)) {
+        let symbol = this._getVarSymbol(termPair.first);
+        let basicPair = this._rowMap.find(symbol);
+        if (basicPair !== void 0) {
+          row.insertRow(basicPair.second, termPair.second);
+        } else {
+          row.insertSymbol(symbol, termPair.second);
+        }
+      }
+    }
+    let objective = this._objective;
+    let strength = constraint.strength();
+    let tag = { marker: INVALID_SYMBOL, other: INVALID_SYMBOL };
+    switch (constraint.op()) {
+      case Operator.Le:
+      case Operator.Ge: {
+        let coeff = constraint.op() === Operator.Le ? 1 : -1;
+        let slack = this._makeSymbol(SymbolType.Slack);
+        tag.marker = slack;
+        row.insertSymbol(slack, coeff);
+        if (strength < Strength.required) {
+          let error = this._makeSymbol(SymbolType.Error);
+          tag.other = error;
+          row.insertSymbol(error, -coeff);
+          objective.insertSymbol(error, strength);
+        }
+        break;
+      }
+      case Operator.Eq: {
+        if (strength < Strength.required) {
+          let errplus = this._makeSymbol(SymbolType.Error);
+          let errminus = this._makeSymbol(SymbolType.Error);
+          tag.marker = errplus;
+          tag.other = errminus;
+          row.insertSymbol(errplus, -1);
+          row.insertSymbol(errminus, 1);
+          objective.insertSymbol(errplus, strength);
+          objective.insertSymbol(errminus, strength);
+        } else {
+          let dummy = this._makeSymbol(SymbolType.Dummy);
+          tag.marker = dummy;
+          row.insertSymbol(dummy);
+        }
+        break;
+      }
+    }
+    if (row.constant() < 0) {
+      row.reverseSign();
+    }
+    return { row, tag };
+  }
+  /**
+   * Choose the subject for solving for the row.
+   *
+   * This method will choose the best subject for using as the solve
+   * target for the row. An invalid symbol will be returned if there
+   * is no valid target.
+   *
+   * The symbols are chosen according to the following precedence:
+   *
+   * 1) The first symbol representing an external variable.
+   * 2) A negative slack or error tag variable.
+   *
+   * If a subject cannot be found, an invalid symbol will be returned.
+   *
+   * @private
+   */
+  _chooseSubject(row, tag) {
+    let cells = row.cells();
+    for (let i = 0, n = cells.size(); i < n; ++i) {
+      let pair = cells.itemAt(i);
+      if (pair.first.type() === SymbolType.External) {
+        return pair.first;
+      }
+    }
+    let type = tag.marker.type();
+    if (type === SymbolType.Slack || type === SymbolType.Error) {
+      if (row.coefficientFor(tag.marker) < 0) {
+        return tag.marker;
+      }
+    }
+    type = tag.other.type();
+    if (type === SymbolType.Slack || type === SymbolType.Error) {
+      if (row.coefficientFor(tag.other) < 0) {
+        return tag.other;
+      }
+    }
+    return INVALID_SYMBOL;
+  }
+  /**
+   * Add the row to the tableau using an artificial variable.
+   *
+   * This will return false if the constraint cannot be satisfied.
+   *
+   * @private
+   */
+  _addWithArtificialVariable(row) {
+    let art = this._makeSymbol(SymbolType.Slack);
+    this._rowMap.insert(art, row.copy());
+    this._artificial = row.copy();
+    this._optimize(this._artificial);
+    let success = nearZero(this._artificial.constant());
+    this._artificial = null;
+    let pair = this._rowMap.erase(art);
+    if (pair !== void 0) {
+      let basicRow = pair.second;
+      if (basicRow.isConstant()) {
+        return success;
+      }
+      let entering = this._anyPivotableSymbol(basicRow);
+      if (entering.type() === SymbolType.Invalid) {
+        return false;
+      }
+      basicRow.solveForEx(art, entering);
+      this._substitute(entering, basicRow);
+      this._rowMap.insert(entering, basicRow);
+    }
+    let rows = this._rowMap;
+    for (let i = 0, n = rows.size(); i < n; ++i) {
+      rows.itemAt(i).second.removeSymbol(art);
+    }
+    this._objective.removeSymbol(art);
+    return success;
+  }
+  /**
+   * Substitute the parametric symbol with the given row.
+   *
+   * This method will substitute all instances of the parametric symbol
+   * in the tableau and the objective function with the given row.
+   *
+   * @private
+   */
+  _substitute(symbol, row) {
+    let rows = this._rowMap;
+    for (let i = 0, n = rows.size(); i < n; ++i) {
+      let pair = rows.itemAt(i);
+      pair.second.substitute(symbol, row);
+      if (pair.second.constant() < 0 && pair.first.type() !== SymbolType.External) {
+        this._infeasibleRows.push(pair.first);
+      }
+    }
+    this._objective.substitute(symbol, row);
+    if (this._artificial) {
+      this._artificial.substitute(symbol, row);
+    }
+  }
+  /**
+   * Optimize the system for the given objective function.
+   *
+   * This method performs iterations of Phase 2 of the simplex method
+   * until the objective function reaches a minimum.
+   *
+   * @private
+   */
+  _optimize(objective) {
+    let iterations = 0;
+    while (iterations < this.maxIterations) {
+      let entering = this._getEnteringSymbol(objective);
+      if (entering.type() === SymbolType.Invalid) {
+        return;
+      }
+      let leaving = this._getLeavingSymbol(entering);
+      if (leaving.type() === SymbolType.Invalid) {
+        throw new Error("the objective is unbounded");
+      }
+      let row = this._rowMap.erase(leaving).second;
+      row.solveForEx(leaving, entering);
+      this._substitute(entering, row);
+      this._rowMap.insert(entering, row);
+      iterations++;
+    }
+    throw new Error("solver iterations exceeded");
+  }
+  /**
+   * Optimize the system using the dual of the simplex method.
+   *
+   * The current state of the system should be such that the objective
+   * function is optimal, but not feasible. This method will perform
+   * an iteration of the dual simplex method to make the solution both
+   * optimal and feasible.
+   *
+   * @private
+   */
+  _dualOptimize() {
+    let rows = this._rowMap;
+    let infeasible = this._infeasibleRows;
+    while (infeasible.length !== 0) {
+      let leaving = infeasible.pop();
+      let pair = rows.find(leaving);
+      if (pair !== void 0 && pair.second.constant() < 0) {
+        let entering = this._getDualEnteringSymbol(pair.second);
+        if (entering.type() === SymbolType.Invalid) {
+          throw new Error("dual optimize failed");
+        }
+        let row = pair.second;
+        rows.erase(leaving);
+        row.solveForEx(leaving, entering);
+        this._substitute(entering, row);
+        rows.insert(entering, row);
+      }
+    }
+  }
+  /**
+   * Compute the entering variable for a pivot operation.
+   *
+   * This method will return first symbol in the objective function which
+   * is non-dummy and has a coefficient less than zero. If no symbol meets
+   * the criteria, it means the objective function is at a minimum, and an
+   * invalid symbol is returned.
+   *
+   * @private
+   */
+  _getEnteringSymbol(objective) {
+    let cells = objective.cells();
+    for (let i = 0, n = cells.size(); i < n; ++i) {
+      let pair = cells.itemAt(i);
+      let symbol = pair.first;
+      if (pair.second < 0 && symbol.type() !== SymbolType.Dummy) {
+        return symbol;
+      }
+    }
+    return INVALID_SYMBOL;
+  }
+  /**
+   * Compute the entering symbol for the dual optimize operation.
+   *
+   * This method will return the symbol in the row which has a positive
+   * coefficient and yields the minimum ratio for its respective symbol
+   * in the objective function. The provided row *must* be infeasible.
+   * If no symbol is found which meats the criteria, an invalid symbol
+   * is returned.
+   *
+   * @private
+   */
+  _getDualEnteringSymbol(row) {
+    let ratio = Number.MAX_VALUE;
+    let entering = INVALID_SYMBOL;
+    let cells = row.cells();
+    for (let i = 0, n = cells.size(); i < n; ++i) {
+      let pair = cells.itemAt(i);
+      let symbol = pair.first;
+      let c = pair.second;
+      if (c > 0 && symbol.type() !== SymbolType.Dummy) {
+        let coeff = this._objective.coefficientFor(symbol);
+        let r = coeff / c;
+        if (r < ratio) {
+          ratio = r;
+          entering = symbol;
+        }
+      }
+    }
+    return entering;
+  }
+  /**
+   * Compute the symbol for pivot exit row.
+   *
+   * This method will return the symbol for the exit row in the row
+   * map. If no appropriate exit symbol is found, an invalid symbol
+   * will be returned. This indicates that the objective function is
+   * unbounded.
+   *
+   * @private
+   */
+  _getLeavingSymbol(entering) {
+    let ratio = Number.MAX_VALUE;
+    let found = INVALID_SYMBOL;
+    let rows = this._rowMap;
+    for (let i = 0, n = rows.size(); i < n; ++i) {
+      let pair = rows.itemAt(i);
+      let symbol = pair.first;
+      if (symbol.type() !== SymbolType.External) {
+        let row = pair.second;
+        let temp = row.coefficientFor(entering);
+        if (temp < 0) {
+          let temp_ratio = -row.constant() / temp;
+          if (temp_ratio < ratio) {
+            ratio = temp_ratio;
+            found = symbol;
+          }
+        }
+      }
+    }
+    return found;
+  }
+  /**
+   * Compute the leaving symbol for a marker variable.
+   *
+   * This method will return a symbol corresponding to a basic row
+   * which holds the given marker variable. The row will be chosen
+   * according to the following precedence:
+   *
+   * 1) The row with a restricted basic varible and a negative coefficient
+   *    for the marker with the smallest ratio of -constant / coefficient.
+   *
+   * 2) The row with a restricted basic variable and the smallest ratio
+   *    of constant / coefficient.
+   *
+   * 3) The last unrestricted row which contains the marker.
+   *
+   * If the marker does not exist in any row, an invalid symbol will be
+   * returned. This indicates an internal solver error since the marker
+   * *should* exist somewhere in the tableau.
+   *
+   * @private
+   */
+  _getMarkerLeavingSymbol(marker) {
+    let dmax = Number.MAX_VALUE;
+    let r1 = dmax;
+    let r2 = dmax;
+    let invalid = INVALID_SYMBOL;
+    let first = invalid;
+    let second = invalid;
+    let third = invalid;
+    let rows = this._rowMap;
+    for (let i = 0, n = rows.size(); i < n; ++i) {
+      let pair = rows.itemAt(i);
+      let row = pair.second;
+      let c = row.coefficientFor(marker);
+      if (c === 0) {
+        continue;
+      }
+      let symbol = pair.first;
+      if (symbol.type() === SymbolType.External) {
+        third = symbol;
+      } else if (c < 0) {
+        let r = -row.constant() / c;
+        if (r < r1) {
+          r1 = r;
+          first = symbol;
+        }
+      } else {
+        let r = row.constant() / c;
+        if (r < r2) {
+          r2 = r;
+          second = symbol;
+        }
+      }
+    }
+    if (first !== invalid) {
+      return first;
+    }
+    if (second !== invalid) {
+      return second;
+    }
+    return third;
+  }
+  /**
+   * Remove the effects of a constraint on the objective function.
+   *
+   * @private
+   */
+  _removeConstraintEffects(cn, tag) {
+    if (tag.marker.type() === SymbolType.Error) {
+      this._removeMarkerEffects(tag.marker, cn.strength());
+    }
+    if (tag.other.type() === SymbolType.Error) {
+      this._removeMarkerEffects(tag.other, cn.strength());
+    }
+  }
+  /**
+   * Remove the effects of an error marker on the objective function.
+   *
+   * @private
+   */
+  _removeMarkerEffects(marker, strength) {
+    let pair = this._rowMap.find(marker);
+    if (pair !== void 0) {
+      this._objective.insertRow(pair.second, -strength);
+    } else {
+      this._objective.insertSymbol(marker, -strength);
+    }
+  }
+  /**
+   * Get the first Slack or Error symbol in the row.
+   *
+   * If no such symbol is present, an invalid symbol will be returned.
+   *
+   * @private
+   */
+  _anyPivotableSymbol(row) {
+    let cells = row.cells();
+    for (let i = 0, n = cells.size(); i < n; ++i) {
+      let pair = cells.itemAt(i);
+      let type = pair.first.type();
+      if (type === SymbolType.Slack || type === SymbolType.Error) {
+        return pair.first;
+      }
+    }
+    return INVALID_SYMBOL;
+  }
+  /**
+   * Returns a new Symbol of the given type.
+   *
+   * @private
+   */
+  _makeSymbol(type) {
+    return new Symbol$1(type, this._idTick++);
+  }
+}
+function nearZero(value) {
+  let eps = 1e-8;
+  return value < 0 ? -value < eps : value < eps;
+}
+function createCnMap() {
+  return createMap();
+}
+function createRowMap() {
+  return createMap();
+}
+function createVarMap() {
+  return createMap();
+}
+function createEditMap() {
+  return createMap();
+}
+var SymbolType;
+(function(SymbolType2) {
+  SymbolType2[SymbolType2["Invalid"] = 0] = "Invalid";
+  SymbolType2[SymbolType2["External"] = 1] = "External";
+  SymbolType2[SymbolType2["Slack"] = 2] = "Slack";
+  SymbolType2[SymbolType2["Error"] = 3] = "Error";
+  SymbolType2[SymbolType2["Dummy"] = 4] = "Dummy";
+})(SymbolType || (SymbolType = {}));
+let Symbol$1 = class Symbol2 {
+  /**
+   * Construct a new Symbol
+   *
+   * @param [type] The type of the symbol.
+   * @param [id] The unique id number of the symbol.
+   */
+  constructor(type, id) {
+    __publicField(this, "_id");
+    __publicField(this, "_type");
+    this._id = id;
+    this._type = type;
+  }
+  /**
+   * Returns the unique id number of the symbol.
+   */
+  id() {
+    return this._id;
+  }
+  /**
+   * Returns the type of the symbol.
+   */
+  type() {
+    return this._type;
+  }
+};
+let INVALID_SYMBOL = new Symbol$1(SymbolType.Invalid, -1);
+class Row {
+  /**
+   * Construct a new Row.
+   */
+  constructor(constant = 0) {
+    __publicField(this, "_cellMap", createMap());
+    __publicField(this, "_constant");
+    this._constant = constant;
+  }
+  /**
+   * Returns the mapping of symbols to coefficients.
+   */
+  cells() {
+    return this._cellMap;
+  }
+  /**
+   * Returns the constant for the row.
+   */
+  constant() {
+    return this._constant;
+  }
+  /**
+   * Returns true if the row is a constant value.
+   */
+  isConstant() {
+    return this._cellMap.empty();
+  }
+  /**
+   * Returns true if the Row has all dummy symbols.
+   */
+  allDummies() {
+    let cells = this._cellMap;
+    for (let i = 0, n = cells.size(); i < n; ++i) {
+      let pair = cells.itemAt(i);
+      if (pair.first.type() !== SymbolType.Dummy) {
+        return false;
+      }
+    }
+    return true;
+  }
+  /**
+   * Create a copy of the row.
+   */
+  copy() {
+    let theCopy = new Row(this._constant);
+    theCopy._cellMap = this._cellMap.copy();
+    return theCopy;
+  }
+  /**
+   * Add a constant value to the row constant.
+   *
+   * Returns the new value of the constant.
+   */
+  add(value) {
+    return this._constant += value;
+  }
+  /**
+   * Insert the symbol into the row with the given coefficient.
+   *
+   * If the symbol already exists in the row, the coefficient
+   * will be added to the existing coefficient. If the resulting
+   * coefficient is zero, the symbol will be removed from the row.
+   */
+  insertSymbol(symbol, coefficient = 1) {
+    let pair = this._cellMap.setDefault(symbol, () => 0);
+    if (nearZero(pair.second += coefficient)) {
+      this._cellMap.erase(symbol);
+    }
+  }
+  /**
+   * Insert a row into this row with a given coefficient.
+   *
+   * The constant and the cells of the other row will be
+   * multiplied by the coefficient and added to this row. Any
+   * cell with a resulting coefficient of zero will be removed
+   * from the row.
+   */
+  insertRow(other, coefficient = 1) {
+    this._constant += other._constant * coefficient;
+    let cells = other._cellMap;
+    for (let i = 0, n = cells.size(); i < n; ++i) {
+      let pair = cells.itemAt(i);
+      this.insertSymbol(pair.first, pair.second * coefficient);
+    }
+  }
+  /**
+   * Remove a symbol from the row.
+   */
+  removeSymbol(symbol) {
+    this._cellMap.erase(symbol);
+  }
+  /**
+   * Reverse the sign of the constant and cells in the row.
+   */
+  reverseSign() {
+    this._constant = -this._constant;
+    let cells = this._cellMap;
+    for (let i = 0, n = cells.size(); i < n; ++i) {
+      let pair = cells.itemAt(i);
+      pair.second = -pair.second;
+    }
+  }
+  /**
+   * Solve the row for the given symbol.
+   *
+   * This method assumes the row is of the form
+   * a * x + b * y + c = 0 and (assuming solve for x) will modify
+   * the row to represent the right hand side of
+   * x = -b/a * y - c / a. The target symbol will be removed from
+   * the row, and the constant and other cells will be multiplied
+   * by the negative inverse of the target coefficient.
+   *
+   * The given symbol *must* exist in the row.
+   */
+  solveFor(symbol) {
+    let cells = this._cellMap;
+    let pair = cells.erase(symbol);
+    let coeff = -1 / pair.second;
+    this._constant *= coeff;
+    for (let i = 0, n = cells.size(); i < n; ++i) {
+      cells.itemAt(i).second *= coeff;
+    }
+  }
+  /**
+   * Solve the row for the given symbols.
+   *
+   * This method assumes the row is of the form
+   * x = b * y + c and will solve the row such that
+   * y = x / b - c / b. The rhs symbol will be removed from the
+   * row, the lhs added, and the result divided by the negative
+   * inverse of the rhs coefficient.
+   *
+   * The lhs symbol *must not* exist in the row, and the rhs
+   * symbol must* exist in the row.
+   */
+  solveForEx(lhs, rhs) {
+    this.insertSymbol(lhs, -1);
+    this.solveFor(rhs);
+  }
+  /**
+   * Returns the coefficient for the given symbol.
+   */
+  coefficientFor(symbol) {
+    let pair = this._cellMap.find(symbol);
+    return pair !== void 0 ? pair.second : 0;
+  }
+  /**
+   * Substitute a symbol with the data from another row.
+   *
+   * Given a row of the form a * x + b and a substitution of the
+   * form x = 3 * y + c the row will be updated to reflect the
+   * expression 3 * a * y + a * c + b.
+   *
+   * If the symbol does not exist in the row, this is a no-op.
+   */
+  substitute(symbol, row) {
+    let pair = this._cellMap.erase(symbol);
+    if (pair !== void 0) {
+      this.insertRow(row, pair.second);
+    }
+  }
+}
+class Rect {
+  constructor() {
+    __publicField(this, "id");
+    __publicField(this, "minX", new Variable());
+    __publicField(this, "minY", new Variable());
+    __publicField(this, "maxX", new Variable());
+    __publicField(this, "maxY", new Variable());
+  }
+  get x() {
+    return this.minX;
+  }
+  get y() {
+    return this.minY;
+  }
+  get positionAbsolute() {
+    return {
+      x: this.x.value(),
+      y: this.y.value()
+    };
+  }
+  // Position relative to parent
+  get position() {
+    const positionAbsolute = this.positionAbsolute;
+    return this.parent ? {
+      x: positionAbsolute.x - this.parent.x.value(),
+      y: positionAbsolute.y - this.parent.y.value()
+    } : positionAbsolute;
+  }
+}
+class Compound extends Rect {
+  constructor(solver, xynode, parent = null) {
+    super();
+    __publicField(this, "children", []);
+    this.solver = solver;
+    this.parent = parent;
+    this.id = xynode.id;
+    solver.createConstraint(this.maxX, Operator.Ge, this.minX);
+    solver.createConstraint(this.maxY, Operator.Ge, this.minY);
+    if (parent) {
+      parent.addChild(this);
+    }
+  }
+  addChild(rect) {
+    this.children.push(rect);
+    const leftPadding = new Expression(
+      rect.minX,
+      [-1, this.minX]
+    );
+    const { weak } = Strength;
+    this.solver.createConstraint(leftPadding, Operator.Ge, 40);
+    this.solver.createConstraint(leftPadding, Operator.Eq, 40, weak);
+    const topPadding = new Expression(
+      rect.minY,
+      [-1, this.minY]
+    );
+    this.solver.createConstraint(topPadding, Operator.Ge, 60);
+    this.solver.createConstraint(topPadding, Operator.Eq, 60, weak);
+    const rightPadding = new Expression(
+      this.maxX,
+      [-1, rect.maxX]
+    );
+    this.solver.createConstraint(rightPadding, Operator.Ge, 40);
+    this.solver.createConstraint(rightPadding, Operator.Eq, 40, weak);
+    const bottomPadding = new Expression(
+      this.maxY,
+      [-1, rect.maxY]
+    );
+    this.solver.createConstraint(bottomPadding, Operator.Ge, 40);
+    this.solver.createConstraint(bottomPadding, Operator.Eq, 40, weak);
+  }
+}
+class Leaf extends Rect {
+  constructor(solver, xynode, parent = null, isEditing = false) {
+    var _a, _b, _c;
+    super();
+    __publicField(this, "id");
+    this.parent = parent;
+    this.isEditing = isEditing;
+    this.id = xynode.id;
+    const pos = ((_a = xynode.computed) == null ? void 0 : _a.positionAbsolute) ?? {
+      x: xynode.data.element.position[0],
+      y: xynode.data.element.position[1]
+    };
+    const width = ((_b = xynode.computed) == null ? void 0 : _b.width) ?? xynode.data.element.width;
+    const height = ((_c = xynode.computed) == null ? void 0 : _c.height) ?? xynode.data.element.height;
+    this.maxX = new Expression(this.minX, width);
+    this.maxY = new Expression(this.minY, height);
+    if (isEditing) {
+      const superStrong = Strength.create(100, 0, 0);
+      solver.addEditVariable(this.minX, superStrong);
+      solver.addEditVariable(this.minY, superStrong);
+      solver.suggestValue(this.minX, pos.x);
+      solver.suggestValue(this.minY, pos.y);
+    } else {
+      const halfMedium = Strength.create(0, 1, 0, 0.5);
+      solver.createConstraint(this.minX, Operator.Eq, pos.x, halfMedium);
+      solver.createConstraint(this.minY, Operator.Eq, pos.y, halfMedium);
+    }
+    if (parent) {
+      parent.addChild(this);
+    }
+  }
+}
+function createLayoutConstraints(xyflow, draggingNodeId) {
+  const solver = new Solver();
+  const rects = /* @__PURE__ */ new Map();
+  const xynodes = xyflow.getNodes();
+  const rootNodes = xynodes.filter((n) => isNullish(n.parentNode));
+  const traverse = rootNodes.map((xynode) => ({
+    xynode,
+    parent: null
+  }));
+  while (traverse.length > 0) {
+    const { xynode, parent } = traverse.pop();
+    const isDragging = xynode.dragging === true || xynode.id === draggingNodeId;
+    const isCompound = !isDragging && xynode.type === "compound" && core$1.isAncestor(xynode.id, draggingNodeId);
+    const rect = isCompound ? new Compound(solver, xynode, parent) : new Leaf(solver, xynode, parent, isDragging);
+    rects.set(xynode.id, rect);
+    if (isCompound) {
+      const children = xynodes.flatMap(
+        (child) => child.parentNode === xynode.id ? {
+          xynode: child,
+          parent: rect
+        } : []
+      );
+      traverse.push(
+        ...children
+      );
+    }
+  }
+  solver.updateVariables();
+  solver.maxIterations = 1e3;
+  function updateXYFlowNodes() {
+    solver.updateVariables();
+    xyflow.setNodes(
+      (nodes) => nodes.map((n) => {
+        if (n.id === draggingNodeId || n.dragging === true) {
+          return n;
+        }
+        const rect = rects.get(n.id);
+        if (!rect) {
+          return n;
+        }
+        const newPosition = rect.position;
+        n.position.x = newPosition.x;
+        n.position.y = newPosition.y;
+        n.width = rect.maxX.value() - rect.minX.value();
+        n.height = rect.maxY.value() - rect.minY.value();
+        return n;
+      })
+    );
+  }
+  let animationFrameId = null;
+  function onNodeDrag(xynode) {
+    var _a;
+    const pos = core$1.nonNullable((_a = xynode.computed) == null ? void 0 : _a.positionAbsolute, "No positionAbsolute");
+    const rect = core$1.nonNullable(rects.get(xynode.id));
+    solver.suggestValue(rect.minX, pos.x);
+    solver.suggestValue(rect.minY, pos.y);
+    animationFrameId ?? (animationFrameId = window.requestAnimationFrame(() => {
+      updateXYFlowNodes();
+      animationFrameId = null;
+    }));
+  }
+  return {
+    onNodeDrag,
+    updateXYFlowNodes
+  };
+}
+function useLayoutConstraints(xyflow) {
+  const solverRef = react.useRef();
+  const constraintsRef = react.useRef();
+  constraintsRef.current ?? (constraintsRef.current = {
+    onNodeDragStart: (event, xynode) => {
+      core$1.invariant(xyflow.current, "xyflow.current should be defined");
+      core$1.invariant(!solverRef.current, "solverRef.current should be undefined");
+      solverRef.current = createLayoutConstraints(xyflow.current, xynode.id);
+    },
+    onNodeDrag: (event, xynode) => {
+      var _a;
+      core$1.invariant(solverRef.current, "solverRef.current should be defined");
+      (_a = solverRef.current) == null ? void 0 : _a.onNodeDrag(xynode);
+    },
+    onNodeDragStop: (event, xynode) => {
+      solverRef.current = void 0;
+    }
+  });
+  return constraintsRef.current;
+}
+const useXYFlow = react$1.useReactFlow;
+const useXYNodesData = react$1.useNodesData;
+const EventHandlersContext = react.createContext(null);
+function useXYFlowEvents() {
+  const ctx = react.useContext(EventHandlersContext);
+  return core$1.nonNullable(ctx, "useXYFlowEvents could be used only inside XYFlowEventHandlers");
+}
+function XYFlowEventHandlers({
+  children,
+  eventHandlers
+}) {
+  const originalsRef = react.useRef(eventHandlers);
+  originalsRef.current = eventHandlers;
+  const xyflowRef = useSyncedRef(useXYFlow());
+  const dblclickTimeout = react.useRef();
+  const [xyFlowEvents] = react.useState(() => ({
+    onPanelClick: (event) => {
+      var _a, _b;
+      if (!originalsRef.current.onCanvasDblClick) {
+        (_b = (_a = originalsRef.current).onCanvasClick) == null ? void 0 : _b.call(_a, event);
+        return;
+      }
+      if (dblclickTimeout.current) {
+        window.clearTimeout(dblclickTimeout.current);
+        dblclickTimeout.current = void 0;
+        originalsRef.current.onCanvasDblClick(event);
+        return;
+      }
+      dblclickTimeout.current = window.setTimeout(() => {
+        var _a2, _b2;
+        dblclickTimeout.current = void 0;
+        (_b2 = (_a2 = originalsRef.current).onCanvasClick) == null ? void 0 : _b2.call(_a2, event);
+      }, 300);
+    },
+    onNodeContextMenu: (event, xynode) => {
+      var _a, _b;
+      (_b = (_a = originalsRef.current).onNodeContextMenu) == null ? void 0 : _b.call(_a, {
+        element: xynode.data.element,
+        xynode,
+        event
+      });
+    },
+    onPaneContextMenu: (event) => {
+      var _a, _b;
+      (_b = (_a = originalsRef.current).onCanvasContextMenu) == null ? void 0 : _b.call(_a, event);
+    },
+    onEdgeContextMenu: (event, xyedge) => {
+      var _a, _b;
+      (_b = (_a = originalsRef.current).onEdgeContextMenu) == null ? void 0 : _b.call(_a, {
+        relation: xyedge.data.edge,
+        xyedge,
+        event
+      });
+    },
+    onNodeClick: (event, xynode) => {
+      var _a, _b;
+      (_b = (_a = originalsRef.current).onNodeClick) == null ? void 0 : _b.call(_a, {
+        element: xynode.data.element,
+        xynode,
+        event
+      });
+    },
+    onEdgeClick: (event, xyedge) => {
+      var _a, _b;
+      (_b = (_a = originalsRef.current).onEdgeClick) == null ? void 0 : _b.call(_a, {
+        relation: xyedge.data.edge,
+        xyedge,
+        event
+      });
+    },
+    onNavigateTo: (xynodeId, event) => {
+      if (!originalsRef.current.onNavigateTo) {
+        return;
+      }
+      const xynode = xyflowRef.current.getNode(xynodeId);
+      core$1.invariant(xynode, `node not found: ${xynodeId}`);
+      const navigateTo = xynode.data.element.navigateTo;
+      core$1.invariant(navigateTo, `node is not navigable: ${xynodeId}`);
+      originalsRef.current.onNavigateTo({
+        element: xynode.data.element,
+        xynode,
+        event
+      });
+    },
+    onChange: (change2) => {
+      var _a, _b;
+      const changes = Array.isArray(change2) ? change2 : [change2];
+      core$1.invariant(core$1.hasAtLeast(changes, 1), "no changes");
+      (_b = (_a = originalsRef.current).onChange) == null ? void 0 : _b.call(_a, { changes });
+    }
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(EventHandlersContext.Provider, { value: xyFlowEvents, children });
+}
+const {
+  primary,
+  secondary,
+  muted,
+  ...otherColors
+} = core$1.defaultTheme.elements;
+const themedColors = [
+  { key: "primary", value: primary.fill },
+  { key: "secondary", value: secondary.fill },
+  { key: "muted", value: muted.fill }
+];
+const colors = keys.strict(otherColors).map((key) => ({
+  key,
+  value: core$1.defaultTheme.elements[key].fill
+}));
+function NodeOptions({ selectedNodeIds }) {
+  const { onChange } = useXYFlowEvents();
+  const nodes = useXYNodesData(selectedNodeIds);
+  const api = useXYFlow();
+  if (!hasAtLeast(nodes, 1)) {
+    return null;
+  }
+  const showShapeOption = nodes.some((node) => node.type === "element");
+  const [firstNode, ...rest] = nodes;
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Stack, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.Box, { maw: 200, children: /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "xs", c: rest.length > 0 ? "dimmed" : "", truncate: true, children: rest.length === 0 ? firstNode.data.element.title : `[ multiple ]` }) }),
+    showShapeOption && /* @__PURE__ */ jsxRuntime.jsx(
+      ShapeOption,
+      {
+        nodes,
+        onShapeChange: (shape) => {
+          const targets = [];
+          for (const nd of nodes) {
+            api.updateNodeData(nd.id, ({ data }) => {
+              if (data.element.shape === shape) {
+                return data;
+              }
+              return {
+                ...data,
+                element: {
+                  ...data.element,
+                  shape
+                }
+              };
+            });
+            targets.push(nd.data.element.id);
+          }
+          if (hasAtLeast(targets, 1)) {
+            onChange({
+              op: "change-shape",
+              shape,
+              targets
+            });
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Colors,
+      {
+        nodes,
+        onColorChange: (color) => {
+          const targets = [];
+          for (const nd of nodes) {
+            api.updateNodeData(nd.id, ({ data }) => {
+              if (data.element.color === color) {
+                return data;
+              }
+              return {
+                ...data,
+                element: {
+                  ...data.element,
+                  color
+                }
+              };
+            });
+            targets.push(nd.data.element.id);
+          }
+          if (hasAtLeast(targets, 1)) {
+            onChange({
+              op: "change-color",
+              color,
+              targets
+            });
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(NavigateToOption, { nodes })
+  ] });
+}
+function Colors({
+  nodes: [firstNode, ...nodes],
+  onColorChange
+}) {
+  let selectedColor = firstNode.data.element.color;
+  takeWhile(nodes, (node) => {
+    if (node.data.element.color !== selectedColor) {
+      selectedColor = null;
+      return false;
+    }
+    return true;
+  });
+  const changeColor = (color) => () => {
+    if (selectedColor === color) {
+      return;
+    }
+    onColorChange(color);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(core.Tooltip.Group, { openDelay: 400, closeDelay: 300, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { label: "color", labelPosition: "left" }),
+    /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { mt: "xs", maw: 150, gap: "xs", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: themedColors.map(({ key, value }) => /* @__PURE__ */ jsxRuntime.jsx(
+      core.Tooltip,
+      {
+        label: key,
+        fz: "xs",
+        color: "dark",
+        offset: 2,
+        transitionProps: { duration: 140, transition: "slide-up" },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          core.ColorSwatch,
+          {
+            color: value,
+            size: 20,
+            withShadow: true,
+            onClick: changeColor(key),
+            style: { color: "#fff", cursor: "pointer" },
+            children: selectedColor === key && /* @__PURE__ */ jsxRuntime.jsx(core.CheckIcon, { style: { width: core.rem(12), height: core.rem(12) } })
+          }
+        )
+      },
+      key
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { mt: "sm", maw: 150, gap: "xs", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: colors.map(({ key, value }) => /* @__PURE__ */ jsxRuntime.jsx(
+      core.Tooltip,
+      {
+        label: key,
+        fz: "xs",
+        color: "dark",
+        offset: 2,
+        transitionProps: { duration: 140, transition: "slide-up" },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          core.ColorSwatch,
+          {
+            color: value,
+            size: 20,
+            onClick: changeColor(key),
+            style: { color: "#fff", cursor: "pointer" },
+            children: selectedColor === key && /* @__PURE__ */ jsxRuntime.jsx(core.CheckIcon, { style: { width: core.rem(12), height: core.rem(12) } })
+          }
+        )
+      },
+      key
+    )) })
+  ] }) });
+}
+function ShapeOption({
+  nodes: [firstNode, ...nodes],
+  onShapeChange
+}) {
+  let selectedShape = firstNode.data.element.shape;
+  takeWhile(nodes, (node) => {
+    if (node.data.element.shape !== selectedShape) {
+      selectedShape = null;
+      return false;
+    }
+    return true;
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { label: "shape", labelPosition: "left" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      core.Select,
+      {
+        mt: "xs",
+        size: "xs",
+        variant: "filled",
+        value: selectedShape,
+        placeholder: "[ multiple ]",
+        data: core$1.ElementShapes,
+        allowDeselect: false,
+        checkIconPosition: "right",
+        onChange: (value) => {
+          if (!value || value === selectedShape) {
+            return;
+          }
+          onShapeChange(value);
+        }
+      }
+    )
+  ] });
+}
+function NavigateToOption({
+  nodes: [node, ...nodes]
+}) {
+  const isMultiple = nodes.length >= 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Box, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.Divider, { label: "navigate to", labelPosition: "left" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      core.Select,
+      {
+        mt: "xs",
+        size: "xs",
+        variant: "filled",
+        value: !isMultiple ? node.data.element.navigateTo ?? null : null,
+        disabled: isMultiple,
+        placeholder: isMultiple ? "[ multiple ]" : "select",
+        data: node.data.element.navigateTo ? [{ value: node.data.element.navigateTo, label: node.data.element.navigateTo }] : [],
+        allowDeselect: true,
+        checkIconPosition: "right"
+      }
+    )
+  ] });
+}
+var panel = "_1lmzt1h0";
+const OptionsPanelMemo = /* @__PURE__ */ react.memo(function OptionsPanel() {
+  const [selectedNodes, setSelectedNodes] = react.useState([]);
+  react$1.useOnSelectionChange({
+    onChange: ({ nodes, edges }) => {
+      const next = nodes.map((n) => n.id).sort();
+      setSelectedNodes((prev) => {
+        return shallowEqual(prev, next) ? prev : next;
+      });
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: selectedNodes.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      initial: { opacity: 0, scale: 0.85 },
+      animate: { opacity: 1, scale: 1 },
+      exit: {
+        opacity: 0,
+        scale: 0.85
+      },
+      transition: { duration: 0.14 },
+      className: clsx("react-flow__panel", panel),
+      style: {
+        transformOrigin: "center right"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(core.Card, { shadow: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(NodeOptions, { selectedNodeIds: selectedNodes }) })
+    }
+  ) });
+});
+const OptionsPanel2 = OptionsPanelMemo;
+function deriveEdgePoints(bezierSpline) {
+  let [start, ...bezierPoints] = bezierSpline;
+  core$1.invariant(start, "start should be defined");
+  const handles = [
+    // start
+  ];
+  while (hasAtLeast(bezierPoints, 3)) {
+    const [cp1, cp2, end, ...rest] = bezierPoints;
+    const [centerX, centerY] = react$1.getBezierEdgeCenter({
+      sourceX: start[0],
+      sourceY: start[1],
+      targetX: end[0],
+      targetY: end[1],
+      sourceControlX: cp1[0],
+      sourceControlY: cp1[1],
+      targetControlX: cp2[0],
+      targetControlY: cp2[1]
+    });
+    handles.push(
+      [centerX, centerY]
+    );
+    bezierPoints = rest;
+    start = end;
+  }
+  core$1.invariant(bezierPoints.length === 0, "all points should be consumed");
+  return handles;
+}
+function nodeZIndex(node) {
+  return node.children.length > 0 ? 0 : node.level + 1;
+}
+function diagramViewToXYFlowData(view, dragEnabled = true) {
+  const editor = {
+    nodes: [],
+    edges: []
+  };
+  const ns = "";
+  const nodeById = (id) => core$1.nonNullable(view.nodes.find((n) => n.id === id));
+  const createNode = (node) => {
+    const isCompound = hasAtLeast(node.children, 1);
+    const id = ns + node.id;
+    const position = {
+      x: node.position[0],
+      y: node.position[1]
+    };
+    const parent = node.parent ? nodeById(node.parent) : null;
+    if (parent) {
+      position.x -= parent.position[0];
+      position.y -= parent.position[1];
+    }
+    const zIndex = nodeZIndex(node);
+    editor.nodes.push({
+      id,
+      type: isCompound ? "compound" : "element",
+      data: {
+        id,
+        element: node
+      },
+      draggable: dragEnabled && (!parent || parent.children.length > 1),
+      deletable: false,
+      position,
+      zIndex,
+      width: node.width,
+      height: node.height,
+      // handles: [
+      //   ...outEdges.map(out => ({
+      //     id: `${out.id}`,
+      //     type: 'source' as const,
+      //     position: Position.Bottom,
+      //     x: out.points[0][0],
+      //     y: out.points[0][1],
+      //     width: 10,
+      //     height: 10
+      //   })),
+      //   ...inEdges.map(out => ({
+      //     id: out.id,
+      //     type: 'target' as const,
+      //     position: Position.Top,
+      //     x: out.points[0][0],
+      //     y: out.points[0][1],
+      //     width: 10,
+      //     height: 10
+      //   }))
+      // ],
+      ...parent ? {
+        parentNode: ns + parent.id
+      } : {}
+    });
+  };
+  for (const node of view.nodes.toSorted(core$1.compareByFqnHierarchically)) {
+    createNode(node);
+  }
+  const createEdge = (edge) => {
+    const source = edge.source;
+    const target = edge.target;
+    const id = ns + edge.id;
+    const controlPoints = deriveEdgePoints(edge.points);
+    core$1.invariant(hasAtLeast(edge.points, 2), "edge should have at least 2 points");
+    const level = Math.min(nodeById(source).level, nodeById(target).level);
+    editor.edges.push({
+      id,
+      type: "relationship",
+      source: ns + source,
+      target: ns + target,
+      zIndex: level + 1,
+      deletable: false,
+      data: {
+        edge,
+        type: "bezier",
+        controlPoints,
+        headPoint: edge.headArrowPoint ?? null,
+        tailPoint: edge.tailArrowPoint ?? null,
+        label: edge.labelBBox && edge.label ? {
+          bbox: edge.labelBBox,
+          // text: edge.labels ? edge.labels.map(l => l.text).join('\n') : ''
+          text: edge.label
+        } : null
+      },
+      // markerEnd: {
+      //   type: MarkerType.ArrowClosed
+      // },
+      interactionWidth: 20
+    });
+  };
+  for (const edge of view.edges) {
+    createEdge(edge);
+  }
+  return editor;
+}
+const ZIndexes = {
+  Compound: 1,
+  Edge: 2,
+  Element: 3
+};
+const MinZoom = 0.01;
+function FitViewOnDiagramChange() {
+  const [state, updateState] = useDiagramStateTracked();
+  const xyflow = useXYFlow();
+  const nodeInitialized = react$1.useNodesInitialized({
+    includeHiddenNodes: true
+  });
+  const isReady = nodeInitialized && xyflow.viewportInitialized;
+  const viewLayout = state.viewId + "_" + state.viewLayout + "_" + state.fitViewPadding;
+  const prevViewLayoutRef = react.useRef(viewLayout);
+  useDebouncedEffect(
+    () => {
+      if (!isReady || prevViewLayoutRef.current === viewLayout) {
+        return;
+      }
+      const zoom = xyflow.getZoom();
+      xyflow.setCenter(state.viewWidth / 2, state.viewHeight / 2, {
+        duration: 150,
+        zoom
+      });
+      xyflow.fitView({
+        duration: 350,
+        padding: state.fitViewPadding,
+        minZoom: MinZoom,
+        maxZoom: Math.max(1, zoom)
+      });
+      updateState({ viewportMoved: false });
+      prevViewLayoutRef.current = viewLayout;
+    },
+    [isReady, viewLayout],
+    50
+  );
+  return null;
+}
+function UpdateOnDiagramChange({
+  nodesDraggable,
+  view: {
+    nodes,
+    edges
+  }
+}) {
+  const xyflow = useXYFlow();
+  const initialized = xyflow.viewportInitialized;
+  useUpdateEffect(
+    () => {
+      if (!initialized) {
+        return;
+      }
+      const updates = diagramViewToXYFlowData({
+        nodes,
+        edges
+      }, nodesDraggable);
+      xyflow.setNodes(
+        (prev) => updates.nodes.map((update) => {
+          const existing = prev.find((p) => p.id === update.id);
+          if (existing && existing.type == update.type) {
+            const { data, parentNode, ...rest } = update;
+            if (!deepEqual(existing.data, data)) {
+              existing.data = data;
+            }
+            if (!isNullish(parentNode)) {
+              existing.parentNode = parentNode;
+            } else {
+              delete existing.parentNode;
+            }
+            return Object.assign(existing, rest);
+          }
+          return update;
+        })
+      );
+      xyflow.setEdges(
+        (prev) => updates.edges.map((update) => {
+          const existing = prev.find((e) => e.id === update.id);
+          if (existing) {
+            if (deepEqual(existing.data.edge, update.data.edge)) {
+              return existing;
+            }
+            return {
+              ...existing,
+              ...update
+            };
+          }
+          return update;
+        })
+      );
+    },
+    [initialized, nodesDraggable, nodes, edges]
+  );
+  return null;
+}
+function literalToEnum(value) {
+  switch (value) {
+    case "dots":
+      return react$1.BackgroundVariant.Dots;
+    case "lines":
+      return react$1.BackgroundVariant.Lines;
+    case "cross":
+      return react$1.BackgroundVariant.Cross;
+    default:
+      core$1.nonexhaustive(value);
+  }
+}
+const XYFlowBackground = react.memo(({ background }) => {
+  if (typeof background === "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(react$1.Background, { variant: literalToEnum(background) });
+  }
+  const { variant, ...rest } = background;
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.Background, { variant: literalToEnum(variant), ...rest });
+}, deepEqual);
+var container$1 = "bexn7q0";
+var edgePathBg = "bexn7q1";
+var fillStrokeCtx = "bexn7q2";
+var cssEdgePath = "bexn7q3";
+var edgeLabel = "bexn7q4";
+var edgeLabelBody = "bexn7q5";
+function getNodeIntersection(intersectionNode, targetNode) {
+  var _a, _b, _c, _d, _e, _f;
+  const intersectionNodeWidth = ((_a = intersectionNode.computed) == null ? void 0 : _a.width) ?? intersectionNode.data.element.width;
+  const intersectionNodeHeight = ((_b = intersectionNode.computed) == null ? void 0 : _b.height) ?? intersectionNode.data.element.height;
+  const intersectionNodePosition = ((_c = intersectionNode.computed) == null ? void 0 : _c.positionAbsolute) ?? { x: intersectionNode.data.element.position[0], y: intersectionNode.data.element.position[1] };
+  const targetPosition = ((_d = targetNode.computed) == null ? void 0 : _d.positionAbsolute) ?? { x: targetNode.data.element.position[0], y: targetNode.data.element.position[1] };
+  const w = intersectionNodeWidth / 2;
+  const h = intersectionNodeHeight / 2;
+  const x2 = intersectionNodePosition.x + w;
+  const y2 = intersectionNodePosition.y + h;
+  const x1 = targetPosition.x + (((_e = targetNode.computed) == null ? void 0 : _e.width) ?? targetNode.data.element.width) / 2;
+  const y1 = targetPosition.y + (((_f = targetNode.computed) == null ? void 0 : _f.height) ?? targetNode.data.element.height) / 2;
+  const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
+  const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
+  const a = 1 / (Math.abs(xx1) + Math.abs(yy1));
+  const xx3 = a * xx1;
+  const yy3 = a * yy1;
+  const x = w * (xx3 + yy3) + x2;
+  const y = h * (-xx3 + yy3) + y2;
+  return { x, y };
+}
+function getPointPosition(node, intersectionPoint) {
+  var _a, _b, _c;
+  const n = {
+    x: node.data.element.position[0],
+    y: node.data.element.position[1],
+    ...(_a = node.computed) == null ? void 0 : _a.positionAbsolute,
+    width: ((_b = node.computed) == null ? void 0 : _b.width) ?? node.data.element.width,
+    height: ((_c = node.computed) == null ? void 0 : _c.height) ?? node.data.element.height
+  };
+  const nx = Math.round(n.x);
+  const ny = Math.round(n.y);
+  const px = Math.round(intersectionPoint.x);
+  const py = Math.round(intersectionPoint.y);
+  let handlePosition = react$1.Position.Top;
+  if (px <= nx + 1) {
+    handlePosition = react$1.Position.Left;
+  } else if (px >= nx + n.width - 1) {
+    handlePosition = react$1.Position.Right;
+  } else if (py <= ny + 1) {
+    handlePosition = react$1.Position.Top;
+  } else if (py >= n.y + n.height - 1) {
+    handlePosition = react$1.Position.Bottom;
+  }
+  let handleWidth = 8, handleHeight = 8;
+  let offsetX = 0;
+  let offsetY = 0;
+  switch (handlePosition) {
+    case react$1.Position.Left:
+      offsetX = -handleWidth;
+      break;
+    case react$1.Position.Right:
+      offsetX = handleWidth;
+      break;
+    case react$1.Position.Top:
+      offsetY = -handleHeight;
+      break;
+    case react$1.Position.Bottom:
+      offsetY = handleHeight;
+      break;
+  }
+  return [
+    intersectionPoint.x + offsetX,
+    intersectionPoint.y + offsetY,
+    handlePosition
+  ];
+}
+function getEdgeParams(source, target) {
+  const sourceIntersectionPoint = getNodeIntersection(source, target);
+  const targetIntersectionPoint = getNodeIntersection(target, source);
+  const [sx, sy, sourcePos] = getPointPosition(source, sourceIntersectionPoint);
+  const [tx, ty, targetPos] = getPointPosition(target, targetIntersectionPoint);
+  return {
+    sx,
+    sy,
+    tx,
+    ty,
+    sourcePos,
+    targetPos
+  };
+}
+function bezierPath(bezierSpline) {
+  let [start, ...points] = bezierSpline;
+  core$1.invariant(start, "start should be defined");
+  let path = `M ${start[0]},${start[1]}`;
+  while (hasAtLeast(points, 3)) {
+    const [cp1, cp2, end, ...rest] = points;
+    path = path + ` C ${cp1[0]},${cp1[1]} ${cp2[0]},${cp2[1]} ${end[0]},${end[1]}`;
+    points = rest;
+  }
+  core$1.invariant(points.length === 0, "all points should be consumed");
+  return path;
+}
+const isEqualProps$2 = (prev, next) => prev.id === next.id && prev.source === next.source && prev.target === next.target && prev.sourceX === next.sourceX && prev.sourceY === next.sourceY && prev.targetX === next.targetX && prev.targetY === next.targetY && deepEqual(prev.data, next.data);
+const RelationshipEdge = /* @__PURE__ */ react.memo(function RelationshipEdgeR({
+  id,
+  data,
+  selected,
+  markerEnd,
+  style,
+  source,
+  target,
+  interactionWidth
+}) {
+  var _a, _b;
+  const xyflow = useXYFlow();
+  const isModified = react$1.useStore(
+    react.useCallback((s) => {
+      var _a2, _b2;
+      const sourceNode = s.nodeLookup.get(source);
+      const targetNode = s.nodeLookup.get(target);
+      core$1.invariant(XYFlowNode.is(sourceNode));
+      core$1.invariant(XYFlowNode.is(targetNode));
+      const isSourceModified = !!((_a2 = sourceNode.computed) == null ? void 0 : _a2.positionAbsolute) && !shallowEqual(sourceNode.computed.positionAbsolute, {
+        x: sourceNode.data.element.position[0],
+        y: sourceNode.data.element.position[1]
+      });
+      if (isSourceModified) {
+        return true;
+      }
+      return !!((_b2 = targetNode.computed) == null ? void 0 : _b2.positionAbsolute) && !shallowEqual(targetNode.computed.positionAbsolute, {
+        x: targetNode.data.element.position[0],
+        y: targetNode.data.element.position[1]
+      });
+    }, [source, target]),
+    deepEqual
+  );
+  core$1.invariant(data, "data isd required");
+  const {
+    edge,
+    controlPoints
+  } = data;
+  const color = edge.color ?? "gray";
+  const isHovered = useDiagramStateSelector((state) => state.hoveredEdgeId === id);
+  const line = edge.line ?? "dashed";
+  const isDotted = line === "dotted";
+  const isDashed = isDotted || line === "dashed";
+  let strokeDasharray;
+  if (isDotted) {
+    strokeDasharray = "1,8";
+  } else if (isDashed) {
+    strokeDasharray = "8,10";
+  }
+  const marker = `url(#arrow-${id})`;
+  let edgePath, labelX, labelY;
+  if (isModified) {
+    const sourceNode = xyflow.getNode(source);
+    const targetNode = xyflow.getNode(target);
+    const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
+    const [_edgePath, _labelX, _labelY] = react$1.getBezierPath({
+      sourceX: sx,
+      sourceY: sy,
+      sourcePosition: sourcePos,
+      targetPosition: targetPos,
+      targetX: tx,
+      targetY: ty
+    });
+    edgePath = _edgePath;
+    labelX = _labelX;
+    labelY = _labelY;
+  } else {
+    edgePath = bezierPath(edge.points);
+    labelX = ((_a = data.label) == null ? void 0 : _a.bbox.x) ?? 0;
+    labelY = ((_b = data.label) == null ? void 0 : _b.bbox.y) ?? 0;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: clsx(container$1), "data-likec4-color": color, "data-edge-hovered": isHovered, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("g", { className: clsx(fillStrokeCtx), children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "marker",
+      {
+        id: `arrow-${id}`,
+        viewBox: "0 0 10 8",
+        refX: "0",
+        refY: "4",
+        markerWidth: "5",
+        markerHeight: "5",
+        markerUnits: "strokeWidth",
+        preserveAspectRatio: "xMaxYMid meet",
+        orient: "auto-start-reverse",
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 0 0 L 10 4 L 0 8 z", stroke: "context-stroke", fill: "context-fill" })
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        className: clsx("react-flow__edge-path", edgePathBg),
+        d: edgePath,
+        style,
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        className: clsx("react-flow__edge-path", cssEdgePath),
+        d: edgePath,
+        style,
+        strokeLinecap: "round",
+        // strokeLinecap={isDotted ? 'butt' : 'round'}
+        // strokeMiterlimit={10}
+        // strokeLinejoin="bevel"
+        ...strokeDasharray ? { strokeDasharray } : {},
+        ...edge.headArrow ? { markerEnd: marker } : {},
+        ...edge.tailArrow ? { markerStart: marker } : {}
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        className: clsx("react-flow__edge-interaction"),
+        d: edgePath,
+        fill: "none",
+        strokeOpacity: 0,
+        strokeWidth: interactionWidth ?? 10
+      }
+    ),
+    data.label && /* @__PURE__ */ jsxRuntime.jsx(react$1.EdgeLabelRenderer, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      core.Box,
+      {
+        className: clsx(container$1, edgeLabel),
+        "data-likec4-color": color,
+        style: {
+          top: labelY,
+          left: labelX,
+          maxWidth: data.label.bbox.width + 10,
+          zIndex: ZIndexes.Edge
+        },
+        mod: {
+          "data-edge-hovered": isHovered
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(core.Box, { className: edgeLabelBody, children: data.label.text })
+      }
+    ) })
+  ] });
+}, isEqualProps$2);
+function getVarName(variable) {
+  var matches = variable.match(/^var\((.*)\)$/);
+  if (matches) {
+    return matches[1];
+  }
+  return variable;
+}
+function get(obj, path) {
+  var result = obj;
+  for (var key of path) {
+    if (!(key in result)) {
+      throw new Error("Path ".concat(path.join(" -> "), " does not exist in object"));
+    }
+    result = result[key];
+  }
+  return result;
+}
+function walkObject(obj, fn) {
+  var path = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : [];
+  var clone = {};
+  for (var key in obj) {
+    var _value = obj[key];
+    var currentPath = [...path, key];
+    if (typeof _value === "string" || typeof _value === "number" || _value == null) {
+      clone[key] = fn(_value, currentPath);
+    } else if (typeof _value === "object" && !Array.isArray(_value)) {
+      clone[key] = walkObject(_value, fn, currentPath);
+    } else {
+      console.warn('Skipping invalid key "'.concat(currentPath.join("."), '". Should be a string, number, null or object. Received: "').concat(Array.isArray(_value) ? "Array" : typeof _value, '"'));
+    }
+  }
+  return clone;
+}
+function assignInlineVars(varsOrContract, tokens) {
+  var styles = {};
+  if (typeof tokens === "object") {
+    var _contract = varsOrContract;
+    walkObject(tokens, (value2, path) => {
+      if (value2 == null) {
+        return;
+      }
+      var varName2 = get(_contract, path);
+      styles[getVarName(varName2)] = String(value2);
+    });
+  } else {
+    var _vars = varsOrContract;
+    for (var varName in _vars) {
+      var value = _vars[varName];
+      if (value == null) {
+        continue;
+      }
+      styles[getVarName(varName)] = value;
+    }
+  }
+  Object.defineProperty(styles, "toString", {
+    value: function value2() {
+      return Object.keys(this).map((key) => "".concat(key, ":").concat(this[key])).join(";");
+    },
+    writable: false
+  });
+  return styles;
+}
+const Channel = {
+  /* CLAMP */
+  min: {
+    r: 0,
+    g: 0,
+    b: 0,
+    s: 0,
+    l: 0,
+    a: 0
+  },
+  max: {
+    r: 255,
+    g: 255,
+    b: 255,
+    h: 360,
+    s: 100,
+    l: 100,
+    a: 1
+  },
+  clamp: {
+    r: (r) => r >= 255 ? 255 : r < 0 ? 0 : r,
+    g: (g) => g >= 255 ? 255 : g < 0 ? 0 : g,
+    b: (b) => b >= 255 ? 255 : b < 0 ? 0 : b,
+    h: (h) => h % 360,
+    s: (s) => s >= 100 ? 100 : s < 0 ? 0 : s,
+    l: (l) => l >= 100 ? 100 : l < 0 ? 0 : l,
+    a: (a) => a >= 1 ? 1 : a < 0 ? 0 : a
+  },
+  /* CONVERSION */
+  //SOURCE: https://planetcalc.com/7779
+  toLinear: (c) => {
+    const n = c / 255;
+    return c > 0.03928 ? Math.pow((n + 0.055) / 1.055, 2.4) : n / 12.92;
+  },
+  //SOURCE: https://gist.github.com/mjackson/5311256
+  hue2rgb: (p, q, t) => {
+    if (t < 0)
+      t += 1;
+    if (t > 1)
+      t -= 1;
+    if (t < 1 / 6)
+      return p + (q - p) * 6 * t;
+    if (t < 1 / 2)
+      return q;
+    if (t < 2 / 3)
+      return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  },
+  hsl2rgb: ({ h, s, l }, channel) => {
+    if (!s)
+      return l * 2.55;
+    h /= 360;
+    s /= 100;
+    l /= 100;
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    switch (channel) {
+      case "r":
+        return Channel.hue2rgb(p, q, h + 1 / 3) * 255;
+      case "g":
+        return Channel.hue2rgb(p, q, h) * 255;
+      case "b":
+        return Channel.hue2rgb(p, q, h - 1 / 3) * 255;
+    }
+  },
+  rgb2hsl: ({ r, g, b }, channel) => {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    if (channel === "l")
+      return l * 100;
+    if (max === min)
+      return 0;
+    const d = max - min;
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (channel === "s")
+      return s * 100;
+    switch (max) {
+      case r:
+        return ((g - b) / d + (g < b ? 6 : 0)) * 60;
+      case g:
+        return ((b - r) / d + 2) * 60;
+      case b:
+        return ((r - g) / d + 4) * 60;
+      default:
+        return -1;
+    }
+  }
+};
+const Lang = {
+  /* API */
+  clamp: (number, lower, upper) => {
+    if (lower > upper)
+      return Math.min(lower, Math.max(upper, number));
+    return Math.min(upper, Math.max(lower, number));
+  },
+  round: (number) => {
+    return Math.round(number * 1e10) / 1e10;
+  }
+};
+const lang = Lang;
+const Unit = {
+  /* API */
+  dec2hex: (dec) => {
+    const hex = Math.round(dec).toString(16);
+    return hex.length > 1 ? hex : `0${hex}`;
+  }
+};
+const unit = Unit;
+const Utils = {
+  channel: Channel,
+  lang,
+  unit
+};
+const DEC2HEX = {};
+for (let i = 0; i <= 255; i++)
+  DEC2HEX[i] = Utils.unit.dec2hex(i);
+const TYPE = {
+  ALL: 0,
+  RGB: 1,
+  HSL: 2
+};
+class Type {
+  constructor() {
+    this.type = TYPE.ALL;
+  }
+  /* API */
+  get() {
+    return this.type;
+  }
+  set(type) {
+    if (this.type && this.type !== type)
+      throw new Error("Cannot change both RGB and HSL channels at the same time");
+    this.type = type;
+  }
+  reset() {
+    this.type = TYPE.ALL;
+  }
+  is(type) {
+    return this.type === type;
+  }
+}
+class Channels {
+  /* CONSTRUCTOR */
+  constructor(data, color) {
+    this.color = color;
+    this.changed = false;
+    this.data = data;
+    this.type = new Type();
+  }
+  /* API */
+  set(data, color) {
+    this.color = color;
+    this.changed = false;
+    this.data = data;
+    this.type.type = TYPE.ALL;
+    return this;
+  }
+  /* HELPERS */
+  _ensureHSL() {
+    const data = this.data;
+    const { h, s, l } = data;
+    if (h === void 0)
+      data.h = Utils.channel.rgb2hsl(data, "h");
+    if (s === void 0)
+      data.s = Utils.channel.rgb2hsl(data, "s");
+    if (l === void 0)
+      data.l = Utils.channel.rgb2hsl(data, "l");
+  }
+  _ensureRGB() {
+    const data = this.data;
+    const { r, g, b } = data;
+    if (r === void 0)
+      data.r = Utils.channel.hsl2rgb(data, "r");
+    if (g === void 0)
+      data.g = Utils.channel.hsl2rgb(data, "g");
+    if (b === void 0)
+      data.b = Utils.channel.hsl2rgb(data, "b");
+  }
+  /* GETTERS */
+  get r() {
+    const data = this.data;
+    const r = data.r;
+    if (!this.type.is(TYPE.HSL) && r !== void 0)
+      return r;
+    this._ensureHSL();
+    return Utils.channel.hsl2rgb(data, "r");
+  }
+  get g() {
+    const data = this.data;
+    const g = data.g;
+    if (!this.type.is(TYPE.HSL) && g !== void 0)
+      return g;
+    this._ensureHSL();
+    return Utils.channel.hsl2rgb(data, "g");
+  }
+  get b() {
+    const data = this.data;
+    const b = data.b;
+    if (!this.type.is(TYPE.HSL) && b !== void 0)
+      return b;
+    this._ensureHSL();
+    return Utils.channel.hsl2rgb(data, "b");
+  }
+  get h() {
+    const data = this.data;
+    const h = data.h;
+    if (!this.type.is(TYPE.RGB) && h !== void 0)
+      return h;
+    this._ensureRGB();
+    return Utils.channel.rgb2hsl(data, "h");
+  }
+  get s() {
+    const data = this.data;
+    const s = data.s;
+    if (!this.type.is(TYPE.RGB) && s !== void 0)
+      return s;
+    this._ensureRGB();
+    return Utils.channel.rgb2hsl(data, "s");
+  }
+  get l() {
+    const data = this.data;
+    const l = data.l;
+    if (!this.type.is(TYPE.RGB) && l !== void 0)
+      return l;
+    this._ensureRGB();
+    return Utils.channel.rgb2hsl(data, "l");
+  }
+  get a() {
+    return this.data.a;
+  }
+  /* SETTERS */
+  set r(r) {
+    this.type.set(TYPE.RGB);
+    this.changed = true;
+    this.data.r = r;
+  }
+  set g(g) {
+    this.type.set(TYPE.RGB);
+    this.changed = true;
+    this.data.g = g;
+  }
+  set b(b) {
+    this.type.set(TYPE.RGB);
+    this.changed = true;
+    this.data.b = b;
+  }
+  set h(h) {
+    this.type.set(TYPE.HSL);
+    this.changed = true;
+    this.data.h = h;
+  }
+  set s(s) {
+    this.type.set(TYPE.HSL);
+    this.changed = true;
+    this.data.s = s;
+  }
+  set l(l) {
+    this.type.set(TYPE.HSL);
+    this.changed = true;
+    this.data.l = l;
+  }
+  set a(a) {
+    this.changed = true;
+    this.data.a = a;
+  }
+}
+const Channels$1 = Channels;
+const channels = new Channels$1({ r: 0, g: 0, b: 0, a: 0 }, "transparent");
+const Hex = {
+  /* VARIABLES */
+  re: /^#((?:[a-f0-9]{2}){2,4}|[a-f0-9]{3})$/i,
+  /* API */
+  parse: (color) => {
+    if (color.charCodeAt(0) !== 35)
+      return;
+    const match = color.match(Hex.re);
+    if (!match)
+      return;
+    const hex = match[1];
+    const dec = parseInt(hex, 16);
+    const length = hex.length;
+    const hasAlpha = length % 4 === 0;
+    const isFullLength = length > 4;
+    const multiplier = isFullLength ? 1 : 17;
+    const bits = isFullLength ? 8 : 4;
+    const bitsOffset = hasAlpha ? 0 : -1;
+    const mask = isFullLength ? 255 : 15;
+    return channels.set({
+      r: (dec >> bits * (bitsOffset + 3) & mask) * multiplier,
+      g: (dec >> bits * (bitsOffset + 2) & mask) * multiplier,
+      b: (dec >> bits * (bitsOffset + 1) & mask) * multiplier,
+      a: hasAlpha ? (dec & mask) * multiplier / 255 : 1
+    }, color);
+  },
+  stringify: (channels2) => {
+    const { r, g, b, a } = channels2;
+    if (a < 1) {
+      return `#${DEC2HEX[Math.round(r)]}${DEC2HEX[Math.round(g)]}${DEC2HEX[Math.round(b)]}${DEC2HEX[Math.round(a * 255)]}`;
+    } else {
+      return `#${DEC2HEX[Math.round(r)]}${DEC2HEX[Math.round(g)]}${DEC2HEX[Math.round(b)]}`;
+    }
+  }
+};
+const HSL = {
+  /* VARIABLES */
+  re: /^hsla?\(\s*?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e-?\d+)?(?:deg|grad|rad|turn)?)\s*?(?:,|\s)\s*?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e-?\d+)?%)\s*?(?:,|\s)\s*?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e-?\d+)?%)(?:\s*?(?:,|\/)\s*?\+?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e-?\d+)?(%)?))?\s*?\)$/i,
+  hueRe: /^(.+?)(deg|grad|rad|turn)$/i,
+  /* HELPERS */
+  _hue2deg: (hue) => {
+    const match = hue.match(HSL.hueRe);
+    if (match) {
+      const [, number, unit2] = match;
+      switch (unit2) {
+        case "grad":
+          return Utils.channel.clamp.h(parseFloat(number) * 0.9);
+        case "rad":
+          return Utils.channel.clamp.h(parseFloat(number) * 180 / Math.PI);
+        case "turn":
+          return Utils.channel.clamp.h(parseFloat(number) * 360);
+      }
+    }
+    return Utils.channel.clamp.h(parseFloat(hue));
+  },
+  /* API */
+  parse: (color) => {
+    const charCode = color.charCodeAt(0);
+    if (charCode !== 104 && charCode !== 72)
+      return;
+    const match = color.match(HSL.re);
+    if (!match)
+      return;
+    const [, h, s, l, a, isAlphaPercentage] = match;
+    return channels.set({
+      h: HSL._hue2deg(h),
+      s: Utils.channel.clamp.s(parseFloat(s)),
+      l: Utils.channel.clamp.l(parseFloat(l)),
+      a: a ? Utils.channel.clamp.a(isAlphaPercentage ? parseFloat(a) / 100 : parseFloat(a)) : 1
+    }, color);
+  },
+  stringify: (channels2) => {
+    const { h, s, l, a } = channels2;
+    if (a < 1) {
+      return `hsla(${Utils.lang.round(h)}, ${Utils.lang.round(s)}%, ${Utils.lang.round(l)}%, ${a})`;
+    } else {
+      return `hsl(${Utils.lang.round(h)}, ${Utils.lang.round(s)}%, ${Utils.lang.round(l)}%)`;
+    }
+  }
+};
+const Keyword = {
+  /* VARIABLES */
+  colors: {
+    aliceblue: "#f0f8ff",
+    antiquewhite: "#faebd7",
+    aqua: "#00ffff",
+    aquamarine: "#7fffd4",
+    azure: "#f0ffff",
+    beige: "#f5f5dc",
+    bisque: "#ffe4c4",
+    black: "#000000",
+    blanchedalmond: "#ffebcd",
+    blue: "#0000ff",
+    blueviolet: "#8a2be2",
+    brown: "#a52a2a",
+    burlywood: "#deb887",
+    cadetblue: "#5f9ea0",
+    chartreuse: "#7fff00",
+    chocolate: "#d2691e",
+    coral: "#ff7f50",
+    cornflowerblue: "#6495ed",
+    cornsilk: "#fff8dc",
+    crimson: "#dc143c",
+    cyanaqua: "#00ffff",
+    darkblue: "#00008b",
+    darkcyan: "#008b8b",
+    darkgoldenrod: "#b8860b",
+    darkgray: "#a9a9a9",
+    darkgreen: "#006400",
+    darkgrey: "#a9a9a9",
+    darkkhaki: "#bdb76b",
+    darkmagenta: "#8b008b",
+    darkolivegreen: "#556b2f",
+    darkorange: "#ff8c00",
+    darkorchid: "#9932cc",
+    darkred: "#8b0000",
+    darksalmon: "#e9967a",
+    darkseagreen: "#8fbc8f",
+    darkslateblue: "#483d8b",
+    darkslategray: "#2f4f4f",
+    darkslategrey: "#2f4f4f",
+    darkturquoise: "#00ced1",
+    darkviolet: "#9400d3",
+    deeppink: "#ff1493",
+    deepskyblue: "#00bfff",
+    dimgray: "#696969",
+    dimgrey: "#696969",
+    dodgerblue: "#1e90ff",
+    firebrick: "#b22222",
+    floralwhite: "#fffaf0",
+    forestgreen: "#228b22",
+    fuchsia: "#ff00ff",
+    gainsboro: "#dcdcdc",
+    ghostwhite: "#f8f8ff",
+    gold: "#ffd700",
+    goldenrod: "#daa520",
+    gray: "#808080",
+    green: "#008000",
+    greenyellow: "#adff2f",
+    grey: "#808080",
+    honeydew: "#f0fff0",
+    hotpink: "#ff69b4",
+    indianred: "#cd5c5c",
+    indigo: "#4b0082",
+    ivory: "#fffff0",
+    khaki: "#f0e68c",
+    lavender: "#e6e6fa",
+    lavenderblush: "#fff0f5",
+    lawngreen: "#7cfc00",
+    lemonchiffon: "#fffacd",
+    lightblue: "#add8e6",
+    lightcoral: "#f08080",
+    lightcyan: "#e0ffff",
+    lightgoldenrodyellow: "#fafad2",
+    lightgray: "#d3d3d3",
+    lightgreen: "#90ee90",
+    lightgrey: "#d3d3d3",
+    lightpink: "#ffb6c1",
+    lightsalmon: "#ffa07a",
+    lightseagreen: "#20b2aa",
+    lightskyblue: "#87cefa",
+    lightslategray: "#778899",
+    lightslategrey: "#778899",
+    lightsteelblue: "#b0c4de",
+    lightyellow: "#ffffe0",
+    lime: "#00ff00",
+    limegreen: "#32cd32",
+    linen: "#faf0e6",
+    magenta: "#ff00ff",
+    maroon: "#800000",
+    mediumaquamarine: "#66cdaa",
+    mediumblue: "#0000cd",
+    mediumorchid: "#ba55d3",
+    mediumpurple: "#9370db",
+    mediumseagreen: "#3cb371",
+    mediumslateblue: "#7b68ee",
+    mediumspringgreen: "#00fa9a",
+    mediumturquoise: "#48d1cc",
+    mediumvioletred: "#c71585",
+    midnightblue: "#191970",
+    mintcream: "#f5fffa",
+    mistyrose: "#ffe4e1",
+    moccasin: "#ffe4b5",
+    navajowhite: "#ffdead",
+    navy: "#000080",
+    oldlace: "#fdf5e6",
+    olive: "#808000",
+    olivedrab: "#6b8e23",
+    orange: "#ffa500",
+    orangered: "#ff4500",
+    orchid: "#da70d6",
+    palegoldenrod: "#eee8aa",
+    palegreen: "#98fb98",
+    paleturquoise: "#afeeee",
+    palevioletred: "#db7093",
+    papayawhip: "#ffefd5",
+    peachpuff: "#ffdab9",
+    peru: "#cd853f",
+    pink: "#ffc0cb",
+    plum: "#dda0dd",
+    powderblue: "#b0e0e6",
+    purple: "#800080",
+    rebeccapurple: "#663399",
+    red: "#ff0000",
+    rosybrown: "#bc8f8f",
+    royalblue: "#4169e1",
+    saddlebrown: "#8b4513",
+    salmon: "#fa8072",
+    sandybrown: "#f4a460",
+    seagreen: "#2e8b57",
+    seashell: "#fff5ee",
+    sienna: "#a0522d",
+    silver: "#c0c0c0",
+    skyblue: "#87ceeb",
+    slateblue: "#6a5acd",
+    slategray: "#708090",
+    slategrey: "#708090",
+    snow: "#fffafa",
+    springgreen: "#00ff7f",
+    tan: "#d2b48c",
+    teal: "#008080",
+    thistle: "#d8bfd8",
+    transparent: "#00000000",
+    turquoise: "#40e0d0",
+    violet: "#ee82ee",
+    wheat: "#f5deb3",
+    white: "#ffffff",
+    whitesmoke: "#f5f5f5",
+    yellow: "#ffff00",
+    yellowgreen: "#9acd32"
+  },
+  /* API */
+  parse: (color) => {
+    color = color.toLowerCase();
+    const hex = Keyword.colors[color];
+    if (!hex)
+      return;
+    return Hex.parse(hex);
+  },
+  stringify: (channels2) => {
+    const hex = Hex.stringify(channels2);
+    for (const name in Keyword.colors) {
+      if (Keyword.colors[name] === hex)
+        return name;
+    }
+    return;
+  }
+};
+const RGB = {
+  /* VARIABLES */
+  re: /^rgba?\(\s*?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e\d+)?(%?))\s*?(?:,|\s)\s*?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e\d+)?(%?))\s*?(?:,|\s)\s*?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e\d+)?(%?))(?:\s*?(?:,|\/)\s*?\+?(-?(?:\d+(?:\.\d+)?|(?:\.\d+))(?:e\d+)?(%?)))?\s*?\)$/i,
+  /* API */
+  parse: (color) => {
+    const charCode = color.charCodeAt(0);
+    if (charCode !== 114 && charCode !== 82)
+      return;
+    const match = color.match(RGB.re);
+    if (!match)
+      return;
+    const [, r, isRedPercentage, g, isGreenPercentage, b, isBluePercentage, a, isAlphaPercentage] = match;
+    return channels.set({
+      r: Utils.channel.clamp.r(isRedPercentage ? parseFloat(r) * 2.55 : parseFloat(r)),
+      g: Utils.channel.clamp.g(isGreenPercentage ? parseFloat(g) * 2.55 : parseFloat(g)),
+      b: Utils.channel.clamp.b(isBluePercentage ? parseFloat(b) * 2.55 : parseFloat(b)),
+      a: a ? Utils.channel.clamp.a(isAlphaPercentage ? parseFloat(a) / 100 : parseFloat(a)) : 1
+    }, color);
+  },
+  stringify: (channels2) => {
+    const { r, g, b, a } = channels2;
+    if (a < 1) {
+      return `rgba(${Utils.lang.round(r)}, ${Utils.lang.round(g)}, ${Utils.lang.round(b)}, ${Utils.lang.round(a)})`;
+    } else {
+      return `rgb(${Utils.lang.round(r)}, ${Utils.lang.round(g)}, ${Utils.lang.round(b)})`;
+    }
+  }
+};
+const Color = {
+  /* VARIABLES */
+  format: {
+    keyword: Keyword,
+    hex: Hex,
+    rgb: RGB,
+    rgba: RGB,
+    hsl: HSL,
+    hsla: HSL
+  },
+  /* API */
+  parse: (color) => {
+    if (typeof color !== "string")
+      return color;
+    const channels2 = Hex.parse(color) || RGB.parse(color) || HSL.parse(color) || Keyword.parse(color);
+    if (channels2)
+      return channels2;
+    throw new Error(`Unsupported color format: "${color}"`);
+  },
+  stringify: (channels2) => {
+    if (!channels2.changed && channels2.color)
+      return channels2.color;
+    if (channels2.type.is(TYPE.HSL) || channels2.data.r === void 0) {
+      return HSL.stringify(channels2);
+    } else if (channels2.a < 1 || !Number.isInteger(channels2.r) || !Number.isInteger(channels2.g) || !Number.isInteger(channels2.b)) {
+      return RGB.stringify(channels2);
+    } else {
+      return Hex.stringify(channels2);
+    }
+  }
+};
+const change = (color, channels2) => {
+  const ch = Color.parse(color);
+  for (const c in channels2) {
+    ch[c] = Utils.channel.clamp[c](channels2[c]);
+  }
+  return Color.stringify(ch);
+};
+const toHex = (color) => {
+  return Color.format.hex.stringify(Color.parse(color));
+};
+const adjust = (color, channels2) => {
+  const ch = Color.parse(color);
+  const changes = {};
+  for (const c in channels2) {
+    if (!channels2[c])
+      continue;
+    changes[c] = ch[c] + channels2[c];
+  }
+  return change(color, changes);
+};
+const scale = (color, channels2) => {
+  const ch = Color.parse(color);
+  const adjustments = {};
+  const delta = (amount, weight, max) => weight > 0 ? (max - amount) * weight / 100 : amount * weight / 100;
+  for (const c in channels2) {
+    adjustments[c] = delta(ch[c], channels2[c], Utils.channel.max[c]);
+  }
+  return adjust(color, adjustments);
+};
+var vars = { likec4: { font: "var(--likec4-font-family)", backgroundColor: "var(--likec4-background-color)" }, compound: { font: "var(--likec4-compound-font-family)", titleColor: "var(--likec4-compound-title-color)" }, element: { font: "var(--likec4-element-font-family)", fill: "var(--likec4-element-fill)", stroke: "var(--likec4-element-stroke)", hiContrast: "var(--likec4-element-hiContrast)", loContrast: "var(--likec4-element-loContrast)" }, relation: { lineColor: "var(--likec4-relation-lineColor)", labelColor: "var(--likec4-relation-labelColor)", labelBgColor: "var(--likec4-relation-labelBg)" } };
+function toDomPrecision(v) {
+  if (v === null) {
+    return 0.01;
+  }
+  return Math.round(v * 100) / 100;
+}
+const Link = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    ref,
+    className: clsx("icon icon-tabler", className),
+    stroke: "currentColor",
+    fill: "currentColor",
+    strokeWidth: "0",
+    viewBox: "0 0 20 20",
+    height: "20",
+    width: "20",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z",
+        clipRule: "evenodd"
+      }
+    )
+  }
+));
+const ZoomIn = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    className: clsx("icon icon-tabler icon-tabler-zoom-in", className),
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    stroke: "currentColor",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 10l6 0" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 7l0 6" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 21l-6 -6" })
+    ]
+  }
+));
+function NavigateToBtn({ xynodeId, className }) {
+  const { onNavigateTo } = useXYFlowEvents();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.ActionIcon,
+    {
+      className: clsx("nodrag nopan", className),
+      radius: "xl",
+      autoFocus: false,
+      onClick: (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        onNavigateTo(xynodeId, event);
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(ZoomIn, {})
+    }
+  );
+}
+var cssContainer = "lbtzdo0";
+var cssCompound = "lbtzdo2";
+var cssTitle = "lbtzdo4";
+var cssIndicator = "lbtzdo6";
+var cssNavigateBtn$1 = "lbtzdo7";
+const isEqualProps$1 = (prev, next) => prev.id === next.id && prev.selected === next.selected && prev.width === next.width && prev.height === next.height && deepEqual(prev.data, next.data);
+const compoundColor = (color, depth) => toHex(
+  scale(color, {
+    l: -35 - 5 * depth,
+    s: -15 - 5 * depth
+  })
+);
+const CompoundNodeMemo = /* @__PURE__ */ react.memo(function CompoundNode({
+  id,
+  data: {
+    element
+  },
+  width,
+  height
+}) {
+  const { color, depth = 0, ...compound } = element;
+  const colors2 = react.useMemo(() => {
+    const colors22 = core$1.defaultTheme.elements[color];
+    return {
+      ...colors22,
+      fill: compoundColor(colors22.fill, depth),
+      stroke: compoundColor(colors22.stroke, depth)
+    };
+  }, [color, depth]);
+  const w = toDomPrecision(width ?? compound.width);
+  const h = toDomPrecision(height ?? compound.height);
+  const diagramState = useDiagramState();
+  const isnavigable = diagramState.hasOnNavigateTo && !!compound.navigateTo;
+  const isHovered = useDiagramStateSelector((state) => state.hoveredNodeId === id);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.Box,
+    {
+      className: clsx(cssContainer, "likec4-compound-node"),
+      style: assignInlineVars({ fill: vars.element.fill, stroke: vars.element.stroke }, {
+        fill: colors2.fill,
+        stroke: colors2.stroke
+      }),
+      mod: {
+        "likec4-color": color,
+        "likec4-shape": compound.shape,
+        "likec4-navigable": isnavigable,
+        hovered: isHovered
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react$1.Handle,
+          {
+            type: "target",
+            position: react$1.Position.Top,
+            style: { visibility: "hidden" }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { className: cssIndicator, viewBox: `0 0 ${w} ${h}`, width: w, height: h, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: -1,
+            y: -1,
+            width: w + 2,
+            height: h + 2,
+            rx: 6
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx(cssCompound, "likec4-compound"), children: /* @__PURE__ */ jsxRuntime.jsx(
+          core.Text,
+          {
+            component: "div",
+            className: clsx(cssTitle, "likec4-compound-title"),
+            children: compound.title
+          }
+        ) }),
+        isnavigable && /* @__PURE__ */ jsxRuntime.jsx(NavigateToBtn, { xynodeId: id, className: cssNavigateBtn$1 }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react$1.Handle,
+          {
+            type: "source",
+            position: react$1.Position.Bottom,
+            style: { visibility: "hidden" }
+          }
+        )
+      ]
+    }
+  );
+}, isEqualProps$1);
+var container = "_1b6tkn2";
+var indicator = "_1b6tkn4";
+var fillElementFill = "_1b6tkn5";
+var fillMixStroke = "_1b6tkn7";
+var title = "_1b6tkn8";
+var description = "_1b6tkn9";
+var technology = "_1b6tkna";
+var cssElement = "_1b6tknb";
+var iconMaxH = "var(--_1b6tknc)";
+var elementIcon = "_1b6tknd";
+var cssShapeSvg = "_1b6tkng";
+var cssNavigateBtn = "_1b6tknh";
+function ElementIcon({
+  node,
+  maxWidth,
+  paddingX = 32,
+  paddingY = 32
+}) {
+  if (!node.icon) {
+    return null;
+  }
+  const firstLabel = node.labels[0];
+  if (!firstLabel) {
+    return null;
+  }
+  const firstLabelY = Math.floor(firstLabel.pt[1] - firstLabel.fontSize * 1.25);
+  const maxIconHeight = Math.floor(firstLabelY - paddingY - 16);
+  maxWidth ?? node.width - paddingX * 2;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: clsx(elementIcon, "likec4-element-icon"),
+      style: assignInlineVars({ iconMaxH }, {
+        iconMaxH: maxIconHeight + "px"
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: node.icon,
+          alt: node.title
+        }
+      )
+    }
+  );
+}
+var elementLink = "_4ysv0o0";
+var trigger = "_4ysv0o1";
+function ElementLink({
+  element
+}) {
+  if (!element.links) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      className: elementLink,
+      whileHover: {
+        scale: 1.07
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        core.HoverCard,
+        {
+          position: "bottom-start",
+          shadow: "lg",
+          radius: "sm",
+          transitionProps: {
+            transition: "pop"
+          },
+          withinPortal: false,
+          floatingStrategy: "fixed",
+          openDelay: 350,
+          closeDelay: 600,
+          offset: {
+            mainAxis: 5,
+            crossAxis: -10
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(core.HoverCard.Target, { children: /* @__PURE__ */ jsxRuntime.jsxs(core.UnstyledButton, { className: clsx("nodrag nopan", trigger), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Link, {}),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "links" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.HoverCard.Dropdown, { p: "xs", children: /* @__PURE__ */ jsxRuntime.jsx(core.Stack, { onClick: (e) => e.stopPropagation(), gap: "xs", children: element.links.map((link, i) => /* @__PURE__ */ jsxRuntime.jsxs(core.Group, { wrap: "nowrap", gap: "sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(core.Box, { flex: "1", style: { overflow: "clip", maxWidth: 240 }, children: /* @__PURE__ */ jsxRuntime.jsx(core.Anchor, { href: link, target: "_blank", fz: "13", truncate: "end", children: link }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(core.CopyButton, { value: link, children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntime.jsx(core.Button, { size: "compact-xs", fz: "12", onClick: copy, color: copied ? "teal" : "gray", children: copied ? "Copied" : "Copy" }) })
+            ] }, link)) }) })
+          ]
+        }
+      )
+    }
+  );
+}
+function cylinderSVGPath(diameter, height, tilt = 0.0725) {
+  const radius = Math.round(diameter / 2);
+  const rx = radius;
+  const ry = Math.round(tilt * radius);
+  const tiltAdjustedHeight = height - 2 * ry;
+  const path = `  M ${diameter},${ry}
+        a ${rx},${ry} 0,0,0 ${-diameter} 0
+        l 0,${tiltAdjustedHeight}
+        a ${rx},${ry} 0,0,0 ${diameter} 0
+        l 0,${-tiltAdjustedHeight}
+        z
+        `.replace(/\s+/g, " ").trim();
+  return {
+    path,
+    ry,
+    rx
+  };
+}
+function queueSVGPath(width, height, tilt = 0.2) {
+  const diameter = height;
+  const radius = Math.round(diameter / 2);
+  const ry = radius;
+  const rx = Math.round(diameter / 2 * tilt);
+  const tiltAdjustedWidth = width - 2 * rx;
+  const path = `
+    M ${rx},0
+    a ${rx},${ry} 0,0,0 0 ${diameter}
+    l ${tiltAdjustedWidth},0
+    a ${rx},${ry} 0,0,0 0 ${-diameter}
+    z`.replace(/\s+/g, " ").trim();
+  return {
+    path,
+    ry,
+    rx
+  };
+}
+const PersonIcon = {
+  width: 115,
+  height: 120,
+  path: `M57.9197 0C10.9124 0 33.5766 54.75 33.5766 54.75C38.6131 62.25 45.3285 60.75 45.3285 66C45.3285 70.5 39.4526 72 33.5766 72.75C24.3431 72.75 15.9489 71.25 7.55474 84.75C2.51825 93 0 120 0 120H115C115 120 112.482 93 108.285 84.75C99.8905 70.5 91.4963 72.75 82.2628 72C76.3869 71.25 70.5109 69.75 70.5109 65.25C70.5109 60.75 77.2263 62.25 82.2628 54C82.2628 54.75 104.927 0 57.9197 0V0Z`
+};
+const ElementShapeSvg = /* @__PURE__ */ react.memo(({
+  shape,
+  w,
+  h
+}) => {
+  switch (shape) {
+    case "mobile": {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            width: w,
+            height: h,
+            rx: 6,
+            className: fillMixStroke,
+            strokeWidth: 0
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("g", { className: fillElementFill, strokeWidth: 0, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 17, cy: h / 2, r: 12 }),
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 33, y: 12, width: w - 44, height: h - 24, rx: 5 })
+        ] })
+      ] });
+    }
+    case "browser": {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            width: w,
+            height: h,
+            rx: 6,
+            className: fillMixStroke,
+            strokeWidth: 0
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("g", { className: fillElementFill, strokeWidth: 0, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 16, cy: 17, r: 7 }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 36, cy: 17, r: 7 }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 56, cy: 17, r: 7 }),
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 70, y: 8, width: w - 80, height: 17, rx: 4 }),
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 10, y: 32, width: w - 20, height: h - 42, rx: 4 })
+        ] })
+      ] });
+    }
+    case "person": {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            width: w,
+            height: h,
+            rx: 6,
+            strokeWidth: 0
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            x: w - PersonIcon.width - 6,
+            y: h - PersonIcon.height,
+            width: PersonIcon.width,
+            height: PersonIcon.height,
+            viewBox: `0 0 ${PersonIcon.width} ${PersonIcon.height}`,
+            className: fillMixStroke,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeWidth: 0,
+                d: "M57.9197 0C10.9124 0 33.5766 54.75 33.5766 54.75C38.6131 62.25 45.3285 60.75 45.3285 66C45.3285 70.5 39.4526 72 33.5766 72.75C24.3431 72.75 15.9489 71.25 7.55474 84.75C2.51825 93 0 120 0 120H115C115 120 112.482 93 108.285 84.75C99.8905 70.5 91.4963 72.75 82.2628 72C76.3869 71.25 70.5109 69.75 70.5109 65.25C70.5109 60.75 77.2263 62.25 82.2628 54C82.2628 54.75 104.927 0 57.9197 0V0Z"
+              }
+            )
+          }
+        )
+      ] });
+    }
+    case "queue": {
+      const { path, rx, ry } = queueSVGPath(w, h);
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: path, strokeWidth: 2 }),
+        /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: rx, cy: ry, ry: ry - 0.75, rx, className: fillMixStroke, strokeWidth: 2 })
+      ] });
+    }
+    case "storage":
+    case "cylinder": {
+      const { path, rx, ry } = cylinderSVGPath(w, h);
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: path, strokeWidth: 2 }),
+        /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: rx, cy: ry, ry, rx: rx - 0.75, className: fillMixStroke, strokeWidth: 2 })
+      ] });
+    }
+    case "rectangle": {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "rect",
+        {
+          width: w,
+          height: h,
+          rx: 6,
+          strokeWidth: 0
+        }
+      );
+    }
+    default: {
+      return core$1.nonexhaustive(shape);
+    }
+  }
+}, deepEqual);
+const SelectedIndicator = /* @__PURE__ */ react.memo(({
+  shape,
+  w,
+  h
+}) => {
+  switch (shape) {
+    case "queue":
+    case "storage":
+    case "cylinder": {
+      const { path } = shape === "queue" ? queueSVGPath(w, h) : cylinderSVGPath(w, h);
+      return /* @__PURE__ */ jsxRuntime.jsx("path", { d: path });
+    }
+    default: {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "rect",
+        {
+          x: -1,
+          y: -1,
+          width: w + 2,
+          height: h + 2,
+          rx: 6
+        }
+      );
+    }
+  }
+}, deepEqual);
+const isEqualProps = (prev, next) => prev.id === next.id && prev.width === next.width && prev.height === next.height && prev.selected === next.selected && deepEqual(prev.data, next.data);
+const variants = {
+  idle: {
+    transformOrigin: "50% 50%"
+  },
+  selected: {
+    scale: 1.015
+  },
+  hover: {
+    scale: 1.08,
+    transition: {
+      delay: 0.175
+      // duration: 0.3
+    }
+  },
+  tap: {
+    scale: 0.97,
+    transition: {
+      type: "spring"
+    }
+  }
+};
+function ElementNode({
+  id,
+  data: {
+    element
+  },
+  selected = false,
+  width,
+  height
+}) {
+  const diagramState = useDiagramState();
+  const isNodeInteractive = diagramState.isNodeInteractive;
+  const isHovercards = diagramState.disableHovercards !== true;
+  const isNavigable = diagramState.hasOnNavigateTo && !!element.navigateTo;
+  const isHovered = useDiagramStateSelector((state) => state.hoveredNodeId === id);
+  const w = toDomPrecision(width ?? element.width);
+  const h = toDomPrecision(height ?? element.height);
+  let animate = "idle";
+  if (selected) {
+    animate = "selected";
+  }
+  if (isHovered) {
+    animate = "hover";
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    framerMotion.motion.div,
+    {
+      id,
+      className: clsx(container, "likec4-element-node"),
+      "data-likec4-color": element.color,
+      "data-likec4-shape": element.shape,
+      variants,
+      initial: "idle",
+      ...isNodeInteractive && {
+        whileTap: "tap",
+        animate,
+        ["data-likec4-interactive"]: true
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react$1.Handle,
+          {
+            type: "target",
+            position: react$1.Position.Top,
+            style: { visibility: "hidden" }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            className: cssShapeSvg,
+            viewBox: `0 0 ${w} ${h}`,
+            width: w,
+            height: h,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("g", { className: indicator, children: /* @__PURE__ */ jsxRuntime.jsx(
+                SelectedIndicator,
+                {
+                  shape: element.shape,
+                  w,
+                  h
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ElementShapeSvg,
+                {
+                  shape: element.shape,
+                  w,
+                  h
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx(cssElement, "likec4-element"), children: [
+          element.icon && /* @__PURE__ */ jsxRuntime.jsx(ElementIcon, { node: element }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.Text,
+            {
+              component: "div",
+              className: clsx(title, "likec4-element-title"),
+              children: element.title
+            }
+          ),
+          element.technology && /* @__PURE__ */ jsxRuntime.jsx(
+            core.Text,
+            {
+              component: "div",
+              className: clsx(technology, "likec4-element-technology"),
+              children: element.technology
+            }
+          ),
+          element.description && /* @__PURE__ */ jsxRuntime.jsx(
+            core.Text,
+            {
+              component: "div",
+              className: clsx(description, "likec4-element-description"),
+              children: element.description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react$1.Handle,
+          {
+            type: "source",
+            position: react$1.Position.Bottom,
+            style: { visibility: "hidden" }
+          }
+        ),
+        isHovercards && /* @__PURE__ */ jsxRuntime.jsx(ElementLink, { element }),
+        isNavigable && /* @__PURE__ */ jsxRuntime.jsx(NavigateToBtn, { xynodeId: id, className: cssNavigateBtn })
+      ]
+    }
+  );
+}
+const ElementNodeMemo = react.memo(ElementNode, isEqualProps);
+const nodeTypes = {
+  element: ElementNodeMemo,
+  compound: CompoundNodeMemo
+};
+const edgeTypes = {
+  relationship: RelationshipEdge
+};
+function XYFlowWrapper({
+  className,
+  children,
+  defaultNodes,
+  defaultEdges,
+  fitView = true,
+  colorMode: colorModeProp,
+  readonly = false,
+  pannable = true,
+  zoomable = true,
+  nodesSelectable = !readonly,
+  nodesDraggable = !readonly,
+  fitViewPadding = 0,
+  style
+}) {
+  const xyflowRef = react.useRef();
+  const [editor, updateState] = useDiagramStateTracked();
+  const layoutConstraints = useLayoutConstraints(xyflowRef);
+  const handlers = useXYFlowEvents();
+  const { colorScheme } = core.useMantineColorScheme();
+  let colorMode = colorModeProp ?? (colorScheme !== "auto" ? colorScheme : void 0);
+  return (
+    // @ts-expect-error
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.ReactFlow,
+      {
+        className,
+        style,
+        ...colorMode && { colorMode },
+        defaultNodes,
+        defaultEdges,
+        nodeTypes,
+        edgeTypes,
+        zoomOnPinch: zoomable,
+        zoomOnScroll: !pannable && zoomable,
+        ...!zoomable && {
+          zoomActivationKeyCode: null
+        },
+        maxZoom: zoomable ? 1.9 : 1,
+        minZoom: zoomable ? MinZoom : 1,
+        fitView,
+        fitViewOptions: {
+          minZoom: MinZoom,
+          maxZoom: 1,
+          padding: fitViewPadding
+        },
+        defaultMarkerColor: "var(--xy-edge-stroke)",
+        noDragClassName: "nodrag",
+        noPanClassName: "nopan",
+        panOnScroll: pannable,
+        panOnDrag: pannable,
+        elementsSelectable: nodesSelectable,
+        ...!nodesSelectable && {
+          selectionKeyCode: null
+        },
+        nodesDraggable,
+        ...nodesDraggable && layoutConstraints,
+        zoomOnDoubleClick: false,
+        elevateNodesOnSelect: false,
+        selectNodesOnDrag: false,
+        onInit: react.useCallback((instance) => {
+          xyflowRef.current = instance;
+          updateState({ viewportInitialized: true });
+        }, []),
+        onEdgeMouseEnter: react.useCallback((event, edge) => {
+          updateState({ hoveredEdgeId: edge.id });
+        }, []),
+        onEdgeMouseLeave: react.useCallback(() => {
+          updateState({ hoveredEdgeId: null });
+        }, []),
+        ...editor.isNodeInteractive && {
+          onNodeMouseEnter: (event, node) => {
+            updateState({ hoveredNodeId: node.id });
+          },
+          onNodeMouseLeave: () => {
+            updateState({ hoveredNodeId: null });
+          }
+        },
+        ...editor.hasOnContextMenu && {
+          onNodeContextMenu: handlers.onNodeContextMenu,
+          onPaneContextMenu: handlers.onPaneContextMenu,
+          onEdgeContextMenu: handlers.onEdgeContextMenu
+        },
+        ...editor.hasOnCanvasClick && {
+          onPaneClick: handlers.onPanelClick
+        },
+        ...editor.hasOnNodeClick && {
+          onNodeClick: handlers.onNodeClick
+        },
+        ...editor.hasOnEdgeClick && {
+          onEdgeClick: handlers.onEdgeClick
+        },
+        children
+      }
+    )
+  );
+}
+const isEquals = ({ children: _childrenA, ...a }, { children: _childrenB, ...b }) => deepEqual(a, b);
+const XYFlow = react.memo(XYFlowWrapper, isEquals);
+function LikeC4Diagram({
+  view,
+  className,
+  fitView = true,
+  fitViewPadding = 0,
+  colorMode,
+  readonly = true,
+  pannable = true,
+  zoomable = true,
+  nodesSelectable = true,
+  nodesDraggable = !readonly,
+  background = "dots",
+  controls = false,
+  disableHovercards = false,
+  initialWidth,
+  initialHeight,
+  keepAspectRatio = false,
+  ...eventHandlers
+}) {
+  const initialRef = react.useRef();
+  if (!initialRef.current) {
+    const initial = diagramViewToXYFlowData(view);
+    initialRef.current = {
+      defaultNodes: initial.nodes,
+      defaultEdges: initial.edges,
+      initialWidth: initialWidth ?? view.width,
+      initialHeight: initialHeight ?? view.height
+    };
+  }
+  const isBgWithPattern = background !== "transparent" && background !== "solid";
+  const isNodeInteractive = nodesDraggable || nodesSelectable || !!eventHandlers.onNavigateTo || !!eventHandlers.onNavigateTo;
+  return /* @__PURE__ */ jsxRuntime.jsx(EnsureMantine, { colorMode, children: /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.ReactFlowProvider,
+    {
+      fitView,
+      ...initialRef.current,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        DiagramStateProvider,
+        {
+          isNodeInteractive,
+          view,
+          fitViewPadding,
+          readonly,
+          disableHovercards,
+          eventHandlers,
+          children: /* @__PURE__ */ jsxRuntime.jsxs(XYFlowEventHandlers, { eventHandlers, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              KeepAspectRatio,
+              {
+                enabled: keepAspectRatio,
+                width: view.width,
+                height: view.height,
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  XYFlow,
+                  {
+                    className: clsx(
+                      className,
+                      scope,
+                      cssReactFlow,
+                      controls === false && cssNoControls,
+                      pannable !== true && cssDisablePan,
+                      background === "transparent" && cssTransparentBg
+                    ),
+                    defaultNodes: initialRef.current.defaultNodes,
+                    defaultEdges: initialRef.current.defaultEdges,
+                    readonly,
+                    nodesDraggable,
+                    nodesSelectable,
+                    pannable,
+                    zoomable,
+                    fitView,
+                    colorMode,
+                    fitViewPadding,
+                    children: [
+                      isBgWithPattern && /* @__PURE__ */ jsxRuntime.jsx(XYFlowBackground, { background }),
+                      controls && /* @__PURE__ */ jsxRuntime.jsx(react$1.Controls, {}),
+                      readonly !== true && /* @__PURE__ */ jsxRuntime.jsx(OptionsPanel2, {}),
+                      fitView && /* @__PURE__ */ jsxRuntime.jsx(FitViewOnDiagramChange, {})
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              UpdateOnDiagramChange,
+              {
+                view,
+                nodesDraggable
+              }
+            )
+          ] })
+        }
+      )
+    }
+  ) });
+}
+function StaticLikeC4Diagram({
+  view,
+  fitView = true,
+  fitViewPadding = 0,
+  background = "transparent",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    LikeC4Diagram,
+    {
+      view,
+      readonly: true,
+      fitView,
+      fitViewPadding,
+      pannable: false,
+      zoomable: false,
+      controls: false,
+      background,
+      disableHovercards: true,
+      nodesSelectable: false,
+      nodesDraggable: false,
+      ...rest
+    }
+  );
+}
+function EmbeddedLikeC4DiagramCmp({
+  viewId,
+  views,
+  colorMode
+}) {
+  const [isOpened, toggleOpened] = useToggle(false);
+  const [browserViewId, setBrowserViewId] = react.useState(viewId);
+  const view = views[viewId];
+  core$1.invariant(view, `View with id ${viewId} not found`);
+  const browserView = views[browserViewId];
+  core$1.invariant(browserView, `View with id ${browserViewId} not found`);
+  const closeBrowser = () => {
+    toggleOpened(false);
+    setBrowserViewId(viewId);
+  };
+  useUpdateEffect(closeBrowser, [viewId]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(EnsureMantine, { colorMode, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      KeepAspectRatio,
+      {
+        enabled: true,
+        height: view.height,
+        width: view.width,
+        onClick: (e) => {
+          e.stopPropagation();
+          toggleOpened(true);
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          StaticLikeC4Diagram,
+          {
+            colorMode,
+            view,
+            fitView: true,
+            fitViewPadding: 0.01,
+            background: "transparent",
+            keepAspectRatio: false
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(core.Modal.Root, { opened: isOpened, onClose: closeBrowser, fullScreen: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.Modal.Overlay, { blur: 16 }),
+      /* @__PURE__ */ jsxRuntime.jsx(core.Modal.Content, { className: modalContent, children: /* @__PURE__ */ jsxRuntime.jsxs(core.Modal.Body, { className: modalBody, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.Box, { className: modalHeader, children: /* @__PURE__ */ jsxRuntime.jsx(core.Title, { order: 4, children: browserView.title || browserView.id }) }),
+        isOpened && /* @__PURE__ */ jsxRuntime.jsx(
+          LikeC4Diagram,
+          {
+            readonly: true,
+            view: browserView,
+            colorMode,
+            background: "transparent",
+            fitViewPadding: 0.09,
+            onCanvasDblClick: closeBrowser,
+            onNavigateTo: ({ event, element }) => {
+              event.stopPropagation();
+              setBrowserViewId(element.navigateTo);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Box, { className: modalCloseButtonBox, children: /* @__PURE__ */ jsxRuntime.jsx(core.CloseButton, { className: modalCloseButton, onClick: closeBrowser }) })
+      ] }) })
+    ] })
+  ] });
+}
+const EmbeddedLikeC4Diagram = react.memo(EmbeddedLikeC4DiagramCmp, shallowEqual);
+exports.EmbeddedLikeC4Diagram = EmbeddedLikeC4Diagram;
+exports.LikeC4Diagram = LikeC4Diagram;
+exports.StaticLikeC4Diagram = StaticLikeC4Diagram;