likec4 1.0.0 → 1.0.2

package/dist/__app__/src/{main-C8jsNnb9.js → main-DDd-kcC2.js}

@@ -10689,7 +10689,7 @@ function getStyle({
   };
 }
 function useStylesTransform({ props, stylesCtx, themeName }) {
-  const theme2 = useMantineTheme(), stylesTransform = useMantineStylesTransform();
+  const theme2 = useMantineTheme(), stylesTransform = useMantineStylesTransform()?.();
   return {
     getTransformedStyles: (styles) => stylesTransform ? [
       ...styles.map(
@@ -10759,22 +10759,22 @@ function useStyles({
 function getAutoContrastValue(autoContrast, theme2) {
   return typeof autoContrast == "boolean" ? autoContrast : theme2.autoContrast;
 }
-function disableTransition() {
+function disableTransition(nonce) {
   const style2 = document.createElement("style");
-  return style2.innerHTML = "*, *::before, *::after {transition: none !important;}", style2.setAttribute("data-mantine-disable-transition", "true"), document.head.appendChild(style2), () => document.querySelectorAll("[data-mantine-disable-transition]").forEach((element) => element.remove());
+  return style2.setAttribute("data-mantine-styles", "inline"), style2.innerHTML = "*, *::before, *::after {transition: none !important;}", style2.setAttribute("data-mantine-disable-transition", "true"), nonce && style2.setAttribute("nonce", nonce), document.head.appendChild(style2), () => document.querySelectorAll("[data-mantine-disable-transition]").forEach((element) => element.remove());
 }
 function useMantineColorScheme({ keepTransitions } = {}) {
-  const clearStylesRef = reactExports.useRef(), timeoutRef = reactExports.useRef(), ctx = reactExports.useContext(MantineContext);
+  const clearStylesRef = reactExports.useRef(), timeoutRef = reactExports.useRef(), ctx = reactExports.useContext(MantineContext), nonce = useMantineStyleNonce(), nonceValue = reactExports.useRef(nonce?.());
   if (!ctx)
     throw new Error("[@mantine/core] MantineProvider was not found in tree");
   const setColorScheme = (value) => {
     ctx.setColorScheme(value), clearStylesRef.current = keepTransitions ? () => {
-    } : disableTransition(), window.clearTimeout(timeoutRef.current), timeoutRef.current = window.setTimeout(() => {
+    } : disableTransition(nonceValue.current), window.clearTimeout(timeoutRef.current), timeoutRef.current = window.setTimeout(() => {
       clearStylesRef.current?.();
     }, 10);
   }, clearColorScheme = () => {
     ctx.clearColorScheme(), clearStylesRef.current = keepTransitions ? () => {
-    } : disableTransition(), window.clearTimeout(timeoutRef.current), timeoutRef.current = window.setTimeout(() => {
+    } : disableTransition(nonceValue.current), window.clearTimeout(timeoutRef.current), timeoutRef.current = window.setTimeout(() => {
       clearStylesRef.current?.();
     }, 10);
   }, osColorScheme = useColorScheme("light", { getInitialValueInEffect: !1 }), computedColorScheme = ctx.colorScheme === "auto" ? osColorScheme : ctx.colorScheme, toggleColorScheme = reactExports.useCallback(
@@ -11158,7 +11158,7 @@ const _Box = reactExports.forwardRef(
     renderRoot,
     ...others
   }, ref) => {
-    const theme2 = useMantineTheme(), Element2 = component || "div", { styleProps, rest } = extractStyleProps(others), transformedSx = useMantineSxTransform()?.(styleProps.sx), responsiveClassName = useRandomClassName(), parsedStyleProps = parseStyleProps({
+    const theme2 = useMantineTheme(), Element2 = component || "div", { styleProps, rest } = extractStyleProps(others), transformedSx = useMantineSxTransform()?.()?.(styleProps.sx), responsiveClassName = useRandomClassName(), parsedStyleProps = parseStyleProps({
       styleProps,
       theme: theme2,
       data: STYlE_PROPS_DATA
@@ -15071,7 +15071,7 @@ function useModal({
   return useWindowEvent(
     "keydown",
     (event) => {
-      event.key === "Escape" && closeOnEscape2 && event.target?.getAttribute("data-mantine-stop-propagation") !== "true" && onClose();
+      event.key === "Escape" && closeOnEscape2 && opened && event.target?.getAttribute("data-mantine-stop-propagation") !== "true" && onClose();
     },
     { capture: !0 }
   ), useFocusReturn({ opened, shouldReturnFocus: trapFocus && returnFocus }), {
@@ -15483,8 +15483,8 @@ const defaultProps$$ = {}, InputPlaceholder = factory((_props, ref) => {
 InputPlaceholder.classes = classes$k;
 InputPlaceholder.displayName = "@mantine/core/InputPlaceholder";
 function getInputOffsets(inputWrapperOrder, { hasDescription, hasError }) {
-  const inputIndex = inputWrapperOrder.findIndex((part) => part === "input"), aboveInput = inputWrapperOrder[inputIndex - 1], belowInput = inputWrapperOrder[inputIndex + 1];
-  return { offsetBottom: hasDescription && belowInput === "description" || hasError && belowInput === "error", offsetTop: hasDescription && aboveInput === "description" || hasError && aboveInput === "error" };
+  const inputIndex = inputWrapperOrder.findIndex((part) => part === "input"), aboveInput = inputWrapperOrder.slice(0, inputIndex), belowInput = inputWrapperOrder.slice(inputIndex + 1), offsetTop = hasDescription && aboveInput.includes("description") || hasError && aboveInput.includes("error");
+  return { offsetBottom: hasDescription && belowInput.includes("description") || hasError && belowInput.includes("error"), offsetTop };
 }
 const defaultProps$_ = {
   labelElement: "label",
@@ -16867,7 +16867,8 @@ function OptionsDropdown({
   unstyled,
   labelId,
   renderOption,
-  scrollAreaProps
+  scrollAreaProps,
+  "aria-label": ariaLabel
 }) {
   validateOptions(data);
   const filteredData = typeof search == "string" ? (filter2 || defaultOptionsFilter)({
@@ -16886,7 +16887,7 @@ function OptionsDropdown({
     },
     isOptionsGroup(item) ? item.group : item.value
   ));
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Combobox.Dropdown, { hidden: hidden2 || hiddenWhenEmpty && isEmpty2, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Combobox.Options, { labelledBy: labelId, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Combobox.Dropdown, { hidden: hidden2 || hiddenWhenEmpty && isEmpty2, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Combobox.Options, { labelledBy: labelId, "aria-label": ariaLabel, children: [
     withScrollArea ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       ScrollArea.Autosize,
       {
@@ -18602,7 +18603,8 @@ const defaultProps$6 = {
               withCheckIcon,
               nothingFoundMessage,
               unstyled,
-              labelId: `${_id}-label`,
+              labelId: others.label ? `${_id}-label` : void 0,
+              "aria-label": others.label ? void 0 : others["aria-label"],
               renderOption,
               scrollAreaProps
             }
@@ -19750,7 +19752,9 @@ const theme = {
   })
 });
 function RadixTheme({ children: children2 }) {
-  const { colorScheme } = useMantineColorScheme(), computedScheme = useComputedColorScheme(), appearance = colorScheme === "auto" ? computedScheme : colorScheme;
+  const { colorScheme } = useMantineColorScheme(), computedScheme = useComputedColorScheme(void 0, {
+    getInitialValueInEffect: !1
+  }), appearance = colorScheme === "auto" ? computedScheme : colorScheme;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Theme,
     {
@@ -19768,7 +19772,7 @@ function RootComponent() {
     MantineProvider,
     {
       ...theme$1 && { forceColorScheme: theme$1 },
-      defaultColorScheme: "dark",
+      defaultColorScheme: theme$1 ?? "dark",
       theme,
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(RadixTheme, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollRestoration, {}),
@@ -29007,8 +29011,22 @@ function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     }
   return newValues;
 }
-function resolveVariantFromProps(props, definition, custom, currentValues = {}, currentVelocity = {}) {
-  return typeof definition == "function" && (definition = definition(custom !== void 0 ? custom : props.custom, currentValues, currentVelocity)), typeof definition == "string" && (definition = props.variants && props.variants[definition]), typeof definition == "function" && (definition = definition(custom !== void 0 ? custom : props.custom, currentValues, currentVelocity)), definition;
+function getValueState(visualElement) {
+  const state = [{}, {}];
+  return visualElement?.values.forEach((value, key) => {
+    state[0][key] = value.get(), state[1][key] = value.getVelocity();
+  }), state;
+}
+function resolveVariantFromProps(props, definition, custom, visualElement) {
+  if (typeof definition == "function") {
+    const [current, velocity] = getValueState(visualElement);
+    definition = definition(custom !== void 0 ? custom : props.custom, current, velocity);
+  }
+  if (typeof definition == "string" && (definition = props.variants && props.variants[definition]), typeof definition == "function") {
+    const [current, velocity] = getValueState(visualElement);
+    definition = definition(custom !== void 0 ? custom : props.custom, current, velocity);
+  }
+  return definition;
 }
 function useConstant(init2) {
   const ref = reactExports.useRef(null);
@@ -29152,7 +29170,7 @@ function addHoverEvent(node, isActive) {
     const props = node.getProps();
     node.animationState && props.whileHover && node.animationState.setActive("whileHover", isActive);
     const callback = props[callbackName];
-    callback && callback(event, info);
+    callback && frame.postRender(() => callback(event, info));
   };
   return addPointerEvent(node.current, eventName, handleEvent, {
     passive: !node.getProps()[callbackName]
@@ -29203,8 +29221,8 @@ class PressGesture extends Feature {
       const props = this.node.getProps(), removePointerUpListener = addPointerEvent(window, "pointerup", (endEvent, endInfo) => {
         if (!this.checkPressEnd())
           return;
-        const { onTap, onTapCancel, globalTapTarget } = this.node.getProps();
-        !globalTapTarget && !isNodeOrChild(this.node.current, endEvent.target) ? onTapCancel && onTapCancel(endEvent, endInfo) : onTap && onTap(endEvent, endInfo);
+        const { onTap, onTapCancel, globalTapTarget } = this.node.getProps(), handler = !globalTapTarget && !isNodeOrChild(this.node.current, endEvent.target) ? onTapCancel : onTap;
+        handler && frame.update(() => handler(endEvent, endInfo));
       }, {
         passive: !(props.onTap || props.onPointerUp)
       }), removePointerCancelListener = addPointerEvent(window, "pointercancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), {
@@ -29218,7 +29236,7 @@ class PressGesture extends Feature {
         const handleKeyup = (keyupEvent) => {
           keyupEvent.key !== "Enter" || !this.checkPressEnd() || fireSyntheticPointerEvent("up", (event, info) => {
             const { onTap } = this.node.getProps();
-            onTap && onTap(event, info);
+            onTap && frame.postRender(() => onTap(event, info));
           });
         };
         this.removeEndListeners(), this.removeEndListeners = addDomEvent(this.node.current, "keyup", handleKeyup), fireSyntheticPointerEvent("down", (event, info) => {
@@ -29233,7 +29251,7 @@ class PressGesture extends Feature {
   startPress(event, info) {
     this.isPressing = !0;
     const { onTapStart, whileTap } = this.node.getProps();
-    whileTap && this.node.animationState && this.node.animationState.setActive("whileTap", !0), onTapStart && onTapStart(event, info);
+    whileTap && this.node.animationState && this.node.animationState.setActive("whileTap", !0), onTapStart && frame.postRender(() => onTapStart(event, info));
   }
   checkPressEnd() {
     return this.removeEndListeners(), this.isPressing = !1, this.node.getProps().whileTap && this.node.animationState && this.node.animationState.setActive("whileTap", !1), !isDragActive();
@@ -29242,7 +29260,7 @@ class PressGesture extends Feature {
     if (!this.checkPressEnd())
       return;
     const { onTapCancel } = this.node.getProps();
-    onTapCancel && onTapCancel(event, info);
+    onTapCancel && frame.postRender(() => onTapCancel(event, info));
   }
   mount() {
     const props = this.node.getProps(), removePointerListener = addPointerEvent(props.globalTapTarget ? window : this.node.current, "pointerdown", this.startPointerPress, {
@@ -29336,17 +29354,9 @@ function shallowCompare(next, prev) {
       return !1;
   return !0;
 }
-function getCurrent(visualElement) {
-  const current = {};
-  return visualElement.values.forEach((value, key) => current[key] = value.get()), current;
-}
-function getVelocity$1(visualElement) {
-  const velocity = {};
-  return visualElement.values.forEach((value, key) => velocity[key] = value.getVelocity()), velocity;
-}
 function resolveVariant(visualElement, definition, custom) {
   const props = visualElement.getProps();
-  return resolveVariantFromProps(props, definition, custom !== void 0 ? custom : props.custom, getCurrent(visualElement), getVelocity$1(visualElement));
+  return resolveVariantFromProps(props, definition, custom !== void 0 ? custom : props.custom, visualElement);
 }
 const secondsToMilliseconds = (seconds) => seconds * 1e3, millisecondsToSeconds = (milliseconds) => milliseconds / 1e3, underDampedSpring = {
   type: "spring",
@@ -29648,10 +29658,13 @@ function getAnimatableNone(key, value) {
   let defaultValueType = getDefaultValueType(key);
   return defaultValueType !== filter && (defaultValueType = complex), defaultValueType.getAnimatableNone ? defaultValueType.getAnimatableNone(value) : void 0;
 }
+const invalidTemplates = /* @__PURE__ */ new Set(["auto", "none", "0"]);
 function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) {
   let i2 = 0, animatableTemplate;
-  for (; i2 < unresolvedKeyframes.length && !animatableTemplate; )
-    typeof unresolvedKeyframes[i2] == "string" && unresolvedKeyframes[i2] !== "none" && unresolvedKeyframes[i2] !== "0" && (animatableTemplate = unresolvedKeyframes[i2]), i2++;
+  for (; i2 < unresolvedKeyframes.length && !animatableTemplate; ) {
+    const keyframe = unresolvedKeyframes[i2];
+    typeof keyframe == "string" && !invalidTemplates.has(keyframe) && analyseComplexValue(keyframe).values.length && (animatableTemplate = unresolvedKeyframes[i2]), i2++;
+  }
   if (animatableTemplate && name)
     for (const noneIndex of noneKeyframeIndexes)
       unresolvedKeyframes[noneIndex] = getAnimatableNone(name, animatableTemplate);
@@ -29672,8 +29685,8 @@ class DOMKeyframesResolver extends KeyframeResolver {
         resolved !== void 0 && (unresolvedKeyframes[i2] = resolved), i2 === unresolvedKeyframes.length - 1 && (this.finalKeyframe = keyframe);
       }
     }
-    if (!positionalKeys.has(name) || unresolvedKeyframes.length !== 2)
-      return this.resolveNoneKeyframes();
+    if (this.resolveNoneKeyframes(), !positionalKeys.has(name) || unresolvedKeyframes.length !== 2)
+      return;
     const [origin, target] = unresolvedKeyframes, originType = findDimensionValueType(origin), targetType = findDimensionValueType(target);
     if (originType !== targetType)
       if (isNumOrPxType(originType) && isNumOrPxType(targetType))
@@ -29730,6 +29743,8 @@ function canAnimate(keyframes2, name, type, velocity) {
   const originKeyframe = keyframes2[0];
   if (originKeyframe === null)
     return !1;
+  if (name === "display" || name === "visibility")
+    return !0;
   const targetKeyframe = keyframes2[keyframes2.length - 1], isOriginAnimatable = isAnimatable(originKeyframe, name), isTargetAnimatable = isAnimatable(targetKeyframe, name);
   return !isOriginAnimatable || !isTargetAnimatable ? !1 : hasKeyframesChanged(keyframes2) || type === "spring" && velocity;
 }
@@ -30003,7 +30018,10 @@ function asRGBA(color2) {
 const mixColor = (from, to) => {
   const fromRGBA = asRGBA(from), toRGBA = asRGBA(to), blended = { ...fromRGBA };
   return (v2) => (blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v2), blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v2), blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v2), blended.alpha = mixNumber$1(fromRGBA.alpha, toRGBA.alpha, v2), rgba.transform(blended));
-};
+}, invisibleValues = /* @__PURE__ */ new Set(["none", "hidden"]);
+function mixVisibility(origin, target) {
+  return invisibleValues.has(origin) ? (p2) => p2 <= 0 ? origin : target : (p2) => p2 >= 1 ? target : origin;
+}
 function mixImmediate(a, b2) {
   return (p2) => p2 > 0 ? b2 : a;
 }
@@ -30042,7 +30060,7 @@ function matchOrder(origin, target) {
 }
 const mixComplex = (origin, target) => {
   const template = complex.createTransformer(target), originStats = analyseComplexValue(origin), targetStats = analyseComplexValue(target);
-  return originStats.indexes.var.length === targetStats.indexes.var.length && originStats.indexes.color.length === targetStats.indexes.color.length && originStats.indexes.number.length >= targetStats.indexes.number.length ? pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template) : mixImmediate(origin, target);
+  return originStats.indexes.var.length === targetStats.indexes.var.length && originStats.indexes.color.length === targetStats.indexes.color.length && originStats.indexes.number.length >= targetStats.indexes.number.length ? invisibleValues.has(origin) && !targetStats.values.length || invisibleValues.has(target) && !originStats.values.length ? mixVisibility(origin, target) : pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template) : mixImmediate(origin, target);
 };
 function mix(from, to, p2) {
   return typeof from == "number" && typeof to == "number" && typeof p2 == "number" ? mixNumber$1(from, to, p2) : getMixer(from)(from, to);
@@ -30548,13 +30566,13 @@ class MotionValue {
    * @internal
    */
   constructor(init2, options = {}) {
-    this.version = "11.1.7", this.canTrackVelocity = !1, this.events = {}, this.updateAndNotify = (v2, render = !0) => {
+    this.version = "11.2.4", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v2, render = !0) => {
       const currentTime = time.now();
       this.updatedAt !== currentTime && this.setPrevFrameValue(), this.prev = this.current, this.setCurrent(v2), this.current !== this.prev && this.events.change && this.events.change.notify(this.current), render && this.events.renderRequest && this.events.renderRequest.notify(this.current);
-    }, this.hasAnimated = !1, this.setCurrent(init2), this.canTrackVelocity = isFloat(this.current), this.owner = options.owner;
+    }, this.hasAnimated = !1, this.setCurrent(init2), this.owner = options.owner;
   }
   setCurrent(current) {
-    this.current = current, this.updatedAt = time.now();
+    this.current = current, this.updatedAt = time.now(), this.canTrackVelocity === null && current !== void 0 && (this.canTrackVelocity = isFloat(this.current));
   }
   setPrevFrameValue(prevFrameValue = this.current) {
     this.prevFrameValue = prevFrameValue, this.prevUpdatedAt = this.updatedAt;
@@ -30770,7 +30788,7 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
     if (window.HandoffAppearAnimations) {
       const appearId = visualElement.getProps()[optimizedAppearDataAttribute];
       if (appearId) {
-        const elapsed = window.HandoffAppearAnimations(appearId, key);
+        const elapsed = window.HandoffAppearAnimations(appearId, key, value, frame);
         elapsed !== null && (valueTransition.elapsed = elapsed, isHandoff = !0);
       }
     }
@@ -31272,7 +31290,7 @@ class VisualElementDragControls {
           }
         }
         this.originPoint[axis] = current;
-      }), onDragStart && onDragStart(event, info);
+      }), onDragStart && frame.postRender(() => onDragStart(event, info));
       const { animationState } = this.visualElement;
       animationState && animationState.setActive("whileDrag", !0);
     }, onMove = (event, info) => {
@@ -31308,7 +31326,7 @@ class VisualElementDragControls {
     const { velocity } = info;
     this.startAnimation(velocity);
     const { onDragEnd } = this.getProps();
-    onDragEnd && onDragEnd(event, info);
+    onDragEnd && frame.postRender(() => onDragEnd(event, info));
   }
   cancel() {
     this.isDragging = !1;
@@ -31490,7 +31508,7 @@ class DragGesture extends Feature {
   }
 }
 const asyncHandler = (handler) => (event, info) => {
-  handler && handler(event, info);
+  handler && frame.postRender(() => handler(event, info));
 };
 class PanGesture extends Feature {
   constructor() {
@@ -31509,7 +31527,7 @@ class PanGesture extends Feature {
       onStart: asyncHandler(onPanStart),
       onMove: onPan,
       onEnd: (event, info) => {
-        delete this.session, onPanEnd && onPanEnd(event, info);
+        delete this.session, onPanEnd && frame.postRender(() => onPanEnd(event, info));
       }
     };
   }
@@ -33233,7 +33251,9 @@ function toDomPrecision(v2) {
   return v2 === null ? 0.01 : Math.round(v2 * 100) / 100;
 }
 const isSameNode = (a) => (b2) => a.id === b2.id && a.type === b2.type && Object.is(a.parentId, b2.parentId), SyncWithDiagram = reactExports.memo(() => {
-  const xyflow = useXYFlow(), xyflowApi = useXYStoreApi(), diagramStoreApi = useDiagramStoreApi();
+  const _xyflow = useXYFlow(), xyflowRef = reactExports.useRef(_xyflow);
+  xyflowRef.current = _xyflow;
+  const xyflowApi = useXYStoreApi(), diagramStoreApi = useDiagramStoreApi();
   return reactExports.useEffect(() => diagramStoreApi.subscribe(
     // selector
     (state) => ({
@@ -33246,7 +33266,7 @@ const isSameNode = (a) => (b2) => a.id === b2.id && a.type === b2.type && Object
     // listener
     ({ viewId, nodes, edges, ...opts }) => {
       const { lastOnNavigate } = diagramStoreApi.getState(), updates = diagramViewToXYFlowData({ nodes, edges }, opts);
-      if (xyflow.setNodes(
+      if (xyflowRef.current.setNodes(
         (prev) => updates.nodes.map((update) => {
           const existing = prev.find(isSameNode(update));
           return existing ? deepEqual(existing.data.element, update.data.element) ? existing : {
@@ -33254,7 +33274,7 @@ const isSameNode = (a) => (b2) => a.id === b2.id && a.type === b2.type && Object
             ...update
           } : update;
         })
-      ), xyflow.setEdges(
+      ), xyflowRef.current.setEdges(
         (prev) => updates.edges.map((update) => {
           const existing = prev.find((e2) => e2.id === update.id);
           return existing ? deepEqual(existing.data, update.data) ? existing : {
@@ -33267,22 +33287,20 @@ const isSameNode = (a) => (b2) => a.id === b2.id && a.type === b2.type && Object
         if (elTo) {
           const centerFrom = lastOnNavigate.elementCenterScreenPosition, nextZoom = Math.min(elFrom.width / elTo.width, elFrom.height / elTo.height);
           requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-              const v2 = xyflow.getViewport();
-              nextZoom < v2.zoom && xyflow.setViewport({
-                x: v2.x,
-                y: v2.y,
-                zoom: nextZoom
-              });
-              const centerTo = xyflow.flowToScreenPosition({
-                x: elTo.position[0] + elTo.width / 2,
-                y: elTo.position[1] + elTo.height / 2
-              }), diff = {
-                x: toDomPrecision(centerFrom.x - centerTo.x),
-                y: toDomPrecision(centerFrom.y - centerTo.y)
-              };
-              xyflowApi.getState().panBy(diff);
+            const v2 = xyflowRef.current.getViewport();
+            nextZoom < v2.zoom && xyflowRef.current.setViewport({
+              x: v2.x,
+              y: v2.y,
+              zoom: nextZoom
             });
+            const centerTo = xyflowRef.current.flowToScreenPosition({
+              x: elTo.position[0] + elTo.width / 2,
+              y: elTo.position[1] + elTo.height / 2
+            }), diff = {
+              x: toDomPrecision(centerFrom.x - centerTo.x),
+              y: toDomPrecision(centerFrom.y - centerTo.y)
+            };
+            xyflowApi.getState().panBy(diff);
           });
         }
         diagramStoreApi.setState(
@@ -33300,7 +33318,7 @@ const isSameNode = (a) => (b2) => a.id === b2.id && a.type === b2.type && Object
     {
       equalityFn: shallowEqual
     }
-  ), [xyflow, xyflowApi, diagramStoreApi]), null;
+  ), [xyflowApi, diagramStoreApi]), null;
 });
 function getVarName(variable) {
   var matches = variable.match(/^var\((.*)\)$/);
@@ -36644,7 +36662,7 @@ function Header({ diagram }) {
       /* @__PURE__ */ jsxRuntimeExports.jsx(ColorSchemeToggle, {}),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { orientation: "vertical" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { ml: "xs", size: isTablet ? "sm" : "xs", leftSection: /* @__PURE__ */ jsxRuntimeExports.jsx(IconShare, { size: 14 }), onClick: open, children: "Share" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ExportButton, {})
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ExportButton, { diagram })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       ShareModal,
@@ -36753,10 +36771,27 @@ function ViewPageButton({
     ] })
   ] });
 }
-function ExportButton() {
+function downloadImage(name, dataUrl) {
+  const a = document.createElement("a");
+  a.setAttribute("download", `${name}.png`), a.setAttribute("href", dataUrl), a.click();
+}
+function ExportButton({ diagram }) {
   const params = useParams({
     from: "/view/$viewId"
-  });
+  }), onClick = async () => {
+    const { toPng } = await import("./index-CgQjA8pD.js"), imageWidth = diagram.width + 32, imageHeight = diagram.height + 32;
+    toPng(document.querySelector(".react-flow__viewport"), {
+      backgroundColor: "transparent",
+      width: imageWidth,
+      height: imageHeight,
+      cacheBust: !0,
+      style: {
+        width: imageWidth + "px",
+        height: imageHeight + "px",
+        transform: "translate(16px, 16px) scale(1)"
+      }
+    }).then((data) => downloadImage(diagram.id, data));
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Menu, { shadow: "md", width: 200, trigger: "click-hover", openDelay: 200, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(MenuTarget, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Button,
@@ -36771,7 +36806,7 @@ function ExportButton() {
     ) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(MenuDropdown, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(MenuLabel, { children: "Current view" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { children: "Export as .png" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { onClick, children: "Export as .png" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { component: Link$1, to: "/view/$viewId/dot", search: !0, params, children: "Export as .dot" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { component: Link$1, to: "/view/$viewId/d2", search: !0, params, children: "Export as .d2" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { component: Link$1, to: "/view/$viewId/mmd", search: !0, params, children: "Export as .mmd" }),
@@ -37018,22 +37053,22 @@ const ViewViewIdReactLegacyLazyImport = createFileRoute(
   path: "/react-legacy",
   getParentRoute: () => ViewViewIdRoute
 }).lazy(
-  () => import("./view._viewId.react-legacy.lazy-CbH8iz1R.js").then((d2) => d2.Route)
+  () => import("./view._viewId.react-legacy.lazy-D82hW8RW.js").then((d2) => d2.Route)
 ), ViewViewIdMmdLazyRoute = ViewViewIdMmdLazyImport.update({
   path: "/mmd",
   getParentRoute: () => ViewViewIdRoute
 }).lazy(
-  () => import("./view._viewId.mmd.lazy-BH_rg5NV.js").then((d2) => d2.Route)
+  () => import("./view._viewId.mmd.lazy-CkKTxoM5.js").then((d2) => d2.Route)
 ), ViewViewIdDotLazyRoute = ViewViewIdDotLazyImport.update({
   path: "/dot",
   getParentRoute: () => ViewViewIdRoute
 }).lazy(
-  () => import("./view._viewId.dot.lazy-KvXSJdzM.js").then((d2) => d2.Route)
+  () => import("./view._viewId.dot.lazy-DC6I8DnA.js").then((d2) => d2.Route)
 ), ViewViewIdD2LazyRoute = ViewViewIdD2LazyImport.update({
   path: "/d2",
   getParentRoute: () => ViewViewIdRoute
 }).lazy(
-  () => import("./view._viewId.d2.lazy-BRVYHRy1.js").then((d2) => d2.Route)
+  () => import("./view._viewId.d2.lazy-DTd-VfOz.js").then((d2) => d2.Route)
 ), ViewViewIdEditorRoute = Route2.update({
   path: "/editor",
   getParentRoute: () => ViewViewIdRoute

package/dist/__app__/src/main.js

@@ -1 +1 @@
-import "./main-C8jsNnb9.js";
+import "./main-DDd-kcC2.js";