From 960eae8255f0891d69a348d045f2014cc9a76acf Mon Sep 17 00:00:00 2001
From: Kent Keirsey <31807370+hipsterusername@users.noreply.github.com>
Date: Tue, 30 Apr 2024 09:30:11 -0400
Subject: [PATCH 001/116] Update TRAINING.md

---
 docs/features/TRAINING.md | 276 +-------------------------------------
 1 file changed, 2 insertions(+), 274 deletions(-)

diff --git a/docs/features/TRAINING.md b/docs/features/TRAINING.md
index 7be9aff0f2..47f8557889 100644
--- a/docs/features/TRAINING.md
+++ b/docs/features/TRAINING.md
@@ -4,278 +4,6 @@ title: Training
 
 # :material-file-document: Training
 
-# Textual Inversion Training
-## **Personalizing Text-to-Image Generation**
+Invoke Training has moved to its own repository, with a dedicated UI for accessing common scripts like Textual Inversion and LoRA training.
 
-You may personalize the generated images to provide your own styles or objects
-by training a new LDM checkpoint and introducing a new vocabulary to the fixed
-model as a (.pt) embeddings file. Alternatively, you may use or train
-HuggingFace Concepts embeddings files (.bin) from
-<https://huggingface.co/sd-concepts-library> and its associated
-notebooks.
-
-## **Hardware and Software Requirements**
-
-You will need a GPU to perform training in a reasonable length of
-time, and at least 12 GB of VRAM. We recommend using the [`xformers`
-library](../installation/070_INSTALL_XFORMERS.md) to accelerate the
-training process further. During training, about ~8 GB is temporarily
-needed in order to store intermediate models, checkpoints and logs.
-
-## **Preparing for Training**
-
-To train, prepare a folder that contains 3-5 images that illustrate
-the object or concept. It is good to provide a variety of examples or
-poses to avoid overtraining the system. Format these images as PNG
-(preferred) or JPG. You do not need to resize or crop the images in
-advance, but for more control you may wish to do so.
-
-Place the training images in a directory on the machine InvokeAI runs
-on. We recommend placing them in a subdirectory of the
-`text-inversion-training-data` folder located in the InvokeAI root
-directory, ordinarily `~/invokeai` (Linux/Mac), or
-`C:\Users\your_name\invokeai` (Windows). For example, to create an
-embedding for the "psychedelic" style, you'd place the training images
-into the directory
-`~invokeai/text-inversion-training-data/psychedelic`.
-
-## **Launching Training Using the Console Front End**
-
-InvokeAI 2.3 and higher comes with a text console-based training front
-end. From within the `invoke.sh`/`invoke.bat` Invoke launcher script,
-start training tool selecting choice (3):
-
-```sh
-1 "Generate images with a browser-based interface"
-2 "Explore InvokeAI nodes using a command-line interface"
-3 "Textual inversion training"
-4 "Merge models (diffusers type only)"
-5 "Download and install models"
-6 "Change InvokeAI startup options"
-7 "Re-run the configure script to fix a broken install or to complete a major upgrade"
-8 "Open the developer console"
-9 "Update InvokeAI"
-```
-
-Alternatively, you can select option (8) or from the command line, with the InvokeAI virtual environment active,
-you can then launch the front end with the command `invokeai-ti --gui`.
-
-This will launch a text-based front end that will look like this:
-
-<figure markdown>
-![ti-frontend](../assets/textual-inversion/ti-frontend.png)
-</figure>
-
-The interface is keyboard-based. Move from field to field using
-control-N (^N) to move to the next field and control-P (^P) to the
-previous one. <Tab> and <shift-TAB> work as well. Once a field is
-active, use the cursor keys. In a checkbox group, use the up and down
-cursor keys to move from choice to choice, and <space> to select a
-choice. In a scrollbar, use the left and right cursor keys to increase
-and decrease the value of the scroll. In textfields, type the desired
-values.
-
-The number of parameters may look intimidating, but in most cases the
-predefined defaults work fine. The red circled fields in the above
-illustration are the ones you will adjust most frequently.
-
-### Model Name
-
-This will list all the diffusers models that are currently
-installed. Select the one you wish to use as the basis for your
-embedding. Be aware that if you use a SD-1.X-based model for your
-training, you will only be able to use this embedding with other
-SD-1.X-based models. Similarly, if you train on SD-2.X, you will only
-be able to use the embeddings with models based on SD-2.X.
-
-### Trigger Term
-
-This is the prompt term you will use to trigger the embedding. Type a
-single word or phrase you wish to use as the trigger, example
-"psychedelic" (without angle brackets). Within InvokeAI, you will then
-be able to activate the trigger using the syntax `<psychedelic>`.
-
-### Initializer
-
-This is a single character that is used internally during the training
-process as a placeholder for the trigger term. It defaults to "*" and
-can usually be left alone.
-
-### Resume from last saved checkpoint
-
-As training proceeds, textual inversion will write a series of
-intermediate files that can be used to resume training from where it
-was left off in the case of an interruption. This checkbox will be
-automatically selected if you provide a previously used trigger term
-and at least one checkpoint file is found on disk.
-
-Note that as of 20 January 2023, resume does not seem to be working
-properly due to an issue with the upstream code.
-
-### Data Training Directory
-
-This is the location of the images to be used for training. When you
-select a trigger term like "my-trigger", the frontend will prepopulate
-this field with `~/invokeai/text-inversion-training-data/my-trigger`,
-but you can change the path to wherever you want.
-
-### Output Destination Directory
-
-This is the location of the logs, checkpoint files, and embedding
-files created during training. When you select a trigger term like
-"my-trigger", the frontend will prepopulate this field with
-`~/invokeai/text-inversion-output/my-trigger`, but you can change the
-path to wherever you want.
-
-### Image resolution
-
-The images in the training directory will be automatically scaled to
-the value you use here. For best results, you will want to use the
-same default resolution of the underlying model (512 pixels for
-SD-1.5, 768 for the larger version of SD-2.1).
-
-### Center crop images
-
-If this is selected, your images will be center cropped to make them
-square before resizing them to the desired resolution. Center cropping
-can indiscriminately cut off the top of subjects' heads for portrait
-aspect images, so if you have images like this, you may wish to use a
-photoeditor to manually crop them to a square aspect ratio.
-
-### Mixed precision
-
-Select the floating point precision for the embedding. "no" will
-result in a full 32-bit precision, "fp16" will provide 16-bit
-precision, and "bf16" will provide mixed precision (only available
-when XFormers is used).
-
-### Max training steps
-
-How many steps the training will take before the model converges. Most
-training sets will converge with 2000-3000 steps.
-
-### Batch size
-
-This adjusts how many training images are processed simultaneously in
-each step. Higher values will cause the training process to run more
-quickly, but use more memory. The default size will run with GPUs with
-as little as 12 GB.
-
-### Learning rate
-
-The rate at which the system adjusts its internal weights during
-training. Higher values risk overtraining (getting the same image each
-time), and lower values will take more steps to train a good
-model. The default of 0.0005 is conservative; you may wish to increase
-it to 0.005 to speed up training.
-
-### Scale learning rate by number of GPUs, steps and batch size
-
-If this is selected (the default) the system will adjust the provided
-learning rate to improve performance.
-
-### Use xformers acceleration
-
-This will activate XFormers memory-efficient attention. You need to
-have XFormers installed for this to have an effect.
-
-### Learning rate scheduler
-
-This adjusts how the learning rate changes over the course of
-training. The default "constant" means to use a constant learning rate
-for the entire training session. The other values scale the learning
-rate according to various formulas.
-
-Only "constant" is supported by the XFormers library.
-
-### Gradient accumulation steps
-
-This is a parameter that allows you to use bigger batch sizes than
-your GPU's VRAM would ordinarily accommodate, at the cost of some
-performance.
-
-### Warmup steps
-
-If "constant_with_warmup" is selected in the learning rate scheduler,
-then this provides the number of warmup steps. Warmup steps have a
-very low learning rate, and are one way of preventing early
-overtraining.
-
-## The training run
-
-Start the training run by advancing to the OK button (bottom right)
-and pressing <enter>. A series of progress messages will be displayed
-as the training process proceeds. This may take an hour or two,
-depending on settings and the speed of your system. Various log and
-checkpoint files will be written into the output directory (ordinarily
-`~/invokeai/text-inversion-output/my-model/`)
-
-At the end of successful training, the system will copy the file
-`learned_embeds.bin` into the InvokeAI root directory's `embeddings`
-directory, using a subdirectory named after the trigger token. For
-example, if the trigger token was `psychedelic`, then look for the
-embeddings file in
-`~/invokeai/embeddings/psychedelic/learned_embeds.bin`
-
-You may now launch InvokeAI and try out a prompt that uses the trigger
-term. For example `a plate of banana sushi in <psychedelic> style`.
-
-## **Training with the Command-Line Script**
-
-Training can also be done using a traditional command-line script. It
-can be launched from within the "developer's console", or from the
-command line after activating InvokeAI's virtual environment.
-
-It accepts a large number of arguments, which can be summarized by
-passing the `--help` argument:
-
-```sh
-invokeai-ti --help
-```
-
-Typical usage is shown here:
-```sh
-invokeai-ti \
-       --model=stable-diffusion-1.5 \
-       --resolution=512 \
-       --learnable_property=style \
-       --initializer_token='*' \
-       --placeholder_token='<psychedelic>' \
-       --train_data_dir=/home/lstein/invokeai/training-data/psychedelic \
-       --output_dir=/home/lstein/invokeai/text-inversion-training/psychedelic \
-       --scale_lr \
-       --train_batch_size=8 \
-       --gradient_accumulation_steps=4 \
-       --max_train_steps=3000 \
-       --learning_rate=0.0005 \
-       --resume_from_checkpoint=latest \
-       --lr_scheduler=constant \
-       --mixed_precision=fp16 \
-       --only_save_embeds
-```
-
-## Troubleshooting
-
-### `Cannot load embedding for <trigger>. It was trained on a model with token dimension 1024, but the current model has token dimension 768`
-
-Messages like this indicate you trained the embedding on a different base model than the currently selected one.
-
-For example, in the error above, the training was done on SD2.1 (768x768) but it was used on SD1.5 (512x512).
-
-## Reading
-
-For more information on textual inversion, please see the following
-resources:
-
-* The [textual inversion repository](https://github.com/rinongal/textual_inversion) and
-  associated paper for details and limitations.
-* [HuggingFace's textual inversion training
-  page](https://huggingface.co/docs/diffusers/training/text_inversion)
-* [HuggingFace example script
-  documentation](https://github.com/huggingface/diffusers/tree/main/examples/textual_inversion)
-  (Note that this script is similar to, but not identical, to
-  `textual_inversion`, but produces embed files that are completely compatible.
-
----
-
-copyright (c) 2023, Lincoln Stein and the InvokeAI Development Team
+You can find more by visiting the repo at https://github.com/invoke-ai/invoke-training

From af868b0ea60bd8cdd5b19aa0af4eaa3d020db2f9 Mon Sep 17 00:00:00 2001
From: Kent Keirsey <31807370+hipsterusername@users.noreply.github.com>
Date: Tue, 30 Apr 2024 21:45:10 -0400
Subject: [PATCH 002/116] Update 010_INSTALL_AUTOMATED.md

---
 docs/installation/010_INSTALL_AUTOMATED.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/docs/installation/010_INSTALL_AUTOMATED.md b/docs/installation/010_INSTALL_AUTOMATED.md
index 5e2db65d7b..9eb8620321 100644
--- a/docs/installation/010_INSTALL_AUTOMATED.md
+++ b/docs/installation/010_INSTALL_AUTOMATED.md
@@ -1,8 +1,10 @@
-# Automatic Install
+# Automatic Install & Updates
 
-The installer is used for both new installs and updates.
+**The same packaged installer file can be used for both new installs and updates.**
+Using the installer for updates will leave everything you've added since installation, and just update the core libraries used to run Invoke.
+Simply use the same path you installed to originally.
 
-Both release and pre-release versions can be installed using it. It also supports install a wheel if needed.
+Both release and pre-release versions can be installed using the installer. It also supports install through a wheel if needed.
 
 Be sure to review the [installation requirements] and ensure your system has everything it needs to install Invoke.
 

From ab87511a0378ab7b33813550b1682836c956822d Mon Sep 17 00:00:00 2001
From: Kent Keirsey <31807370+hipsterusername@users.noreply.github.com>
Date: Tue, 30 Apr 2024 21:49:46 -0400
Subject: [PATCH 003/116] Update INSTALLATION.md

---
 docs/installation/INSTALLATION.md | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/docs/installation/INSTALLATION.md b/docs/installation/INSTALLATION.md
index 5c121e6170..267376f197 100644
--- a/docs/installation/INSTALLATION.md
+++ b/docs/installation/INSTALLATION.md
@@ -1,4 +1,4 @@
-# Installation Overview
+# Installation and Updating Overview
 
 Before installing, review the [installation requirements] to ensure your system is set up properly.
 
@@ -6,14 +6,21 @@ See the [FAQ] for frequently-encountered installation issues.
 
 If you need more help, join our [discord] or [create an issue].
 
-<h2>Automatic Install</h2>
+<h2>Automatic Install & Updates </h2>
 
 ✅ The automatic install is the best way to run InvokeAI. Check out the [installation guide] to get started.
 
+⬆️ The same installer is also the best way to update InvokeAI - Simply rerun it for the same folder you installed to.
+
+The installation process simply manages installation for the core libraries & application dependencies that run Invoke.
+Any models, images, or other assets in the Invoke root folder won't be affected by the installation process.
+
 <h2>Manual Install</h2>
 
 If you are familiar with python and want more control over the packages that are installed, you can [install InvokeAI manually via PyPI].
 
+Updates are managed by reinstalling the latest version through PyPi.
+
 <h2>Developer Install</h2>
 
 If you want to contribute to InvokeAI, consult the [developer install guide].

From 3cba53533dd7b84e8e4c1564ef84f37b70e216ea Mon Sep 17 00:00:00 2001
From: Kent Keirsey <31807370+hipsterusername@users.noreply.github.com>
Date: Tue, 30 Apr 2024 21:50:12 -0400
Subject: [PATCH 004/116] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f540e7be75..41de4882ee 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@
 
 Invoke is a leading creative engine built to empower professionals and enthusiasts alike. Generate and create stunning visual media using the latest AI-driven technologies. Invoke offers an industry leading web-based UI, and serves as the foundation for multiple commercial products.
 
-[Installation][installation docs] - [Documentation and Tutorials][docs home] - [Bug Reports][github issues] - [Contributing][contributing docs]
+[Installation and Updates][installation docs] - [Documentation and Tutorials][docs home] - [Bug Reports][github issues] - [Contributing][contributing docs]
 
 <div align="center">
 

From af9f0e0963be42be97907f4ed2047dd903f98c64 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 3 May 2024 18:43:45 +1000
Subject: [PATCH 005/116] feat(ui): cache control layer mask images

When invoking with control layers, we were creating and uploading the mask images on every enqueue, even when the mask didn't change. The mask image can be cached to greatly reduce the number of uploads.

With this change, we are a bit smarter about the mask images:
- Check if there is an uploaded mask image name
- If so, attempt to retrieve its DTO. Typically it will be in the RTKQ cache, so there is no network request, but it will make a network request if not cached to confirm the image actually exists on the server.
- If we don't have an uploaded mask image name, or the request fails, we go ahead and upload the generated blob
- Update the layer's state with a reference to this uploaded image for next time
- Continue as before

Any time we modify the mask (drawing/erasing, resetting the layer), we invalidate that cached image name (set it to null).

We now only upload images when we need to and generation starts faster.
---
 .../controlLayers/store/controlLayersSlice.ts | 12 +++++
 .../src/features/controlLayers/store/types.ts |  1 +
 .../util/graph/addControlLayersToGraph.ts     | 49 ++++++++++++-------
 3 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
index a1b5e0ebc8..50023b1399 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
@@ -86,6 +86,7 @@ const resetLayer = (layer: Layer) => {
     layer.isEnabled = true;
     layer.needsPixelBbox = false;
     layer.bboxNeedsUpdate = false;
+    layer.uploadedMaskImage = null;
     return;
   }
 };
@@ -173,6 +174,7 @@ export const controlLayersSlice = createSlice({
         if (bbox === null && layer.type === 'regional_guidance_layer') {
           // The layer was fully erased, empty its objects to prevent accumulation of invisible objects
           layer.maskObjects = [];
+          layer.uploadedMaskImage = null;
           layer.needsPixelBbox = false;
         }
       }
@@ -456,6 +458,7 @@ export const controlLayersSlice = createSlice({
           negativePrompt: null,
           ipAdapters: [],
           isSelected: true,
+          uploadedMaskImage: null,
         };
         state.layers.push(layer);
         state.selectedLayerId = layer.id;
@@ -505,6 +508,7 @@ export const controlLayersSlice = createSlice({
           strokeWidth: state.brushSize,
         });
         layer.bboxNeedsUpdate = true;
+        layer.uploadedMaskImage = null;
         if (!layer.needsPixelBbox && tool === 'eraser') {
           layer.needsPixelBbox = true;
         }
@@ -524,6 +528,7 @@ export const controlLayersSlice = createSlice({
       // TODO: Handle this in the event listener
       lastLine.points.push(point[0] - layer.x, point[1] - layer.y);
       layer.bboxNeedsUpdate = true;
+      layer.uploadedMaskImage = null;
     },
     rgLayerRectAdded: {
       reducer: (state, action: PayloadAction<{ layerId: string; rect: IRect; rectUuid: string }>) => {
@@ -543,9 +548,15 @@ export const controlLayersSlice = createSlice({
           height: rect.height,
         });
         layer.bboxNeedsUpdate = true;
+        layer.uploadedMaskImage = null;
       },
       prepare: (payload: { layerId: string; rect: IRect }) => ({ payload: { ...payload, rectUuid: uuidv4() } }),
     },
+    rgLayerMaskImageUploaded: (state, action: PayloadAction<{ layerId: string; imageDTO: ImageDTO }>) => {
+      const { layerId, imageDTO } = action.payload;
+      const layer = selectRGLayerOrThrow(state, layerId);
+      layer.uploadedMaskImage = imageDTOToImageWithDims(imageDTO);
+    },
     rgLayerAutoNegativeChanged: (
       state,
       action: PayloadAction<{ layerId: string; autoNegative: ParameterAutoNegative }>
@@ -825,6 +836,7 @@ export const {
   rgLayerLineAdded,
   rgLayerPointsAdded,
   rgLayerRectAdded,
+  rgLayerMaskImageUploaded,
   rgLayerAutoNegativeChanged,
   rgLayerIPAdapterAdded,
   rgLayerIPAdapterDeleted,
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/types.ts b/invokeai/frontend/web/src/features/controlLayers/store/types.ts
index cbb986bde2..afb04aae37 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/types.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/types.ts
@@ -72,6 +72,7 @@ export type RegionalGuidanceLayer = RenderableLayerBase & {
   previewColor: RgbColor;
   autoNegative: ParameterAutoNegative;
   needsPixelBbox: boolean; // Needs the slower pixel-based bbox calculation - set to true when an there is an eraser object
+  uploadedMaskImage: ImageWithDims | null;
 };
 
 export type InitialImageLayer = RenderableLayerBase & {
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
index da13fed9f5..30c15fae10 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
@@ -4,7 +4,9 @@ import {
   isControlAdapterLayer,
   isIPAdapterLayer,
   isRegionalGuidanceLayer,
+  rgLayerMaskImageUploaded,
 } from 'features/controlLayers/store/controlLayersSlice';
+import type { RegionalGuidanceLayer } from 'features/controlLayers/store/types';
 import {
   type ControlNetConfigV2,
   type ImageWithDims,
@@ -32,12 +34,13 @@ import {
 } from 'features/nodes/util/graph/constants';
 import { upsertMetadata } from 'features/nodes/util/graph/metadata';
 import { size } from 'lodash-es';
-import { imagesApi } from 'services/api/endpoints/images';
+import { getImageDTO, imagesApi } from 'services/api/endpoints/images';
 import type {
   CollectInvocation,
   ControlNetInvocation,
   CoreMetadataInvocation,
   Edge,
+  ImageDTO,
   IPAdapterInvocation,
   NonNullableGraph,
   S,
@@ -337,7 +340,6 @@ const addGlobalIPAdaptersToGraph = async (
 };
 
 export const addControlLayersToGraph = async (state: RootState, graph: NonNullableGraph, denoiseNodeId: string) => {
-  const { dispatch } = getStore();
   const mainModel = state.generation.model;
   assert(mainModel, 'Missing main model when building graph');
   const isSDXL = mainModel.base === 'sdxl';
@@ -404,10 +406,6 @@ export const addControlLayersToGraph = async (state: RootState, graph: NonNullab
       return hasTextPrompt || hasIPAdapter;
     });
 
-  const layerIds = rgLayers.map((l) => l.id);
-  const blobs = await getRegionalPromptLayerBlobs(layerIds);
-  assert(size(blobs) === size(layerIds), 'Mismatch between layer IDs and blobs');
-
   // TODO: We should probably just use conditioning collectors by default, and skip all this fanagling with re-routing
   // the existing conditioning nodes.
 
@@ -470,22 +468,15 @@ export const addControlLayersToGraph = async (state: RootState, graph: NonNullab
     },
   });
 
-  // Upload the blobs to the backend, add each to graph
-  // TODO: Store the uploaded image names in redux to reuse them, so long as the layer hasn't otherwise changed. This
-  // would be a great perf win - not only would we skip re-uploading the same image, but we'd be able to use the node
-  // cache (currently, when we re-use the same mask data, since it is a different image, the node cache is not used).
+  const layerIds = rgLayers.map((l) => l.id);
+  const blobs = await getRegionalPromptLayerBlobs(layerIds);
+  assert(size(blobs) === size(layerIds), 'Mismatch between layer IDs and blobs');
+
   for (const layer of rgLayers) {
     const blob = blobs[layer.id];
     assert(blob, `Blob for layer ${layer.id} not found`);
-
-    const file = new File([blob], `${layer.id}_mask.png`, { type: 'image/png' });
-    const req = dispatch(
-      imagesApi.endpoints.uploadImage.initiate({ file, image_category: 'mask', is_intermediate: true })
-    );
-    req.reset();
-
-    // TODO: This will raise on network error
-    const { image_name } = await req.unwrap();
+    // Upload the mask image, or get the cached image if it exists
+    const { image_name } = await getMaskImage(layer, blob);
 
     // The main mask-to-tensor node
     const maskToTensorNode: S['AlphaMaskToTensorInvocation'] = {
@@ -679,3 +670,23 @@ export const addControlLayersToGraph = async (state: RootState, graph: NonNullab
     }
   }
 };
+
+const getMaskImage = async (layer: RegionalGuidanceLayer, blob: Blob): Promise<ImageDTO> => {
+  if (layer.uploadedMaskImage) {
+    const imageDTO = await getImageDTO(layer.uploadedMaskImage.imageName);
+    if (imageDTO) {
+      return imageDTO;
+    }
+  }
+  const { dispatch } = getStore();
+  // No cached mask, or the cached image no longer exists - we need to upload the mask image
+  const file = new File([blob], `${layer.id}_mask.png`, { type: 'image/png' });
+  const req = dispatch(
+    imagesApi.endpoints.uploadImage.initiate({ file, image_category: 'mask', is_intermediate: true })
+  );
+  req.reset();
+
+  const imageDTO = await req.unwrap();
+  dispatch(rgLayerMaskImageUploaded({ layerId: layer.id, imageDTO }));
+  return imageDTO;
+};

From be7eeb576b534b45f70f5b50d50732c9a3cfaa95 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 3 May 2024 20:36:31 +1000
Subject: [PATCH 006/116] fix(ui): fix viewer getting stuck when spamming
 toggle

---
 .../features/gallery/components/ImageViewer/ImageViewer.tsx | 3 ++-
 .../frontend/web/src/features/ui/components/InvokeTabs.tsx  | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
index 874464f938..949e72fad1 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
@@ -42,8 +42,9 @@ export const ImageViewer = memo(() => {
   useHotkeys('z', onToggle, { enabled: isViewerEnabled }, [isViewerEnabled, onToggle]);
   useHotkeys('esc', onClose, { enabled: isViewerEnabled }, [isViewerEnabled, onClose]);
 
+  // The AnimatePresence mode must be wait - else framer can get confused if you spam the toggle button
   return (
-    <AnimatePresence>
+    <AnimatePresence mode="wait">
       {shouldShowViewer && (
         <Flex
           key="imageViewer"
diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
index 5e37a2d8c8..42df03872c 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@@ -254,11 +254,11 @@ const InvokeTabs = () => {
             />
           </>
         )}
-        <Panel style={{ position: 'relative' }} id="main-panel" order={1} minSize={20}>
-          <TabPanels w="full" h="full">
+        <Panel id="main-panel" order={1} minSize={20}>
+          <TabPanels w="full" h="full" position="relative">
             {tabPanels}
+            <ImageViewer />
           </TabPanels>
-          <ImageViewer />
         </Panel>
         {shouldShowGalleryPanel && (
           <>

From f4dde883cae92001df3f4d1633929f66c7db8ea6 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Fri, 3 May 2024 22:20:00 +0530
Subject: [PATCH 007/116] feat: improve the switch states of the control layers
 / viewer area

---
 invokeai/frontend/web/public/locales/en.json  |  1 +
 .../components/ImageViewer/EditorButton.tsx   | 30 ++++++++++++-------
 .../components/ImageViewer/ViewerButton.tsx   | 21 +++++++++++--
 3 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index a6d60fa281..826bd8ac01 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -143,6 +143,7 @@
         "alpha": "Alpha",
         "selected": "Selected",
         "viewer": "Viewer",
+        "controlLayers": "Control Layers",
         "tab": "Tab"
     },
     "controlnet": {
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx
index 2e10d057f8..2e50d33da7 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx
@@ -1,19 +1,21 @@
+import { IconButton } from '@chakra-ui/react';
 import { Button } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import type { InvokeTabName } from 'features/ui/store/tabMap';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PiArrowsDownUpBold } from 'react-icons/pi';
 
 import { useImageViewer } from './useImageViewer';
 
-const TAB_NAME_TO_TKEY: Record<InvokeTabName, string> = {
-  generation: 'ui.tabs.generationTab',
-  canvas: 'ui.tabs.canvasTab',
-  workflows: 'ui.tabs.workflowsTab',
-  models: 'ui.tabs.modelsTab',
-  queue: 'ui.tabs.queueTab',
-};
+// const TAB_NAME_TO_TKEY: Record<InvokeTabName, string> = {
+//   generation: 'ui.tabs.generationTab',
+//   canvas: 'ui.tabs.canvasTab',
+//   workflows: 'ui.tabs.workflowsTab',
+//   models: 'ui.tabs.modelsTab',
+//   queue: 'ui.tabs.queueTab',
+// };
 
 const TAB_NAME_TO_TKEY_SHORT: Record<InvokeTabName, string> = {
   generation: 'ui.tabs.generation',
@@ -27,11 +29,19 @@ export const EditorButton = () => {
   const { t } = useTranslation();
   const { onClose } = useImageViewer();
   const activeTabName = useAppSelector(activeTabNameSelector);
-  const tooltip = useMemo(() => t('gallery.switchTo', { tab: t(TAB_NAME_TO_TKEY[activeTabName]) }), [t, activeTabName]);
+
+  const tooltip = useMemo(
+    () =>
+      t('gallery.switchTo', {
+        tab: activeTabName === 'generation' ? t('common.controlLayers') : t(TAB_NAME_TO_TKEY_SHORT[activeTabName]),
+      }),
+    [t, activeTabName]
+  );
 
   return (
-    <Button aria-label={tooltip} tooltip={tooltip} onClick={onClose} variant="ghost">
-      {t(TAB_NAME_TO_TKEY_SHORT[activeTabName])}
+    <Button aria-label={tooltip} tooltip={tooltip} onClick={onClose} variant="outline" sx={{ display: 'flex', gap: 2 }}>
+      <IconButton aria-label={tooltip} variant="ghost" size="sm" icon={<PiArrowsDownUpBold />} />
+      {activeTabName === 'generation' ? t('common.controlLayers') : t(TAB_NAME_TO_TKEY_SHORT[activeTabName])}
     </Button>
   );
 };
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx
index a57ae9d1ee..2492c8cde3 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx
@@ -1,16 +1,33 @@
+import { IconButton } from '@chakra-ui/react';
 import { Button } from '@invoke-ai/ui-library';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PiArrowsDownUpBold } from 'react-icons/pi';
 
 import { useImageViewer } from './useImageViewer';
 
 export const ViewerButton = () => {
   const { t } = useTranslation();
   const { onOpen } = useImageViewer();
-  const tooltip = useMemo(() => t('gallery.switchTo', { tab: t('common.viewer') }), [t]);
+
+  const tooltip = useMemo(
+    () =>
+      t('gallery.switchTo', {
+        tab: t('common.viewer'),
+      }),
+    [t]
+  );
 
   return (
-    <Button aria-label={tooltip} tooltip={tooltip} onClick={onOpen} variant="ghost" pointerEvents="auto">
+    <Button
+      aria-label={tooltip}
+      tooltip={tooltip}
+      onClick={onOpen}
+      variant="outline"
+      pointerEvents="auto"
+      sx={{ display: 'flex', gap: 2 }}
+    >
+      <IconButton aria-label={tooltip} variant="ghost" size="sm" icon={<PiArrowsDownUpBold />} />
       {t('common.viewer')}
     </Button>
   );

From 68d1458c8356303a2dcdd9772bba53eb0cbba0f8 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 4 May 2024 08:37:59 +1000
Subject: [PATCH 008/116] fix(ui): address feedback

---
 invokeai/frontend/web/public/locales/en.json  |  3 +-
 .../components/ImageViewer/EditorButton.tsx   | 28 +++++++------------
 .../components/ImageViewer/ViewerButton.tsx   | 13 ++-------
 3 files changed, 13 insertions(+), 31 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 826bd8ac01..37a2a7a5da 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -143,7 +143,6 @@
         "alpha": "Alpha",
         "selected": "Selected",
         "viewer": "Viewer",
-        "controlLayers": "Control Layers",
         "tab": "Tab"
     },
     "controlnet": {
@@ -1535,7 +1534,7 @@
         "moveForward": "Move Forward",
         "moveBackward": "Move Backward",
         "brushSize": "Brush Size",
-        "controlLayers": "Control Layers (BETA)",
+        "controlLayers": "Control Layers",
         "globalMaskOpacity": "Global Mask Opacity",
         "autoNegative": "Auto Negative",
         "toggleVisibility": "Toggle Layer Visibility",
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx
index 2e50d33da7..cc2aa8c543 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx
@@ -1,4 +1,3 @@
-import { IconButton } from '@chakra-ui/react';
 import { Button } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import type { InvokeTabName } from 'features/ui/store/tabMap';
@@ -9,16 +8,8 @@ import { PiArrowsDownUpBold } from 'react-icons/pi';
 
 import { useImageViewer } from './useImageViewer';
 
-// const TAB_NAME_TO_TKEY: Record<InvokeTabName, string> = {
-//   generation: 'ui.tabs.generationTab',
-//   canvas: 'ui.tabs.canvasTab',
-//   workflows: 'ui.tabs.workflowsTab',
-//   models: 'ui.tabs.modelsTab',
-//   queue: 'ui.tabs.queueTab',
-// };
-
 const TAB_NAME_TO_TKEY_SHORT: Record<InvokeTabName, string> = {
-  generation: 'ui.tabs.generation',
+  generation: 'controlLayers.controlLayers',
   canvas: 'ui.tabs.canvas',
   workflows: 'ui.tabs.workflows',
   models: 'ui.tabs.models',
@@ -29,19 +20,20 @@ export const EditorButton = () => {
   const { t } = useTranslation();
   const { onClose } = useImageViewer();
   const activeTabName = useAppSelector(activeTabNameSelector);
-
   const tooltip = useMemo(
-    () =>
-      t('gallery.switchTo', {
-        tab: activeTabName === 'generation' ? t('common.controlLayers') : t(TAB_NAME_TO_TKEY_SHORT[activeTabName]),
-      }),
+    () => t('gallery.switchTo', { tab: t(TAB_NAME_TO_TKEY_SHORT[activeTabName]) }),
     [t, activeTabName]
   );
 
   return (
-    <Button aria-label={tooltip} tooltip={tooltip} onClick={onClose} variant="outline" sx={{ display: 'flex', gap: 2 }}>
-      <IconButton aria-label={tooltip} variant="ghost" size="sm" icon={<PiArrowsDownUpBold />} />
-      {activeTabName === 'generation' ? t('common.controlLayers') : t(TAB_NAME_TO_TKEY_SHORT[activeTabName])}
+    <Button
+      aria-label={tooltip}
+      tooltip={tooltip}
+      onClick={onClose}
+      variant="outline"
+      leftIcon={<PiArrowsDownUpBold />}
+    >
+      {t(TAB_NAME_TO_TKEY_SHORT[activeTabName])}
     </Button>
   );
 };
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx
index 2492c8cde3..edceb5099c 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx
@@ -1,4 +1,3 @@
-import { IconButton } from '@chakra-ui/react';
 import { Button } from '@invoke-ai/ui-library';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -9,14 +8,7 @@ import { useImageViewer } from './useImageViewer';
 export const ViewerButton = () => {
   const { t } = useTranslation();
   const { onOpen } = useImageViewer();
-
-  const tooltip = useMemo(
-    () =>
-      t('gallery.switchTo', {
-        tab: t('common.viewer'),
-      }),
-    [t]
-  );
+  const tooltip = useMemo(() => t('gallery.switchTo', { tab: t('common.viewer') }), [t]);
 
   return (
     <Button
@@ -25,9 +17,8 @@ export const ViewerButton = () => {
       onClick={onOpen}
       variant="outline"
       pointerEvents="auto"
-      sx={{ display: 'flex', gap: 2 }}
+      leftIcon={<PiArrowsDownUpBold />}
     >
-      <IconButton aria-label={tooltip} variant="ghost" size="sm" icon={<PiArrowsDownUpBold />} />
       {t('common.viewer')}
     </Button>
   );

From 4beccea6e7008cb55810229d0d47affbf12525c9 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 4 May 2024 09:02:27 +1000
Subject: [PATCH 009/116] fix(ui): do not run HRO if using an initial image

---
 .../nodes/util/graph/addInitialImageToLinearGraph.ts     | 9 +++++++--
 .../features/nodes/util/graph/buildGenerationTabGraph.ts | 4 ++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addInitialImageToLinearGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addInitialImageToLinearGraph.ts
index 603708f15b..eae45acc5b 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addInitialImageToLinearGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addInitialImageToLinearGraph.ts
@@ -6,11 +6,14 @@ import { assert } from 'tsafe';
 
 import { IMAGE_TO_LATENTS, NOISE, RESIZE } from './constants';
 
+/**
+ * Returns true if an initial image was added, false if not.
+ */
 export const addInitialImageToLinearGraph = (
   state: RootState,
   graph: NonNullableGraph,
   denoiseNodeId: string
-): void => {
+): boolean => {
   // Remove Existing UNet Connections
   const { img2imgStrength, vaePrecision, model } = state.generation;
   const { refinerModel, refinerStart } = state.sdxl;
@@ -19,7 +22,7 @@ export const addInitialImageToLinearGraph = (
   const initialImage = initialImageLayer?.isEnabled ? initialImageLayer?.image : null;
 
   if (!initialImage) {
-    return;
+    return false;
   }
 
   const isSDXL = model?.base === 'sdxl';
@@ -122,4 +125,6 @@ export const addInitialImageToLinearGraph = (
     strength: img2imgStrength,
     init_image: initialImage.imageName,
   });
+
+  return true;
 };
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildGenerationTabGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildGenerationTabGraph.ts
index 6c04b25770..41f9f4f748 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildGenerationTabGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildGenerationTabGraph.ts
@@ -232,7 +232,7 @@ export const buildGenerationTabGraph = async (state: RootState): Promise<NonNull
     LATENTS_TO_IMAGE
   );
 
-  addInitialImageToLinearGraph(state, graph, DENOISE_LATENTS);
+  const didAddInitialImage = addInitialImageToLinearGraph(state, graph, DENOISE_LATENTS);
 
   // Add Seamless To Graph
   if (seamlessXAxis || seamlessYAxis) {
@@ -249,7 +249,7 @@ export const buildGenerationTabGraph = async (state: RootState): Promise<NonNull
   await addControlLayersToGraph(state, graph, DENOISE_LATENTS);
 
   // High resolution fix.
-  if (state.hrf.hrfEnabled) {
+  if (state.hrf.hrfEnabled && !didAddInitialImage) {
     addHrfToGraph(state, graph);
   }
 

From 2888845f7c9464bac02c5842b0c14ed3e780bfd6 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 4 May 2024 09:07:24 +1000
Subject: [PATCH 010/116] fix(ui): invalidate mask cache when moving layer

---
 .../web/src/features/controlLayers/store/controlLayersSlice.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
index 50023b1399..8adbae6d80 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
@@ -164,6 +164,9 @@ export const controlLayersSlice = createSlice({
         layer.x = x;
         layer.y = y;
       }
+      if (isRegionalGuidanceLayer(layer)) {
+        layer.uploadedMaskImage = null;
+      }
     },
     layerBboxChanged: (state, action: PayloadAction<{ layerId: string; bbox: IRect | null }>) => {
       const { layerId, bbox } = action.payload;

From 6d2fe3b691d67ffde33b1d612b37ad5b949019d1 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 4 May 2024 09:08:45 +1000
Subject: [PATCH 011/116] tidy(ui): clean up layer reset logic

---
 .../controlLayers/components/ToolChooser.tsx  | 10 +++++--
 .../controlLayers/store/controlLayersSlice.ts | 28 ++++++-------------
 2 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ToolChooser.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ToolChooser.tsx
index 53535b4248..f97a0f35e5 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ToolChooser.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ToolChooser.tsx
@@ -4,9 +4,9 @@ import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   $tool,
+  layerReset,
   selectControlLayersSlice,
   selectedLayerDeleted,
-  selectedLayerReset,
 } from 'features/controlLayers/store/controlLayersSlice';
 import { useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -22,6 +22,7 @@ export const ToolChooser: React.FC = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const isDisabled = useAppSelector(selectIsDisabled);
+  const selectedLayerId = useAppSelector((s) => s.controlLayers.present.selectedLayerId);
   const tool = useStore($tool);
 
   const setToolToBrush = useCallback(() => {
@@ -42,8 +43,11 @@ export const ToolChooser: React.FC = () => {
   useHotkeys('v', setToolToMove, { enabled: !isDisabled }, [isDisabled]);
 
   const resetSelectedLayer = useCallback(() => {
-    dispatch(selectedLayerReset());
-  }, [dispatch]);
+    if (selectedLayerId === null) {
+      return;
+    }
+    dispatch(layerReset(selectedLayerId));
+  }, [dispatch, selectedLayerId]);
   useHotkeys('shift+c', resetSelectedLayer);
 
   const deleteSelectedLayer = useCallback(() => {
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
index 8adbae6d80..f6a6f0b38d 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
@@ -79,17 +79,6 @@ export const isRenderableLayer = (
   layer?.type === 'regional_guidance_layer' ||
   layer?.type === 'control_adapter_layer' ||
   layer?.type === 'initial_image_layer';
-const resetLayer = (layer: Layer) => {
-  if (layer.type === 'regional_guidance_layer') {
-    layer.maskObjects = [];
-    layer.bbox = null;
-    layer.isEnabled = true;
-    layer.needsPixelBbox = false;
-    layer.bboxNeedsUpdate = false;
-    layer.uploadedMaskImage = null;
-    return;
-  }
-};
 
 export const selectCALayerOrThrow = (state: ControlLayersState, layerId: string): ControlAdapterLayer => {
   const layer = state.layers.find((l) => l.id === layerId);
@@ -184,8 +173,14 @@ export const controlLayersSlice = createSlice({
     },
     layerReset: (state, action: PayloadAction<string>) => {
       const layer = state.layers.find((l) => l.id === action.payload);
-      if (layer) {
-        resetLayer(layer);
+      // TODO(psyche): Should other layer types also have reset functionality?
+      if (isRegionalGuidanceLayer(layer)) {
+        layer.maskObjects = [];
+        layer.bbox = null;
+        layer.isEnabled = true;
+        layer.needsPixelBbox = false;
+        layer.bboxNeedsUpdate = false;
+        layer.uploadedMaskImage = null;
       }
     },
     layerDeleted: (state, action: PayloadAction<string>) => {
@@ -218,12 +213,6 @@ export const controlLayersSlice = createSlice({
       moveToFront(renderableLayers, cb);
       state.layers = [...ipAdapterLayers, ...renderableLayers];
     },
-    selectedLayerReset: (state) => {
-      const layer = state.layers.find((l) => l.id === state.selectedLayerId);
-      if (layer) {
-        resetLayer(layer);
-      }
-    },
     selectedLayerDeleted: (state) => {
       state.layers = state.layers.filter((l) => l.id !== state.selectedLayerId);
       state.selectedLayerId = state.layers[0]?.id ?? null;
@@ -806,7 +795,6 @@ export const {
   layerMovedToFront,
   layerMovedBackward,
   layerMovedToBack,
-  selectedLayerReset,
   selectedLayerDeleted,
   allLayersDeleted,
   // CA Layers

From 26613f10c724a7b4520a0a95bb387169aab22a4e Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 4 May 2024 09:52:41 +1000
Subject: [PATCH 012/116] feat(ui): close viewer when user switches tabs

---
 .../frontend/web/src/features/gallery/store/gallerySlice.ts   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
index 373d946469..60ed692ba2 100644
--- a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
+++ b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
@@ -1,6 +1,7 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice, isAnyOf } from '@reduxjs/toolkit';
 import type { PersistConfig, RootState } from 'app/store/store';
+import { setActiveTab } from 'features/ui/store/uiSlice';
 import { uniqBy } from 'lodash-es';
 import { boardsApi } from 'services/api/endpoints/boards';
 import { imagesApi } from 'services/api/endpoints/images';
@@ -83,6 +84,9 @@ export const gallerySlice = createSlice({
     },
   },
   extraReducers: (builder) => {
+    builder.addCase(setActiveTab, (state) => {
+      state.isImageViewerOpen = false;
+    });
     builder.addMatcher(isAnyBoardDeleted, (state, action) => {
       const deletedBoardId = action.meta.arg.originalArgs;
       if (deletedBoardId === state.selectedBoardId) {

From 6bdded85dafbe73be73120c9457eb40cd0c6ef10 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 4 May 2024 10:05:42 +1000
Subject: [PATCH 013/116] fix(ui): do not auto-hide next/prev image buttons

---
 .../components/ImageViewer/CurrentImagePreview.tsx       | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
index 37fada0b78..35abf07965 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
@@ -52,17 +52,20 @@ const CurrentImagePreview = () => {
   // Show and hide the next/prev buttons on mouse move
   const [shouldShowNextPrevButtons, setShouldShowNextPrevButtons] = useState<boolean>(false);
   const timeoutId = useRef(0);
-  const onMouseMove = useCallback(() => {
+  const onMouseOver = useCallback(() => {
     setShouldShowNextPrevButtons(true);
     window.clearTimeout(timeoutId.current);
+  }, []);
+  const onMouseOut = useCallback(() => {
     timeoutId.current = window.setTimeout(() => {
       setShouldShowNextPrevButtons(false);
-    }, 1000);
+    }, 500);
   }, []);
 
   return (
     <Flex
-      onMouseMove={onMouseMove}
+      onMouseOver={onMouseOver}
+      onMouseOut={onMouseOut}
       width="full"
       height="full"
       alignItems="center"

From 8794b99d51b9361174ad00d2098ecc8fda6fbb4a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 4 May 2024 10:16:00 +1000
Subject: [PATCH 014/116] fix(ui): save upscaled images to gallery on canvas
 tab

---
 .../src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts
index 52c09b1db0..6c90dafd25 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildAdHocUpscaleGraph.ts
@@ -1,5 +1,5 @@
 import type { RootState } from 'app/store/store';
-import { getBoardField, getIsIntermediate } from 'features/nodes/util/graph/graphBuilderUtils';
+import { getBoardField } from 'features/nodes/util/graph/graphBuilderUtils';
 import type { ESRGANInvocation, Graph, NonNullableGraph } from 'services/api/types';
 
 import { ESRGAN } from './constants';
@@ -18,7 +18,7 @@ export const buildAdHocUpscaleGraph = ({ image_name, state }: Arg): Graph => {
     type: 'esrgan',
     image: { image_name },
     model_name: esrganModelName,
-    is_intermediate: getIsIntermediate(state),
+    is_intermediate: false,
     board: getBoardField(state),
   };
 

From 5cb1ff8679c075be0e2286cb1ab6de5db2d9e528 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 4 May 2024 14:42:29 +1000
Subject: [PATCH 015/116] fix(ui): open viewer on image click, not select

---
 .../listenerMiddleware/listeners/galleryImageClicked.ts        | 3 ++-
 .../frontend/web/src/features/gallery/store/gallerySlice.ts    | 2 --
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts
index 67c6d076ee..6b8c9b4ea3 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts
@@ -1,7 +1,7 @@
 import { createAction } from '@reduxjs/toolkit';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors';
-import { selectionChanged } from 'features/gallery/store/gallerySlice';
+import { isImageViewerOpenChanged, selectionChanged } from 'features/gallery/store/gallerySlice';
 import { imagesApi } from 'services/api/endpoints/images';
 import type { ImageDTO } from 'services/api/types';
 import { imagesSelectors } from 'services/api/util';
@@ -62,6 +62,7 @@ export const addGalleryImageClickedListener = (startAppListening: AppStartListen
       } else {
         dispatch(selectionChanged([imageDTO]));
       }
+      dispatch(isImageViewerOpenChanged(true));
     },
   });
 };
diff --git a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
index 60ed692ba2..5248977825 100644
--- a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
+++ b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
@@ -31,11 +31,9 @@ export const gallerySlice = createSlice({
   reducers: {
     imageSelected: (state, action: PayloadAction<ImageDTO | null>) => {
       state.selection = action.payload ? [action.payload] : [];
-      state.isImageViewerOpen = true;
     },
     selectionChanged: (state, action: PayloadAction<ImageDTO[]>) => {
       state.selection = uniqBy(action.payload, (i) => i.image_name);
-      state.isImageViewerOpen = true;
     },
     shouldAutoSwitchChanged: (state, action: PayloadAction<boolean>) => {
       state.shouldAutoSwitch = action.payload;

From 7ca613d41cc7d930ea9a61ea97e24fa1e4bf0f02 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 4 May 2024 18:41:14 +1000
Subject: [PATCH 016/116] feat(ui): snap cursor pos when drawing rects

- Rects snap to stage edge when within a threshold (10 screen pixels)
- When mouse leaves stage, set last mousedown pos to null, preventing nonfunctional rect outlines

Partially addresses #6306.

There's a technical challenge to fully address the issue - mouse event are not fired when the mouse is outside the stage. While we could draw the rect even if the mouse leaves, we cannot update the rect's dimensions on mouse move, or complete the drawing on mouse up.

To fully address the issue, we'd need to a way to forward window events back to the stage, or at least handle window events. We can explore this later.
---
 .../controlLayers/hooks/mouseEventHooks.ts    | 39 ++++++++++++++++---
 .../features/controlLayers/util/renderers.ts  | 11 +++---
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts
index 889d2c0c2e..03595fb82d 100644
--- a/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts
@@ -22,10 +22,33 @@ const getIsFocused = (stage: Konva.Stage) => {
 };
 const getIsMouseDown = (e: KonvaEventObject<MouseEvent>) => e.evt.buttons === 1;
 
+const SNAP_PX = 10;
+
+export const snapPosToStage = (pos: Vector2d, stage: Konva.Stage) => {
+  const snappedPos = { ...pos };
+  // Get the normalized threshold for snapping to the edge of the stage
+  const thresholdX = SNAP_PX / stage.scaleX();
+  const thresholdY = SNAP_PX / stage.scaleY();
+  const stageWidth = stage.width() / stage.scaleX();
+  const stageHeight = stage.height() / stage.scaleY();
+  // Snap to the edge of the stage if within threshold
+  if (pos.x - thresholdX < 0) {
+    snappedPos.x = 0;
+  } else if (pos.x + thresholdX > stageWidth) {
+    snappedPos.x = Math.floor(stageWidth);
+  }
+  if (pos.y - thresholdY < 0) {
+    snappedPos.y = 0;
+  } else if (pos.y + thresholdY > stageHeight) {
+    snappedPos.y = Math.floor(stageHeight);
+  }
+  return snappedPos;
+};
+
 export const getScaledFlooredCursorPosition = (stage: Konva.Stage) => {
   const pointerPosition = stage.getPointerPosition();
   const stageTransform = stage.getAbsoluteTransform().copy();
-  if (!pointerPosition || !stageTransform) {
+  if (!pointerPosition) {
     return;
   }
   const scaledCursorPosition = stageTransform.invert().point(pointerPosition);
@@ -71,7 +94,6 @@ export const useMouseEvents = () => {
       if (!pos || !selectedLayerId || selectedLayerType !== 'regional_guidance_layer') {
         return;
       }
-      $lastMouseDownPos.set(pos);
       if (tool === 'brush' || tool === 'eraser') {
         dispatch(
           rgLayerLineAdded({
@@ -81,6 +103,9 @@ export const useMouseEvents = () => {
           })
         );
         $isDrawing.set(true);
+        $lastMouseDownPos.set(pos);
+      } else if (tool === 'rect') {
+        $lastMouseDownPos.set(snapPosToStage(pos, stage));
       }
     },
     [dispatch, selectedLayerId, selectedLayerType, tool]
@@ -99,14 +124,15 @@ export const useMouseEvents = () => {
       const lastPos = $lastMouseDownPos.get();
       const tool = $tool.get();
       if (lastPos && selectedLayerId && tool === 'rect') {
+        const snappedPos = snapPosToStage(pos, stage);
         dispatch(
           rgLayerRectAdded({
             layerId: selectedLayerId,
             rect: {
-              x: Math.min(pos.x, lastPos.x),
-              y: Math.min(pos.y, lastPos.y),
-              width: Math.abs(pos.x - lastPos.x),
-              height: Math.abs(pos.y - lastPos.y),
+              x: Math.min(snappedPos.x, lastPos.x),
+              y: Math.min(snappedPos.y, lastPos.y),
+              width: Math.abs(snappedPos.x - lastPos.x),
+              height: Math.abs(snappedPos.y - lastPos.y),
             },
           })
         );
@@ -163,6 +189,7 @@ export const useMouseEvents = () => {
       }
       $isDrawing.set(false);
       $cursorPosition.set(null);
+      $lastMouseDownPos.set(null);
     },
     [selectedLayerId, selectedLayerType, tool, dispatch]
   );
diff --git a/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts b/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
index 36083d2d92..9f24232240 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
@@ -1,6 +1,6 @@
 import { getStore } from 'app/store/nanostores/store';
 import { rgbaColorToString, rgbColorToString } from 'features/canvas/util/colorToString';
-import { getScaledFlooredCursorPosition } from 'features/controlLayers/hooks/mouseEventHooks';
+import { getScaledFlooredCursorPosition, snapPosToStage } from 'features/controlLayers/hooks/mouseEventHooks';
 import {
   $tool,
   BACKGROUND_LAYER_ID,
@@ -211,12 +211,13 @@ const renderToolPreview = (
   }
 
   if (cursorPos && lastMouseDownPos && tool === 'rect') {
+    const snappedPos = snapPosToStage(cursorPos, stage);
     const rectPreview = toolPreviewLayer.findOne<Konva.Rect>(`#${TOOL_PREVIEW_RECT_ID}`);
     rectPreview?.setAttrs({
-      x: Math.min(cursorPos.x, lastMouseDownPos.x),
-      y: Math.min(cursorPos.y, lastMouseDownPos.y),
-      width: Math.abs(cursorPos.x - lastMouseDownPos.x),
-      height: Math.abs(cursorPos.y - lastMouseDownPos.y),
+      x: Math.min(snappedPos.x, lastMouseDownPos.x),
+      y: Math.min(snappedPos.y, lastMouseDownPos.y),
+      width: Math.abs(snappedPos.x - lastMouseDownPos.x),
+      height: Math.abs(snappedPos.y - lastMouseDownPos.y),
     });
     rectPreview?.visible(true);
   } else {

From ac0b9ba290cfe96597936a470a48066c63798ae4 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 4 May 2024 19:01:18 +1000
Subject: [PATCH 017/116] tidy(ui): `$cursorPosition` -> `$lastCursorPos`

---
 .../features/controlLayers/components/StageComponent.tsx  | 8 ++++----
 .../src/features/controlLayers/hooks/mouseEventHooks.ts   | 8 ++++----
 .../features/controlLayers/store/controlLayersSlice.ts    | 2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
index c66c15d61b..d0d693a5f2 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
@@ -6,7 +6,7 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useMouseEvents } from 'features/controlLayers/hooks/mouseEventHooks';
 import {
-  $cursorPosition,
+  $lastCursorPos,
   $lastMouseDownPos,
   $tool,
   isRegionalGuidanceLayer,
@@ -48,7 +48,7 @@ const useStageRenderer = (
   const state = useAppSelector((s) => s.controlLayers.present);
   const tool = useStore($tool);
   const mouseEventHandlers = useMouseEvents();
-  const cursorPosition = useStore($cursorPosition);
+  const lastCursorPos = useStore($lastCursorPos);
   const lastMouseDownPos = useStore($lastMouseDownPos);
   const selectedLayerIdColor = useAppSelector(selectSelectedLayerColor);
   const selectedLayerType = useAppSelector(selectSelectedLayerType);
@@ -141,7 +141,7 @@ const useStageRenderer = (
       selectedLayerIdColor,
       selectedLayerType,
       state.globalMaskLayerOpacity,
-      cursorPosition,
+      lastCursorPos,
       lastMouseDownPos,
       state.brushSize
     );
@@ -152,7 +152,7 @@ const useStageRenderer = (
     selectedLayerIdColor,
     selectedLayerType,
     state.globalMaskLayerOpacity,
-    cursorPosition,
+    lastCursorPos,
     lastMouseDownPos,
     state.brushSize,
     renderers,
diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts
index 03595fb82d..b9716ba217 100644
--- a/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts
@@ -3,8 +3,8 @@ import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { calculateNewBrushSize } from 'features/canvas/hooks/useCanvasZoom';
 import {
-  $cursorPosition,
   $isDrawing,
+  $lastCursorPos,
   $lastMouseDownPos,
   $tool,
   brushSizeChanged,
@@ -63,7 +63,7 @@ const syncCursorPos = (stage: Konva.Stage): Vector2d | null => {
   if (!pos) {
     return null;
   }
-  $cursorPosition.set(pos);
+  $lastCursorPos.set(pos);
   return pos;
 };
 
@@ -117,7 +117,7 @@ export const useMouseEvents = () => {
       if (!stage) {
         return;
       }
-      const pos = $cursorPosition.get();
+      const pos = $lastCursorPos.get();
       if (!pos || !selectedLayerId || selectedLayerType !== 'regional_guidance_layer') {
         return;
       }
@@ -188,7 +188,7 @@ export const useMouseEvents = () => {
         dispatch(rgLayerPointsAdded({ layerId: selectedLayerId, point: [pos.x, pos.y] }));
       }
       $isDrawing.set(false);
-      $cursorPosition.set(null);
+      $lastCursorPos.set(null);
       $lastMouseDownPos.set(null);
     },
     [selectedLayerId, selectedLayerType, tool, dispatch]
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
index f6a6f0b38d..fc1887f425 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
@@ -866,7 +866,7 @@ const migrateControlLayersState = (state: any): any => {
 export const $isDrawing = atom(false);
 export const $lastMouseDownPos = atom<Vector2d | null>(null);
 export const $tool = atom<Tool>('brush');
-export const $cursorPosition = atom<Vector2d | null>(null);
+export const $lastCursorPos = atom<Vector2d | null>(null);
 
 // IDs for singleton Konva layers and objects
 export const TOOL_PREVIEW_LAYER_ID = 'tool_preview_layer';

From 806a8f69c582dcb4c4ba54d73ad09ff4b2a64f2a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 4 May 2024 21:34:51 +1000
Subject: [PATCH 018/116] perf(ui): rerender of opacity sliders

---
 .../web/src/features/controlLayers/hooks/layerStateHooks.ts    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/layerStateHooks.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/layerStateHooks.ts
index b4880d1dc6..f2054779d4 100644
--- a/invokeai/frontend/web/src/features/controlLayers/hooks/layerStateHooks.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/hooks/layerStateHooks.ts
@@ -1,4 +1,5 @@
 import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import {
   isControlAdapterLayer,
@@ -69,7 +70,7 @@ export const useLayerType = (layerId: string) => {
 export const useLayerOpacity = (layerId: string) => {
   const selectLayer = useMemo(
     () =>
-      createSelector(selectControlLayersSlice, (controlLayers) => {
+      createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
         const layer = controlLayers.present.layers.filter(isControlAdapterLayer).find((l) => l.id === layerId);
         assert(layer, `Layer ${layerId} not found`);
         return { opacity: Math.round(layer.opacity * 100), isFilterEnabled: layer.isFilterEnabled };

From b5b6a96d9465b96013859cd4b5a1bce6e278e142 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 4 May 2024 23:41:11 +1000
Subject: [PATCH 019/116] feat(ui): dynamic brush spacing

Scaled to 10% of brush size, clamped between 5px and 15px. This makes drawing feel a bit smoother, but maintains reasonable performance.
---
 .../controlLayers/hooks/mouseEventHooks.ts        | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts
index b9716ba217..8f69c165ca 100644
--- a/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts
@@ -15,7 +15,8 @@ import {
 import type Konva from 'konva';
 import type { KonvaEventObject } from 'konva/lib/Node';
 import type { Vector2d } from 'konva/lib/types';
-import { useCallback, useRef } from 'react';
+import { clamp } from 'lodash-es';
+import { useCallback, useMemo, useRef } from 'react';
 
 const getIsFocused = (stage: Konva.Stage) => {
   return stage.container().contains(document.activeElement);
@@ -67,7 +68,9 @@ const syncCursorPos = (stage: Konva.Stage): Vector2d | null => {
   return pos;
 };
 
-const BRUSH_SPACING = 20;
+const BRUSH_SPACING_PCT = 10;
+const MIN_BRUSH_SPACING_PX = 5;
+const MAX_BRUSH_SPACING_PX = 15;
 
 export const useMouseEvents = () => {
   const dispatch = useAppDispatch();
@@ -83,6 +86,10 @@ export const useMouseEvents = () => {
   const lastCursorPosRef = useRef<[number, number] | null>(null);
   const shouldInvertBrushSizeScrollDirection = useAppSelector((s) => s.canvas.shouldInvertBrushSizeScrollDirection);
   const brushSize = useAppSelector((s) => s.controlLayers.present.brushSize);
+  const brushSpacingPx = useMemo(
+    () => clamp(brushSize / BRUSH_SPACING_PCT, MIN_BRUSH_SPACING_PX, MAX_BRUSH_SPACING_PX),
+    [brushSize]
+  );
 
   const onMouseDown = useCallback(
     (e: KonvaEventObject<MouseEvent>) => {
@@ -158,7 +165,7 @@ export const useMouseEvents = () => {
           // Continue the last line
           if (lastCursorPosRef.current) {
             // Dispatching redux events impacts perf substantially - using brush spacing keeps dispatches to a reasonable number
-            if (Math.hypot(lastCursorPosRef.current[0] - pos.x, lastCursorPosRef.current[1] - pos.y) < BRUSH_SPACING) {
+            if (Math.hypot(lastCursorPosRef.current[0] - pos.x, lastCursorPosRef.current[1] - pos.y) < brushSpacingPx) {
               return;
             }
           }
@@ -171,7 +178,7 @@ export const useMouseEvents = () => {
         $isDrawing.set(true);
       }
     },
-    [dispatch, selectedLayerId, selectedLayerType, tool]
+    [brushSpacingPx, dispatch, selectedLayerId, selectedLayerType, tool]
   );
 
   const onMouseLeave = useCallback(

From e4a640f0a761150ca91db4250453697c47270805 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 4 May 2024 23:57:42 +1000
Subject: [PATCH 020/116] feat(ui): optimized rendering of selected layer

Instead of caching on every stroke, we can use a compositing rect when the layer is being drawn to improve performance.
---
 .../controlLayers/store/controlLayersSlice.ts |  1 +
 .../src/features/controlLayers/util/bbox.ts   |  2 +-
 .../features/controlLayers/util/renderers.ts  | 55 +++++++++++++++++--
 3 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
index fc1887f425..1ef90ead3a 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
@@ -889,6 +889,7 @@ export const RG_LAYER_RECT_NAME = 'regional_guidance_layer.rect';
 export const INITIAL_IMAGE_LAYER_NAME = 'initial_image_layer';
 export const INITIAL_IMAGE_LAYER_IMAGE_NAME = 'initial_image_layer.image';
 export const LAYER_BBOX_NAME = 'layer.bbox';
+export const COMPOSITING_RECT_NAME = 'compositing-rect';
 
 // Getters for non-singleton layer and object IDs
 const getRGLayerId = (layerId: string) => `${RG_LAYER_NAME}_${layerId}`;
diff --git a/invokeai/frontend/web/src/features/controlLayers/util/bbox.ts b/invokeai/frontend/web/src/features/controlLayers/util/bbox.ts
index a4c7be6886..72aefe1eb4 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/bbox.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/bbox.ts
@@ -123,7 +123,7 @@ export const getLayerBboxPixels = (layer: KonvaLayerType, preview: boolean = fal
   return correctedLayerBbox;
 };
 
-export const getLayerBboxFast = (layer: KonvaLayerType): IRect | null => {
+export const getLayerBboxFast = (layer: KonvaLayerType): IRect => {
   const bbox = layer.getClientRect(GET_CLIENT_RECT_CONFIG);
   return {
     x: Math.floor(bbox.x),
diff --git a/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts b/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
index 9f24232240..f58b1e3b74 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
@@ -7,6 +7,7 @@ import {
   BACKGROUND_RECT_ID,
   CA_LAYER_IMAGE_NAME,
   CA_LAYER_NAME,
+  COMPOSITING_RECT_NAME,
   getCALayerImageId,
   getIILayerImageId,
   getLayerBboxId,
@@ -324,6 +325,12 @@ const createVectorMaskRect = (reduxObject: VectorMaskRect, konvaGroup: Konva.Gro
   return vectorMaskRect;
 };
 
+const createCompositingRect = (konvaLayer: Konva.Layer): Konva.Rect => {
+  const compositingRect = new Konva.Rect({ name: COMPOSITING_RECT_NAME, listening: false });
+  konvaLayer.add(compositingRect);
+  return compositingRect;
+};
+
 /**
  * Renders a vector mask layer.
  * @param stage The konva stage to render on.
@@ -401,15 +408,53 @@ const renderRegionalGuidanceLayer = (
     groupNeedsCache = true;
   }
 
-  if (konvaObjectGroup.children.length === 0) {
+  if (konvaObjectGroup.getChildren().length === 0) {
     // No objects - clear the cache to reset the previous pixel data
     konvaObjectGroup.clearCache();
-  } else if (groupNeedsCache) {
-    konvaObjectGroup.cache();
+    return;
   }
 
-  // Updating group opacity does not require re-caching
-  if (konvaObjectGroup.opacity() !== globalMaskLayerOpacity) {
+  const compositingRect =
+    konvaLayer.findOne<Konva.Rect>(`.${COMPOSITING_RECT_NAME}`) ?? createCompositingRect(konvaLayer);
+
+  /**
+   * When the group is selected, we use a rect of the selected preview color, composited over the shapes. This allows
+   * shapes to render as a "raster" layer with all pixels drawn at the same color and opacity.
+   *
+   * Without this special handling, each shape is drawn individually with the given opacity, atop the other shapes. The
+   * effect is like if you have a Photoshop Group consisting of many shapes, each of which has the given opacity.
+   * Overlapping shapes will have their colors blended together, and the final color is the result of all the shapes.
+   *
+   * Instead, with the special handling, the effect is as if you drew all the shapes at 100% opacity, flattened them to
+   * a single raster image, and _then_ applied the 50% opacity.
+   */
+  if (reduxLayer.isSelected && tool !== 'move') {
+    // We must clear the cache first so Konva will re-draw the group with the new compositing rect
+    if (konvaObjectGroup.isCached()) {
+      konvaObjectGroup.clearCache();
+    }
+    // The user is allowed to reduce mask opacity to 0, but we need the opacity for the compositing rect to work
+    konvaObjectGroup.opacity(1);
+
+    compositingRect.setAttrs({
+      // The rect should be the size of the layer - use the fast method bc it's OK if the rect is larger
+      ...getLayerBboxFast(konvaLayer),
+      fill: rgbColor,
+      opacity: globalMaskLayerOpacity,
+      // Draw this rect only where there are non-transparent pixels under it (e.g. the mask shapes)
+      globalCompositeOperation: 'source-in',
+      visible: true,
+      // This rect must always be on top of all other shapes
+      zIndex: konvaObjectGroup.getChildren().length,
+    });
+  } else {
+    // The compositing rect should only be shown when the layer is selected.
+    compositingRect.visible(false);
+    // Cache only if needed - or if we are on this code path and _don't_ have a cache
+    if (groupNeedsCache || !konvaObjectGroup.isCached()) {
+      konvaObjectGroup.cache();
+    }
+    // Updating group opacity does not require re-caching
     konvaObjectGroup.opacity(globalMaskLayerOpacity);
   }
 };

From 26847895b9027d1c2606ea08b825ddbc1661c712 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 6 May 2024 15:35:12 +1000
Subject: [PATCH 021/116] fix(ui): update hotkeys for viewer

---
 invokeai/frontend/web/public/locales/en.json          | 10 +++-------
 .../system/components/HotkeysModal/useHotkeyData.ts   | 11 +++--------
 2 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 37a2a7a5da..97f52e5f5a 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -589,13 +589,9 @@
             "desc": "Upscale the current image",
             "title": "Upscale"
         },
-        "backToEditor": {
-            "desc": "Closes the Image Viewer and shows the Editor View (Text to Image tab only)",
-            "title": "Back to Editor"
-        },
-        "openImageViewer": {
-            "desc": "Opens the Image Viewer (Text to Image tab only)",
-            "title": "Open Image Viewer"
+        "toggleViewer": {
+            "desc": "Switches between the Image Viewer and workspace for the current tab.",
+            "title": "Toggle Image Viewer"
         }
     },
     "metadata": {
diff --git a/invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts b/invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts
index 806b85ca59..79d957d7d3 100644
--- a/invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts
+++ b/invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts
@@ -141,14 +141,9 @@ export const useHotkeyData = (): HotkeyGroup[] => {
           hotkeys: [['Arrow Right']],
         },
         {
-          title: t('hotkeys.openImageViewer.title'),
-          desc: t('hotkeys.openImageViewer.desc'),
-          hotkeys: [['I']],
-        },
-        {
-          title: t('hotkeys.backToEditor.title'),
-          desc: t('hotkeys.backToEditor.desc'),
-          hotkeys: [['Esc']],
+          title: t('hotkeys.toggleViewer.title'),
+          desc: t('hotkeys.toggleViewer.desc'),
+          hotkeys: [['Z']],
         },
       ],
     }),

From 44ecddae2e50e1d0066abd4b230e540720befcea Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 6 May 2024 15:50:47 +1000
Subject: [PATCH 022/116] feat(ui): style Settings/Control Layers tabs like
 tabs

---
 .../components/ParametersPanelTextToImage.tsx | 27 ++++++-------------
 1 file changed, 8 insertions(+), 19 deletions(-)

diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
index abd78d00e4..3e02e1e132 100644
--- a/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
@@ -24,27 +24,16 @@ const overlayScrollbarsStyles: CSSProperties = {
   width: '100%',
 };
 
-const unselectedStyles: ChakraProps['sx'] = {
-  bg: 'none',
-  color: 'base.300',
+const baseStyles: ChakraProps['sx'] = {
   fontWeight: 'semibold',
   fontSize: 'sm',
-  w: '50%',
-  borderWidth: 1,
-  borderRadius: 'base',
+  color: 'base.300',
 };
 
 const selectedStyles: ChakraProps['sx'] = {
+  borderColor: 'base.800',
+  borderBottomColor: 'base.900',
   color: 'invokeBlue.300',
-  borderColor: 'invokeBlueAlpha.400',
-  _hover: {
-    color: 'invokeBlue.200',
-  },
-};
-
-const hoverStyles: ChakraProps['sx'] = {
-  bg: 'base.850',
-  color: 'base.100',
 };
 
 const ParametersPanelTextToImage = () => {
@@ -61,12 +50,12 @@ const ParametersPanelTextToImage = () => {
           <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
             <Flex gap={2} flexDirection="column" h="full" w="full">
               {isSDXL ? <SDXLPrompts /> : <Prompts />}
-              <Tabs variant="unstyled" display="flex" flexDir="column" w="full" h="full" gap={2}>
-                <TabList gap={2}>
-                  <Tab _hover={hoverStyles} _selected={selectedStyles} sx={unselectedStyles}>
+              <Tabs variant="enclosed" display="flex" flexDir="column" w="full" h="full" gap={2}>
+                <TabList gap={2} fontSize="sm" borderColor="base.800">
+                  <Tab sx={baseStyles} _selected={selectedStyles}>
                     {t('common.settingsLabel')}
                   </Tab>
-                  <Tab _hover={hoverStyles} _selected={selectedStyles} sx={unselectedStyles}>
+                  <Tab sx={baseStyles} _selected={selectedStyles}>
                     {controlLayersTitle}
                   </Tab>
                 </TabList>

From c5b948bc3f9de2e856b7319eb4588fa79718685a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 6 May 2024 16:36:29 +1000
Subject: [PATCH 023/116] feat(ui): fade layer selection color

---
 .../controlLayers/components/LayerCommon/LayerWrapper.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerWrapper.tsx b/invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerWrapper.tsx
index 9d5fb6ea4b..a22f96b750 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerWrapper.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerWrapper.tsx
@@ -10,7 +10,7 @@ type Props = PropsWithChildren<{
 
 export const LayerWrapper = memo(({ onClick, borderColor, children }: Props) => {
   return (
-    <Flex gap={2} onClick={onClick} bg={borderColor} px={2} borderRadius="base" py="1px">
+    <Flex gap={2} onClick={onClick} bg={borderColor} px={2} borderRadius="base" py="1px" transitionProperty="all" transitionDuration="0.2s">
       <Flex flexDir="column" w="full" bg="base.850" borderRadius="base">
         {children}
       </Flex>

From aab152a7e9b29d3ee0b8624c22515cb01381fc65 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 6 May 2024 16:50:58 +1000
Subject: [PATCH 024/116] fix(ui): track mouse out flags correctly

---
 .../web/src/features/controlLayers/hooks/mouseEventHooks.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts
index 8f69c165ca..fa49fdb473 100644
--- a/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts
@@ -188,15 +188,15 @@ export const useMouseEvents = () => {
         return;
       }
       const pos = syncCursorPos(stage);
+      $isDrawing.set(false);
+      $lastCursorPos.set(null);
+      $lastMouseDownPos.set(null);
       if (!pos || !selectedLayerId || selectedLayerType !== 'regional_guidance_layer') {
         return;
       }
       if (getIsFocused(stage) && getIsMouseDown(e) && (tool === 'brush' || tool === 'eraser')) {
         dispatch(rgLayerPointsAdded({ layerId: selectedLayerId, point: [pos.x, pos.y] }));
       }
-      $isDrawing.set(false);
-      $lastCursorPos.set(null);
-      $lastMouseDownPos.set(null);
     },
     [selectedLayerId, selectedLayerType, tool, dispatch]
   );

From cce3144c7416b8d2ac50de98a64670e56d7fe1b1 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 6 May 2024 18:29:13 +1000
Subject: [PATCH 025/116] feat(ui): add floating image viewer

---
 invokeai/frontend/web/package.json            |   1 +
 invokeai/frontend/web/pnpm-lock.yaml          |  43 +++++
 invokeai/frontend/web/public/locales/en.json  |   7 +-
 .../frontend/web/src/app/components/App.tsx   |   2 +
 .../ImageViewer/CurrentImagePreview.tsx       |  12 +-
 .../ImageViewer/FloatingImageViewer.tsx       | 178 ++++++++++++++++++
 .../features/gallery/store/gallerySlice.ts    |   5 +
 .../web/src/features/gallery/store/types.ts   |   1 +
 .../src/features/ui/components/InvokeTabs.tsx |   2 +
 9 files changed, 247 insertions(+), 4 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/gallery/components/ImageViewer/FloatingImageViewer.tsx

diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json
index 96db090386..25a77cf918 100644
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@@ -89,6 +89,7 @@
     "react-konva": "^18.2.10",
     "react-redux": "9.1.0",
     "react-resizable-panels": "^2.0.16",
+    "react-rnd": "^10.4.10",
     "react-select": "5.8.0",
     "react-use": "^17.5.0",
     "react-virtuoso": "^4.7.5",
diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml
index 2e5442479f..3d688dddce 100644
--- a/invokeai/frontend/web/pnpm-lock.yaml
+++ b/invokeai/frontend/web/pnpm-lock.yaml
@@ -122,6 +122,9 @@ dependencies:
   react-resizable-panels:
     specifier: ^2.0.16
     version: 2.0.16(react-dom@18.2.0)(react@18.2.0)
+  react-rnd:
+    specifier: ^10.4.10
+    version: 10.4.10(react-dom@18.2.0)(react@18.2.0)
   react-select:
     specifier: 5.8.0
     version: 5.8.0(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
@@ -7385,6 +7388,11 @@ packages:
     requiresBuild: true
     dev: true
 
+  /clsx@1.2.1:
+    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+    engines: {node: '>=6'}
+    dev: false
+
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -11200,6 +11208,16 @@ packages:
       unpipe: 1.0.0
     dev: true
 
+  /re-resizable@6.9.14(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-2UbPrpezMr6gkHKNCRA/N6QGGU237SKOZ78yMHId204A/oXWSAREAIuGZNQ9qlrJosewzcsv2CphZH3u7hC6ng==}
+    peerDependencies:
+      react: ^16.13.1 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.13.1 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /react-clientside-effect@1.2.6(react@18.2.0):
     resolution: {integrity: sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==}
     peerDependencies:
@@ -11253,6 +11271,18 @@ packages:
       react: 18.2.0
       scheduler: 0.23.0
 
+  /react-draggable@4.4.6(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==}
+    peerDependencies:
+      react: '>= 16.3.0'
+      react-dom: '>= 16.3.0'
+    dependencies:
+      clsx: 1.2.1
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /react-dropzone@14.2.3(react@18.2.0):
     resolution: {integrity: sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==}
     engines: {node: '>= 10.13'}
@@ -11466,6 +11496,19 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /react-rnd@10.4.10(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-YjQAgEeSbNUoOXSD9ZBvIiLVizFb+bNhpDk8DbIRHA557NW02CXbwsAeOTpJQnsdhEL+NP2I+Ssrwejqcodtjg==}
+    peerDependencies:
+      react: '>=16.3.0'
+      react-dom: '>=16.3.0'
+    dependencies:
+      re-resizable: 6.9.14(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-draggable: 4.4.6(react-dom@18.2.0)(react@18.2.0)
+      tslib: 2.6.2
+    dev: false
+
   /react-select@5.7.7(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-HhashZZJDRlfF/AKj0a0Lnfs3sRdw/46VJIRd8IbB9/Ovr74+ZIwkAdSBjSPXsFMG+u72c5xShqwLSKIJllzqw==}
     peerDependencies:
diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 97f52e5f5a..83e80e8a81 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -143,7 +143,8 @@
         "alpha": "Alpha",
         "selected": "Selected",
         "viewer": "Viewer",
-        "tab": "Tab"
+        "tab": "Tab",
+        "close": "Close"
     },
     "controlnet": {
         "controlAdapter_one": "Control Adapter",
@@ -365,7 +366,9 @@
         "bulkDownloadFailed": "Download Failed",
         "problemDeletingImages": "Problem Deleting Images",
         "problemDeletingImagesDesc": "One or more images could not be deleted",
-        "switchTo": "Switch to {{ tab }} (Z)"
+        "switchTo": "Switch to {{ tab }} (Z)",
+        "openFloatingViewer": "Open Floating Viewer",
+        "closeFloatingViewer": "Close Floating Viewer"
     },
     "hotkeys": {
         "searchHotkeys": "Search Hotkeys",
diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx
index 30d8f41200..03c854bb48 100644
--- a/invokeai/frontend/web/src/app/components/App.tsx
+++ b/invokeai/frontend/web/src/app/components/App.tsx
@@ -12,6 +12,7 @@ import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
 import ChangeBoardModal from 'features/changeBoardModal/components/ChangeBoardModal';
 import DeleteImageModal from 'features/deleteImageModal/components/DeleteImageModal';
 import { DynamicPromptsModal } from 'features/dynamicPrompts/components/DynamicPromptsPreviewModal';
+import { FloatingImageViewer } from 'features/gallery/components/ImageViewer/FloatingImageViewer';
 import { useStarterModelsToast } from 'features/modelManagerV2/hooks/useStarterModelsToast';
 import { configChanged } from 'features/system/store/configSlice';
 import { languageSelector } from 'features/system/store/systemSelectors';
@@ -96,6 +97,7 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
       <DynamicPromptsModal />
       <Toaster />
       <PreselectedImage selectedImage={selectedImage} />
+      <FloatingImageViewer />
     </ErrorBoundary>
   );
 };
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
index 35abf07965..840800b897 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
@@ -22,7 +22,13 @@ const selectLastSelectedImageName = createSelector(
   (lastSelectedImage) => lastSelectedImage?.image_name
 );
 
-const CurrentImagePreview = () => {
+type Props = {
+  isDragDisabled?: boolean;
+  isDropDisabled?: boolean;
+  withNextPrevButtons?: boolean;
+};
+
+const CurrentImagePreview = ({ isDragDisabled = false, isDropDisabled = false, withNextPrevButtons = true }: Props) => {
   const { t } = useTranslation();
   const shouldShowImageDetails = useAppSelector((s) => s.ui.shouldShowImageDetails);
   const imageName = useAppSelector(selectLastSelectedImageName);
@@ -79,6 +85,8 @@ const CurrentImagePreview = () => {
           imageDTO={imageDTO}
           droppableData={droppableData}
           draggableData={draggableData}
+          isDragDisabled={isDragDisabled}
+          isDropDisabled={isDropDisabled}
           isUploadDisabled={true}
           fitContainer
           useThumbailFallback
@@ -106,7 +114,7 @@ const CurrentImagePreview = () => {
         )}
       </AnimatePresence>
       <AnimatePresence>
-        {shouldShowNextPrevButtons && imageDTO && (
+        {withNextPrevButtons && shouldShowNextPrevButtons && imageDTO && (
           <Box
             as={motion.div}
             key="nextPrevButtons"
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/FloatingImageViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/FloatingImageViewer.tsx
new file mode 100644
index 0000000000..0685ec129d
--- /dev/null
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/FloatingImageViewer.tsx
@@ -0,0 +1,178 @@
+import { Flex, IconButton, Spacer, Text, useShiftModifier } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import CurrentImagePreview from 'features/gallery/components/ImageViewer/CurrentImagePreview';
+import { isFloatingImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
+import { useCallback, useLayoutEffect, useRef } from 'react';
+import { flushSync } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { PiHourglassBold, PiXBold } from 'react-icons/pi';
+import { Rnd } from 'react-rnd';
+
+const defaultDim = 256;
+const maxDim = 512;
+const defaultSize = { width: defaultDim, height: defaultDim + 24 };
+const maxSize = { width: maxDim, height: maxDim + 24 };
+const rndDefault = { x: 0, y: 0, ...defaultSize };
+
+const rndStyles = {
+  zIndex: 11,
+};
+
+const enableResizing = {
+  top: false,
+  right: false,
+  bottom: false,
+  left: false,
+  topRight: false,
+  bottomRight: true,
+  bottomLeft: false,
+  topLeft: false,
+};
+
+const FloatingImageViewerComponent = () => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const shift = useShiftModifier();
+  const rndRef = useRef<Rnd>(null);
+  const imagePreviewRef = useRef<HTMLDivElement>(null);
+  const onClose = useCallback(() => {
+    dispatch(isFloatingImageViewerOpenChanged(false));
+  }, [dispatch]);
+
+  const fitToScreen = useCallback(() => {
+    if (!imagePreviewRef.current || !rndRef.current) {
+      return;
+    }
+    const el = imagePreviewRef.current;
+    const rnd = rndRef.current;
+
+    const { top, right, bottom, left, width, height } = el.getBoundingClientRect();
+    const { innerWidth, innerHeight } = window;
+
+    const newPosition = rnd.getDraggablePosition();
+
+    if (top < 0) {
+      newPosition.y = 0;
+    }
+    if (left < 0) {
+      newPosition.x = 0;
+    }
+    if (bottom > innerHeight) {
+      newPosition.y = innerHeight - height;
+    }
+    if (right > innerWidth) {
+      newPosition.x = innerWidth - width;
+    }
+    rnd.updatePosition(newPosition);
+  }, []);
+
+  const onDoubleClick = useCallback(() => {
+    if (!rndRef.current || !imagePreviewRef.current) {
+      return;
+    }
+    const { width, height } = imagePreviewRef.current.getBoundingClientRect();
+    if (width === defaultSize.width && height === defaultSize.height) {
+      rndRef.current.updateSize(maxSize);
+    } else {
+      rndRef.current.updateSize(defaultSize);
+    }
+    flushSync(fitToScreen);
+  }, [fitToScreen]);
+
+  useLayoutEffect(() => {
+    window.addEventListener('resize', fitToScreen);
+    return () => {
+      window.removeEventListener('resize', fitToScreen);
+    };
+  }, [fitToScreen]);
+
+  useLayoutEffect(() => {
+    // Set the initial position
+    if (!imagePreviewRef.current || !rndRef.current) {
+      return;
+    }
+
+    const { width, height } = imagePreviewRef.current.getBoundingClientRect();
+
+    const initialPosition = {
+      // 54 = width of left-hand vertical bar of tab icons
+      // 430 = width of parameters panel
+      x: 54 + 430 / 2 - width / 2,
+      // 16 = just a reasonable bottom padding
+      y: window.innerHeight - height - 16,
+    };
+
+    rndRef.current.updatePosition(initialPosition);
+  }, [fitToScreen]);
+
+  return (
+    <Rnd
+      ref={rndRef}
+      default={rndDefault}
+      bounds="window"
+      lockAspectRatio={shift}
+      minWidth={defaultSize.width}
+      minHeight={defaultSize.height}
+      maxWidth={maxSize.width}
+      maxHeight={maxSize.height}
+      style={rndStyles}
+      enableResizing={enableResizing}
+    >
+      <Flex
+        ref={imagePreviewRef}
+        flexDir="column"
+        bg="base.850"
+        borderRadius="base"
+        w="full"
+        h="full"
+        borderWidth={1}
+        shadow="dark-lg"
+        cursor="move"
+      >
+        <Flex bg="base.800" w="full" p={1} onDoubleClick={onDoubleClick}>
+          <Text fontSize="sm" fontWeight="semibold" color="base.300" ps={2}>
+            {t('common.viewer')}
+          </Text>
+          <Spacer />
+          <IconButton aria-label={t('common.close')} icon={<PiXBold />} size="sm" variant="link" onClick={onClose} />
+        </Flex>
+        <Flex p={2} w="full" h="full">
+          <CurrentImagePreview isDragDisabled={true} isDropDisabled={true} withNextPrevButtons={false} />
+        </Flex>
+      </Flex>
+    </Rnd>
+  );
+};
+
+export const FloatingImageViewer = () => {
+  const isOpen = useAppSelector((s) => s.gallery.isFloatingImageViewerOpen);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return <FloatingImageViewerComponent />;
+};
+
+export const ToggleFloatingImageViewerButton = () => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const isOpen = useAppSelector((s) => s.gallery.isFloatingImageViewerOpen);
+
+  const onToggle = useCallback(() => {
+    dispatch(isFloatingImageViewerOpenChanged(!isOpen));
+  }, [dispatch, isOpen]);
+
+  return (
+    <IconButton
+      tooltip={isOpen ? t('gallery.closeFloatingViewer') : t('gallery.openFloatingViewer')}
+      aria-label={isOpen ? t('gallery.closeFloatingViewer') : t('gallery.openFloatingViewer')}
+      icon={<PiHourglassBold fontSize={16} />}
+      size="sm"
+      onClick={onToggle}
+      variant="link"
+      colorScheme={isOpen ? 'invokeBlue' : 'base'}
+      boxSize={8}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
index 5248977825..892c5c954d 100644
--- a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
+++ b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
@@ -23,6 +23,7 @@ const initialGalleryState: GalleryState = {
   limit: INITIAL_IMAGE_LIMIT,
   offset: 0,
   isImageViewerOpen: false,
+  isFloatingImageViewerOpen: false,
 };
 
 export const gallerySlice = createSlice({
@@ -80,6 +81,9 @@ export const gallerySlice = createSlice({
     isImageViewerOpenChanged: (state, action: PayloadAction<boolean>) => {
       state.isImageViewerOpen = action.payload;
     },
+    isFloatingImageViewerOpenChanged: (state, action: PayloadAction<boolean>) => {
+      state.isFloatingImageViewerOpen = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(setActiveTab, (state) => {
@@ -121,6 +125,7 @@ export const {
   moreImagesLoaded,
   alwaysShowImageSizeBadgeChanged,
   isImageViewerOpenChanged,
+  isFloatingImageViewerOpenChanged,
 } = gallerySlice.actions;
 
 const isAnyBoardDeleted = isAnyOf(
diff --git a/invokeai/frontend/web/src/features/gallery/store/types.ts b/invokeai/frontend/web/src/features/gallery/store/types.ts
index 0e86d2d4be..9c258060c9 100644
--- a/invokeai/frontend/web/src/features/gallery/store/types.ts
+++ b/invokeai/frontend/web/src/features/gallery/store/types.ts
@@ -21,4 +21,5 @@ export type GalleryState = {
   limit: number;
   alwaysShowImageSizeBadge: boolean;
   isImageViewerOpen: boolean;
+  isFloatingImageViewerOpen: boolean;
 };
diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
index 42df03872c..4152f4065b 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@@ -4,6 +4,7 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { $customNavComponent } from 'app/store/nanostores/customNavComponent';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent';
+import { ToggleFloatingImageViewerButton } from 'features/gallery/components/ImageViewer/FloatingImageViewer';
 import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
 import NodeEditorPanelGroup from 'features/nodes/components/sidePanel/NodeEditorPanelGroup';
 import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent';
@@ -223,6 +224,7 @@ const InvokeTabs = () => {
         </TabList>
         <Spacer />
         <StatusIndicator />
+        <ToggleFloatingImageViewerButton />
         {customNavComponent ? customNavComponent : <SettingsMenu />}
       </Flex>
       <PanelGroup

From c0065a65a0d390313c15584810c0d411fcf377ac Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 6 May 2024 19:24:27 +1000
Subject: [PATCH 026/116] feat(ui): floating viewer always shows progress,
 never shows metadata

---
 .../components/ImageViewer/CurrentImagePreview.tsx | 14 +++++++++++---
 .../components/ImageViewer/FloatingImageViewer.tsx |  8 +++++++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
index 840800b897..8e6eccbe73 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
@@ -26,9 +26,17 @@ type Props = {
   isDragDisabled?: boolean;
   isDropDisabled?: boolean;
   withNextPrevButtons?: boolean;
+  withMetadata?: boolean;
+  alwaysShowProgress?: boolean;
 };
 
-const CurrentImagePreview = ({ isDragDisabled = false, isDropDisabled = false, withNextPrevButtons = true }: Props) => {
+const CurrentImagePreview = ({
+  isDragDisabled = false,
+  isDropDisabled = false,
+  withNextPrevButtons = true,
+  withMetadata = true,
+  alwaysShowProgress = false,
+}: Props) => {
   const { t } = useTranslation();
   const shouldShowImageDetails = useAppSelector((s) => s.ui.shouldShowImageDetails);
   const imageName = useAppSelector(selectLastSelectedImageName);
@@ -78,7 +86,7 @@ const CurrentImagePreview = ({ isDragDisabled = false, isDropDisabled = false, w
       justifyContent="center"
       position="relative"
     >
-      {hasDenoiseProgress && shouldShowProgressInViewer ? (
+      {hasDenoiseProgress && (shouldShowProgressInViewer || alwaysShowProgress) ? (
         <ProgressImage />
       ) : (
         <IAIDndImage
@@ -96,7 +104,7 @@ const CurrentImagePreview = ({ isDragDisabled = false, isDropDisabled = false, w
         />
       )}
       <AnimatePresence>
-        {shouldShowImageDetails && imageDTO && (
+        {shouldShowImageDetails && imageDTO && withMetadata && (
           <Box
             as={motion.div}
             key="metadataViewer"
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/FloatingImageViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/FloatingImageViewer.tsx
index 0685ec129d..1107e86ff3 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/FloatingImageViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/FloatingImageViewer.tsx
@@ -137,7 +137,13 @@ const FloatingImageViewerComponent = () => {
           <IconButton aria-label={t('common.close')} icon={<PiXBold />} size="sm" variant="link" onClick={onClose} />
         </Flex>
         <Flex p={2} w="full" h="full">
-          <CurrentImagePreview isDragDisabled={true} isDropDisabled={true} withNextPrevButtons={false} />
+          <CurrentImagePreview
+            isDragDisabled={true}
+            isDropDisabled={true}
+            withNextPrevButtons={false}
+            withMetadata={false}
+            alwaysShowProgress
+          />
         </Flex>
       </Flex>
     </Rnd>

From 6b98dba71dc434ee235f388ea729835db0947be1 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 6 May 2024 19:28:57 +1000
Subject: [PATCH 027/116] chore(ui): lint

---
 .../components/LayerCommon/LayerWrapper.tsx           | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerWrapper.tsx b/invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerWrapper.tsx
index a22f96b750..9757cf3972 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerWrapper.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerWrapper.tsx
@@ -10,7 +10,16 @@ type Props = PropsWithChildren<{
 
 export const LayerWrapper = memo(({ onClick, borderColor, children }: Props) => {
   return (
-    <Flex gap={2} onClick={onClick} bg={borderColor} px={2} borderRadius="base" py="1px" transitionProperty="all" transitionDuration="0.2s">
+    <Flex
+      gap={2}
+      onClick={onClick}
+      bg={borderColor}
+      px={2}
+      borderRadius="base"
+      py="1px"
+      transitionProperty="all"
+      transitionDuration="0.2s"
+    >
       <Flex flexDir="column" w="full" bg="base.850" borderRadius="base">
         {children}
       </Flex>

From 6249982d821306b2bece320ff12aacc862b38871 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 05:57:21 +1000
Subject: [PATCH 028/116] fix(ui): stuck viewer when spamming toggle

There are a number of bugs with `framer-motion` that can result in sync issues with AnimatePresence and the conditionally rendered component.

You can see this if you rapidly click an accordion, occasionally it gets out of sync and is closed when it should be open.

This is a bigger problem with the viewer where the user may hold down the `z` key. It's trivial to get it to lock up.

For now, just remove the animation entirely.

Upstream issues for reference:
https://github.com/framer/motion/issues/2023
https://github.com/framer/motion/issues/2618
https://github.com/framer/motion/issues/2554
---
 .../components/ImageViewer/ImageViewer.tsx    | 90 ++++++++-----------
 1 file changed, 35 insertions(+), 55 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
index 949e72fad1..dcd4d4c304 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
@@ -5,8 +5,6 @@ import { ToggleProgressButton } from 'features/gallery/components/ImageViewer/To
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import type { InvokeTabName } from 'features/ui/store/tabMap';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import type { AnimationProps } from 'framer-motion';
-import { AnimatePresence, motion } from 'framer-motion';
 import { memo, useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
@@ -14,18 +12,6 @@ import CurrentImageButtons from './CurrentImageButtons';
 import CurrentImagePreview from './CurrentImagePreview';
 import { EditorButton } from './EditorButton';
 
-const initial: AnimationProps['initial'] = {
-  opacity: 0,
-};
-const animate: AnimationProps['animate'] = {
-  opacity: 1,
-  transition: { duration: 0.07 },
-};
-const exit: AnimationProps['exit'] = {
-  opacity: 0,
-  transition: { duration: 0.07 },
-};
-
 const VIEWER_ENABLED_TABS: InvokeTabName[] = ['canvas', 'generation', 'workflows'];
 
 export const ImageViewer = memo(() => {
@@ -42,50 +28,44 @@ export const ImageViewer = memo(() => {
   useHotkeys('z', onToggle, { enabled: isViewerEnabled }, [isViewerEnabled, onToggle]);
   useHotkeys('esc', onClose, { enabled: isViewerEnabled }, [isViewerEnabled, onClose]);
 
-  // The AnimatePresence mode must be wait - else framer can get confused if you spam the toggle button
+  if (!shouldShowViewer) {
+    return null;
+  }
+
   return (
-    <AnimatePresence mode="wait">
-      {shouldShowViewer && (
-        <Flex
-          key="imageViewer"
-          as={motion.div}
-          initial={initial}
-          animate={animate}
-          exit={exit}
-          layerStyle="first"
-          borderRadius="base"
-          position="absolute"
-          flexDirection="column"
-          top={0}
-          right={0}
-          bottom={0}
-          left={0}
-          p={2}
-          rowGap={4}
-          alignItems="center"
-          justifyContent="center"
-          zIndex={10} // reactflow puts its minimap at 5, so we need to be above that
-        >
-          <Flex w="full" gap={2}>
-            <Flex flex={1} justifyContent="center">
-              <Flex gap={2} marginInlineEnd="auto">
-                <ToggleProgressButton />
-                <ToggleMetadataViewerButton />
-              </Flex>
-            </Flex>
-            <Flex flex={1} gap={2} justifyContent="center">
-              <CurrentImageButtons />
-            </Flex>
-            <Flex flex={1} justifyContent="center">
-              <Flex gap={2} marginInlineStart="auto">
-                <EditorButton />
-              </Flex>
-            </Flex>
+    <Flex
+      layerStyle="first"
+      borderRadius="base"
+      position="absolute"
+      flexDirection="column"
+      top={0}
+      right={0}
+      bottom={0}
+      left={0}
+      p={2}
+      rowGap={4}
+      alignItems="center"
+      justifyContent="center"
+      zIndex={10} // reactflow puts its minimap at 5, so we need to be above that
+    >
+      <Flex w="full" gap={2}>
+        <Flex flex={1} justifyContent="center">
+          <Flex gap={2} marginInlineEnd="auto">
+            <ToggleProgressButton />
+            <ToggleMetadataViewerButton />
           </Flex>
-          <CurrentImagePreview />
         </Flex>
-      )}
-    </AnimatePresence>
+        <Flex flex={1} gap={2} justifyContent="center">
+          <CurrentImageButtons />
+        </Flex>
+        <Flex flex={1} justifyContent="center">
+          <Flex gap={2} marginInlineStart="auto">
+            <EditorButton />
+          </Flex>
+        </Flex>
+      </Flex>
+      <CurrentImagePreview />
+    </Flex>
   );
 });
 

From 3bd5d9a8e4e5357b20cf8e9d9ce95fdc4207a0d7 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 06:00:04 +1000
Subject: [PATCH 029/116] fix(ui): memoize FloatingImageViewer

Maybe this will fix @JPPhoto's issue?
---
 .../ImageViewer/FloatingImageViewer.tsx       | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/FloatingImageViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/FloatingImageViewer.tsx
index 1107e86ff3..1d91dafd1c 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/FloatingImageViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/FloatingImageViewer.tsx
@@ -2,7 +2,7 @@ import { Flex, IconButton, Spacer, Text, useShiftModifier } from '@invoke-ai/ui-
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import CurrentImagePreview from 'features/gallery/components/ImageViewer/CurrentImagePreview';
 import { isFloatingImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
-import { useCallback, useLayoutEffect, useRef } from 'react';
+import { memo, useCallback, useLayoutEffect, useRef } from 'react';
 import { flushSync } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { PiHourglassBold, PiXBold } from 'react-icons/pi';
@@ -29,7 +29,7 @@ const enableResizing = {
   topLeft: false,
 };
 
-const FloatingImageViewerComponent = () => {
+const FloatingImageViewerComponent = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const shift = useShiftModifier();
@@ -148,9 +148,11 @@ const FloatingImageViewerComponent = () => {
       </Flex>
     </Rnd>
   );
-};
+});
 
-export const FloatingImageViewer = () => {
+FloatingImageViewerComponent.displayName = 'FloatingImageViewerComponent';
+
+export const FloatingImageViewer = memo(() => {
   const isOpen = useAppSelector((s) => s.gallery.isFloatingImageViewerOpen);
 
   if (!isOpen) {
@@ -158,9 +160,11 @@ export const FloatingImageViewer = () => {
   }
 
   return <FloatingImageViewerComponent />;
-};
+});
 
-export const ToggleFloatingImageViewerButton = () => {
+FloatingImageViewer.displayName = 'FloatingImageViewer';
+
+export const ToggleFloatingImageViewerButton = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const isOpen = useAppSelector((s) => s.gallery.isFloatingImageViewerOpen);
@@ -181,4 +185,6 @@ export const ToggleFloatingImageViewerButton = () => {
       boxSize={8}
     />
   );
-};
+});
+
+ToggleFloatingImageViewerButton.displayName = 'ToggleFloatingImageViewerButton';

From a9bf651c6920ac3ab7806a2924c0f1a60291cde3 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 07:06:54 +1000
Subject: [PATCH 030/116] chore(ui): bump all deps

---
 invokeai/frontend/web/package.json   |   78 +-
 invokeai/frontend/web/pnpm-lock.yaml | 5010 ++++++++++++--------------
 2 files changed, 2316 insertions(+), 2772 deletions(-)

diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json
index 25a77cf918..a598d0a2c7 100644
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@@ -52,48 +52,48 @@
   },
   "dependencies": {
     "@chakra-ui/react-use-size": "^2.1.0",
-    "@dagrejs/dagre": "^1.1.1",
-    "@dagrejs/graphlib": "^2.2.1",
+    "@dagrejs/dagre": "^1.1.2",
+    "@dagrejs/graphlib": "^2.2.2",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@fontsource-variable/inter": "^5.0.17",
+    "@fontsource-variable/inter": "^5.0.18",
     "@invoke-ai/ui-library": "^0.0.25",
     "@nanostores/react": "^0.7.2",
-    "@reduxjs/toolkit": "2.2.2",
+    "@reduxjs/toolkit": "2.2.3",
     "@roarr/browser-log-writer": "^1.3.0",
     "chakra-react-select": "^4.7.6",
     "compare-versions": "^6.1.0",
     "dateformat": "^5.0.3",
-    "framer-motion": "^11.0.22",
-    "i18next": "^23.10.1",
-    "i18next-http-backend": "^2.5.0",
+    "framer-motion": "^11.1.8",
+    "i18next": "^23.11.3",
+    "i18next-http-backend": "^2.5.1",
     "idb-keyval": "^6.2.1",
     "jsondiffpatch": "^0.6.0",
     "konva": "^9.3.6",
     "lodash-es": "^4.17.21",
-    "nanostores": "^0.10.0",
+    "nanostores": "^0.10.3",
     "new-github-issue-url": "^1.0.0",
-    "overlayscrollbars": "^2.6.1",
-    "overlayscrollbars-react": "^0.5.5",
+    "overlayscrollbars": "^2.7.3",
+    "overlayscrollbars-react": "^0.5.6",
     "query-string": "^9.0.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-colorful": "^5.6.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.13",
-    "react-hook-form": "^7.51.2",
+    "react-hook-form": "^7.51.4",
     "react-hotkeys-hook": "4.5.0",
-    "react-i18next": "^14.1.0",
-    "react-icons": "^5.0.1",
+    "react-i18next": "^14.1.1",
+    "react-icons": "^5.2.0",
     "react-konva": "^18.2.10",
-    "react-redux": "9.1.0",
-    "react-resizable-panels": "^2.0.16",
+    "react-redux": "9.1.2",
+    "react-resizable-panels": "^2.0.19",
     "react-rnd": "^10.4.10",
     "react-select": "5.8.0",
     "react-use": "^17.5.0",
-    "react-virtuoso": "^4.7.5",
-    "reactflow": "^11.10.4",
+    "react-virtuoso": "^4.7.10",
+    "reactflow": "^11.11.3",
     "redux-dynamic-middlewares": "^2.2.0",
     "redux-remember": "^5.1.0",
     "redux-undo": "^1.1.0",
@@ -105,8 +105,8 @@
     "use-device-pixel-ratio": "^1.1.2",
     "use-image": "^1.1.1",
     "uuid": "^9.0.1",
-    "zod": "^3.22.4",
-    "zod-validation-error": "^3.0.3"
+    "zod": "^3.23.6",
+    "zod-validation-error": "^3.2.0"
   },
   "peerDependencies": {
     "@chakra-ui/react": "^2.8.2",
@@ -117,19 +117,19 @@
   "devDependencies": {
     "@invoke-ai/eslint-config-react": "^0.0.14",
     "@invoke-ai/prettier-config-react": "^0.0.7",
-    "@storybook/addon-essentials": "^8.0.4",
-    "@storybook/addon-interactions": "^8.0.4",
-    "@storybook/addon-links": "^8.0.4",
-    "@storybook/addon-storysource": "^8.0.4",
-    "@storybook/manager-api": "^8.0.4",
-    "@storybook/react": "^8.0.4",
-    "@storybook/react-vite": "^8.0.4",
-    "@storybook/theming": "^8.0.4",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-interactions": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/addon-storysource": "^8.0.10",
+    "@storybook/manager-api": "^8.0.10",
+    "@storybook/react": "^8.0.10",
+    "@storybook/react-vite": "^8.0.10",
+    "@storybook/theming": "^8.0.10",
     "@types/dateformat": "^5.0.2",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.11.30",
-    "@types/react": "^18.2.73",
-    "@types/react-dom": "^18.2.22",
+    "@types/node": "^20.12.10",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/uuid": "^9.0.8",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "concurrently": "^8.2.2",
@@ -137,20 +137,20 @@
     "eslint": "^8.57.0",
     "eslint-plugin-i18next": "^6.0.3",
     "eslint-plugin-path": "^1.3.0",
-    "knip": "^5.6.1",
+    "knip": "^5.12.3",
     "openapi-types": "^12.1.3",
     "openapi-typescript": "^6.7.5",
     "prettier": "^3.2.5",
     "rollup-plugin-visualizer": "^5.12.0",
-    "storybook": "^8.0.4",
+    "storybook": "^8.0.10",
     "ts-toolbelt": "^9.6.0",
     "tsafe": "^1.6.6",
-    "typescript": "^5.4.3",
-    "vite": "^5.2.6",
-    "vite-plugin-css-injected-by-js": "^3.5.0",
-    "vite-plugin-dts": "^3.8.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^3.9.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^1.4.0"
+    "vitest": "^1.6.0"
   }
 }
diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml
index 3d688dddce..2a3710ae9c 100644
--- a/invokeai/frontend/web/pnpm-lock.yaml
+++ b/invokeai/frontend/web/pnpm-lock.yaml
@@ -7,43 +7,43 @@ settings:
 dependencies:
   '@chakra-ui/react':
     specifier: ^2.8.2
-    version: 2.8.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.73)(framer-motion@11.0.22)(react-dom@18.2.0)(react@18.2.0)
+    version: 2.8.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.1)(framer-motion@11.1.8)(react-dom@18.3.1)(react@18.3.1)
   '@chakra-ui/react-use-size':
     specifier: ^2.1.0
-    version: 2.1.0(react@18.2.0)
+    version: 2.1.0(react@18.3.1)
   '@dagrejs/dagre':
-    specifier: ^1.1.1
-    version: 1.1.1
+    specifier: ^1.1.2
+    version: 1.1.2
   '@dagrejs/graphlib':
-    specifier: ^2.2.1
-    version: 2.2.1
+    specifier: ^2.2.2
+    version: 2.2.2
   '@dnd-kit/core':
     specifier: ^6.1.0
-    version: 6.1.0(react-dom@18.2.0)(react@18.2.0)
+    version: 6.1.0(react-dom@18.3.1)(react@18.3.1)
   '@dnd-kit/sortable':
     specifier: ^8.0.0
-    version: 8.0.0(@dnd-kit/core@6.1.0)(react@18.2.0)
+    version: 8.0.0(@dnd-kit/core@6.1.0)(react@18.3.1)
   '@dnd-kit/utilities':
     specifier: ^3.2.2
-    version: 3.2.2(react@18.2.0)
+    version: 3.2.2(react@18.3.1)
   '@fontsource-variable/inter':
-    specifier: ^5.0.17
-    version: 5.0.17
+    specifier: ^5.0.18
+    version: 5.0.18
   '@invoke-ai/ui-library':
     specifier: ^0.0.25
-    version: 0.0.25(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.17)(@internationalized/date@3.5.3)(@types/react@18.2.73)(i18next@23.10.1)(react-dom@18.2.0)(react@18.2.0)
+    version: 0.0.25(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.18)(@internationalized/date@3.5.3)(@types/react@18.3.1)(i18next@23.11.3)(react-dom@18.3.1)(react@18.3.1)
   '@nanostores/react':
     specifier: ^0.7.2
-    version: 0.7.2(nanostores@0.10.0)(react@18.2.0)
+    version: 0.7.2(nanostores@0.10.3)(react@18.3.1)
   '@reduxjs/toolkit':
-    specifier: 2.2.2
-    version: 2.2.2(react-redux@9.1.0)(react@18.2.0)
+    specifier: 2.2.3
+    version: 2.2.3(react-redux@9.1.2)(react@18.3.1)
   '@roarr/browser-log-writer':
     specifier: ^1.3.0
     version: 1.3.0
   chakra-react-select:
     specifier: ^4.7.6
-    version: 4.7.6(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.11.4)(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
+    version: 4.7.6(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.11.4)(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
   compare-versions:
     specifier: ^6.1.0
     version: 6.1.0
@@ -51,14 +51,14 @@ dependencies:
     specifier: ^5.0.3
     version: 5.0.3
   framer-motion:
-    specifier: ^11.0.22
-    version: 11.0.22(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^11.1.8
+    version: 11.1.8(react-dom@18.3.1)(react@18.3.1)
   i18next:
-    specifier: ^23.10.1
-    version: 23.10.1
+    specifier: ^23.11.3
+    version: 23.11.3
   i18next-http-backend:
-    specifier: ^2.5.0
-    version: 2.5.0
+    specifier: ^2.5.1
+    version: 2.5.1
   idb-keyval:
     specifier: ^6.2.1
     version: 6.2.1
@@ -72,71 +72,71 @@ dependencies:
     specifier: ^4.17.21
     version: 4.17.21
   nanostores:
-    specifier: ^0.10.0
-    version: 0.10.0
+    specifier: ^0.10.3
+    version: 0.10.3
   new-github-issue-url:
     specifier: ^1.0.0
     version: 1.0.0
   overlayscrollbars:
-    specifier: ^2.6.1
-    version: 2.6.1
+    specifier: ^2.7.3
+    version: 2.7.3
   overlayscrollbars-react:
-    specifier: ^0.5.5
-    version: 0.5.5(overlayscrollbars@2.6.1)(react@18.2.0)
+    specifier: ^0.5.6
+    version: 0.5.6(overlayscrollbars@2.7.3)(react@18.3.1)
   query-string:
     specifier: ^9.0.0
     version: 9.0.0
   react:
-    specifier: ^18.2.0
-    version: 18.2.0
+    specifier: ^18.3.1
+    version: 18.3.1
   react-colorful:
     specifier: ^5.6.1
-    version: 5.6.1(react-dom@18.2.0)(react@18.2.0)
+    version: 5.6.1(react-dom@18.3.1)(react@18.3.1)
   react-dom:
-    specifier: ^18.2.0
-    version: 18.2.0(react@18.2.0)
+    specifier: ^18.3.1
+    version: 18.3.1(react@18.3.1)
   react-dropzone:
     specifier: ^14.2.3
-    version: 14.2.3(react@18.2.0)
+    version: 14.2.3(react@18.3.1)
   react-error-boundary:
     specifier: ^4.0.13
-    version: 4.0.13(react@18.2.0)
+    version: 4.0.13(react@18.3.1)
   react-hook-form:
-    specifier: ^7.51.2
-    version: 7.51.2(react@18.2.0)
+    specifier: ^7.51.4
+    version: 7.51.4(react@18.3.1)
   react-hotkeys-hook:
     specifier: 4.5.0
-    version: 4.5.0(react-dom@18.2.0)(react@18.2.0)
+    version: 4.5.0(react-dom@18.3.1)(react@18.3.1)
   react-i18next:
-    specifier: ^14.1.0
-    version: 14.1.0(i18next@23.10.1)(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^14.1.1
+    version: 14.1.1(i18next@23.11.3)(react-dom@18.3.1)(react@18.3.1)
   react-icons:
-    specifier: ^5.0.1
-    version: 5.0.1(react@18.2.0)
+    specifier: ^5.2.0
+    version: 5.2.0(react@18.3.1)
   react-konva:
     specifier: ^18.2.10
-    version: 18.2.10(konva@9.3.6)(react-dom@18.2.0)(react@18.2.0)
+    version: 18.2.10(konva@9.3.6)(react-dom@18.3.1)(react@18.3.1)
   react-redux:
-    specifier: 9.1.0
-    version: 9.1.0(@types/react@18.2.73)(react@18.2.0)(redux@5.0.1)
+    specifier: 9.1.2
+    version: 9.1.2(@types/react@18.3.1)(react@18.3.1)(redux@5.0.1)
   react-resizable-panels:
-    specifier: ^2.0.16
-    version: 2.0.16(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^2.0.19
+    version: 2.0.19(react-dom@18.3.1)(react@18.3.1)
   react-rnd:
     specifier: ^10.4.10
-    version: 10.4.10(react-dom@18.2.0)(react@18.2.0)
+    version: 10.4.10(react-dom@18.3.1)(react@18.3.1)
   react-select:
     specifier: 5.8.0
-    version: 5.8.0(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
+    version: 5.8.0(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
   react-use:
     specifier: ^17.5.0
-    version: 17.5.0(react-dom@18.2.0)(react@18.2.0)
+    version: 17.5.0(react-dom@18.3.1)(react@18.3.1)
   react-virtuoso:
-    specifier: ^4.7.5
-    version: 4.7.5(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^4.7.10
+    version: 4.7.10(react-dom@18.3.1)(react@18.3.1)
   reactflow:
-    specifier: ^11.10.4
-    version: 11.10.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^11.11.3
+    version: 11.11.3(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
   redux-dynamic-middlewares:
     specifier: ^2.2.0
     version: 2.2.0
@@ -160,54 +160,54 @@ dependencies:
     version: 4.7.5
   use-debounce:
     specifier: ^10.0.0
-    version: 10.0.0(react@18.2.0)
+    version: 10.0.0(react@18.3.1)
   use-device-pixel-ratio:
     specifier: ^1.1.2
-    version: 1.1.2(react@18.2.0)
+    version: 1.1.2(react@18.3.1)
   use-image:
     specifier: ^1.1.1
-    version: 1.1.1(react-dom@18.2.0)(react@18.2.0)
+    version: 1.1.1(react-dom@18.3.1)(react@18.3.1)
   uuid:
     specifier: ^9.0.1
     version: 9.0.1
   zod:
-    specifier: ^3.22.4
-    version: 3.22.4
+    specifier: ^3.23.6
+    version: 3.23.6
   zod-validation-error:
-    specifier: ^3.0.3
-    version: 3.0.3(zod@3.22.4)
+    specifier: ^3.2.0
+    version: 3.2.0(zod@3.23.6)
 
 devDependencies:
   '@invoke-ai/eslint-config-react':
     specifier: ^0.0.14
-    version: 0.0.14(eslint@8.57.0)(prettier@3.2.5)(typescript@5.4.3)
+    version: 0.0.14(eslint@8.57.0)(prettier@3.2.5)(typescript@5.4.5)
   '@invoke-ai/prettier-config-react':
     specifier: ^0.0.7
     version: 0.0.7(prettier@3.2.5)
   '@storybook/addon-essentials':
-    specifier: ^8.0.4
-    version: 8.0.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^8.0.10
+    version: 8.0.10(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
   '@storybook/addon-interactions':
-    specifier: ^8.0.4
-    version: 8.0.4(vitest@1.4.0)
+    specifier: ^8.0.10
+    version: 8.0.10(vitest@1.6.0)
   '@storybook/addon-links':
-    specifier: ^8.0.4
-    version: 8.0.4(react@18.2.0)
+    specifier: ^8.0.10
+    version: 8.0.10(react@18.3.1)
   '@storybook/addon-storysource':
-    specifier: ^8.0.4
-    version: 8.0.4
+    specifier: ^8.0.10
+    version: 8.0.10
   '@storybook/manager-api':
-    specifier: ^8.0.4
-    version: 8.0.4(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^8.0.10
+    version: 8.0.10(react-dom@18.3.1)(react@18.3.1)
   '@storybook/react':
-    specifier: ^8.0.4
-    version: 8.0.4(react-dom@18.2.0)(react@18.2.0)(typescript@5.4.3)
+    specifier: ^8.0.10
+    version: 8.0.10(react-dom@18.3.1)(react@18.3.1)(typescript@5.4.5)
   '@storybook/react-vite':
-    specifier: ^8.0.4
-    version: 8.0.4(react-dom@18.2.0)(react@18.2.0)(typescript@5.4.3)(vite@5.2.6)
+    specifier: ^8.0.10
+    version: 8.0.10(react-dom@18.3.1)(react@18.3.1)(typescript@5.4.5)(vite@5.2.11)
   '@storybook/theming':
-    specifier: ^8.0.4
-    version: 8.0.4(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^8.0.10
+    version: 8.0.10(react-dom@18.3.1)(react@18.3.1)
   '@types/dateformat':
     specifier: ^5.0.2
     version: 5.0.2
@@ -215,20 +215,20 @@ devDependencies:
     specifier: ^4.17.12
     version: 4.17.12
   '@types/node':
-    specifier: ^20.11.30
-    version: 20.11.30
+    specifier: ^20.12.10
+    version: 20.12.10
   '@types/react':
-    specifier: ^18.2.73
-    version: 18.2.73
+    specifier: ^18.3.1
+    version: 18.3.1
   '@types/react-dom':
-    specifier: ^18.2.22
-    version: 18.2.22
+    specifier: ^18.3.0
+    version: 18.3.0
   '@types/uuid':
     specifier: ^9.0.8
     version: 9.0.8
   '@vitejs/plugin-react-swc':
     specifier: ^3.6.0
-    version: 3.6.0(vite@5.2.6)
+    version: 3.6.0(vite@5.2.11)
   concurrently:
     specifier: ^8.2.2
     version: 8.2.2
@@ -245,8 +245,8 @@ devDependencies:
     specifier: ^1.3.0
     version: 1.3.0(eslint@8.57.0)
   knip:
-    specifier: ^5.6.1
-    version: 5.6.1(@types/node@20.11.30)(typescript@5.4.3)
+    specifier: ^5.12.3
+    version: 5.12.3(@types/node@20.12.10)(typescript@5.4.5)
   openapi-types:
     specifier: ^12.1.3
     version: 12.1.3
@@ -260,8 +260,8 @@ devDependencies:
     specifier: ^5.12.0
     version: 5.12.0
   storybook:
-    specifier: ^8.0.4
-    version: 8.0.4(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^8.0.10
+    version: 8.0.10(react-dom@18.3.1)(react@18.3.1)
   ts-toolbelt:
     specifier: ^9.6.0
     version: 9.6.0
@@ -269,34 +269,29 @@ devDependencies:
     specifier: ^1.6.6
     version: 1.6.6
   typescript:
-    specifier: ^5.4.3
-    version: 5.4.3
+    specifier: ^5.4.5
+    version: 5.4.5
   vite:
-    specifier: ^5.2.6
-    version: 5.2.6(@types/node@20.11.30)
+    specifier: ^5.2.11
+    version: 5.2.11(@types/node@20.12.10)
   vite-plugin-css-injected-by-js:
-    specifier: ^3.5.0
-    version: 3.5.0(vite@5.2.6)
+    specifier: ^3.5.1
+    version: 3.5.1(vite@5.2.11)
   vite-plugin-dts:
-    specifier: ^3.8.0
-    version: 3.8.0(@types/node@20.11.30)(typescript@5.4.3)(vite@5.2.6)
+    specifier: ^3.9.1
+    version: 3.9.1(@types/node@20.12.10)(typescript@5.4.5)(vite@5.2.11)
   vite-plugin-eslint:
     specifier: ^1.8.1
-    version: 1.8.1(eslint@8.57.0)(vite@5.2.6)
+    version: 1.8.1(eslint@8.57.0)(vite@5.2.11)
   vite-tsconfig-paths:
     specifier: ^4.3.2
-    version: 4.3.2(typescript@5.4.3)(vite@5.2.6)
+    version: 4.3.2(typescript@5.4.5)(vite@5.2.11)
   vitest:
-    specifier: ^1.4.0
-    version: 1.4.0(@types/node@20.11.30)
+    specifier: ^1.6.0
+    version: 1.6.0(@types/node@20.12.10)
 
 packages:
 
-  /@aashutoshrathi/word-wrap@1.2.6:
-    resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /@adobe/css-tools@4.3.3:
     resolution: {integrity: sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==}
     dev: true
@@ -348,7 +343,7 @@ packages:
       - '@internationalized/date'
     dev: false
 
-  /@ark-ui/react@1.3.0(@internationalized/date@3.5.3)(react-dom@18.2.0)(react@18.2.0):
+  /@ark-ui/react@1.3.0(@internationalized/date@3.5.3)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-JHjNoIX50+mUCTaEGMjfGQWGGi31pKsV646jZJlR/1xohpYJigzg8BvO97cTsVk8fwtur+cm11gz3Nf7f5QUnA==}
     peerDependencies:
       react: '>=18.0.0'
@@ -378,7 +373,7 @@ packages:
       '@zag-js/progress': 0.32.1
       '@zag-js/radio-group': 0.32.1
       '@zag-js/rating-group': 0.32.1
-      '@zag-js/react': 0.32.1(react-dom@18.2.0)(react@18.2.0)
+      '@zag-js/react': 0.32.1(react-dom@18.3.1)(react@18.3.1)
       '@zag-js/select': 0.32.1
       '@zag-js/slider': 0.32.1
       '@zag-js/splitter': 0.32.1
@@ -389,8 +384,8 @@ packages:
       '@zag-js/toggle-group': 0.32.1
       '@zag-js/tooltip': 0.32.1
       '@zag-js/types': 0.32.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     transitivePeerDependencies:
       - '@internationalized/date'
     dev: false
@@ -406,28 +401,28 @@ packages:
     resolution: {integrity: sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/highlight': 7.24.2
+      '@babel/highlight': 7.24.5
       picocolors: 1.0.0
 
-  /@babel/compat-data@7.24.1:
-    resolution: {integrity: sha512-Pc65opHDliVpRHuKfzI+gSA4zcgr65O4cl64fFJIWEEh8JoHIHh0Oez1Eo8Arz8zq/JhgKodQaxEwUPRtZylVA==}
+  /@babel/compat-data@7.24.4:
+    resolution: {integrity: sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==}
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/core@7.24.3:
-    resolution: {integrity: sha512-5FcvN1JHw2sHJChotgx8Ek0lyuh4kCKelgMTTqhYJJtloNvUfpAFMeNQUtdlIaktwrSV9LtCdqwk48wL2wBacQ==}
+  /@babel/core@7.24.5:
+    resolution: {integrity: sha512-tVQRucExLQ02Boi4vdPp49svNGcfL2GhdTCT9aldhXgCJVAI21EtRfBettiuLUwce/7r6bFdgs6JFkcdTiFttA==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@babel/code-frame': 7.24.2
-      '@babel/generator': 7.24.1
+      '@babel/generator': 7.24.5
       '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.3)
-      '@babel/helpers': 7.24.1
-      '@babel/parser': 7.24.1
+      '@babel/helper-module-transforms': 7.24.5(@babel/core@7.24.5)
+      '@babel/helpers': 7.24.5
+      '@babel/parser': 7.24.5
       '@babel/template': 7.24.0
-      '@babel/traverse': 7.24.1
-      '@babel/types': 7.24.0
+      '@babel/traverse': 7.24.5
+      '@babel/types': 7.24.5
       convert-source-map: 2.0.0
       debug: 4.3.4
       gensync: 1.0.0-beta.2
@@ -437,11 +432,11 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/generator@7.24.1:
-    resolution: {integrity: sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==}
+  /@babel/generator@7.24.5:
+    resolution: {integrity: sha512-x32i4hEXvr+iI0NEoEfDKzlemF8AmtOP8CcrRaEcpzysWuoEb1KknpcvMsHKPONoKZiDuItklgWhB18xEhr9PA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/types': 7.24.5
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
       jsesc: 2.5.2
@@ -451,65 +446,65 @@ packages:
     resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/types': 7.24.5
     dev: true
 
   /@babel/helper-builder-binary-assignment-operator-visitor@7.22.15:
     resolution: {integrity: sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/types': 7.24.5
     dev: true
 
   /@babel/helper-compilation-targets@7.23.6:
     resolution: {integrity: sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/compat-data': 7.24.1
+      '@babel/compat-data': 7.24.4
       '@babel/helper-validator-option': 7.23.5
       browserslist: 4.23.0
       lru-cache: 5.1.1
       semver: 6.3.1
     dev: true
 
-  /@babel/helper-create-class-features-plugin@7.24.1(@babel/core@7.24.3):
-    resolution: {integrity: sha512-1yJa9dX9g//V6fDebXoEfEsxkZHk3Hcbm+zLhyu6qVgYFLvmTALTeV+jNU9e5RnYtioBrGEOdoI2joMSNQ/+aA==}
+  /@babel/helper-create-class-features-plugin@7.24.5(@babel/core@7.24.5):
+    resolution: {integrity: sha512-uRc4Cv8UQWnE4NXlYTIIdM7wfFkOqlFztcC/gVXDKohKoVB3OyonfelUBaJzSwpBntZ2KYGF/9S7asCHsXwW6g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
       '@babel/helper-annotate-as-pure': 7.22.5
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-function-name': 7.23.0
-      '@babel/helper-member-expression-to-functions': 7.23.0
+      '@babel/helper-member-expression-to-functions': 7.24.5
       '@babel/helper-optimise-call-expression': 7.22.5
-      '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.3)
+      '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.5)
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/helper-split-export-declaration': 7.24.5
       semver: 6.3.1
     dev: true
 
-  /@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.24.3):
+  /@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.24.5):
     resolution: {integrity: sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
       '@babel/helper-annotate-as-pure': 7.22.5
       regexpu-core: 5.3.2
       semver: 6.3.1
     dev: true
 
-  /@babel/helper-define-polyfill-provider@0.6.1(@babel/core@7.24.3):
-    resolution: {integrity: sha512-o7SDgTJuvx5vLKD6SFvkydkSMBvahDKGiNJzG22IZYXhiqoe9efY7zocICBgzHV4IRg5wdgl2nEL/tulKIEIbA==}
+  /@babel/helper-define-polyfill-provider@0.6.2(@babel/core@7.24.5):
+    resolution: {integrity: sha512-LV76g+C502biUK6AyZ3LK10vDpDyCzZnhZFXkH1L75zHPj68+qc8Zfpx2th+gzwA2MzyK+1g/3EPl62yFnVttQ==}
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
       '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/helper-plugin-utils': 7.24.5
       debug: 4.3.4
       lodash.debounce: 4.0.8
       resolve: 1.22.8
@@ -527,106 +522,106 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.24.0
-      '@babel/types': 7.24.0
+      '@babel/types': 7.24.5
     dev: true
 
   /@babel/helper-hoist-variables@7.22.5:
     resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/types': 7.24.5
     dev: true
 
-  /@babel/helper-member-expression-to-functions@7.23.0:
-    resolution: {integrity: sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==}
+  /@babel/helper-member-expression-to-functions@7.24.5:
+    resolution: {integrity: sha512-4owRteeihKWKamtqg4JmWSsEZU445xpFRXPEwp44HbgbxdWlUV1b4Agg4lkA806Lil5XM/e+FJyS0vj5T6vmcA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/types': 7.24.5
     dev: true
 
   /@babel/helper-module-imports@7.24.3:
     resolution: {integrity: sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/types': 7.24.5
 
-  /@babel/helper-module-transforms@7.23.3(@babel/core@7.24.3):
-    resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
+  /@babel/helper-module-transforms@7.24.5(@babel/core@7.24.5):
+    resolution: {integrity: sha512-9GxeY8c2d2mdQUP1Dye0ks3VDyIMS98kt/llQ2nUId8IsWqTF0l1LkSX0/uP7l7MCDrzXS009Hyhe2gzTiGW8A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-module-imports': 7.24.3
-      '@babel/helper-simple-access': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/helper-validator-identifier': 7.22.20
+      '@babel/helper-simple-access': 7.24.5
+      '@babel/helper-split-export-declaration': 7.24.5
+      '@babel/helper-validator-identifier': 7.24.5
     dev: true
 
   /@babel/helper-optimise-call-expression@7.22.5:
     resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/types': 7.24.5
     dev: true
 
-  /@babel/helper-plugin-utils@7.24.0:
-    resolution: {integrity: sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==}
+  /@babel/helper-plugin-utils@7.24.5:
+    resolution: {integrity: sha512-xjNLDopRzW2o6ba0gKbkZq5YWEBaK3PCyTOY1K2P/O07LGMhMqlMXPxwN4S5/RhWuCobT8z0jrlKGlYmeR1OhQ==}
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.24.3):
+  /@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.24.5):
     resolution: {integrity: sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
       '@babel/helper-annotate-as-pure': 7.22.5
       '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-wrap-function': 7.22.20
+      '@babel/helper-wrap-function': 7.24.5
     dev: true
 
-  /@babel/helper-replace-supers@7.24.1(@babel/core@7.24.3):
+  /@babel/helper-replace-supers@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
       '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-member-expression-to-functions': 7.23.0
+      '@babel/helper-member-expression-to-functions': 7.24.5
       '@babel/helper-optimise-call-expression': 7.22.5
     dev: true
 
-  /@babel/helper-simple-access@7.22.5:
-    resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
+  /@babel/helper-simple-access@7.24.5:
+    resolution: {integrity: sha512-uH3Hmf5q5n7n8mz7arjUlDOCbttY/DW4DYhE6FUsjKJ/oYC1kQQUvwEQWxRwUpX9qQKRXeqLwWxrqilMrf32sQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/types': 7.24.5
     dev: true
 
   /@babel/helper-skip-transparent-expression-wrappers@7.22.5:
     resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/types': 7.24.5
     dev: true
 
-  /@babel/helper-split-export-declaration@7.22.6:
-    resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
+  /@babel/helper-split-export-declaration@7.24.5:
+    resolution: {integrity: sha512-5CHncttXohrHk8GWOFCcCl4oRD9fKosWlIRgWm4ql9VYioKm52Mk2xsmoohvm7f3JoiLSM5ZgJuRaf5QZZYd3Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/types': 7.24.5
     dev: true
 
   /@babel/helper-string-parser@7.24.1:
     resolution: {integrity: sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==}
     engines: {node: '>=6.9.0'}
 
-  /@babel/helper-validator-identifier@7.22.20:
-    resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
+  /@babel/helper-validator-identifier@7.24.5:
+    resolution: {integrity: sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==}
     engines: {node: '>=6.9.0'}
 
   /@babel/helper-validator-option@7.23.5:
@@ -634,974 +629,986 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/helper-wrap-function@7.22.20:
-    resolution: {integrity: sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==}
+  /@babel/helper-wrap-function@7.24.5:
+    resolution: {integrity: sha512-/xxzuNvgRl4/HLNKvnFwdhdgN3cpLxgLROeLDl83Yx0AJ1SGvq1ak0OszTOjDfiB8Vx03eJbeDWh9r+jCCWttw==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-function-name': 7.23.0
       '@babel/template': 7.24.0
-      '@babel/types': 7.24.0
+      '@babel/types': 7.24.5
     dev: true
 
-  /@babel/helpers@7.24.1:
-    resolution: {integrity: sha512-BpU09QqEe6ZCHuIHFphEFgvNSrubve1FtyMton26ekZ85gRGi6LrTF7zArARp2YvyFxloeiRmtSCq5sjh1WqIg==}
+  /@babel/helpers@7.24.5:
+    resolution: {integrity: sha512-CiQmBMMpMQHwM5m01YnrM6imUG1ebgYJ+fAIW4FZe6m4qHTPaRHti+R8cggAwkdz4oXhtO4/K9JWlh+8hIfR2Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.24.0
-      '@babel/traverse': 7.24.1
-      '@babel/types': 7.24.0
+      '@babel/traverse': 7.24.5
+      '@babel/types': 7.24.5
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/highlight@7.24.2:
-    resolution: {integrity: sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==}
+  /@babel/highlight@7.24.5:
+    resolution: {integrity: sha512-8lLmua6AVh/8SLJRRVD6V8p73Hir9w5mJrhE+IPpILG31KKlI9iz5zmBYKcWPS59qSfgP9RaSBQSHHE81WKuEw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-validator-identifier': 7.22.20
+      '@babel/helper-validator-identifier': 7.24.5
       chalk: 2.4.2
       js-tokens: 4.0.0
       picocolors: 1.0.0
 
-  /@babel/parser@7.24.1:
-    resolution: {integrity: sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==}
+  /@babel/parser@7.24.5:
+    resolution: {integrity: sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==}
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/types': 7.24.5
     dev: true
 
-  /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.24.5(@babel/core@7.24.5):
+    resolution: {integrity: sha512-LdXRi1wEMTrHVR4Zc9F8OewC3vdm5h4QB6L71zy6StmYeqGi1b3ttIO8UC+BfZKcH9jdr4aI249rBkm+3+YvHw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.24.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-plugin-utils': 7.24.5
+    dev: true
+
+  /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-y4HqEnkelJIOQGd+3g1bTeKsA5c6qM7eOn7VggGVbBc0y8MLSKHacwcIE2PplNlQSj0PqS9rrXL/nkPVK+kUNg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-Hj791Ii4ci8HqnaKHAlLNs+zaLXb0EzSDhiAWp5VNlyvCNymYfacs64pxTxbH1znW/NcArSmwpmG9IKE/TUVVQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.13.0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.24.3)
+      '@babel/plugin-transform-optional-chaining': 7.24.5(@babel/core@7.24.5)
     dev: true
 
-  /@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-m9m/fXsXLiHfwdgydIFnpk+7jlVbnvlK5B2EKiPdLUb6WX654ZaaEWJUjk8TftRbZpK0XibovlLWX4KIZhV6jw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
       '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.3):
+  /@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.5):
     resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.24.3):
+  /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.24.5):
     resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.24.3):
+  /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.24.5):
     resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.24.3):
+  /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.24.5):
     resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.24.3):
+  /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.24.5):
     resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.24.3):
+  /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.24.5):
     resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-flow@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-syntax-flow@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-sxi2kLTI5DeW5vDtMUsk4mTPwvlUDbjOnoWayhynCwrw4QXRld4QEYwqzY8JmQXaJUtgUuCIurtSRH5sn4c7mA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-import-assertions@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-syntax-import-assertions@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-IuwnI5XnuF189t91XbxmXeCDz3qs6iDRO7GJ++wcfgeXNs/8FmIlKcpDSXNVyuLQxlwvskmI3Ct73wUODkJBlQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-import-attributes@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-syntax-import-attributes@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-zhQTMH0X2nVLnb04tz+s7AMuasX8U0FnpE+nHTOhSOINjWMnopoZTxtIKsd45n4GQ/HIZLyfIpoul8e2m0DnRA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.24.3):
+  /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.24.5):
     resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.24.3):
+  /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.24.5):
     resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-jsx@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-syntax-jsx@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.24.3):
+  /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.24.5):
     resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.24.3):
+  /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.24.5):
     resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.24.3):
+  /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.24.5):
     resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.24.3):
+  /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.24.5):
     resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.24.3):
+  /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.24.5):
     resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.24.3):
+  /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.24.5):
     resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.24.3):
+  /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.24.5):
     resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.24.3):
+  /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.24.5):
     resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-typescript@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-syntax-typescript@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.24.3):
+  /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.24.5):
     resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.3)
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.5)
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-arrow-functions@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-arrow-functions@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-ngT/3NkRhsaep9ck9uj2Xhv9+xB1zShY3tM3g6om4xxCELwCDN4g4Aq5dRn48+0hasAql7s2hdBOysCfNpr4fw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-async-generator-functions@7.24.3(@babel/core@7.24.3):
+  /@babel/plugin-transform-async-generator-functions@7.24.3(@babel/core@7.24.5):
     resolution: {integrity: sha512-Qe26CMYVjpQxJ8zxM1340JFNjZaF+ISWpr1Kt/jGo+ZTUzKkfw/pphEWbRCb+lmSM6k/TOgfYLvmbHkUQ0asIg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
       '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.3)
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.3)
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.5)
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.5)
     dev: true
 
-  /@babel/plugin-transform-async-to-generator@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-async-to-generator@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-AawPptitRXp1y0n4ilKcGbRYWfbbzFWz2NqNu7dacYDtFtz0CMjG64b3LQsb3KIgnf4/obcUL78hfaOS7iCUfw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
       '@babel/helper-module-imports': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.3)
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.5)
     dev: true
 
-  /@babel/plugin-transform-block-scoped-functions@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-block-scoped-functions@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-TWWC18OShZutrv9C6mye1xwtam+uNi2bnTOCBUd5sZxyHOiWbU6ztSROofIMrK84uweEZC219POICK/sTYwfgg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-block-scoping@7.24.1(@babel/core@7.24.3):
-    resolution: {integrity: sha512-h71T2QQvDgM2SmT29UYU6ozjMlAt7s7CSs5Hvy8f8cf/GM/Z4a2zMfN+fjVGaieeCrXR3EdQl6C4gQG+OgmbKw==}
+  /@babel/plugin-transform-block-scoping@7.24.5(@babel/core@7.24.5):
+    resolution: {integrity: sha512-sMfBc3OxghjC95BkYrYocHL3NaOplrcaunblzwXhGmlPwpmfsxr4vK+mBBt49r+S240vahmv+kUxkeKgs+haCw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-class-properties@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-class-properties@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-OMLCXi0NqvJfORTaPQBwqLXHhb93wkBKZ4aNwMl6WtehO7ar+cmp+89iPEQPqxAnxsOKTaMcs3POz3rKayJ72g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3)
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-create-class-features-plugin': 7.24.5(@babel/core@7.24.5)
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-class-static-block@7.24.1(@babel/core@7.24.3):
-    resolution: {integrity: sha512-FUHlKCn6J3ERiu8Dv+4eoz7w8+kFLSyeVG4vDAikwADGjUCoHw/JHokyGtr8OR4UjpwPVivyF+h8Q5iv/JmrtA==}
+  /@babel/plugin-transform-class-static-block@7.24.4(@babel/core@7.24.5):
+    resolution: {integrity: sha512-B8q7Pz870Hz/q9UgP8InNpY01CSLDSCyqX7zcRuv3FcPl87A2G17lASroHWaCtbdIcbYzOZ7kWmXFKbijMSmFg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.12.0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3)
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.3)
+      '@babel/core': 7.24.5
+      '@babel/helper-create-class-features-plugin': 7.24.5(@babel/core@7.24.5)
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.5)
     dev: true
 
-  /@babel/plugin-transform-classes@7.24.1(@babel/core@7.24.3):
-    resolution: {integrity: sha512-ZTIe3W7UejJd3/3R4p7ScyyOoafetUShSf4kCqV0O7F/RiHxVj/wRaRnQlrGwflvcehNA8M42HkAiEDYZu2F1Q==}
+  /@babel/plugin-transform-classes@7.24.5(@babel/core@7.24.5):
+    resolution: {integrity: sha512-gWkLP25DFj2dwe9Ck8uwMOpko4YsqyfZJrOmqqcegeDYEbp7rmn4U6UQZNj08UF6MaX39XenSpKRCvpDRBtZ7Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
       '@babel/helper-annotate-as-pure': 7.22.5
       '@babel/helper-compilation-targets': 7.23.6
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-function-name': 7.23.0
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.3)
-      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.5)
+      '@babel/helper-split-export-declaration': 7.24.5
       globals: 11.12.0
     dev: true
 
-  /@babel/plugin-transform-computed-properties@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-computed-properties@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-5pJGVIUfJpOS+pAqBQd+QMaTD2vCL/HcePooON6pDpHgRp4gNRmzyHTPIkXntwKsq3ayUFVfJaIKPw2pOkOcTw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
       '@babel/template': 7.24.0
     dev: true
 
-  /@babel/plugin-transform-destructuring@7.24.1(@babel/core@7.24.3):
-    resolution: {integrity: sha512-ow8jciWqNxR3RYbSNVuF4U2Jx130nwnBnhRw6N6h1bOejNkABmcI5X5oz29K4alWX7vf1C+o6gtKXikzRKkVdw==}
+  /@babel/plugin-transform-destructuring@7.24.5(@babel/core@7.24.5):
+    resolution: {integrity: sha512-SZuuLyfxvsm+Ah57I/i1HVjveBENYK9ue8MJ7qkc7ndoNjqquJiElzA7f5yaAXjyW2hKojosOTAQQRX50bPSVg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-dotall-regex@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-dotall-regex@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-p7uUxgSoZwZ2lPNMzUkqCts3xlp8n+o05ikjy7gbtFJSt9gdU88jAmtfmOxHM14noQXBxfgzf2yRWECiNVhTCw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.3)
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.5)
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-duplicate-keys@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-duplicate-keys@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-msyzuUnvsjsaSaocV6L7ErfNsa5nDWL1XKNnDePLgmz+WdU4w/J8+AxBMrWfi9m4IxfL5sZQKUPQKDQeeAT6lA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-dynamic-import@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-dynamic-import@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-av2gdSTyXcJVdI+8aFZsCAtR29xJt0S5tas+Ef8NvBNmD1a+N/3ecMLeMBgfcK+xzsjdLDT6oHt+DFPyeqUbDA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.3)
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.5)
     dev: true
 
-  /@babel/plugin-transform-exponentiation-operator@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-exponentiation-operator@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-U1yX13dVBSwS23DEAqU+Z/PkwE9/m7QQy8Y9/+Tdb8UWYaGNDYwTLi19wqIAiROr8sXVum9A/rtiH5H0boUcTw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
       '@babel/helper-builder-binary-assignment-operator-visitor': 7.22.15
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-export-namespace-from@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-export-namespace-from@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-Ft38m/KFOyzKw2UaJFkWG9QnHPG/Q/2SkOrRk4pNBPg5IPZ+dOxcmkK5IyuBcxiNPyyYowPGUReyBvrvZs7IlQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.3)
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.5)
     dev: true
 
-  /@babel/plugin-transform-flow-strip-types@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-flow-strip-types@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-iIYPIWt3dUmUKKE10s3W+jsQ3icFkw0JyRVyY1B7G4yK/nngAOHLVx8xlhA6b/Jzl/Y0nis8gjqhqKtRDQqHWQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.3)
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.5)
     dev: true
 
-  /@babel/plugin-transform-for-of@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-for-of@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-OxBdcnF04bpdQdR3i4giHZNZQn7cm8RQKcSwA17wAAqEELo1ZOwp5FFgeptWUQXFyT9kwHo10aqqauYkRZPCAg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
     dev: true
 
-  /@babel/plugin-transform-function-name@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-function-name@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-BXmDZpPlh7jwicKArQASrj8n22/w6iymRnvHYYd2zO30DbE277JO20/7yXJT3QxDPtiQiOxQBbZH4TpivNXIxA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
       '@babel/helper-compilation-targets': 7.23.6
       '@babel/helper-function-name': 7.23.0
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-json-strings@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-json-strings@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-U7RMFmRvoasscrIFy5xA4gIp8iWnWubnKkKuUGJjsuOH7GfbMkB+XZzeslx2kLdEGdOJDamEmCqOks6e8nv8DQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.3)
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.5)
     dev: true
 
-  /@babel/plugin-transform-literals@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-literals@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-zn9pwz8U7nCqOYIiBaOxoQOtYmMODXTJnkxG4AtX8fPmnCRYWBOHD0qcpwS9e2VDSp1zNJYpdnFMIKb8jmwu6g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-logical-assignment-operators@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-logical-assignment-operators@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-OhN6J4Bpz+hIBqItTeWJujDOfNP+unqv/NJgyhlpSqgBTPm37KkMmZV6SYcOj+pnDbdcl1qRGV/ZiIjX9Iy34w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.3)
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.5)
     dev: true
 
-  /@babel/plugin-transform-member-expression-literals@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-member-expression-literals@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-4ojai0KysTWXzHseJKa1XPNXKRbuUrhkOPY4rEGeR+7ChlJVKxFa3H3Bz+7tWaGKgJAXUWKOGmltN+u9B3+CVg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-modules-amd@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-modules-amd@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-lAxNHi4HVtjnHd5Rxg3D5t99Xm6H7b04hUS7EHIXcUl2EV4yl1gWdqZrNzXnSrHveL9qMdbODlLF55mvgjAfaQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.3)
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-module-transforms': 7.24.5(@babel/core@7.24.5)
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-modules-commonjs@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-modules-commonjs@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-szog8fFTUxBfw0b98gEWPaEqF42ZUD/T3bkynW/wtgx2p/XCP55WEsb+VosKceRSd6njipdZvNogqdtI4Q0chw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.3)
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-simple-access': 7.22.5
+      '@babel/core': 7.24.5
+      '@babel/helper-module-transforms': 7.24.5(@babel/core@7.24.5)
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/helper-simple-access': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-modules-systemjs@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-modules-systemjs@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-mqQ3Zh9vFO1Tpmlt8QPnbwGHzNz3lpNEMxQb1kAemn/erstyqw1r9KeOlOfo3y6xAnFEcOv2tSyrXfmMk+/YZA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
       '@babel/helper-hoist-variables': 7.22.5
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.3)
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-validator-identifier': 7.22.20
+      '@babel/helper-module-transforms': 7.24.5(@babel/core@7.24.5)
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/helper-validator-identifier': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-modules-umd@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-modules-umd@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-tuA3lpPj+5ITfcCluy6nWonSL7RvaG0AOTeAuvXqEKS34lnLzXpDb0dcP6K8jD0zWZFNDVly90AGFJPnm4fOYg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.3)
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-module-transforms': 7.24.5(@babel/core@7.24.5)
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.24.3):
+  /@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.24.5):
     resolution: {integrity: sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.3)
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.5)
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-new-target@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-new-target@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-/rurytBM34hYy0HKZQyA0nHbQgQNFm4Q/BOc9Hflxi2X3twRof7NaE5W46j4kQitm7SvACVRXsa6N/tSZxvPug==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-nullish-coalescing-operator@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-nullish-coalescing-operator@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-iQ+caew8wRrhCikO5DrUYx0mrmdhkaELgFa+7baMcVuhxIkN7oxt06CZ51D65ugIb1UWRQ8oQe+HXAVM6qHFjw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.3)
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.5)
     dev: true
 
-  /@babel/plugin-transform-numeric-separator@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-numeric-separator@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-7GAsGlK4cNL2OExJH1DzmDeKnRv/LXq0eLUSvudrehVA5Rgg4bIrqEUW29FbKMBRT0ztSqisv7kjP+XIC4ZMNw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.3)
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.5)
     dev: true
 
-  /@babel/plugin-transform-object-rest-spread@7.24.1(@babel/core@7.24.3):
-    resolution: {integrity: sha512-XjD5f0YqOtebto4HGISLNfiNMTTs6tbkFf2TOqJlYKYmbo+mN9Dnpl4SRoofiziuOWMIyq3sZEUqLo3hLITFEA==}
+  /@babel/plugin-transform-object-rest-spread@7.24.5(@babel/core@7.24.5):
+    resolution: {integrity: sha512-7EauQHszLGM3ay7a161tTQH7fj+3vVM/gThlz5HpFtnygTxjrlvoeq7MPVA1Vy9Q555OB8SnAOsMkLShNkkrHA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
       '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.3)
-      '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.24.3)
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.5)
+      '@babel/plugin-transform-parameters': 7.24.5(@babel/core@7.24.5)
     dev: true
 
-  /@babel/plugin-transform-object-super@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-object-super@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-oKJqR3TeI5hSLRxudMjFQ9re9fBVUU0GICqM3J1mi8MqlhVr6hC/ZN4ttAyMuQR6EZZIY6h/exe5swqGNNIkWQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.3)
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.5)
     dev: true
 
-  /@babel/plugin-transform-optional-catch-binding@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-optional-catch-binding@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-oBTH7oURV4Y+3EUrf6cWn1OHio3qG/PVwO5J03iSJmBg6m2EhKjkAu/xuaXaYwWW9miYtvbWv4LNf0AmR43LUA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.3)
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.5)
     dev: true
 
-  /@babel/plugin-transform-optional-chaining@7.24.1(@babel/core@7.24.3):
-    resolution: {integrity: sha512-n03wmDt+987qXwAgcBlnUUivrZBPZ8z1plL0YvgQalLm+ZE5BMhGm94jhxXtA1wzv1Cu2aaOv1BM9vbVttrzSg==}
+  /@babel/plugin-transform-optional-chaining@7.24.5(@babel/core@7.24.5):
+    resolution: {integrity: sha512-xWCkmwKT+ihmA6l7SSTpk8e4qQl/274iNbSKRRS8mpqFR32ksy36+a+LWY8OXCCEefF8WFlnOHVsaDI2231wBg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.3)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.5)
     dev: true
 
-  /@babel/plugin-transform-parameters@7.24.1(@babel/core@7.24.3):
-    resolution: {integrity: sha512-8Jl6V24g+Uw5OGPeWNKrKqXPDw2YDjLc53ojwfMcKwlEoETKU9rU0mHUtcg9JntWI/QYzGAXNWEcVHZ+fR+XXg==}
+  /@babel/plugin-transform-parameters@7.24.5(@babel/core@7.24.5):
+    resolution: {integrity: sha512-9Co00MqZ2aoky+4j2jhofErthm6QVLKbpQrvz20c3CH9KQCLHyNB+t2ya4/UrRpQGR+Wrwjg9foopoeSdnHOkA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-private-methods@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-private-methods@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-tGvisebwBO5em4PaYNqt4fkw56K2VALsAbAakY0FjTYqJp7gfdrgr7YX76Or8/cpik0W6+tj3rZ0uHU9Oil4tw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3)
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-create-class-features-plugin': 7.24.5(@babel/core@7.24.5)
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-private-property-in-object@7.24.1(@babel/core@7.24.3):
-    resolution: {integrity: sha512-pTHxDVa0BpUbvAgX3Gat+7cSciXqUcY9j2VZKTbSB6+VQGpNgNO9ailxTGHSXlqOnX1Hcx1Enme2+yv7VqP9bg==}
+  /@babel/plugin-transform-private-property-in-object@7.24.5(@babel/core@7.24.5):
+    resolution: {integrity: sha512-JM4MHZqnWR04jPMujQDTBVRnqxpLLpx2tkn7iPn+Hmsc0Gnb79yvRWOkvqFOx3Z7P7VxiRIR22c4eGSNj87OBQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
       '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3)
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.3)
+      '@babel/helper-create-class-features-plugin': 7.24.5(@babel/core@7.24.5)
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.5)
     dev: true
 
-  /@babel/plugin-transform-property-literals@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-property-literals@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-LetvD7CrHmEx0G442gOomRr66d7q8HzzGGr4PMHGr+5YIm6++Yke+jxj246rpvsbyhJwCLxcTn6zW1P1BSenqA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-regenerator@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-regenerator@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-sJwZBCzIBE4t+5Q4IGLaaun5ExVMRY0lYwos/jNecjMrVCygCdph3IKv0tkP5Fc87e/1+bebAmEAGBfnRD+cnw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
       regenerator-transform: 0.15.2
     dev: true
 
-  /@babel/plugin-transform-reserved-words@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-reserved-words@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-JAclqStUfIwKN15HrsQADFgeZt+wexNQ0uLhuqvqAUFoqPMjEcFCYZBhq0LUdz6dZK/mD+rErhW71fbx8RYElg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-shorthand-properties@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-shorthand-properties@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-LyjVB1nsJ6gTTUKRjRWx9C1s9hE7dLfP/knKdrfeH9UPtAGjYGgxIbFfx7xyLIEWs7Xe1Gnf8EWiUqfjLhInZA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-spread@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-spread@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-KjmcIM+fxgY+KxPVbjelJC6hrH1CgtPmTvdXAfn3/a9CnWGSTY7nH4zm5+cjmWJybdcPSsD0++QssDsjcpe47g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
       '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
     dev: true
 
-  /@babel/plugin-transform-sticky-regex@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-sticky-regex@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-9v0f1bRXgPVcPrngOQvLXeGNNVLc8UjMVfebo9ka0WF3/7+aVUHmaJVT3sa0XCzEFioPfPHZiOcYG9qOsH63cw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-template-literals@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-template-literals@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-WRkhROsNzriarqECASCNu/nojeXCDTE/F2HmRgOzi7NGvyfYGq1NEjKBK3ckLfRgGc6/lPAqP0vDOSw3YtG34g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-typeof-symbol@7.24.1(@babel/core@7.24.3):
-    resolution: {integrity: sha512-CBfU4l/A+KruSUoW+vTQthwcAdwuqbpRNB8HQKlZABwHRhsdHZ9fezp4Sn18PeAlYxTNiLMlx4xUBV3AWfg1BA==}
+  /@babel/plugin-transform-typeof-symbol@7.24.5(@babel/core@7.24.5):
+    resolution: {integrity: sha512-UTGnhYVZtTAjdwOTzT+sCyXmTn8AhaxOS/MjG9REclZ6ULHWF9KoCZur0HSGU7hk8PdBFKKbYe6+gqdXWz84Jg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-typescript@7.24.1(@babel/core@7.24.3):
-    resolution: {integrity: sha512-liYSESjX2fZ7JyBFkYG78nfvHlMKE6IpNdTVnxmlYUR+j5ZLsitFbaAE+eJSK2zPPkNWNw4mXL51rQ8WrvdK0w==}
+  /@babel/plugin-transform-typescript@7.24.5(@babel/core@7.24.5):
+    resolution: {integrity: sha512-E0VWu/hk83BIFUWnsKZ4D81KXjN5L3MobvevOHErASk9IPwKHOkTgvqzvNo1yP/ePJWqqK2SpUR5z+KQbl6NVw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
       '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.24.1(@babel/core@7.24.3)
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-typescript': 7.24.1(@babel/core@7.24.3)
+      '@babel/helper-create-class-features-plugin': 7.24.5(@babel/core@7.24.5)
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/plugin-syntax-typescript': 7.24.1(@babel/core@7.24.5)
     dev: true
 
-  /@babel/plugin-transform-unicode-escapes@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-unicode-escapes@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-RlkVIcWT4TLI96zM660S877E7beKlQw7Ig+wqkKBiWfj0zH5Q4h50q6er4wzZKRNSYpfo6ILJ+hrJAGSX2qcNw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-unicode-property-regex@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-unicode-property-regex@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-Ss4VvlfYV5huWApFsF8/Sq0oXnGO+jB+rijFEFugTd3cwSObUSnUi88djgR5528Csl0uKlrI331kRqe56Ov2Ng==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.3)
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.5)
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-unicode-regex@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-unicode-regex@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-2A/94wgZgxfTsiLaQ2E36XAOdcZmGAaEEgVmxQWwZXWkGhvoHbaqXcKnU8zny4ycpu3vNqg0L/PcCiYtHtA13g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.3)
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.5)
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/plugin-transform-unicode-sets-regex@7.24.1(@babel/core@7.24.3):
+  /@babel/plugin-transform-unicode-sets-regex@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-fqj4WuzzS+ukpgerpAoOnMfQXwUHFxXUZUE84oL2Kao2N8uSlvcpnAidKASgsNgzZHBsHWvcm8s9FPWUhAb8fA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.3)
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.5)
+      '@babel/helper-plugin-utils': 7.24.5
     dev: true
 
-  /@babel/preset-env@7.24.3(@babel/core@7.24.3):
-    resolution: {integrity: sha512-fSk430k5c2ff8536JcPvPWK4tZDwehWLGlBp0wrsBUjZVdeQV6lePbwKWZaZfK2vnh/1kQX1PzAJWsnBmVgGJA==}
+  /@babel/preset-env@7.24.5(@babel/core@7.24.5):
+    resolution: {integrity: sha512-UGK2ifKtcC8i5AI4cH+sbLLuLc2ktYSFJgBAXorKAsHUZmrQ1q6aQ6i3BvU24wWs2AAKqQB6kq3N9V9Gw1HiMQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/compat-data': 7.24.1
-      '@babel/core': 7.24.3
+      '@babel/compat-data': 7.24.4
+      '@babel/core': 7.24.5
       '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/helper-plugin-utils': 7.24.5
       '@babel/helper-validator-option': 7.23.5
-      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.3)
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.3)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.24.3)
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.3)
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.3)
-      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.3)
-      '@babel/plugin-syntax-import-assertions': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-syntax-import-attributes': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.3)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.3)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.3)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.3)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.3)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.3)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.3)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.3)
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.3)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.24.3)
-      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.24.3)
-      '@babel/plugin-transform-arrow-functions': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-async-generator-functions': 7.24.3(@babel/core@7.24.3)
-      '@babel/plugin-transform-async-to-generator': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-block-scoped-functions': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-block-scoping': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-class-properties': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-class-static-block': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-classes': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-computed-properties': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-destructuring': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-dotall-regex': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-duplicate-keys': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-dynamic-import': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-exponentiation-operator': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-export-namespace-from': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-for-of': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-function-name': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-json-strings': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-literals': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-logical-assignment-operators': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-member-expression-literals': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-modules-amd': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-modules-systemjs': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-modules-umd': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.24.3)
-      '@babel/plugin-transform-new-target': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-numeric-separator': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-object-rest-spread': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-object-super': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-optional-catch-binding': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-private-property-in-object': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-property-literals': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-regenerator': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-reserved-words': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-shorthand-properties': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-spread': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-sticky-regex': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-template-literals': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-typeof-symbol': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-unicode-escapes': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-unicode-property-regex': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-unicode-regex': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-unicode-sets-regex': 7.24.1(@babel/core@7.24.3)
-      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.24.3)
-      babel-plugin-polyfill-corejs2: 0.4.10(@babel/core@7.24.3)
-      babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.24.3)
-      babel-plugin-polyfill-regenerator: 0.6.1(@babel/core@7.24.3)
-      core-js-compat: 3.36.1
+      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.24.5(@babel/core@7.24.5)
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.5)
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.5)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.24.5)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.5)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.5)
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.5)
+      '@babel/plugin-syntax-import-assertions': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-syntax-import-attributes': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.5)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.5)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.5)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.5)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.5)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.5)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.5)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.5)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.5)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.24.5)
+      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.24.5)
+      '@babel/plugin-transform-arrow-functions': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-async-generator-functions': 7.24.3(@babel/core@7.24.5)
+      '@babel/plugin-transform-async-to-generator': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-block-scoped-functions': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-block-scoping': 7.24.5(@babel/core@7.24.5)
+      '@babel/plugin-transform-class-properties': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-class-static-block': 7.24.4(@babel/core@7.24.5)
+      '@babel/plugin-transform-classes': 7.24.5(@babel/core@7.24.5)
+      '@babel/plugin-transform-computed-properties': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-destructuring': 7.24.5(@babel/core@7.24.5)
+      '@babel/plugin-transform-dotall-regex': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-duplicate-keys': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-dynamic-import': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-exponentiation-operator': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-export-namespace-from': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-for-of': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-function-name': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-json-strings': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-literals': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-logical-assignment-operators': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-member-expression-literals': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-modules-amd': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-modules-systemjs': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-modules-umd': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.24.5)
+      '@babel/plugin-transform-new-target': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-numeric-separator': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-object-rest-spread': 7.24.5(@babel/core@7.24.5)
+      '@babel/plugin-transform-object-super': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-optional-catch-binding': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-optional-chaining': 7.24.5(@babel/core@7.24.5)
+      '@babel/plugin-transform-parameters': 7.24.5(@babel/core@7.24.5)
+      '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-private-property-in-object': 7.24.5(@babel/core@7.24.5)
+      '@babel/plugin-transform-property-literals': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-regenerator': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-reserved-words': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-shorthand-properties': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-spread': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-sticky-regex': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-template-literals': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-typeof-symbol': 7.24.5(@babel/core@7.24.5)
+      '@babel/plugin-transform-unicode-escapes': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-unicode-property-regex': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-unicode-regex': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-unicode-sets-regex': 7.24.1(@babel/core@7.24.5)
+      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.24.5)
+      babel-plugin-polyfill-corejs2: 0.4.11(@babel/core@7.24.5)
+      babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.24.5)
+      babel-plugin-polyfill-regenerator: 0.6.2(@babel/core@7.24.5)
+      core-js-compat: 3.37.0
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/preset-flow@7.24.1(@babel/core@7.24.3):
+  /@babel/preset-flow@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-sWCV2G9pcqZf+JHyv/RyqEIpFypxdCSxWIxQjpdaQxenNog7cN1pr76hg8u0Fz8Qgg0H4ETkGcJnXL8d4j0PPA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
       '@babel/helper-validator-option': 7.23.5
-      '@babel/plugin-transform-flow-strip-types': 7.24.1(@babel/core@7.24.3)
+      '@babel/plugin-transform-flow-strip-types': 7.24.1(@babel/core@7.24.5)
     dev: true
 
-  /@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.24.3):
+  /@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.24.5):
     resolution: {integrity: sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==}
     peerDependencies:
       '@babel/core': ^7.0.0-0 || ^8.0.0-0 <8.0.0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/types': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/types': 7.24.5
       esutils: 2.0.3
     dev: true
 
-  /@babel/preset-typescript@7.24.1(@babel/core@7.24.3):
+  /@babel/preset-typescript@7.24.1(@babel/core@7.24.5):
     resolution: {integrity: sha512-1DBaMmRDpuYQBPWD8Pf/WEwCrtgRHxsZnP4mIy9G/X+hFfbI47Q2G4t1Paakld84+qsk2fSsUPMKg71jkoOOaQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
       '@babel/helper-validator-option': 7.23.5
-      '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-typescript': 7.24.1(@babel/core@7.24.3)
+      '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-typescript': 7.24.5(@babel/core@7.24.5)
     dev: true
 
-  /@babel/register@7.23.7(@babel/core@7.24.3):
+  /@babel/register@7.23.7(@babel/core@7.24.5):
     resolution: {integrity: sha512-EjJeB6+kvpk+Y5DAkEAmbOBEFkh9OASx0huoEkqYTFxAZHzOAX2Oh5uwAUuL2rUddqfM0SA+KPXV2TbzoZ2kvQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
       clone-deep: 4.0.1
       find-cache-dir: 2.1.0
       make-dir: 2.1.0
@@ -1625,127 +1632,134 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       regenerator-runtime: 0.14.1
+    dev: false
+
+  /@babel/runtime@7.24.5:
+    resolution: {integrity: sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.1
 
   /@babel/template@7.24.0:
     resolution: {integrity: sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.24.2
-      '@babel/parser': 7.24.1
-      '@babel/types': 7.24.0
+      '@babel/parser': 7.24.5
+      '@babel/types': 7.24.5
     dev: true
 
-  /@babel/traverse@7.24.1:
-    resolution: {integrity: sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==}
+  /@babel/traverse@7.24.5:
+    resolution: {integrity: sha512-7aaBLeDQ4zYcUFDUD41lJc1fG8+5IU9DaNSJAgal866FGvmD5EbWQgnEC6kO1gGLsX0esNkfnJSndbTXA3r7UA==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.24.2
-      '@babel/generator': 7.24.1
+      '@babel/generator': 7.24.5
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-function-name': 7.23.0
       '@babel/helper-hoist-variables': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.24.1
-      '@babel/types': 7.24.0
+      '@babel/helper-split-export-declaration': 7.24.5
+      '@babel/parser': 7.24.5
+      '@babel/types': 7.24.5
       debug: 4.3.4
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/types@7.24.0:
-    resolution: {integrity: sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==}
+  /@babel/types@7.24.5:
+    resolution: {integrity: sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-string-parser': 7.24.1
-      '@babel/helper-validator-identifier': 7.22.20
+      '@babel/helper-validator-identifier': 7.24.5
       to-fast-properties: 2.0.0
 
   /@base2/pretty-print-object@1.0.1:
     resolution: {integrity: sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==}
     dev: true
 
-  /@chakra-ui/accordion@2.3.1(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react@18.2.0):
+  /@chakra-ui/accordion@2.3.1(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react@18.3.1):
     resolution: {integrity: sha512-FSXRm8iClFyU+gVaXisOSEw0/4Q+qZbFRiuhIAkVU6Boj0FxAMrlo9a8AV5TuF77rgaHytCdHk0Ng+cyUijrag==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       framer-motion: '>=4.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/descendant': 3.1.0(react@18.2.0)
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
+      '@chakra-ui/descendant': 3.1.0(react@18.3.1)
+      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      '@chakra-ui/transition': 2.1.0(framer-motion@10.18.0)(react@18.2.0)
-      framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      '@chakra-ui/transition': 2.1.0(framer-motion@10.18.0)(react@18.3.1)
+      framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/accordion@2.3.1(@chakra-ui/system@2.6.2)(framer-motion@11.0.22)(react@18.2.0):
+  /@chakra-ui/accordion@2.3.1(@chakra-ui/system@2.6.2)(framer-motion@11.1.8)(react@18.3.1):
     resolution: {integrity: sha512-FSXRm8iClFyU+gVaXisOSEw0/4Q+qZbFRiuhIAkVU6Boj0FxAMrlo9a8AV5TuF77rgaHytCdHk0Ng+cyUijrag==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       framer-motion: '>=4.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/descendant': 3.1.0(react@18.2.0)
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
+      '@chakra-ui/descendant': 3.1.0(react@18.3.1)
+      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      '@chakra-ui/transition': 2.1.0(framer-motion@11.0.22)(react@18.2.0)
-      framer-motion: 11.0.22(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      '@chakra-ui/transition': 2.1.0(framer-motion@11.1.8)(react@18.3.1)
+      framer-motion: 11.1.8(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/alert@2.2.2(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/alert@2.2.2(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-jHg4LYMRNOJH830ViLuicjb3F+v6iriE/2G5T+Sd0Hna04nukNJ1MxUmBPE+vI22me2dIflfelu2v9wdB6Pojw==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
+      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/spinner': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/spinner': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@chakra-ui/anatomy@2.2.2:
     resolution: {integrity: sha512-MV6D4VLRIHr4PkW4zMyqfrNS1mPlCTiCXwvYGtDFQYr+xHFfonhAuf9WjsSc0nyp2m0OdkSLnzmVKkZFLo25Tg==}
     dev: false
 
-  /@chakra-ui/avatar@2.3.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/avatar@2.3.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-8gKSyLfygnaotbJbDMHDiJoF38OHXUYVme4gGxZ1fLnQEdPVEaIWfH+NndIjOM0z8S+YEFnT9KyGMUtvPrBk3g==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/image': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/react-children-utils': 2.0.6(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
+      '@chakra-ui/image': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/react-children-utils': 2.0.6(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/breadcrumb@2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/breadcrumb@2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-4cWCG24flYBxjruRi4RJREWTGF74L/KzI2CognAW/d/zWR0CjiScuJhf37Am3LFbCySP6WSoyBOtTIoTA4yLEA==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-children-utils': 2.0.6(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
+      '@chakra-ui/react-children-utils': 2.0.6(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@chakra-ui/breakpoint-utils@2.0.8:
@@ -1754,334 +1768,334 @@ packages:
       '@chakra-ui/shared-utils': 2.0.5
     dev: false
 
-  /@chakra-ui/button@2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/button@2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-95CplwlRKmmUXkdEp/21VkEWgnwcx2TOBG6NfYlsuLBDHSLlo5FKIiE2oSi4zXc4TLcopGcWPNcm/NDaSC5pvA==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/spinner': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/spinner': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/card@2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/card@2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-xUB/k5MURj4CtPAhdSoXZidUbm8j3hci9vnc+eZJVDqhDOShNlD6QeniQNRPRys4lWAQLCbFcrwL29C8naDi6g==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/checkbox@2.3.2(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/checkbox@2.3.2(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-85g38JIXMEv6M+AcyIGLh7igNtfpAN6KGQFYxY9tBj0eWvWk4NKQxvqqyVta0bSAyIl1rixNIIezNpNWk2iO4g==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.2.0)
+      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-types': 2.0.7(react@18.3.1)
+      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      '@chakra-ui/visually-hidden': 2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      '@chakra-ui/visually-hidden': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@zag-js/focus-visible': 0.16.0
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/clickable@2.1.0(react@18.2.0):
+  /@chakra-ui/clickable@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-flRA/ClPUGPYabu+/GLREZVZr9j2uyyazCAUHAdrTUEdDYCr31SVGhgh7dgKdtq23bOvAQJpIJjw/0Bs0WvbXw==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/close-button@2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/close-button@2.1.1(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-gnpENKOanKexswSVpVz7ojZEALl2x5qjLYNqSQGbxz+aP9sOXPfUS56ebyBrre7T7exuWGiFeRwnM0oVeGPaiw==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/color-mode@2.2.0(react@18.2.0):
+  /@chakra-ui/color-mode@2.2.0(react@18.3.1):
     resolution: {integrity: sha512-niTEA8PALtMWRI9wJ4LL0CSBDo8NBfLNp4GD6/0hstcm3IlbBHTVKxN6HwSaoNYfphDQLxCjT4yG+0BJA5tFpg==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/control-box@2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/control-box@2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-gVrRDyXFdMd8E7rulL0SKeoljkLQiPITFnsyMO8EFHNZ+AHt5wK4LIguYVEq88APqAGZGfHFWXr79RYrNiE3Mg==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/counter@2.1.0(react@18.2.0):
+  /@chakra-ui/counter@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-s6hZAEcWT5zzjNz2JIWUBzRubo9la/oof1W7EKZVVfPYHERnl5e16FmBC79Yfq8p09LQ+aqFKm/etYoJMMgghw==}
     peerDependencies:
       react: '>=18'
     dependencies:
       '@chakra-ui/number-utils': 2.0.7
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
+      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/css-reset@2.3.0(@emotion/react@11.11.4)(react@18.2.0):
+  /@chakra-ui/css-reset@2.3.0(@emotion/react@11.11.4)(react@18.3.1):
     resolution: {integrity: sha512-cQwwBy5O0jzvl0K7PLTLgp8ijqLPKyuEMiDXwYzl95seD3AoeuoCLyzZcJtVqaUZ573PiBdAbY/IlZcwDOItWg==}
     peerDependencies:
       '@emotion/react': '>=10.0.35'
       react: '>=18'
     dependencies:
-      '@emotion/react': 11.11.4(@types/react@18.2.73)(react@18.2.0)
-      react: 18.2.0
+      '@emotion/react': 11.11.4(@types/react@18.3.1)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/descendant@3.1.0(react@18.2.0):
+  /@chakra-ui/descendant@3.1.0(react@18.3.1):
     resolution: {integrity: sha512-VxCIAir08g5w27klLyi7PVo8BxhW4tgU/lxQyujkmi4zx7hT9ZdrcQLAted/dAa+aSIZ14S1oV0Q9lGjsAdxUQ==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@chakra-ui/dom-utils@2.1.0:
     resolution: {integrity: sha512-ZmF2qRa1QZ0CMLU8M1zCfmw29DmPNtfjR9iTo74U5FPr3i1aoAh7fbJ4qAlZ197Xw9eAW28tvzQuoVWeL5C7fQ==}
     dev: false
 
-  /@chakra-ui/editable@3.1.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/editable@3.1.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-j2JLrUL9wgg4YA6jLlbU88370eCRyor7DZQD9lzpY95tSOXpTljeg3uF9eOmDnCs6fxp3zDWIfkgMm/ExhcGTg==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-focus-on-pointer-down': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.2.0)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-types': 2.0.7(react@18.3.1)
+      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-focus-on-pointer-down': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@chakra-ui/event-utils@2.0.8:
     resolution: {integrity: sha512-IGM/yGUHS+8TOQrZGpAKOJl/xGBrmRYJrmbHfUE7zrG3PpQyXvbLDP1M+RggkCFVgHlJi2wpYIf0QtQlU0XZfw==}
     dev: false
 
-  /@chakra-ui/focus-lock@2.1.0(@types/react@18.2.73)(react@18.2.0):
+  /@chakra-ui/focus-lock@2.1.0(@types/react@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-EmGx4PhWGjm4dpjRqM4Aa+rCWBxP+Rq8Uc/nAVnD4YVqkEhBkrPTpui2lnjsuxqNaZ24fIAZ10cF1hlpemte/w==}
     peerDependencies:
       react: '>=18'
     dependencies:
       '@chakra-ui/dom-utils': 2.1.0
-      react: 18.2.0
-      react-focus-lock: 2.11.1(@types/react@18.2.73)(react@18.2.0)
+      react: 18.3.1
+      react-focus-lock: 2.11.1(@types/react@18.3.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
     dev: false
 
-  /@chakra-ui/form-control@2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/form-control@2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-wehLC1t4fafCVJ2RvJQT2jyqsAwX7KymmiGqBu7nQoQz8ApTkGABWpo/QwDh3F/dBLrouHDoOvGmYTqft3Mirw==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
+      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-types': 2.0.7(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/hooks@2.2.1(react@18.2.0):
+  /@chakra-ui/hooks@2.2.1(react@18.3.1):
     resolution: {integrity: sha512-RQbTnzl6b1tBjbDPf9zGRo9rf/pQMholsOudTxjy4i9GfTfz6kgp5ValGjQm2z7ng6Z31N1cnjZ1AlSzQ//ZfQ==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-utils': 2.0.12(react@18.2.0)
+      '@chakra-ui/react-utils': 2.0.12(react@18.3.1)
       '@chakra-ui/utils': 2.0.15
       compute-scroll-into-view: 3.0.3
       copy-to-clipboard: 3.3.3
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/icon@3.2.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/icon@3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-xxjGLvlX2Ys4H0iHrI16t74rG9EBcpFvJ3Y3B7KMQTrnW34Kf7Da/UC8J67Gtx85mTHW020ml85SVPKORWNNKQ==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/icons@2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/icons@2.1.1(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-3p30hdo4LlRZTT5CwoAJq3G9fHI0wDc0pBaMHj4SUn0yomO+RcDRlzhdXqdr5cVnzax44sqXJVnf3oQG0eI+4g==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/image@2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/image@2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-bskumBYKLiLMySIWDGcz0+D9Th0jPvmX6xnRMs4o92tT3Od/bW26lahmV2a2Op2ItXeCmRMY+XxJH5Gy1i46VA==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.2.0)
+      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/input@2.1.2(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/input@2.1.2(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-GiBbb3EqAA8Ph43yGa6Mc+kUPjh4Spmxp1Pkelr8qtudpc3p2PJOOebLpd90mcqw8UePPa+l6YhhPtp6o0irhw==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
+      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/object-utils': 2.1.0
-      '@chakra-ui/react-children-utils': 2.0.6(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
+      '@chakra-ui/react-children-utils': 2.0.6(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/layout@2.3.1(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/layout@2.3.1(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-nXuZ6WRbq0WdgnRgLw+QuxWAHuhDtVX8ElWqcTK+cSMFg/52eVP47czYBE5F35YhnoW2XBwfNoNgZ7+e8Z01Rg==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
       '@chakra-ui/breakpoint-utils': 2.0.8
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
+      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/object-utils': 2.1.0
-      '@chakra-ui/react-children-utils': 2.0.6(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
+      '@chakra-ui/react-children-utils': 2.0.6(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@chakra-ui/lazy-utils@2.0.5:
     resolution: {integrity: sha512-UULqw7FBvcckQk2n3iPO56TMJvDsNv0FKZI6PlUNJVaGsPbsYxK/8IQ60vZgaTVPtVcjY6BE+y6zg8u9HOqpyg==}
     dev: false
 
-  /@chakra-ui/live-region@2.1.0(react@18.2.0):
+  /@chakra-ui/live-region@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-ZOxFXwtaLIsXjqnszYYrVuswBhnIHHP+XIgK1vC6DePKtyK590Wg+0J0slDwThUAd4MSSIUa/nNX84x1GMphWw==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/media-query@3.3.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/media-query@3.3.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-IsTGgFLoICVoPRp9ykOgqmdMotJG0CnPsKvGQeSFOB/dZfIujdVb14TYxDU4+MURXry1MhJ7LzZhv+Ml7cr8/g==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
       '@chakra-ui/breakpoint-utils': 2.0.8
-      '@chakra-ui/react-env': 3.1.0(react@18.2.0)
+      '@chakra-ui/react-env': 3.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/menu@2.2.1(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react@18.2.0):
+  /@chakra-ui/menu@2.2.1(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react@18.3.1):
     resolution: {integrity: sha512-lJS7XEObzJxsOwWQh7yfG4H8FzFPRP5hVPN/CL+JzytEINCSBvsCDHrYPQGp7jzpCi8vnTqQQGQe0f8dwnXd2g==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       framer-motion: '>=4.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/clickable': 2.1.0(react@18.2.0)
-      '@chakra-ui/descendant': 3.1.0(react@18.2.0)
+      '@chakra-ui/clickable': 2.1.0(react@18.3.1)
+      '@chakra-ui/descendant': 3.1.0(react@18.3.1)
       '@chakra-ui/lazy-utils': 2.0.5
-      '@chakra-ui/popper': 3.1.0(react@18.2.0)
-      '@chakra-ui/react-children-utils': 2.0.6(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-animation-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-disclosure': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-focus-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-outside-click': 2.2.0(react@18.2.0)
-      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.2.0)
+      '@chakra-ui/popper': 3.1.0(react@18.3.1)
+      '@chakra-ui/react-children-utils': 2.0.6(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-animation-state': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-disclosure': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-focus-effect': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-outside-click': 2.2.0(react@18.3.1)
+      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      '@chakra-ui/transition': 2.1.0(framer-motion@10.18.0)(react@18.2.0)
-      framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      '@chakra-ui/transition': 2.1.0(framer-motion@10.18.0)(react@18.3.1)
+      framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/menu@2.2.1(@chakra-ui/system@2.6.2)(framer-motion@11.0.22)(react@18.2.0):
+  /@chakra-ui/menu@2.2.1(@chakra-ui/system@2.6.2)(framer-motion@11.1.8)(react@18.3.1):
     resolution: {integrity: sha512-lJS7XEObzJxsOwWQh7yfG4H8FzFPRP5hVPN/CL+JzytEINCSBvsCDHrYPQGp7jzpCi8vnTqQQGQe0f8dwnXd2g==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       framer-motion: '>=4.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/clickable': 2.1.0(react@18.2.0)
-      '@chakra-ui/descendant': 3.1.0(react@18.2.0)
+      '@chakra-ui/clickable': 2.1.0(react@18.3.1)
+      '@chakra-ui/descendant': 3.1.0(react@18.3.1)
       '@chakra-ui/lazy-utils': 2.0.5
-      '@chakra-ui/popper': 3.1.0(react@18.2.0)
-      '@chakra-ui/react-children-utils': 2.0.6(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-animation-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-disclosure': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-focus-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-outside-click': 2.2.0(react@18.2.0)
-      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.2.0)
+      '@chakra-ui/popper': 3.1.0(react@18.3.1)
+      '@chakra-ui/react-children-utils': 2.0.6(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-animation-state': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-disclosure': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-focus-effect': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-outside-click': 2.2.0(react@18.3.1)
+      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      '@chakra-ui/transition': 2.1.0(framer-motion@11.0.22)(react@18.2.0)
-      framer-motion: 11.0.22(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      '@chakra-ui/transition': 2.1.0(framer-motion@11.1.8)(react@18.3.1)
+      framer-motion: 11.1.8(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/modal@2.3.1(@chakra-ui/system@2.6.2)(@types/react@18.2.73)(framer-motion@10.18.0)(react-dom@18.2.0)(react@18.2.0):
+  /@chakra-ui/modal@2.3.1(@chakra-ui/system@2.6.2)(@types/react@18.3.1)(framer-motion@10.18.0)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-TQv1ZaiJMZN+rR9DK0snx/OPwmtaGH1HbZtlYt4W4s6CzyK541fxLRTjIXfEzIGpvNW+b6VFuFjbcR78p4DEoQ==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
@@ -2089,25 +2103,25 @@ packages:
       react: '>=18'
       react-dom: '>=18'
     dependencies:
-      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/focus-lock': 2.1.0(@types/react@18.2.73)(react@18.2.0)
-      '@chakra-ui/portal': 2.1.0(react-dom@18.2.0)(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
+      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/focus-lock': 2.1.0(@types/react@18.3.1)(react@18.3.1)
+      '@chakra-ui/portal': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-types': 2.0.7(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      '@chakra-ui/transition': 2.1.0(framer-motion@10.18.0)(react@18.2.0)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      '@chakra-ui/transition': 2.1.0(framer-motion@10.18.0)(react@18.3.1)
       aria-hidden: 1.2.3
-      framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.7(@types/react@18.2.73)(react@18.2.0)
+      framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.5.7(@types/react@18.3.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
     dev: false
 
-  /@chakra-ui/modal@2.3.1(@chakra-ui/system@2.6.2)(@types/react@18.2.73)(framer-motion@11.0.22)(react-dom@18.2.0)(react@18.2.0):
+  /@chakra-ui/modal@2.3.1(@chakra-ui/system@2.6.2)(@types/react@18.3.1)(framer-motion@11.1.8)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-TQv1ZaiJMZN+rR9DK0snx/OPwmtaGH1HbZtlYt4W4s6CzyK541fxLRTjIXfEzIGpvNW+b6VFuFjbcR78p4DEoQ==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
@@ -2115,44 +2129,44 @@ packages:
       react: '>=18'
       react-dom: '>=18'
     dependencies:
-      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/focus-lock': 2.1.0(@types/react@18.2.73)(react@18.2.0)
-      '@chakra-ui/portal': 2.1.0(react-dom@18.2.0)(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
+      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/focus-lock': 2.1.0(@types/react@18.3.1)(react@18.3.1)
+      '@chakra-ui/portal': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-types': 2.0.7(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      '@chakra-ui/transition': 2.1.0(framer-motion@11.0.22)(react@18.2.0)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      '@chakra-ui/transition': 2.1.0(framer-motion@11.1.8)(react@18.3.1)
       aria-hidden: 1.2.3
-      framer-motion: 11.0.22(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.7(@types/react@18.2.73)(react@18.2.0)
+      framer-motion: 11.1.8(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.5.7(@types/react@18.3.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
     dev: false
 
-  /@chakra-ui/number-input@2.1.2(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/number-input@2.1.2(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-pfOdX02sqUN0qC2ysuvgVDiws7xZ20XDIlcNhva55Jgm095xjm8eVdIBfNm3SFbSUNxyXvLTW/YQanX74tKmuA==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/counter': 2.1.0(react@18.2.0)
-      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-event-listener': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-interval': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.2.0)
+      '@chakra-ui/counter': 2.1.0(react@18.3.1)
+      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-types': 2.0.7(react@18.3.1)
+      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-event-listener': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-interval': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@chakra-ui/number-utils@2.0.7:
@@ -2163,103 +2177,103 @@ packages:
     resolution: {integrity: sha512-tgIZOgLHaoti5PYGPTwK3t/cqtcycW0owaiOXoZOcpwwX/vlVb+H1jFsQyWiiwQVPt9RkoSLtxzXamx+aHH+bQ==}
     dev: false
 
-  /@chakra-ui/pin-input@2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/pin-input@2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-x4vBqLStDxJFMt+jdAHHS8jbh294O53CPQJoL4g228P513rHylV/uPscYUHrVJXRxsHfRztQO9k45jjTYaPRMw==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/descendant': 3.1.0(react@18.2.0)
-      '@chakra-ui/react-children-utils': 2.0.6(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
+      '@chakra-ui/descendant': 3.1.0(react@18.3.1)
+      '@chakra-ui/react-children-utils': 2.0.6(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/popover@2.2.1(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react@18.2.0):
+  /@chakra-ui/popover@2.2.1(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react@18.3.1):
     resolution: {integrity: sha512-K+2ai2dD0ljvJnlrzesCDT9mNzLifE3noGKZ3QwLqd/K34Ym1W/0aL1ERSynrcG78NKoXS54SdEzkhCZ4Gn/Zg==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       framer-motion: '>=4.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
+      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/lazy-utils': 2.0.5
-      '@chakra-ui/popper': 3.1.0(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-animation-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-disclosure': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-focus-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-focus-on-pointer-down': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
+      '@chakra-ui/popper': 3.1.0(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-types': 2.0.7(react@18.3.1)
+      '@chakra-ui/react-use-animation-state': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-disclosure': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-focus-effect': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-focus-on-pointer-down': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/popover@2.2.1(@chakra-ui/system@2.6.2)(framer-motion@11.0.22)(react@18.2.0):
+  /@chakra-ui/popover@2.2.1(@chakra-ui/system@2.6.2)(framer-motion@11.1.8)(react@18.3.1):
     resolution: {integrity: sha512-K+2ai2dD0ljvJnlrzesCDT9mNzLifE3noGKZ3QwLqd/K34Ym1W/0aL1ERSynrcG78NKoXS54SdEzkhCZ4Gn/Zg==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       framer-motion: '>=4.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
+      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/lazy-utils': 2.0.5
-      '@chakra-ui/popper': 3.1.0(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-animation-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-disclosure': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-focus-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-focus-on-pointer-down': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
+      '@chakra-ui/popper': 3.1.0(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-types': 2.0.7(react@18.3.1)
+      '@chakra-ui/react-use-animation-state': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-disclosure': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-focus-effect': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-focus-on-pointer-down': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      framer-motion: 11.0.22(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      framer-motion: 11.1.8(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/popper@3.1.0(react@18.2.0):
+  /@chakra-ui/popper@3.1.0(react@18.3.1):
     resolution: {integrity: sha512-ciDdpdYbeFG7og6/6J8lkTFxsSvwTdMLFkpVylAF6VNC22jssiWfquj2eyD4rJnzkRFPvIWJq8hvbfhsm+AjSg==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
+      '@chakra-ui/react-types': 2.0.7(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@popperjs/core': 2.11.8
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/portal@2.1.0(react-dom@18.2.0)(react@18.2.0):
+  /@chakra-ui/portal@2.1.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-9q9KWf6SArEcIq1gGofNcFPSWEyl+MfJjEUg/un1SMlQjaROOh3zYr+6JAwvcORiX7tyHosnmWC3d3wI2aPSQg==}
     peerDependencies:
       react: '>=18'
       react-dom: '>=18'
     dependencies:
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@chakra-ui/progress@2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/progress@2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-qUXuKbuhN60EzDD9mHR7B67D7p/ZqNS2Aze4Pbl1qGGZfulPW0PY8Rof32qDtttDQBkzQIzFGE8d9QpAemToIQ==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/provider@2.4.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0):
+  /@chakra-ui/provider@2.4.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-w0Tef5ZCJK1mlJorcSjItCSbyvVuqpvyWdxZiVQmE6fvSJR83wZof42ux0+sfWD+I7rHSfj+f9nzhNaEWClysw==}
     peerDependencies:
       '@emotion/react': ^11.0.0
@@ -2267,229 +2281,229 @@ packages:
       react: '>=18'
       react-dom: '>=18'
     dependencies:
-      '@chakra-ui/css-reset': 2.3.0(@emotion/react@11.11.4)(react@18.2.0)
-      '@chakra-ui/portal': 2.1.0(react-dom@18.2.0)(react@18.2.0)
-      '@chakra-ui/react-env': 3.1.0(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
+      '@chakra-ui/css-reset': 2.3.0(@emotion/react@11.11.4)(react@18.3.1)
+      '@chakra-ui/portal': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/react-env': 3.1.0(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
       '@chakra-ui/utils': 2.0.15
-      '@emotion/react': 11.11.4(@types/react@18.2.73)(react@18.2.0)
-      '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.73)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@emotion/react': 11.11.4(@types/react@18.3.1)(react@18.3.1)
+      '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@chakra-ui/radio@2.1.2(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/radio@2.1.2(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-n10M46wJrMGbonaghvSRnZ9ToTv/q76Szz284gv4QUWvyljQACcGrXIONUnQ3BIwbOfkRqSk7Xl/JgZtVfll+w==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
+      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-types': 2.0.7(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
       '@zag-js/focus-visible': 0.16.0
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-children-utils@2.0.6(react@18.2.0):
+  /@chakra-ui/react-children-utils@2.0.6(react@18.3.1):
     resolution: {integrity: sha512-QVR2RC7QsOsbWwEnq9YduhpqSFnZGvjjGREV8ygKi8ADhXh93C8azLECCUVgRJF2Wc+So1fgxmjLcbZfY2VmBA==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-context@2.1.0(react@18.2.0):
+  /@chakra-ui/react-context@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-iahyStvzQ4AOwKwdPReLGfDesGG+vWJfEsn0X/NoGph/SkN+HXtv2sCfYFFR9k7bb+Kvc6YfpLlSuLvKMHi2+w==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-env@3.1.0(react@18.2.0):
+  /@chakra-ui/react-env@3.1.0(react@18.3.1):
     resolution: {integrity: sha512-Vr96GV2LNBth3+IKzr/rq1IcnkXv+MLmwjQH6C8BRtn3sNskgDFD5vLkVXcEhagzZMCh8FR3V/bzZPojBOyNhw==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-types@2.0.7(react@18.2.0):
+  /@chakra-ui/react-types@2.0.7(react@18.3.1):
     resolution: {integrity: sha512-12zv2qIZ8EHwiytggtGvo4iLT0APris7T0qaAWqzpUGS0cdUtR8W+V1BJ5Ocq+7tA6dzQ/7+w5hmXih61TuhWQ==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-use-animation-state@2.1.0(react@18.2.0):
+  /@chakra-ui/react-use-animation-state@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-CFZkQU3gmDBwhqy0vC1ryf90BVHxVN8cTLpSyCpdmExUEtSEInSCGMydj2fvn7QXsz/za8JNdO2xxgJwxpLMtg==}
     peerDependencies:
       react: '>=18'
     dependencies:
       '@chakra-ui/dom-utils': 2.1.0
-      '@chakra-ui/react-use-event-listener': 2.1.0(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/react-use-event-listener': 2.1.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-use-callback-ref@2.1.0(react@18.2.0):
+  /@chakra-ui/react-use-callback-ref@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-efnJrBtGDa4YaxDzDE90EnKD3Vkh5a1t3w7PhnRQmsphLy3g2UieasoKTlT2Hn118TwDjIv5ZjHJW6HbzXA9wQ==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-use-controllable-state@2.1.0(react@18.2.0):
+  /@chakra-ui/react-use-controllable-state@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-QR/8fKNokxZUs4PfxjXuwl0fj/d71WPrmLJvEpCTkHjnzu7LnYvzoe2wB867IdooQJL0G1zBxl0Dq+6W1P3jpg==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-use-disclosure@2.1.0(react@18.2.0):
+  /@chakra-ui/react-use-disclosure@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-Ax4pmxA9LBGMyEZJhhUZobg9C0t3qFE4jVF1tGBsrLDcdBeLR9fwOogIPY9Hf0/wqSlAryAimICbr5hkpa5GSw==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-use-event-listener@2.1.0(react@18.2.0):
+  /@chakra-ui/react-use-event-listener@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-U5greryDLS8ISP69DKDsYcsXRtAdnTQT+jjIlRYZ49K/XhUR/AqVZCK5BkR1spTDmO9H8SPhgeNKI70ODuDU/Q==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-use-focus-effect@2.1.0(react@18.2.0):
+  /@chakra-ui/react-use-focus-effect@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-xzVboNy7J64xveLcxTIJ3jv+lUJKDwRM7Szwn9tNzUIPD94O3qwjV7DDCUzN2490nSYDF4OBMt/wuDBtaR3kUQ==}
     peerDependencies:
       react: '>=18'
     dependencies:
       '@chakra-ui/dom-utils': 2.1.0
-      '@chakra-ui/react-use-event-listener': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/react-use-event-listener': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-use-focus-on-pointer-down@2.1.0(react@18.2.0):
+  /@chakra-ui/react-use-focus-on-pointer-down@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-2jzrUZ+aiCG/cfanrolsnSMDykCAbv9EK/4iUyZno6BYb3vziucmvgKuoXbMPAzWNtwUwtuMhkby8rc61Ue+Lg==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-use-event-listener': 2.1.0(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/react-use-event-listener': 2.1.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-use-interval@2.1.0(react@18.2.0):
+  /@chakra-ui/react-use-interval@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-8iWj+I/+A0J08pgEXP1J1flcvhLBHkk0ln7ZvGIyXiEyM6XagOTJpwNhiu+Bmk59t3HoV/VyvyJTa+44sEApuw==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-use-latest-ref@2.1.0(react@18.2.0):
+  /@chakra-ui/react-use-latest-ref@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-m0kxuIYqoYB0va9Z2aW4xP/5b7BzlDeWwyXCH6QpT2PpW3/281L3hLCm1G0eOUcdVlayqrQqOeD6Mglq+5/xoQ==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-use-merge-refs@2.1.0(react@18.2.0):
+  /@chakra-ui/react-use-merge-refs@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-lERa6AWF1cjEtWSGjxWTaSMvneccnAVH4V4ozh8SYiN9fSPZLlSG3kNxfNzdFvMEhM7dnP60vynF7WjGdTgQbQ==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-use-outside-click@2.2.0(react@18.2.0):
+  /@chakra-ui/react-use-outside-click@2.2.0(react@18.3.1):
     resolution: {integrity: sha512-PNX+s/JEaMneijbgAM4iFL+f3m1ga9+6QK0E5Yh4s8KZJQ/bLwZzdhMz8J/+mL+XEXQ5J0N8ivZN28B82N1kNw==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-use-pan-event@2.1.0(react@18.2.0):
+  /@chakra-ui/react-use-pan-event@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-xmL2qOHiXqfcj0q7ZK5s9UjTh4Gz0/gL9jcWPA6GVf+A0Od5imEDa/Vz+533yQKWiNSm1QGrIj0eJAokc7O4fg==}
     peerDependencies:
       react: '>=18'
     dependencies:
       '@chakra-ui/event-utils': 2.0.8
-      '@chakra-ui/react-use-latest-ref': 2.1.0(react@18.2.0)
+      '@chakra-ui/react-use-latest-ref': 2.1.0(react@18.3.1)
       framesync: 6.1.2
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-use-previous@2.1.0(react@18.2.0):
+  /@chakra-ui/react-use-previous@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-pjxGwue1hX8AFcmjZ2XfrQtIJgqbTF3Qs1Dy3d1krC77dEsiCUbQ9GzOBfDc8pfd60DrB5N2tg5JyHbypqh0Sg==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-use-safe-layout-effect@2.1.0(react@18.2.0):
+  /@chakra-ui/react-use-safe-layout-effect@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-Knbrrx/bcPwVS1TorFdzrK/zWA8yuU/eaXDkNj24IrKoRlQrSBFarcgAEzlCHtzuhufP3OULPkELTzz91b0tCw==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-use-size@2.1.0(react@18.2.0):
+  /@chakra-ui/react-use-size@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-tbLqrQhbnqOjzTaMlYytp7wY8BW1JpL78iG7Ru1DlV4EWGiAmXFGvtnEt9HftU0NJ0aJyjgymkxfVGI55/1Z4A==}
     peerDependencies:
       react: '>=18'
     dependencies:
       '@zag-js/element-size': 0.10.5
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-use-timeout@2.1.0(react@18.2.0):
+  /@chakra-ui/react-use-timeout@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-cFN0sobKMM9hXUhyCofx3/Mjlzah6ADaEl/AXl5Y+GawB5rgedgAcu2ErAgarEkwvsKdP6c68CKjQ9dmTQlJxQ==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-use-update-effect@2.1.0(react@18.2.0):
+  /@chakra-ui/react-use-update-effect@2.1.0(react@18.3.1):
     resolution: {integrity: sha512-ND4Q23tETaR2Qd3zwCKYOOS1dfssojPLJMLvUtUbW5M9uW1ejYWgGUobeAiOVfSplownG8QYMmHTP86p/v0lbA==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react-utils@2.0.12(react@18.2.0):
+  /@chakra-ui/react-utils@2.0.12(react@18.3.1):
     resolution: {integrity: sha512-GbSfVb283+YA3kA8w8xWmzbjNWk14uhNpntnipHCftBibl0lxtQ9YqMFQLwuFOO0U2gYVocszqqDWX+XNKq9hw==}
     peerDependencies:
       react: '>=18'
     dependencies:
       '@chakra-ui/utils': 2.0.15
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/react@2.8.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.73)(framer-motion@10.18.0)(react-dom@18.2.0)(react@18.2.0):
+  /@chakra-ui/react@2.8.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.1)(framer-motion@10.18.0)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-Hn0moyxxyCDKuR9ywYpqgX8dvjqwu9ArwpIb9wHNYjnODETjLwazgNIliCVBRcJvysGRiV51U2/JtJVrpeCjUQ==}
     peerDependencies:
       '@emotion/react': ^11.0.0
@@ -2498,69 +2512,69 @@ packages:
       react: '>=18'
       react-dom: '>=18'
     dependencies:
-      '@chakra-ui/accordion': 2.3.1(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react@18.2.0)
-      '@chakra-ui/alert': 2.2.2(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/avatar': 2.3.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/breadcrumb': 2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/button': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/card': 2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/checkbox': 2.3.2(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/control-box': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/counter': 2.1.0(react@18.2.0)
-      '@chakra-ui/css-reset': 2.3.0(@emotion/react@11.11.4)(react@18.2.0)
-      '@chakra-ui/editable': 3.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/focus-lock': 2.1.0(@types/react@18.2.73)(react@18.2.0)
-      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/hooks': 2.2.1(react@18.2.0)
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/image': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/input': 2.1.2(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/layout': 2.3.1(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/live-region': 2.1.0(react@18.2.0)
-      '@chakra-ui/media-query': 3.3.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/menu': 2.2.1(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react@18.2.0)
-      '@chakra-ui/modal': 2.3.1(@chakra-ui/system@2.6.2)(@types/react@18.2.73)(framer-motion@10.18.0)(react-dom@18.2.0)(react@18.2.0)
-      '@chakra-ui/number-input': 2.1.2(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/pin-input': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/popover': 2.2.1(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react@18.2.0)
-      '@chakra-ui/popper': 3.1.0(react@18.2.0)
-      '@chakra-ui/portal': 2.1.0(react-dom@18.2.0)(react@18.2.0)
-      '@chakra-ui/progress': 2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/provider': 2.4.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0)
-      '@chakra-ui/radio': 2.1.2(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/react-env': 3.1.0(react@18.2.0)
-      '@chakra-ui/select': 2.1.2(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/skeleton': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/skip-nav': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/slider': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/spinner': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/stat': 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/stepper': 2.3.1(@chakra-ui/system@2.6.2)(react@18.2.0)
+      '@chakra-ui/accordion': 2.3.1(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react@18.3.1)
+      '@chakra-ui/alert': 2.2.2(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/avatar': 2.3.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/breadcrumb': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/button': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/card': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/checkbox': 2.3.2(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/control-box': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/counter': 2.1.0(react@18.3.1)
+      '@chakra-ui/css-reset': 2.3.0(@emotion/react@11.11.4)(react@18.3.1)
+      '@chakra-ui/editable': 3.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/focus-lock': 2.1.0(@types/react@18.3.1)(react@18.3.1)
+      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/hooks': 2.2.1(react@18.3.1)
+      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/image': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/input': 2.1.2(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/layout': 2.3.1(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/live-region': 2.1.0(react@18.3.1)
+      '@chakra-ui/media-query': 3.3.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/menu': 2.2.1(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react@18.3.1)
+      '@chakra-ui/modal': 2.3.1(@chakra-ui/system@2.6.2)(@types/react@18.3.1)(framer-motion@10.18.0)(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/number-input': 2.1.2(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/pin-input': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/popover': 2.2.1(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react@18.3.1)
+      '@chakra-ui/popper': 3.1.0(react@18.3.1)
+      '@chakra-ui/portal': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/progress': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/provider': 2.4.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/radio': 2.1.2(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/react-env': 3.1.0(react@18.3.1)
+      '@chakra-ui/select': 2.1.2(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/skeleton': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/skip-nav': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/slider': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/spinner': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/stat': 2.1.1(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/stepper': 2.3.1(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/styled-system': 2.9.2
-      '@chakra-ui/switch': 2.1.2(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      '@chakra-ui/table': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/tabs': 3.0.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/tag': 3.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/textarea': 2.1.2(@chakra-ui/system@2.6.2)(react@18.2.0)
+      '@chakra-ui/switch': 2.1.2(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      '@chakra-ui/table': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/tabs': 3.0.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/tag': 3.1.1(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/textarea': 2.1.2(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/theme': 3.3.1(@chakra-ui/styled-system@2.9.2)
       '@chakra-ui/theme-utils': 2.0.21
-      '@chakra-ui/toast': 7.0.2(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react-dom@18.2.0)(react@18.2.0)
-      '@chakra-ui/tooltip': 2.3.1(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react-dom@18.2.0)(react@18.2.0)
-      '@chakra-ui/transition': 2.1.0(framer-motion@10.18.0)(react@18.2.0)
+      '@chakra-ui/toast': 7.0.2(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/tooltip': 2.3.1(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/transition': 2.1.0(framer-motion@10.18.0)(react@18.3.1)
       '@chakra-ui/utils': 2.0.15
-      '@chakra-ui/visually-hidden': 2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@emotion/react': 11.11.4(@types/react@18.2.73)(react@18.2.0)
-      '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.73)(react@18.2.0)
-      framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@chakra-ui/visually-hidden': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@emotion/react': 11.11.4(@types/react@18.3.1)(react@18.3.1)
+      '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.1)(react@18.3.1)
+      framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
     dev: false
 
-  /@chakra-ui/react@2.8.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.73)(framer-motion@11.0.22)(react-dom@18.2.0)(react@18.2.0):
+  /@chakra-ui/react@2.8.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.1)(framer-motion@11.1.8)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-Hn0moyxxyCDKuR9ywYpqgX8dvjqwu9ArwpIb9wHNYjnODETjLwazgNIliCVBRcJvysGRiV51U2/JtJVrpeCjUQ==}
     peerDependencies:
       '@emotion/react': ^11.0.0
@@ -2569,162 +2583,162 @@ packages:
       react: '>=18'
       react-dom: '>=18'
     dependencies:
-      '@chakra-ui/accordion': 2.3.1(@chakra-ui/system@2.6.2)(framer-motion@11.0.22)(react@18.2.0)
-      '@chakra-ui/alert': 2.2.2(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/avatar': 2.3.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/breadcrumb': 2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/button': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/card': 2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/checkbox': 2.3.2(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/control-box': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/counter': 2.1.0(react@18.2.0)
-      '@chakra-ui/css-reset': 2.3.0(@emotion/react@11.11.4)(react@18.2.0)
-      '@chakra-ui/editable': 3.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/focus-lock': 2.1.0(@types/react@18.2.73)(react@18.2.0)
-      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/hooks': 2.2.1(react@18.2.0)
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/image': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/input': 2.1.2(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/layout': 2.3.1(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/live-region': 2.1.0(react@18.2.0)
-      '@chakra-ui/media-query': 3.3.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/menu': 2.2.1(@chakra-ui/system@2.6.2)(framer-motion@11.0.22)(react@18.2.0)
-      '@chakra-ui/modal': 2.3.1(@chakra-ui/system@2.6.2)(@types/react@18.2.73)(framer-motion@11.0.22)(react-dom@18.2.0)(react@18.2.0)
-      '@chakra-ui/number-input': 2.1.2(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/pin-input': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/popover': 2.2.1(@chakra-ui/system@2.6.2)(framer-motion@11.0.22)(react@18.2.0)
-      '@chakra-ui/popper': 3.1.0(react@18.2.0)
-      '@chakra-ui/portal': 2.1.0(react-dom@18.2.0)(react@18.2.0)
-      '@chakra-ui/progress': 2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/provider': 2.4.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0)
-      '@chakra-ui/radio': 2.1.2(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/react-env': 3.1.0(react@18.2.0)
-      '@chakra-ui/select': 2.1.2(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/skeleton': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/skip-nav': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/slider': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/spinner': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/stat': 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/stepper': 2.3.1(@chakra-ui/system@2.6.2)(react@18.2.0)
+      '@chakra-ui/accordion': 2.3.1(@chakra-ui/system@2.6.2)(framer-motion@11.1.8)(react@18.3.1)
+      '@chakra-ui/alert': 2.2.2(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/avatar': 2.3.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/breadcrumb': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/button': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/card': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/checkbox': 2.3.2(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/control-box': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/counter': 2.1.0(react@18.3.1)
+      '@chakra-ui/css-reset': 2.3.0(@emotion/react@11.11.4)(react@18.3.1)
+      '@chakra-ui/editable': 3.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/focus-lock': 2.1.0(@types/react@18.3.1)(react@18.3.1)
+      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/hooks': 2.2.1(react@18.3.1)
+      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/image': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/input': 2.1.2(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/layout': 2.3.1(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/live-region': 2.1.0(react@18.3.1)
+      '@chakra-ui/media-query': 3.3.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/menu': 2.2.1(@chakra-ui/system@2.6.2)(framer-motion@11.1.8)(react@18.3.1)
+      '@chakra-ui/modal': 2.3.1(@chakra-ui/system@2.6.2)(@types/react@18.3.1)(framer-motion@11.1.8)(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/number-input': 2.1.2(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/pin-input': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/popover': 2.2.1(@chakra-ui/system@2.6.2)(framer-motion@11.1.8)(react@18.3.1)
+      '@chakra-ui/popper': 3.1.0(react@18.3.1)
+      '@chakra-ui/portal': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/progress': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/provider': 2.4.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/radio': 2.1.2(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/react-env': 3.1.0(react@18.3.1)
+      '@chakra-ui/select': 2.1.2(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/skeleton': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/skip-nav': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/slider': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/spinner': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/stat': 2.1.1(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/stepper': 2.3.1(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/styled-system': 2.9.2
-      '@chakra-ui/switch': 2.1.2(@chakra-ui/system@2.6.2)(framer-motion@11.0.22)(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      '@chakra-ui/table': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/tabs': 3.0.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/tag': 3.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/textarea': 2.1.2(@chakra-ui/system@2.6.2)(react@18.2.0)
+      '@chakra-ui/switch': 2.1.2(@chakra-ui/system@2.6.2)(framer-motion@11.1.8)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      '@chakra-ui/table': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/tabs': 3.0.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/tag': 3.1.1(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/textarea': 2.1.2(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/theme': 3.3.1(@chakra-ui/styled-system@2.9.2)
       '@chakra-ui/theme-utils': 2.0.21
-      '@chakra-ui/toast': 7.0.2(@chakra-ui/system@2.6.2)(framer-motion@11.0.22)(react-dom@18.2.0)(react@18.2.0)
-      '@chakra-ui/tooltip': 2.3.1(@chakra-ui/system@2.6.2)(framer-motion@11.0.22)(react-dom@18.2.0)(react@18.2.0)
-      '@chakra-ui/transition': 2.1.0(framer-motion@11.0.22)(react@18.2.0)
+      '@chakra-ui/toast': 7.0.2(@chakra-ui/system@2.6.2)(framer-motion@11.1.8)(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/tooltip': 2.3.1(@chakra-ui/system@2.6.2)(framer-motion@11.1.8)(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/transition': 2.1.0(framer-motion@11.1.8)(react@18.3.1)
       '@chakra-ui/utils': 2.0.15
-      '@chakra-ui/visually-hidden': 2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@emotion/react': 11.11.4(@types/react@18.2.73)(react@18.2.0)
-      '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.73)(react@18.2.0)
-      framer-motion: 11.0.22(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@chakra-ui/visually-hidden': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@emotion/react': 11.11.4(@types/react@18.3.1)(react@18.3.1)
+      '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.1)(react@18.3.1)
+      framer-motion: 11.1.8(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
     dev: false
 
-  /@chakra-ui/select@2.1.2(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/select@2.1.2(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-ZwCb7LqKCVLJhru3DXvKXpZ7Pbu1TDZ7N0PdQ0Zj1oyVLJyrpef1u9HR5u0amOpqcH++Ugt0f5JSmirjNlctjA==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
+      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@chakra-ui/shared-utils@2.0.5:
     resolution: {integrity: sha512-4/Wur0FqDov7Y0nCXl7HbHzCg4aq86h+SXdoUeuCMD3dSj7dpsVnStLYhng1vxvlbUnLpdF4oz5Myt3i/a7N3Q==}
     dev: false
 
-  /@chakra-ui/skeleton@2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/skeleton@2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-JNRuMPpdZGd6zFVKjVQ0iusu3tXAdI29n4ZENYwAJEMf/fN0l12sVeirOxkJ7oEL0yOx2AgEYFSKdbcAgfUsAQ==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/media-query': 3.3.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/react-use-previous': 2.1.0(react@18.2.0)
+      '@chakra-ui/media-query': 3.3.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/react-use-previous': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/skip-nav@2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/skip-nav@2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-Hk+FG+vadBSH0/7hwp9LJnLjkO0RPGnx7gBJWI4/SpoJf3e4tZlWYtwGj0toYY4aGKl93jVghuwGbDBEMoHDug==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/slider@2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/slider@2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-lUOBcLMCnFZiA/s2NONXhELJh6sY5WtbRykPtclGfynqqOo47lwWJx+VP7xaeuhDOPcWSSecWc9Y1BfPOCz9cQ==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
       '@chakra-ui/number-utils': 2.0.7
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-latest-ref': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-pan-event': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-size': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-types': 2.0.7(react@18.3.1)
+      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-latest-ref': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-pan-event': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-size': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/spinner@2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/spinner@2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-hczbnoXt+MMv/d3gE+hjQhmkzLiKuoTo42YhUG7Bs9OSv2lg1fZHW1fGNRFP3wTi6OIbD044U1P9HK+AOgFH3g==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/stat@2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/stat@2.1.1(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-LDn0d/LXQNbAn2KaR3F1zivsZCewY4Jsy1qShmfBMKwn6rI8yVlbvu6SiA3OpHS0FhxbsZxQI6HefEoIgtqY6Q==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
+      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/stepper@2.3.1(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/stepper@2.3.1(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-ky77lZbW60zYkSXhYz7kbItUpAQfEdycT0Q4bkHLxfqbuiGMf8OmgZOQkOB9uM4v0zPwy2HXhe0vq4Dd0xa55Q==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
+      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@chakra-ui/styled-system@2.9.2:
@@ -2735,106 +2749,106 @@ packages:
       lodash.mergewith: 4.6.2
     dev: false
 
-  /@chakra-ui/switch@2.1.2(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react@18.2.0):
+  /@chakra-ui/switch@2.1.2(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react@18.3.1):
     resolution: {integrity: sha512-pgmi/CC+E1v31FcnQhsSGjJnOE2OcND4cKPyTE+0F+bmGm48Q/b5UmKD9Y+CmZsrt/7V3h8KNczowupfuBfIHA==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       framer-motion: '>=4.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/checkbox': 2.3.2(@chakra-ui/system@2.6.2)(react@18.2.0)
+      '@chakra-ui/checkbox': 2.3.2(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/switch@2.1.2(@chakra-ui/system@2.6.2)(framer-motion@11.0.22)(react@18.2.0):
+  /@chakra-ui/switch@2.1.2(@chakra-ui/system@2.6.2)(framer-motion@11.1.8)(react@18.3.1):
     resolution: {integrity: sha512-pgmi/CC+E1v31FcnQhsSGjJnOE2OcND4cKPyTE+0F+bmGm48Q/b5UmKD9Y+CmZsrt/7V3h8KNczowupfuBfIHA==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       framer-motion: '>=4.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/checkbox': 2.3.2(@chakra-ui/system@2.6.2)(react@18.2.0)
+      '@chakra-ui/checkbox': 2.3.2(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      framer-motion: 11.0.22(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      framer-motion: 11.1.8(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/system@2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0):
+  /@chakra-ui/system@2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1):
     resolution: {integrity: sha512-EGtpoEjLrUu4W1fHD+a62XR+hzC5YfsWm+6lO0Kybcga3yYEij9beegO0jZgug27V+Rf7vns95VPVP6mFd/DEQ==}
     peerDependencies:
       '@emotion/react': ^11.0.0
       '@emotion/styled': ^11.0.0
       react: '>=18'
     dependencies:
-      '@chakra-ui/color-mode': 2.2.0(react@18.2.0)
+      '@chakra-ui/color-mode': 2.2.0(react@18.3.1)
       '@chakra-ui/object-utils': 2.1.0
-      '@chakra-ui/react-utils': 2.0.12(react@18.2.0)
+      '@chakra-ui/react-utils': 2.0.12(react@18.3.1)
       '@chakra-ui/styled-system': 2.9.2
       '@chakra-ui/theme-utils': 2.0.21
       '@chakra-ui/utils': 2.0.15
-      '@emotion/react': 11.11.4(@types/react@18.2.73)(react@18.2.0)
-      '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.73)(react@18.2.0)
-      react: 18.2.0
+      '@emotion/react': 11.11.4(@types/react@18.3.1)(react@18.3.1)
+      '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.1)(react@18.3.1)
+      react: 18.3.1
       react-fast-compare: 3.2.2
     dev: false
 
-  /@chakra-ui/table@2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/table@2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-o5OrjoHCh5uCLdiUb0Oc0vq9rIAeHSIRScc2ExTC9Qg/uVZl2ygLrjToCaKfaaKl1oQexIeAcZDKvPG8tVkHyQ==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/tabs@3.0.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/tabs@3.0.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-6Mlclp8L9lqXmsGWF5q5gmemZXOiOYuh0SGT/7PgJVNPz3LXREXlXg2an4MBUD8W5oTkduCX+3KTMCwRrVrDYw==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/clickable': 2.1.0(react@18.2.0)
-      '@chakra-ui/descendant': 3.1.0(react@18.2.0)
+      '@chakra-ui/clickable': 2.1.0(react@18.3.1)
+      '@chakra-ui/descendant': 3.1.0(react@18.3.1)
       '@chakra-ui/lazy-utils': 2.0.5
-      '@chakra-ui/react-children-utils': 2.0.6(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.2.0)
+      '@chakra-ui/react-children-utils': 2.0.6(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/tag@3.1.1(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/tag@3.1.1(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-Bdel79Dv86Hnge2PKOU+t8H28nm/7Y3cKd4Kfk9k3lOpUh4+nkSGe58dhRzht59lEqa4N9waCgQiBdkydjvBXQ==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/textarea@2.1.2(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/textarea@2.1.2(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-ip7tvklVCZUb2fOHDb23qPy/Fr2mzDOGdkrpbNi50hDCiV4hFX02jdQJdi3ydHZUyVgZVBKPOJ+lT9i7sKA2wA==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
+      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@chakra-ui/theme-tools@2.1.2(@chakra-ui/styled-system@2.9.2):
@@ -2868,7 +2882,7 @@ packages:
       '@chakra-ui/theme-tools': 2.1.2(@chakra-ui/styled-system@2.9.2)
     dev: false
 
-  /@chakra-ui/toast@7.0.2(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react-dom@18.2.0)(react@18.2.0):
+  /@chakra-ui/toast@7.0.2(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-yvRP8jFKRs/YnkuE41BVTq9nB2v/KDRmje9u6dgDmE5+1bFt3bwjdf9gVbif4u5Ve7F7BGk5E093ARRVtvLvXA==}
     peerDependencies:
       '@chakra-ui/system': 2.6.2
@@ -2876,22 +2890,22 @@ packages:
       react: '>=18'
       react-dom: '>=18'
     dependencies:
-      '@chakra-ui/alert': 2.2.2(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/portal': 2.1.0(react-dom@18.2.0)(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-timeout': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.2.0)
+      '@chakra-ui/alert': 2.2.2(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/portal': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-timeout': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
       '@chakra-ui/styled-system': 2.9.2
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
       '@chakra-ui/theme': 3.3.1(@chakra-ui/styled-system@2.9.2)
-      framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@chakra-ui/toast@7.0.2(@chakra-ui/system@2.6.2)(framer-motion@11.0.22)(react-dom@18.2.0)(react@18.2.0):
+  /@chakra-ui/toast@7.0.2(@chakra-ui/system@2.6.2)(framer-motion@11.1.8)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-yvRP8jFKRs/YnkuE41BVTq9nB2v/KDRmje9u6dgDmE5+1bFt3bwjdf9gVbif4u5Ve7F7BGk5E093ARRVtvLvXA==}
     peerDependencies:
       '@chakra-ui/system': 2.6.2
@@ -2899,22 +2913,22 @@ packages:
       react: '>=18'
       react-dom: '>=18'
     dependencies:
-      '@chakra-ui/alert': 2.2.2(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/portal': 2.1.0(react-dom@18.2.0)(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-timeout': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.2.0)
+      '@chakra-ui/alert': 2.2.2(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/portal': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/react-context': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-timeout': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
       '@chakra-ui/styled-system': 2.9.2
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
       '@chakra-ui/theme': 3.3.1(@chakra-ui/styled-system@2.9.2)
-      framer-motion: 11.0.22(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      framer-motion: 11.1.8(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@chakra-ui/tooltip@2.3.1(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react-dom@18.2.0)(react@18.2.0):
+  /@chakra-ui/tooltip@2.3.1(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-Rh39GBn/bL4kZpuEMPPRwYNnccRCL+w9OqamWHIB3Qboxs6h8cOyXfIdGxjo72lvhu1QI/a4KFqkM3St+WfC0A==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
@@ -2923,20 +2937,20 @@ packages:
       react-dom: '>=18'
     dependencies:
       '@chakra-ui/dom-utils': 2.1.0
-      '@chakra-ui/popper': 3.1.0(react@18.2.0)
-      '@chakra-ui/portal': 2.1.0(react-dom@18.2.0)(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-disclosure': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-event-listener': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
+      '@chakra-ui/popper': 3.1.0(react@18.3.1)
+      '@chakra-ui/portal': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/react-types': 2.0.7(react@18.3.1)
+      '@chakra-ui/react-use-disclosure': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-event-listener': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@chakra-ui/tooltip@2.3.1(@chakra-ui/system@2.6.2)(framer-motion@11.0.22)(react-dom@18.2.0)(react@18.2.0):
+  /@chakra-ui/tooltip@2.3.1(@chakra-ui/system@2.6.2)(framer-motion@11.1.8)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-Rh39GBn/bL4kZpuEMPPRwYNnccRCL+w9OqamWHIB3Qboxs6h8cOyXfIdGxjo72lvhu1QI/a4KFqkM3St+WfC0A==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
@@ -2945,39 +2959,39 @@ packages:
       react-dom: '>=18'
     dependencies:
       '@chakra-ui/dom-utils': 2.1.0
-      '@chakra-ui/popper': 3.1.0(react@18.2.0)
-      '@chakra-ui/portal': 2.1.0(react-dom@18.2.0)(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-disclosure': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-event-listener': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
+      '@chakra-ui/popper': 3.1.0(react@18.3.1)
+      '@chakra-ui/portal': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/react-types': 2.0.7(react@18.3.1)
+      '@chakra-ui/react-use-disclosure': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-event-listener': 2.1.0(react@18.3.1)
+      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      framer-motion: 11.0.22(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      framer-motion: 11.1.8(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /@chakra-ui/transition@2.1.0(framer-motion@10.18.0)(react@18.2.0):
+  /@chakra-ui/transition@2.1.0(framer-motion@10.18.0)(react@18.3.1):
     resolution: {integrity: sha512-orkT6T/Dt+/+kVwJNy7zwJ+U2xAZ3EU7M3XCs45RBvUnZDr/u9vdmaM/3D/rOpmQJWgQBwKPJleUXrYWUagEDQ==}
     peerDependencies:
       framer-motion: '>=4.0.0'
       react: '>=18'
     dependencies:
       '@chakra-ui/shared-utils': 2.0.5
-      framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
+      framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
-  /@chakra-ui/transition@2.1.0(framer-motion@11.0.22)(react@18.2.0):
+  /@chakra-ui/transition@2.1.0(framer-motion@11.1.8)(react@18.3.1):
     resolution: {integrity: sha512-orkT6T/Dt+/+kVwJNy7zwJ+U2xAZ3EU7M3XCs45RBvUnZDr/u9vdmaM/3D/rOpmQJWgQBwKPJleUXrYWUagEDQ==}
     peerDependencies:
       framer-motion: '>=4.0.0'
       react: '>=18'
     dependencies:
       '@chakra-ui/shared-utils': 2.0.5
-      framer-motion: 11.0.22(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
+      framer-motion: 11.1.8(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@chakra-ui/utils@2.0.15:
@@ -2989,14 +3003,14 @@ packages:
       lodash.mergewith: 4.6.2
     dev: false
 
-  /@chakra-ui/visually-hidden@2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0):
+  /@chakra-ui/visually-hidden@2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1):
     resolution: {integrity: sha512-KmKDg01SrQ7VbTD3+cPWf/UfpF5MSwm3v7MWi0n5t8HnnadT13MF0MJCDSXbBWnzLv1ZKJ6zlyAOeARWX+DpjQ==}
     peerDependencies:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      react: 18.2.0
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      react: 18.3.1
     dev: false
 
   /@colors/colors@1.5.0:
@@ -3006,14 +3020,14 @@ packages:
     dev: true
     optional: true
 
-  /@dagrejs/dagre@1.1.1:
-    resolution: {integrity: sha512-AQfT6pffEuPE32weFzhS/u3UpX+bRXUARIXL7UqLaxz497cN8pjuBlX6axO4IIECE2gBV8eLFQkGCtKX5sDaUA==}
+  /@dagrejs/dagre@1.1.2:
+    resolution: {integrity: sha512-F09dphqvHsbe/6C2t2unbmpr5q41BNPEfJCdn8Z7aEBpVSy/zFQ/b4SWsweQjWNsYMDvE2ffNUN8X0CeFsEGNw==}
     dependencies:
-      '@dagrejs/graphlib': 2.2.1
+      '@dagrejs/graphlib': 2.2.2
     dev: false
 
-  /@dagrejs/graphlib@2.2.1:
-    resolution: {integrity: sha512-xJsN1v6OAxXk6jmNdM+OS/bBE8nDCwM0yDNprXR18ZNatL6to9ggod9+l2XtiLhXfLm0NkE7+Er/cpdlM+SkUA==}
+  /@dagrejs/graphlib@2.2.2:
+    resolution: {integrity: sha512-CbyGpCDKsiTg/wuk79S7Muoj8mghDGAESWGxcSyhHX5jD35vYMBZochYVFzlHxynpE9unpu6O+4ZuhrLxASsOg==}
     engines: {node: '>17.0.0'}
     dev: false
 
@@ -3022,46 +3036,46 @@ packages:
     engines: {node: '>=10.0.0'}
     dev: true
 
-  /@dnd-kit/accessibility@3.1.0(react@18.2.0):
+  /@dnd-kit/accessibility@3.1.0(react@18.3.1):
     resolution: {integrity: sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==}
     peerDependencies:
       react: '>=16.8.0'
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
       tslib: 2.6.2
     dev: false
 
-  /@dnd-kit/core@6.1.0(react-dom@18.2.0)(react@18.2.0):
+  /@dnd-kit/core@6.1.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
-      '@dnd-kit/accessibility': 3.1.0(react@18.2.0)
-      '@dnd-kit/utilities': 3.2.2(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@dnd-kit/accessibility': 3.1.0(react@18.3.1)
+      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
       tslib: 2.6.2
     dev: false
 
-  /@dnd-kit/sortable@8.0.0(@dnd-kit/core@6.1.0)(react@18.2.0):
+  /@dnd-kit/sortable@8.0.0(@dnd-kit/core@6.1.0)(react@18.3.1):
     resolution: {integrity: sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g==}
     peerDependencies:
       '@dnd-kit/core': ^6.1.0
       react: '>=16.8.0'
     dependencies:
-      '@dnd-kit/core': 6.1.0(react-dom@18.2.0)(react@18.2.0)
-      '@dnd-kit/utilities': 3.2.2(react@18.2.0)
-      react: 18.2.0
+      '@dnd-kit/core': 6.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
+      react: 18.3.1
       tslib: 2.6.2
     dev: false
 
-  /@dnd-kit/utilities@3.2.2(react@18.2.0):
+  /@dnd-kit/utilities@3.2.2(react@18.3.1):
     resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
     peerDependencies:
       react: '>=16.8.0'
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
       tslib: 2.6.2
     dev: false
 
@@ -3069,10 +3083,10 @@ packages:
     resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
     dependencies:
       '@babel/helper-module-imports': 7.24.3
-      '@babel/runtime': 7.24.1
+      '@babel/runtime': 7.24.5
       '@emotion/hash': 0.9.1
       '@emotion/memoize': 0.8.1
-      '@emotion/serialize': 1.1.3
+      '@emotion/serialize': 1.1.4
       babel-plugin-macros: 3.1.0
       convert-source-map: 1.9.0
       escape-string-regexp: 4.0.0
@@ -3119,7 +3133,7 @@ packages:
     resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
     dev: false
 
-  /@emotion/react@11.11.4(@types/react@18.2.73)(react@18.2.0):
+  /@emotion/react@11.11.4(@types/react@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==}
     peerDependencies:
       '@types/react': '*'
@@ -3128,20 +3142,20 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.1
+      '@babel/runtime': 7.24.5
       '@emotion/babel-plugin': 11.11.0
       '@emotion/cache': 11.11.0
-      '@emotion/serialize': 1.1.3
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
+      '@emotion/serialize': 1.1.4
+      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1)
       '@emotion/utils': 1.2.1
       '@emotion/weak-memoize': 0.3.1
-      '@types/react': 18.2.73
+      '@types/react': 18.3.1
       hoist-non-react-statics: 3.3.2
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /@emotion/serialize@1.1.3:
-    resolution: {integrity: sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==}
+  /@emotion/serialize@1.1.4:
+    resolution: {integrity: sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==}
     dependencies:
       '@emotion/hash': 0.9.1
       '@emotion/memoize': 0.8.1
@@ -3154,8 +3168,8 @@ packages:
     resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==}
     dev: false
 
-  /@emotion/styled@11.11.0(@emotion/react@11.11.4)(@types/react@18.2.73)(react@18.2.0):
-    resolution: {integrity: sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==}
+  /@emotion/styled@11.11.5(@emotion/react@11.11.4)(@types/react@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==}
     peerDependencies:
       '@emotion/react': ^11.0.0-rc.0
       '@types/react': '*'
@@ -3164,27 +3178,27 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.1
+      '@babel/runtime': 7.24.5
       '@emotion/babel-plugin': 11.11.0
       '@emotion/is-prop-valid': 1.2.2
-      '@emotion/react': 11.11.4(@types/react@18.2.73)(react@18.2.0)
-      '@emotion/serialize': 1.1.3
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
+      '@emotion/react': 11.11.4(@types/react@18.3.1)(react@18.3.1)
+      '@emotion/serialize': 1.1.4
+      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1)
       '@emotion/utils': 1.2.1
-      '@types/react': 18.2.73
-      react: 18.2.0
+      '@types/react': 18.3.1
+      react: 18.3.1
     dev: false
 
   /@emotion/unitless@0.8.1:
     resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
     dev: false
 
-  /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0):
+  /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.3.1):
     resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
     peerDependencies:
       react: '>=16.8.0'
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
 
   /@emotion/utils@1.2.1:
     resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==}
@@ -3472,39 +3486,39 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
-  /@floating-ui/core@1.6.0:
-    resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==}
+  /@floating-ui/core@1.6.1:
+    resolution: {integrity: sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==}
     dependencies:
-      '@floating-ui/utils': 0.2.1
+      '@floating-ui/utils': 0.2.2
     dev: false
 
   /@floating-ui/dom@1.5.4:
     resolution: {integrity: sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==}
     dependencies:
-      '@floating-ui/core': 1.6.0
-      '@floating-ui/utils': 0.2.1
+      '@floating-ui/core': 1.6.1
+      '@floating-ui/utils': 0.2.2
     dev: false
 
-  /@floating-ui/dom@1.6.3:
-    resolution: {integrity: sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==}
+  /@floating-ui/dom@1.6.5:
+    resolution: {integrity: sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==}
     dependencies:
-      '@floating-ui/core': 1.6.0
-      '@floating-ui/utils': 0.2.1
+      '@floating-ui/core': 1.6.1
+      '@floating-ui/utils': 0.2.2
     dev: false
 
-  /@floating-ui/utils@0.2.1:
-    resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
+  /@floating-ui/utils@0.2.2:
+    resolution: {integrity: sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==}
     dev: false
 
-  /@fontsource-variable/inter@5.0.17:
-    resolution: {integrity: sha512-sa80nNnqF8kzhBvqusWiL9vlPMVpdmOwMmDBup46Jggsr1VBqo+YuzwB36Ls+X6uHJtb8Yv3ALBHL/zGmT862A==}
+  /@fontsource-variable/inter@5.0.18:
+    resolution: {integrity: sha512-rJzSrtJ3b7djiGFvRuTe6stDfbYJGhdQSfn2SI2WfXviee7Er0yKAHE5u7FU7OWVQQQ1x3+cxdmx9NdiAkcrcA==}
     dev: false
 
   /@humanwhocodes/config-array@0.11.14:
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
     dependencies:
-      '@humanwhocodes/object-schema': 2.0.2
+      '@humanwhocodes/object-schema': 2.0.3
       debug: 4.3.4
       minimatch: 3.1.2
     transitivePeerDependencies:
@@ -3516,8 +3530,8 @@ packages:
     engines: {node: '>=12.22'}
     dev: true
 
-  /@humanwhocodes/object-schema@2.0.2:
-    resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==}
+  /@humanwhocodes/object-schema@2.0.3:
+    resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     dev: true
 
   /@internationalized/date@3.5.3:
@@ -3526,32 +3540,32 @@ packages:
       '@swc/helpers': 0.5.11
     dev: false
 
-  /@internationalized/number@3.5.1:
-    resolution: {integrity: sha512-N0fPU/nz15SwR9IbfJ5xaS9Ss/O5h1sVXMZf43vc9mxEG48ovglvvzBjF53aHlq20uoR6c+88CrIXipU/LSzwg==}
+  /@internationalized/number@3.5.2:
+    resolution: {integrity: sha512-4FGHTi0rOEX1giSkt5MH4/te0eHBq3cvAYsfLlpguV6pzJAReXymiYpE5wPCqKqjkUO3PIsyvk+tBiIV1pZtbA==}
     dependencies:
       '@swc/helpers': 0.5.11
     dev: false
 
-  /@invoke-ai/eslint-config-react@0.0.14(eslint@8.57.0)(prettier@3.2.5)(typescript@5.4.3):
+  /@invoke-ai/eslint-config-react@0.0.14(eslint@8.57.0)(prettier@3.2.5)(typescript@5.4.5):
     resolution: {integrity: sha512-6ZUY9zgdDhv2WUoLdDKOQdU9ImnH0CBOFtRlOaNOh34IOsNRfn+JA7wqA0PKnkiNrlfPkIQWhn4GRJp68NT5bw==}
     peerDependencies:
       eslint: ^8.56.0
       prettier: ^3.2.5
       typescript: ^5.3.3
     dependencies:
-      '@typescript-eslint/eslint-plugin': 7.4.0(@typescript-eslint/parser@7.4.0)(eslint@8.57.0)(typescript@5.4.3)
-      '@typescript-eslint/parser': 7.4.0(eslint@8.57.0)(typescript@5.4.3)
+      '@typescript-eslint/eslint-plugin': 7.8.0(@typescript-eslint/parser@7.8.0)(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/parser': 7.8.0(eslint@8.57.0)(typescript@5.4.5)
       eslint: 8.57.0
       eslint-config-prettier: 9.1.0(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.4.0)(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.8.0)(eslint@8.57.0)
       eslint-plugin-react: 7.34.1(eslint@8.57.0)
-      eslint-plugin-react-hooks: 4.6.0(eslint@8.57.0)
+      eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
       eslint-plugin-react-refresh: 0.4.6(eslint@8.57.0)
-      eslint-plugin-simple-import-sort: 12.0.0(eslint@8.57.0)
-      eslint-plugin-storybook: 0.8.0(eslint@8.57.0)(typescript@5.4.3)
-      eslint-plugin-unused-imports: 3.1.0(@typescript-eslint/eslint-plugin@7.4.0)(eslint@8.57.0)
+      eslint-plugin-simple-import-sort: 12.1.0(eslint@8.57.0)
+      eslint-plugin-storybook: 0.8.0(eslint@8.57.0)(typescript@5.4.5)
+      eslint-plugin-unused-imports: 3.2.0(@typescript-eslint/eslint-plugin@7.8.0)(eslint@8.57.0)
       prettier: 3.2.5
-      typescript: 5.4.3
+      typescript: 5.4.5
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -3566,36 +3580,36 @@ packages:
       prettier: 3.2.5
     dev: true
 
-  /@invoke-ai/ui-library@0.0.25(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.17)(@internationalized/date@3.5.3)(@types/react@18.2.73)(i18next@23.10.1)(react-dom@18.2.0)(react@18.2.0):
+  /@invoke-ai/ui-library@0.0.25(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.18)(@internationalized/date@3.5.3)(@types/react@18.3.1)(i18next@23.11.3)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-Fmjdlu62NXHgairYXGjcuCrxPEAl1G6Q6ban8g3excF6pDDdBeS7CmSNCyEDMxnSIOZrQlI04OhaMB17Imi9Uw==}
     peerDependencies:
       '@fontsource-variable/inter': ^5.0.16
       react: ^18.2.0
       react-dom: ^18.2.0
     dependencies:
-      '@ark-ui/react': 1.3.0(@internationalized/date@3.5.3)(react-dom@18.2.0)(react@18.2.0)
+      '@ark-ui/react': 1.3.0(@internationalized/date@3.5.3)(react-dom@18.3.1)(react@18.3.1)
       '@chakra-ui/anatomy': 2.2.2
-      '@chakra-ui/icons': 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/layout': 2.3.1(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/portal': 2.1.0(react-dom@18.2.0)(react@18.2.0)
-      '@chakra-ui/react': 2.8.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(@types/react@18.2.73)(framer-motion@10.18.0)(react-dom@18.2.0)(react@18.2.0)
+      '@chakra-ui/icons': 2.1.1(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/layout': 2.3.1(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/portal': 2.1.0(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/react': 2.8.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.3.1)(framer-motion@10.18.0)(react-dom@18.3.1)(react@18.3.1)
       '@chakra-ui/styled-system': 2.9.2
       '@chakra-ui/theme-tools': 2.1.2(@chakra-ui/styled-system@2.9.2)
-      '@emotion/react': 11.11.4(@types/react@18.2.73)(react@18.2.0)
-      '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@18.2.73)(react@18.2.0)
-      '@fontsource-variable/inter': 5.0.17
-      '@nanostores/react': 0.7.2(nanostores@0.9.5)(react@18.2.0)
-      chakra-react-select: 4.7.6(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.11.4)(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
-      framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0)
+      '@emotion/react': 11.11.4(@types/react@18.3.1)(react@18.3.1)
+      '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.3.1)(react@18.3.1)
+      '@fontsource-variable/inter': 5.0.18
+      '@nanostores/react': 0.7.2(nanostores@0.9.5)(react@18.3.1)
+      chakra-react-select: 4.7.6(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.11.4)(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
+      framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
       lodash-es: 4.17.21
       nanostores: 0.9.5
-      overlayscrollbars: 2.6.1
-      overlayscrollbars-react: 0.5.5(overlayscrollbars@2.6.1)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-i18next: 14.1.0(i18next@23.10.1)(react-dom@18.2.0)(react@18.2.0)
-      react-icons: 5.0.1(react@18.2.0)
-      react-select: 5.8.0(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
+      overlayscrollbars: 2.7.3
+      overlayscrollbars-react: 0.5.6(overlayscrollbars@2.7.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-i18next: 14.1.1(i18next@23.11.3)(react-dom@18.3.1)(react@18.3.1)
+      react-icons: 5.2.0(react@18.3.1)
+      react-select: 5.8.0(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@chakra-ui/form-control'
       - '@chakra-ui/icon'
@@ -3628,7 +3642,7 @@ packages:
       '@sinclair/typebox': 0.27.8
     dev: true
 
-  /@joshwooding/vite-plugin-react-docgen-typescript@0.3.0(typescript@5.4.3)(vite@5.2.6):
+  /@joshwooding/vite-plugin-react-docgen-typescript@0.3.0(typescript@5.4.5)(vite@5.2.11):
     resolution: {integrity: sha512-2D6y7fNvFmsLmRt6UCOFJPvFoPMJGT0Uh1Wg0RaigUp7kdQPs6yYn8Dmx6GZkOH/NW0yMTwRz/p0SRMMRo50vA==}
     peerDependencies:
       typescript: '>= 4.3.x'
@@ -3640,9 +3654,9 @@ packages:
       glob: 7.2.3
       glob-promise: 4.2.2(glob@7.2.3)
       magic-string: 0.27.0
-      react-docgen-typescript: 2.2.2(typescript@5.4.3)
-      typescript: 5.4.3
-      vite: 5.2.6(@types/node@20.11.30)
+      react-docgen-typescript: 2.2.2(typescript@5.4.5)
+      typescript: 5.4.5
+      vite: 5.2.11(@types/node@20.12.10)
     dev: true
 
   /@jridgewell/gen-mapping@0.3.5:
@@ -3674,38 +3688,38 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
-  /@mdx-js/react@3.0.1(@types/react@18.2.73)(react@18.2.0):
+  /@mdx-js/react@3.0.1(@types/react@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-9ZrPIU4MGf6et1m1ov3zKf+q9+deetI51zprKB1D/z3NOb+rUxxtEl3mCjW5wTGh6VhRdwPueh1oRzi6ezkA8A==}
     peerDependencies:
       '@types/react': '>=16'
       react: '>=16'
     dependencies:
-      '@types/mdx': 2.0.12
-      '@types/react': 18.2.73
-      react: 18.2.0
+      '@types/mdx': 2.0.13
+      '@types/react': 18.3.1
+      react: 18.3.1
     dev: true
 
-  /@microsoft/api-extractor-model@7.28.13(@types/node@20.11.30):
+  /@microsoft/api-extractor-model@7.28.13(@types/node@20.12.10):
     resolution: {integrity: sha512-39v/JyldX4MS9uzHcdfmjjfS6cYGAoXV+io8B5a338pkHiSt+gy2eXQ0Q7cGFJ7quSa1VqqlMdlPrB6sLR/cAw==}
     dependencies:
       '@microsoft/tsdoc': 0.14.2
       '@microsoft/tsdoc-config': 0.16.2
-      '@rushstack/node-core-library': 4.0.2(@types/node@20.11.30)
+      '@rushstack/node-core-library': 4.0.2(@types/node@20.12.10)
     transitivePeerDependencies:
       - '@types/node'
     dev: true
 
-  /@microsoft/api-extractor@7.43.0(@types/node@20.11.30):
+  /@microsoft/api-extractor@7.43.0(@types/node@20.12.10):
     resolution: {integrity: sha512-GFhTcJpB+MI6FhvXEI9b2K0snulNLWHqC/BbcJtyNYcKUiw7l3Lgis5ApsYncJ0leALX7/of4XfmXk+maT111w==}
     hasBin: true
     dependencies:
-      '@microsoft/api-extractor-model': 7.28.13(@types/node@20.11.30)
+      '@microsoft/api-extractor-model': 7.28.13(@types/node@20.12.10)
       '@microsoft/tsdoc': 0.14.2
       '@microsoft/tsdoc-config': 0.16.2
-      '@rushstack/node-core-library': 4.0.2(@types/node@20.11.30)
+      '@rushstack/node-core-library': 4.0.2(@types/node@20.12.10)
       '@rushstack/rig-package': 0.5.2
-      '@rushstack/terminal': 0.10.0(@types/node@20.11.30)
-      '@rushstack/ts-command-line': 4.19.1(@types/node@20.11.30)
+      '@rushstack/terminal': 0.10.0(@types/node@20.12.10)
+      '@rushstack/ts-command-line': 4.19.1(@types/node@20.12.10)
       lodash: 4.17.21
       minimatch: 3.0.8
       resolve: 1.22.8
@@ -3729,18 +3743,18 @@ packages:
     resolution: {integrity: sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==}
     dev: true
 
-  /@nanostores/react@0.7.2(nanostores@0.10.0)(react@18.2.0):
+  /@nanostores/react@0.7.2(nanostores@0.10.3)(react@18.3.1):
     resolution: {integrity: sha512-e3OhHJFv3NMSFYDgREdlAQqkyBTHJM91s31kOZ4OvZwJKdFk5BLk0MLbh51EOGUz9QGX2aCHfy1RvweSi7fgwA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
       nanostores: ^0.9.0 || ^0.10.0
       react: '>=18.0.0'
     dependencies:
-      nanostores: 0.10.0
-      react: 18.2.0
+      nanostores: 0.10.3
+      react: 18.3.1
     dev: false
 
-  /@nanostores/react@0.7.2(nanostores@0.9.5)(react@18.2.0):
+  /@nanostores/react@0.7.2(nanostores@0.9.5)(react@18.3.1):
     resolution: {integrity: sha512-e3OhHJFv3NMSFYDgREdlAQqkyBTHJM91s31kOZ4OvZwJKdFk5BLk0MLbh51EOGUz9QGX2aCHfy1RvweSi7fgwA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
@@ -3748,7 +3762,7 @@ packages:
       react: '>=18.0.0'
     dependencies:
       nanostores: 0.9.5
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
   /@ndelangen/get-tarball@3.0.9:
@@ -3801,59 +3815,6 @@ packages:
       fastq: 1.17.1
     dev: true
 
-  /@npmcli/git@5.0.4:
-    resolution: {integrity: sha512-nr6/WezNzuYUppzXRaYu/W4aT5rLxdXqEFupbh6e/ovlYFQ8hpu1UUPV3Ir/YTl+74iXl2ZOMlGzudh9ZPUchQ==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-    dependencies:
-      '@npmcli/promise-spawn': 7.0.1
-      lru-cache: 10.2.0
-      npm-pick-manifest: 9.0.0
-      proc-log: 3.0.0
-      promise-inflight: 1.0.1
-      promise-retry: 2.0.1
-      semver: 7.6.0
-      which: 4.0.0
-    transitivePeerDependencies:
-      - bluebird
-    dev: true
-
-  /@npmcli/map-workspaces@3.0.4:
-    resolution: {integrity: sha512-Z0TbvXkRbacjFFLpVpV0e2mheCh+WzQpcqL+4xp49uNJOxOnIAPZyXtUxZ5Qn3QBTGKA11Exjd9a5411rBrhDg==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    dependencies:
-      '@npmcli/name-from-folder': 2.0.0
-      glob: 10.3.10
-      minimatch: 9.0.3
-      read-package-json-fast: 3.0.2
-    dev: true
-
-  /@npmcli/name-from-folder@2.0.0:
-    resolution: {integrity: sha512-pwK+BfEBZJbKdNYpHHRTNBwBoqrN/iIMO0AiGvYsp3Hoaq0WbgGSWQR6SCldZovoDpY3yje5lkFUe6gsDgJ2vg==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    dev: true
-
-  /@npmcli/package-json@5.0.0:
-    resolution: {integrity: sha512-OI2zdYBLhQ7kpNPaJxiflofYIpkNLi+lnGdzqUOfRmCF3r2l1nadcjtCYMJKv/Utm/ZtlffaUuTiAktPHbc17g==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-    dependencies:
-      '@npmcli/git': 5.0.4
-      glob: 10.3.10
-      hosted-git-info: 7.0.1
-      json-parse-even-better-errors: 3.0.1
-      normalize-package-data: 6.0.0
-      proc-log: 3.0.0
-      semver: 7.6.0
-    transitivePeerDependencies:
-      - bluebird
-    dev: true
-
-  /@npmcli/promise-spawn@7.0.1:
-    resolution: {integrity: sha512-P4KkF9jX3y+7yFUxgcUdDtLy+t4OlDGuEBLNs57AZsfSfg+uV6MLndqGpnl4831ggaEdXwR50XFoZP4VFtHolg==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-    dependencies:
-      which: 4.0.0
-    dev: true
-
   /@pkgjs/parseargs@0.11.0:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -3861,135 +3822,11 @@ packages:
     dev: true
     optional: true
 
-  /@pnpm/constants@7.1.1:
-    resolution: {integrity: sha512-31pZqMtjwV+Vaq7MaPrT1EoDFSYwye3dp6BiHIGRJmVThCQwySRKM7hCvqqI94epNkqFAAYoWrNynWoRYosGdw==}
-    engines: {node: '>=16.14'}
-    dev: true
-
-  /@pnpm/core-loggers@9.0.6(@pnpm/logger@5.0.0):
-    resolution: {integrity: sha512-iK67SGbp+06bA/elpg51wygPFjNA7JKHtKkpLxqXXHw+AjFFBC3f2OznJsCIuDK6HdGi5UhHLYqo5QxJ2gMqJQ==}
-    engines: {node: '>=16.14'}
-    peerDependencies:
-      '@pnpm/logger': ^5.0.0
-    dependencies:
-      '@pnpm/logger': 5.0.0
-      '@pnpm/types': 9.4.2
-    dev: true
-
-  /@pnpm/error@5.0.3:
-    resolution: {integrity: sha512-ONJU5cUeoeJSy50qOYsMZQHTA/9QKmGgh1ATfEpCLgtbdwqUiwD9MxHNeXUYYI/pocBCz6r1ZCFqiQvO+8SUKA==}
-    engines: {node: '>=16.14'}
-    dependencies:
-      '@pnpm/constants': 7.1.1
-    dev: true
-
-  /@pnpm/fetching-types@5.0.0:
-    resolution: {integrity: sha512-o9gdO1v8Uc5P2fBBuW6GSpfTqIivQmQlqjQJdFiQX0m+tgxlrMRneIg392jZuc6fk7kFqjLheInlslgJfwY+4Q==}
-    engines: {node: '>=16.14'}
-    dependencies:
-      '@zkochan/retry': 0.2.0
-      node-fetch: 3.0.0-beta.9
-    transitivePeerDependencies:
-      - domexception
-    dev: true
-
-  /@pnpm/graceful-fs@3.2.0:
-    resolution: {integrity: sha512-vRoXJxscDpHak7YE9SqCkzfrayn+Lw+YueOeHIPEqkgokrHeYgYeONoc2kGh0ObHaRtNSsonozVfJ456kxLNvA==}
-    engines: {node: '>=16.14'}
-    dependencies:
-      graceful-fs: 4.2.11
-    dev: true
-
-  /@pnpm/logger@5.0.0:
-    resolution: {integrity: sha512-YfcB2QrX+Wx1o6LD1G2Y2fhDhOix/bAY/oAnMpHoNLsKkWIRbt1oKLkIFvxBMzLwAEPqnYWguJrYC+J6i4ywbw==}
-    engines: {node: '>=12.17'}
-    dependencies:
-      bole: 5.0.11
-      ndjson: 2.0.0
-    dev: true
-
-  /@pnpm/npm-package-arg@1.0.0:
-    resolution: {integrity: sha512-oQYP08exi6mOPdAZZWcNIGS+KKPsnNwUBzSuAEGWuCcqwMAt3k/WVCqVIXzBxhO5sP2b43og69VHmPj6IroKqw==}
-    engines: {node: '>=14.6'}
-    dependencies:
-      hosted-git-info: 4.1.0
-      semver: 7.6.0
-      validate-npm-package-name: 4.0.0
-    dev: true
-
-  /@pnpm/npm-resolver@18.1.1(@pnpm/logger@5.0.0):
-    resolution: {integrity: sha512-NptzncmMD5ZMimbjWkGpMzuBRhlCY+sh7mzypPdBOTNlh5hmEQe/VaRKjNK4V9/b0C/llElkvIePL6acybu86w==}
-    engines: {node: '>=16.14'}
-    peerDependencies:
-      '@pnpm/logger': ^5.0.0
-    dependencies:
-      '@pnpm/core-loggers': 9.0.6(@pnpm/logger@5.0.0)
-      '@pnpm/error': 5.0.3
-      '@pnpm/fetching-types': 5.0.0
-      '@pnpm/graceful-fs': 3.2.0
-      '@pnpm/logger': 5.0.0
-      '@pnpm/resolve-workspace-range': 5.0.1
-      '@pnpm/resolver-base': 11.1.0
-      '@pnpm/types': 9.4.2
-      '@zkochan/retry': 0.2.0
-      encode-registry: 3.0.1
-      load-json-file: 6.2.0
-      lru-cache: 10.2.0
-      normalize-path: 3.0.0
-      p-limit: 3.1.0
-      p-memoize: 4.0.1
-      parse-npm-tarball-url: 3.0.0
-      path-temp: 2.1.0
-      ramda: /@pnpm/ramda@0.28.1
-      rename-overwrite: 5.0.0
-      semver: 7.6.0
-      ssri: 10.0.5
-      version-selector-type: 3.0.0
-    transitivePeerDependencies:
-      - domexception
-    dev: true
-
-  /@pnpm/ramda@0.28.1:
-    resolution: {integrity: sha512-zcAG+lvU0fMziNeGXpPyCyCJYp5ZVrPElEE4t14jAmViaihohocZ+dDkcRIyAomox8pQsuZnv1EyHR+pOhmUWw==}
-    dev: true
-
-  /@pnpm/resolve-workspace-range@5.0.1:
-    resolution: {integrity: sha512-yQ0pMthlw8rTgS/C9hrjne+NEnnSNevCjtdodd7i15I59jMBYciHifZ/vjg0NY+Jl+USTc3dBE+0h/4tdYjMKg==}
-    engines: {node: '>=16.14'}
-    dependencies:
-      semver: 7.6.0
-    dev: true
-
-  /@pnpm/resolver-base@11.1.0:
-    resolution: {integrity: sha512-y2qKaj18pwe1VWc3YXEitdYFo+WqOOt60aqTUuOVkJAirUzz0DzuYh3Ifct4znYWPdgUXHaN5DMphNF5iL85rA==}
-    engines: {node: '>=16.14'}
-    dependencies:
-      '@pnpm/types': 9.4.2
-    dev: true
-
-  /@pnpm/types@9.4.2:
-    resolution: {integrity: sha512-g1hcF8Nv4gd76POilz9gD4LITAPXOe5nX4ijgr8ixCbLQZfcpYiMfJ+C1RlMNRUDo8vhlNB4O3bUlxmT6EAQXA==}
-    engines: {node: '>=16.14'}
-    dev: true
-
-  /@pnpm/workspace.pkgs-graph@2.0.15(@pnpm/logger@5.0.0):
-    resolution: {integrity: sha512-Txxd5FzzVfBfGCTngISaxFlJzZhzdS8BUrCEtAWJfZOFbQzpWy27rzkaS7TaWW2dHiFcCVYzPI/2vgxfeRansA==}
-    engines: {node: '>=16.14'}
-    dependencies:
-      '@pnpm/npm-package-arg': 1.0.0
-      '@pnpm/npm-resolver': 18.1.1(@pnpm/logger@5.0.0)
-      '@pnpm/resolve-workspace-range': 5.0.1
-      ramda: /@pnpm/ramda@0.28.1
-    transitivePeerDependencies:
-      - '@pnpm/logger'
-      - domexception
-    dev: true
-
   /@popperjs/core@2.11.8:
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
     dev: false
 
-  /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.73)(react@18.2.0):
+  /@radix-ui/react-compose-refs@1.0.1(@types/react@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
     peerDependencies:
       '@types/react': '*'
@@ -3998,12 +3835,12 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.1
-      '@types/react': 18.2.73
-      react: 18.2.0
+      '@babel/runtime': 7.24.5
+      '@types/react': 18.3.1
+      react: 18.3.1
     dev: true
 
-  /@radix-ui/react-slot@1.0.2(@types/react@18.2.73)(react@18.2.0):
+  /@radix-ui/react-slot@1.0.2(@types/react@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
       '@types/react': '*'
@@ -4012,46 +3849,46 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.73)(react@18.2.0)
-      '@types/react': 18.2.73
-      react: 18.2.0
+      '@babel/runtime': 7.24.5
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
+      '@types/react': 18.3.1
+      react: 18.3.1
     dev: true
 
-  /@reactflow/background@11.3.9(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-byj/G9pEC8tN0wT/ptcl/LkEP/BBfa33/SvBkqE4XwyofckqF87lKp573qGlisfnsijwAbpDlf81PuFL41So4Q==}
+  /@reactflow/background@11.3.13(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-hkvpVEhgvfTDyCvdlitw4ioKCYLaaiRXnuEG+1QM3Np+7N1DiWF1XOv5I8AFyNoJL07yXEkbECUTsHvkBvcG5A==}
     peerDependencies:
       react: '>=17'
       react-dom: '>=17'
     dependencies:
-      '@reactflow/core': 11.10.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
-      classcat: 5.0.4
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      zustand: 4.5.2(@types/react@18.2.73)(react@18.2.0)
+      '@reactflow/core': 11.11.3(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
+      classcat: 5.0.5
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      zustand: 4.5.2(@types/react@18.3.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - immer
     dev: false
 
-  /@reactflow/controls@11.2.9(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-e8nWplbYfOn83KN1BrxTXS17+enLyFnjZPbyDgHSRLtI5ZGPKF/8iRXV+VXb2LFVzlu4Wh3la/pkxtfP/0aguA==}
+  /@reactflow/controls@11.2.13(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-3xgEg6ALIVkAQCS4NiBjb7ad8Cb3D8CtA7Vvl4Hf5Ar2PIVs6FOaeft9s2iDZGtsWP35ECDYId1rIFVhQL8r+A==}
     peerDependencies:
       react: '>=17'
       react-dom: '>=17'
     dependencies:
-      '@reactflow/core': 11.10.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
-      classcat: 5.0.4
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      zustand: 4.5.2(@types/react@18.2.73)(react@18.2.0)
+      '@reactflow/core': 11.11.3(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
+      classcat: 5.0.5
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      zustand: 4.5.2(@types/react@18.3.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - immer
     dev: false
 
-  /@reactflow/core@11.10.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-j3i9b2fsTX/sBbOm+RmNzYEFWbNx4jGWGuGooh2r1jQaE2eV+TLJgiG/VNOp0q5mBl9f6g1IXs3Gm86S9JfcGw==}
+  /@reactflow/core@11.11.3(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-+adHdUa7fJSEM93fWfjQwyWXeI92a1eLKwWbIstoCakHpL8UjzwhEh6sn+mN2h/59MlVI7Ehr1iGTt3MsfcIFA==}
     peerDependencies:
       react: '>=17'
       react-dom: '>=17'
@@ -4060,74 +3897,74 @@ packages:
       '@types/d3-drag': 3.0.7
       '@types/d3-selection': 3.0.10
       '@types/d3-zoom': 3.0.8
-      classcat: 5.0.4
+      classcat: 5.0.5
       d3-drag: 3.0.0
       d3-selection: 3.0.0
       d3-zoom: 3.0.0
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      zustand: 4.5.2(@types/react@18.2.73)(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      zustand: 4.5.2(@types/react@18.3.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - immer
     dev: false
 
-  /@reactflow/minimap@11.7.9(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-le95jyTtt3TEtJ1qa7tZ5hyM4S7gaEQkW43cixcMOZLu33VAdc2aCpJg/fXcRrrf7moN2Mbl9WIMNXUKsp5ILA==}
+  /@reactflow/minimap@11.7.13(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-m2MvdiGSyOu44LEcERDEl1Aj6x//UQRWo3HEAejNU4HQTlJnYrSN8tgrYF8TxC1+c/9UdyzQY5VYgrTwW4QWdg==}
     peerDependencies:
       react: '>=17'
       react-dom: '>=17'
     dependencies:
-      '@reactflow/core': 11.10.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
+      '@reactflow/core': 11.11.3(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
       '@types/d3-selection': 3.0.10
       '@types/d3-zoom': 3.0.8
-      classcat: 5.0.4
+      classcat: 5.0.5
       d3-selection: 3.0.0
       d3-zoom: 3.0.0
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      zustand: 4.5.2(@types/react@18.2.73)(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      zustand: 4.5.2(@types/react@18.3.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - immer
     dev: false
 
-  /@reactflow/node-resizer@2.2.9(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-HfickMm0hPDIHt9qH997nLdgLt0kayQyslKE0RS/GZvZ4UMQJlx/NRRyj5y47Qyg0NnC66KYOQWDM9LLzRTnUg==}
+  /@reactflow/node-resizer@2.2.13(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-X7ceQ2s3jFLgbkg03n2RYr4hm3jTVrzkW2W/8ANv/SZfuVmF8XJxlERuD8Eka5voKqLda0ywIZGAbw9GoHLfUQ==}
     peerDependencies:
       react: '>=17'
       react-dom: '>=17'
     dependencies:
-      '@reactflow/core': 11.10.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
-      classcat: 5.0.4
+      '@reactflow/core': 11.11.3(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
+      classcat: 5.0.5
       d3-drag: 3.0.0
       d3-selection: 3.0.0
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      zustand: 4.5.2(@types/react@18.2.73)(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      zustand: 4.5.2(@types/react@18.3.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - immer
     dev: false
 
-  /@reactflow/node-toolbar@1.3.9(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-VmgxKmToax4sX1biZ9LXA7cj/TBJ+E5cklLGwquCCVVxh+lxpZGTBF3a5FJGVHiUNBBtFsC8ldcSZIK4cAlQww==}
+  /@reactflow/node-toolbar@1.3.13(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-aknvNICO10uWdthFSpgD6ctY/CTBeJUMV9co8T9Ilugr08Nb89IQ4uD0dPmr031ewMQxixtYIkw+sSDDzd2aaQ==}
     peerDependencies:
       react: '>=17'
       react-dom: '>=17'
     dependencies:
-      '@reactflow/core': 11.10.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
-      classcat: 5.0.4
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      zustand: 4.5.2(@types/react@18.2.73)(react@18.2.0)
+      '@reactflow/core': 11.11.3(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
+      classcat: 5.0.5
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      zustand: 4.5.2(@types/react@18.3.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - immer
     dev: false
 
-  /@reduxjs/toolkit@2.2.2(react-redux@9.1.0)(react@18.2.0):
-    resolution: {integrity: sha512-454GZrEx3G6QSYwIx9ROaso1HR6sTH8qyZBe3KEsdWVGU3ayV8jYCwdaEJV3vl9V6+pi3GRl+7Xl7AeDna6qwQ==}
+  /@reduxjs/toolkit@2.2.3(react-redux@9.1.2)(react@18.3.1):
+    resolution: {integrity: sha512-76dll9EnJXg4EVcI5YNxZA/9hSAmZsFqzMmNRHvIlzw2WS/twfcVX3ysYrWGJMClwEmChQFC4yRq74tn6fdzRA==}
     peerDependencies:
       react: ^16.9.0 || ^17.0.0 || ^18
       react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
@@ -4137,9 +3974,9 @@ packages:
       react-redux:
         optional: true
     dependencies:
-      immer: 10.0.4
-      react: 18.2.0
-      react-redux: 9.1.0(@types/react@18.2.73)(react@18.2.0)(redux@5.0.1)
+      immer: 10.1.1
+      react: 18.3.1
+      react-redux: 9.1.2(@types/react@18.3.1)(react@18.3.1)(redux@5.0.1)
       redux: 5.0.1
       redux-thunk: 3.1.0(redux@5.0.1)
       reselect: 5.1.0
@@ -4150,7 +3987,7 @@ packages:
     engines: {node: '>=12.0'}
     dependencies:
       boolean: 3.2.0
-      globalthis: 1.0.3
+      globalthis: 1.0.4
       liqe: 3.8.0
     dev: false
 
@@ -4176,119 +4013,135 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /@rollup/rollup-android-arm-eabi@4.13.1:
-    resolution: {integrity: sha512-4C4UERETjXpC4WpBXDbkgNVgHyWfG3B/NKY46e7w5H134UDOFqUJKpsLm0UYmuupW+aJmRgeScrDNfvZ5WV80A==}
+  /@rollup/rollup-android-arm-eabi@4.17.2:
+    resolution: {integrity: sha512-NM0jFxY8bB8QLkoKxIQeObCaDlJKewVlIEkuyYKm5An1tdVZ966w2+MPQ2l8LBZLjR+SgyV+nRkTIunzOYBMLQ==}
     cpu: [arm]
     os: [android]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-android-arm64@4.13.1:
-    resolution: {integrity: sha512-TrTaFJ9pXgfXEiJKQ3yQRelpQFqgRzVR9it8DbeRzG0RX7mKUy0bqhCFsgevwXLJepQKTnLl95TnPGf9T9AMOA==}
+  /@rollup/rollup-android-arm64@4.17.2:
+    resolution: {integrity: sha512-yeX/Usk7daNIVwkq2uGoq2BYJKZY1JfyLTaHO/jaiSwi/lsf8fTFoQW/n6IdAsx5tx+iotu2zCJwz8MxI6D/Bw==}
     cpu: [arm64]
     os: [android]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-darwin-arm64@4.13.1:
-    resolution: {integrity: sha512-fz7jN6ahTI3cKzDO2otQuybts5cyu0feymg0bjvYCBrZQ8tSgE8pc0sSNEuGvifrQJWiwx9F05BowihmLxeQKw==}
+  /@rollup/rollup-darwin-arm64@4.17.2:
+    resolution: {integrity: sha512-kcMLpE6uCwls023+kknm71ug7MZOrtXo+y5p/tsg6jltpDtgQY1Eq5sGfHcQfb+lfuKwhBmEURDga9N0ol4YPw==}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-darwin-x64@4.13.1:
-    resolution: {integrity: sha512-WTvdz7SLMlJpektdrnWRUN9C0N2qNHwNbWpNo0a3Tod3gb9leX+yrYdCeB7VV36OtoyiPAivl7/xZ3G1z5h20g==}
+  /@rollup/rollup-darwin-x64@4.17.2:
+    resolution: {integrity: sha512-AtKwD0VEx0zWkL0ZjixEkp5tbNLzX+FCqGG1SvOu993HnSz4qDI6S4kGzubrEJAljpVkhRSlg5bzpV//E6ysTQ==}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-arm-gnueabihf@4.13.1:
-    resolution: {integrity: sha512-dBHQl+7wZzBYcIF6o4k2XkAfwP2ks1mYW2q/Gzv9n39uDcDiAGDqEyml08OdY0BIct0yLSPkDTqn4i6czpBLLw==}
+  /@rollup/rollup-linux-arm-gnueabihf@4.17.2:
+    resolution: {integrity: sha512-3reX2fUHqN7sffBNqmEyMQVj/CKhIHZd4y631duy0hZqI8Qoqf6lTtmAKvJFYa6bhU95B1D0WgzHkmTg33In0A==}
     cpu: [arm]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-arm64-gnu@4.13.1:
-    resolution: {integrity: sha512-bur4JOxvYxfrAmocRJIW0SADs3QdEYK6TQ7dTNz6Z4/lySeu3Z1H/+tl0a4qDYv0bCdBpUYM0sYa/X+9ZqgfSQ==}
+  /@rollup/rollup-linux-arm-musleabihf@4.17.2:
+    resolution: {integrity: sha512-uSqpsp91mheRgw96xtyAGP9FW5ChctTFEoXP0r5FAzj/3ZRv3Uxjtc7taRQSaQM/q85KEKjKsZuiZM3GyUivRg==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-gnu@4.17.2:
+    resolution: {integrity: sha512-EMMPHkiCRtE8Wdk3Qhtciq6BndLtstqZIroHiiGzB3C5LDJmIZcSzVtLRbwuXuUft1Cnv+9fxuDtDxz3k3EW2A==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-arm64-musl@4.13.1:
-    resolution: {integrity: sha512-ssp77SjcDIUSoUyj7DU7/5iwM4ZEluY+N8umtCT9nBRs3u045t0KkW02LTyHouHDomnMXaXSZcCSr2bdMK63kA==}
+  /@rollup/rollup-linux-arm64-musl@4.17.2:
+    resolution: {integrity: sha512-NMPylUUZ1i0z/xJUIx6VUhISZDRT+uTWpBcjdv0/zkp7b/bQDF+NfnfdzuTiB1G6HTodgoFa93hp0O1xl+/UbA==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-riscv64-gnu@4.13.1:
-    resolution: {integrity: sha512-Jv1DkIvwEPAb+v25/Unrnnq9BO3F5cbFPT821n3S5litkz+O5NuXuNhqtPx5KtcwOTtaqkTsO+IVzJOsxd11aQ==}
+  /@rollup/rollup-linux-powerpc64le-gnu@4.17.2:
+    resolution: {integrity: sha512-T19My13y8uYXPw/L/k0JYaX1fJKFT/PWdXiHr8mTbXWxjVF1t+8Xl31DgBBvEKclw+1b00Chg0hxE2O7bTG7GQ==}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-riscv64-gnu@4.17.2:
+    resolution: {integrity: sha512-BOaNfthf3X3fOWAB+IJ9kxTgPmMqPPH5f5k2DcCsRrBIbWnaJCgX2ll77dV1TdSy9SaXTR5iDXRL8n7AnoP5cg==}
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-s390x-gnu@4.13.1:
-    resolution: {integrity: sha512-U564BrhEfaNChdATQaEODtquCC7Ez+8Hxz1h5MAdMYj0AqD0GA9rHCpElajb/sQcaFL6NXmHc5O+7FXpWMa73Q==}
+  /@rollup/rollup-linux-s390x-gnu@4.17.2:
+    resolution: {integrity: sha512-W0UP/x7bnn3xN2eYMql2T/+wpASLE5SjObXILTMPUBDB/Fg/FxC+gX4nvCfPBCbNhz51C+HcqQp2qQ4u25ok6g==}
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-x64-gnu@4.13.1:
-    resolution: {integrity: sha512-zGRDulLTeDemR8DFYyFIQ8kMP02xpUsX4IBikc7lwL9PrwR3gWmX2NopqiGlI2ZVWMl15qZeUjumTwpv18N7sQ==}
+  /@rollup/rollup-linux-x64-gnu@4.17.2:
+    resolution: {integrity: sha512-Hy7pLwByUOuyaFC6mAr7m+oMC+V7qyifzs/nW2OJfC8H4hbCzOX07Ov0VFk/zP3kBsELWNFi7rJtgbKYsav9QQ==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-linux-x64-musl@4.13.1:
-    resolution: {integrity: sha512-VTk/MveyPdMFkYJJPCkYBw07KcTkGU2hLEyqYMsU4NjiOfzoaDTW9PWGRsNwiOA3qI0k/JQPjkl/4FCK1smskQ==}
+  /@rollup/rollup-linux-x64-musl@4.17.2:
+    resolution: {integrity: sha512-h1+yTWeYbRdAyJ/jMiVw0l6fOOm/0D1vNLui9iPuqgRGnXA0u21gAqOyB5iHjlM9MMfNOm9RHCQ7zLIzT0x11Q==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-win32-arm64-msvc@4.13.1:
-    resolution: {integrity: sha512-L+hX8Dtibb02r/OYCsp4sQQIi3ldZkFI0EUkMTDwRfFykXBPptoz/tuuGqEd3bThBSLRWPR6wsixDSgOx/U3Zw==}
+  /@rollup/rollup-win32-arm64-msvc@4.17.2:
+    resolution: {integrity: sha512-tmdtXMfKAjy5+IQsVtDiCfqbynAQE/TQRpWdVataHmhMb9DCoJxp9vLcCBjEQWMiUYxO1QprH/HbY9ragCEFLA==}
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-win32-ia32-msvc@4.13.1:
-    resolution: {integrity: sha512-+dI2jVPfM5A8zme8riEoNC7UKk0Lzc7jCj/U89cQIrOjrZTCWZl/+IXUeRT2rEZ5j25lnSA9G9H1Ob9azaF/KQ==}
+  /@rollup/rollup-win32-ia32-msvc@4.17.2:
+    resolution: {integrity: sha512-7II/QCSTAHuE5vdZaQEwJq2ZACkBpQDOmQsE6D6XUbnBHW8IAhm4eTufL6msLJorzrHDFv3CF8oCA/hSIRuZeQ==}
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/rollup-win32-x64-msvc@4.13.1:
-    resolution: {integrity: sha512-YY1Exxo2viZ/O2dMHuwQvimJ0SqvL+OAWQLLY6rvXavgQKjhQUzn7nc1Dd29gjB5Fqi00nrBWctJBOyfVMIVxw==}
+  /@rollup/rollup-win32-x64-msvc@4.17.2:
+    resolution: {integrity: sha512-TGGO7v7qOq4CYmSBVEYpI1Y5xDuCEnbVC5Vth8mOsW0gDSzxNrVERPc790IGHsrT2dQSimgMr9Ub3Y1Jci5/8w==}
     cpu: [x64]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rushstack/node-core-library@4.0.2(@types/node@20.11.30):
+  /@rushstack/node-core-library@4.0.2(@types/node@20.12.10):
     resolution: {integrity: sha512-hyES82QVpkfQMeBMteQUnrhASL/KHPhd7iJ8euduwNJG4mu2GSOKybf0rOEjOm1Wz7CwJEUm9y0yD7jg2C1bfg==}
     peerDependencies:
       '@types/node': '*'
@@ -4296,7 +4149,7 @@ packages:
       '@types/node':
         optional: true
     dependencies:
-      '@types/node': 20.11.30
+      '@types/node': 20.12.10
       fs-extra: 7.0.1
       import-lazy: 4.0.0
       jju: 1.4.0
@@ -4312,7 +4165,7 @@ packages:
       strip-json-comments: 3.1.1
     dev: true
 
-  /@rushstack/terminal@0.10.0(@types/node@20.11.30):
+  /@rushstack/terminal@0.10.0(@types/node@20.12.10):
     resolution: {integrity: sha512-UbELbXnUdc7EKwfH2sb8ChqNgapUOdqcCIdQP4NGxBpTZV2sQyeekuK3zmfQSa/MN+/7b4kBogl2wq0vpkpYGw==}
     peerDependencies:
       '@types/node': '*'
@@ -4320,15 +4173,15 @@ packages:
       '@types/node':
         optional: true
     dependencies:
-      '@rushstack/node-core-library': 4.0.2(@types/node@20.11.30)
-      '@types/node': 20.11.30
+      '@rushstack/node-core-library': 4.0.2(@types/node@20.12.10)
+      '@types/node': 20.12.10
       supports-color: 8.1.1
     dev: true
 
-  /@rushstack/ts-command-line@4.19.1(@types/node@20.11.30):
+  /@rushstack/ts-command-line@4.19.1(@types/node@20.12.10):
     resolution: {integrity: sha512-J7H768dgcpG60d7skZ5uSSwyCZs/S2HrWP1Ds8d1qYAyaaeJmpmmLr9BVw97RjFzmQPOYnoXcKA4GkqDCkduQg==}
     dependencies:
-      '@rushstack/terminal': 0.10.0(@types/node@20.11.30)
+      '@rushstack/terminal': 0.10.0(@types/node@20.12.10)
       '@types/argparse': 1.0.38
       argparse: 1.0.10
       string-argv: 0.3.2
@@ -4350,14 +4203,14 @@ packages:
       p-map: 4.0.0
     dev: true
 
-  /@socket.io/component-emitter@3.1.0:
-    resolution: {integrity: sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==}
+  /@socket.io/component-emitter@3.1.2:
+    resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
     dev: false
 
-  /@storybook/addon-actions@8.0.4:
-    resolution: {integrity: sha512-EyCWo+8T11/TJGYNL/AXtW4yaB+q1v2E9mixbumryCLxpTl2NtaeGZ4e0dlwfIMuw/7RWgHk2uIypcIPR/UANQ==}
+  /@storybook/addon-actions@8.0.10:
+    resolution: {integrity: sha512-IEuc30UAFl7Ws0GwaY/whjBnGaViVEVjmPc+MXUym2wwwJbnCbI+BKJxPoYi/I7QJb5aUNToAE6pl2pDda2g3Q==}
     dependencies:
-      '@storybook/core-events': 8.0.4
+      '@storybook/core-events': 8.0.10
       '@storybook/global': 5.0.0
       '@types/uuid': 9.0.8
       dequal: 2.0.3
@@ -4365,18 +4218,18 @@ packages:
       uuid: 9.0.1
     dev: true
 
-  /@storybook/addon-backgrounds@8.0.4:
-    resolution: {integrity: sha512-fef0KD2GhJx2zpicOf8iL7k2LiIsNzEbGaQpIIjoy4DMqM1hIfNCt3DGTLH7LN5O8G+NVCLS1xmQg7RLvIVSCA==}
+  /@storybook/addon-backgrounds@8.0.10:
+    resolution: {integrity: sha512-445SUQqOH5xFJWlNeMu74FEgk26O9Zm/5aqnvmeteB0Q2JLaw7k2q9i/W6XFu97QkRxqA1EGbDxLR3+e1xCjaA==}
     dependencies:
       '@storybook/global': 5.0.0
       memoizerific: 1.11.3
       ts-dedent: 2.2.0
     dev: true
 
-  /@storybook/addon-controls@8.0.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-K5EYBTsUOTJlvIdA7p6Xj31wnV+RbZAkk56UKQvA7nJD7oDuLOq3E9u46F/uZD1vxddd9zFhf2iONfMe3KTTwQ==}
+  /@storybook/addon-controls@8.0.10(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-MAUtIJGayNSsfn3VZ6SjQwpRkb4ky+10oVfos+xX9GQ5+7RCs+oYMuE4+aiQvvfXNdV8v0pUGPUPeUzqfJmhOA==}
     dependencies:
-      '@storybook/blocks': 8.0.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/blocks': 8.0.10(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
       lodash: 4.17.21
       ts-dedent: 2.2.0
     transitivePeerDependencies:
@@ -4387,26 +4240,26 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/addon-docs@8.0.4:
-    resolution: {integrity: sha512-m0Y7qGAMnNPLEOEgzW/SBm8GX0xabJBaRN+aYijO6UKTln7F6oXXVve+xPC0Y4s6Gc9HZFdJY8WXZr1YSGEUVA==}
+  /@storybook/addon-docs@8.0.10:
+    resolution: {integrity: sha512-y+Agoez/hXZHKUMIZHU96T5V1v0cs4ArSNfjqDg9DPYcyQ88ihJNb6ZabIgzmEaJF/NncCW+LofWeUtkTwalkw==}
     dependencies:
-      '@babel/core': 7.24.3
-      '@mdx-js/react': 3.0.1(@types/react@18.2.73)(react@18.2.0)
-      '@storybook/blocks': 8.0.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/client-logger': 8.0.4
-      '@storybook/components': 8.0.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/csf-plugin': 8.0.4
-      '@storybook/csf-tools': 8.0.4
+      '@babel/core': 7.24.5
+      '@mdx-js/react': 3.0.1(@types/react@18.3.1)(react@18.3.1)
+      '@storybook/blocks': 8.0.10(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
+      '@storybook/client-logger': 8.0.10
+      '@storybook/components': 8.0.10(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
+      '@storybook/csf-plugin': 8.0.10
+      '@storybook/csf-tools': 8.0.10
       '@storybook/global': 5.0.0
-      '@storybook/node-logger': 8.0.4
-      '@storybook/preview-api': 8.0.4
-      '@storybook/react-dom-shim': 8.0.4(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/theming': 8.0.4(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 8.0.4
-      '@types/react': 18.2.73
+      '@storybook/node-logger': 8.0.10
+      '@storybook/preview-api': 8.0.10
+      '@storybook/react-dom-shim': 8.0.10(react-dom@18.3.1)(react@18.3.1)
+      '@storybook/theming': 8.0.10(react-dom@18.3.1)(react@18.3.1)
+      '@storybook/types': 8.0.10
+      '@types/react': 18.3.1
       fs-extra: 11.2.0
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
       rehype-external-links: 3.0.0
       rehype-slug: 6.0.0
       ts-dedent: 2.2.0
@@ -4415,22 +4268,22 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/addon-essentials@8.0.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-mUIqhAkSz6Qv7nRqAAyCqMLiXBWVsY/8qN7HEIoaMQgdFq38KW3rYwNdzd2JLeXNWP1bBXwfvfcFe7/eqhYJFA==}
+  /@storybook/addon-essentials@8.0.10(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-Uy3+vm7QX+b/9rhW/iFa3EYAAbV1T2LljY9Bj4aTPZHas9Bpvl5ZPnOm/PhybcE8UFHEoVTJ0v3uWb0dsUEigw==}
     dependencies:
-      '@storybook/addon-actions': 8.0.4
-      '@storybook/addon-backgrounds': 8.0.4
-      '@storybook/addon-controls': 8.0.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/addon-docs': 8.0.4
-      '@storybook/addon-highlight': 8.0.4
-      '@storybook/addon-measure': 8.0.4
-      '@storybook/addon-outline': 8.0.4
-      '@storybook/addon-toolbars': 8.0.4
-      '@storybook/addon-viewport': 8.0.4
-      '@storybook/core-common': 8.0.4
-      '@storybook/manager-api': 8.0.4(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/node-logger': 8.0.4
-      '@storybook/preview-api': 8.0.4
+      '@storybook/addon-actions': 8.0.10
+      '@storybook/addon-backgrounds': 8.0.10
+      '@storybook/addon-controls': 8.0.10(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
+      '@storybook/addon-docs': 8.0.10
+      '@storybook/addon-highlight': 8.0.10
+      '@storybook/addon-measure': 8.0.10
+      '@storybook/addon-outline': 8.0.10
+      '@storybook/addon-toolbars': 8.0.10
+      '@storybook/addon-viewport': 8.0.10
+      '@storybook/core-common': 8.0.10
+      '@storybook/manager-api': 8.0.10(react-dom@18.3.1)(react@18.3.1)
+      '@storybook/node-logger': 8.0.10
+      '@storybook/preview-api': 8.0.10
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
@@ -4440,19 +4293,19 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/addon-highlight@8.0.4:
-    resolution: {integrity: sha512-tnEiVaJlXL07v8JBox+QtRPVruoy0YovOTAOWY7fKDiKzF1I9wLaJjQF3wOsvwspHTHu00OZw2gsazgXiH4wLQ==}
+  /@storybook/addon-highlight@8.0.10:
+    resolution: {integrity: sha512-40GB82t1e2LCCjqXcC6Z5lq1yIpA1+Yl5E2tKeggOVwg5HHAX02ESNDdBaIOlCqMkU3WKzjGPurDNOLUAbsV2g==}
     dependencies:
       '@storybook/global': 5.0.0
     dev: true
 
-  /@storybook/addon-interactions@8.0.4(vitest@1.4.0):
-    resolution: {integrity: sha512-wTEOnVUbF1lNJxxocr5IKmpgnmwyO8YsQf6Baw3tTWCHAa/MaWWQYq1OA6CfFfmVGGRjv/w2GTuf1Vyq99O7mg==}
+  /@storybook/addon-interactions@8.0.10(vitest@1.6.0):
+    resolution: {integrity: sha512-6yFNmk6+7082/8TRVyjUsKlwumalEdO0XQ5amPbVGuECzc3HFn0ELwzPrQ4TBlN5MRtX4+buoh5dc/1RUDrh9w==}
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/instrumenter': 8.0.4
-      '@storybook/test': 8.0.4(vitest@1.4.0)
-      '@storybook/types': 8.0.4
+      '@storybook/instrumenter': 8.0.10
+      '@storybook/test': 8.0.10(vitest@1.6.0)
+      '@storybook/types': 8.0.10
       polished: 4.3.1
       ts-dedent: 2.2.0
     transitivePeerDependencies:
@@ -4463,54 +4316,54 @@ packages:
       - vitest
     dev: true
 
-  /@storybook/addon-links@8.0.4(react@18.2.0):
-    resolution: {integrity: sha512-SzE+JPZ4mxjprZqbLHf8Hx7UA2fXfMajFjeY9c3JREKQrDoOF1e4r28nAoVsZYF+frWxQB51U4+hOqjlx06wEA==}
+  /@storybook/addon-links@8.0.10(react@18.3.1):
+    resolution: {integrity: sha512-+mIyH2UcrgQfAyRM4+ARkB/D0OOY8UMwkZsD8dD23APZ8oru7W/NHX3lXl0WjPfQcOIx/QwWNWI3+DgVZJY3jw==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
     peerDependenciesMeta:
       react:
         optional: true
     dependencies:
-      '@storybook/csf': 0.1.3
+      '@storybook/csf': 0.1.7
       '@storybook/global': 5.0.0
-      react: 18.2.0
+      react: 18.3.1
       ts-dedent: 2.2.0
     dev: true
 
-  /@storybook/addon-measure@8.0.4:
-    resolution: {integrity: sha512-GZYKo2ss5Br+dfHinoK3bgTaS90z3oKKDkhv6lrFfjjU1mDYzzMJpxajQhd3apCYxHLr3MbUqMQibWu2T/q2DQ==}
+  /@storybook/addon-measure@8.0.10:
+    resolution: {integrity: sha512-quXQwmZJUhOxDIlbXTH6aKYQkwkDpL0UQRkUZn1xuZ2sVKJeaee73QSWqw8HDD4Rz9huS+OrAdVoq/Cz5FoC6A==}
     dependencies:
       '@storybook/global': 5.0.0
       tiny-invariant: 1.3.3
     dev: true
 
-  /@storybook/addon-outline@8.0.4:
-    resolution: {integrity: sha512-6J9ezNDUxdA3rMCh8sUEQbUwAgkrr+M9QdiFr1t+gKrk5FKP5gwubw1sr3sF1IRB9+s/AjljcOtJAVulSfq05w==}
+  /@storybook/addon-outline@8.0.10:
+    resolution: {integrity: sha512-1eDO2s/vHhhSJo7W5SetqjleUBTZLI08VNP89c4j7vdRKiMZ1DYhr0dqUGIC3w7cDsawI/nQ24wancHHayAnqw==}
     dependencies:
       '@storybook/global': 5.0.0
       ts-dedent: 2.2.0
     dev: true
 
-  /@storybook/addon-storysource@8.0.4:
-    resolution: {integrity: sha512-qFoB/s4vjjHYFJA6rnOVTeXZ99Y4RTXhCjUrrY2B/c9hssZbEyP/oj57ojQsaIENK8ItCoD7sOExqANwx41qqw==}
+  /@storybook/addon-storysource@8.0.10:
+    resolution: {integrity: sha512-LCNgp5pWyI9ZlJMFeN0nvt9gvgHMWneDjfUoAHTOP7Smi0xz4lUDYKB4P53kgE1peHn2+nxAauSBdA1IEFBIRA==}
     dependencies:
-      '@storybook/source-loader': 8.0.4
+      '@storybook/source-loader': 8.0.10
       estraverse: 5.3.0
       tiny-invariant: 1.3.3
     dev: true
 
-  /@storybook/addon-toolbars@8.0.4:
-    resolution: {integrity: sha512-yodRXDYog/90cNEy84kg6s7L+nxQ+egBjHBTsav1L4cJmQI/uAX8yISHHiX4I5ppNc120Jz3UdHdRxXRlo345g==}
+  /@storybook/addon-toolbars@8.0.10:
+    resolution: {integrity: sha512-67HP6mTJU/gjRju01Z5HjeqoRiJMDlrMvMvjGBg7w5+tPNtjYqdelfe2+kcfU+Hf6dfcuqaBDwaUUGSv+RYtRQ==}
     dev: true
 
-  /@storybook/addon-viewport@8.0.4:
-    resolution: {integrity: sha512-E5IKOsxKcOtlOYc0cWgzVJohQB+dVBWwaJcg5FlslToknfVB9M0kfQ/SQcp3KB0C9/cOmJK1Jm388InW+EjrBQ==}
+  /@storybook/addon-viewport@8.0.10:
+    resolution: {integrity: sha512-NJ88Nd/tXreHLyLeF3VP+b8Fu2KtUuJ0L4JYpEMmcdaejGARTrJJOU+pcZBiUqEHFeXQ8rDY8DKXhUJZQFQ1Wg==}
     dependencies:
       memoizerific: 1.11.3
     dev: true
 
-  /@storybook/blocks@8.0.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-9dRXk9zLJVPOmEWsSXm10XUmIfvS/tVgeBgFXNbusFQZXPpexIPNdRgB004pDGg9RvlY78ykpnd3yP143zaXMg==}
+  /@storybook/blocks@8.0.10(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-LOaxvcO2d4dT4YoWlQ0bq/c8qA3aHoqtyuvBjwbVn+359bjMtgj/91YuP9Y2+ggZZ4p+ttgvk39PcmJlNXlJsw==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -4520,30 +4373,30 @@ packages:
       react-dom:
         optional: true
     dependencies:
-      '@storybook/channels': 8.0.4
-      '@storybook/client-logger': 8.0.4
-      '@storybook/components': 8.0.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/core-events': 8.0.4
-      '@storybook/csf': 0.1.3
-      '@storybook/docs-tools': 8.0.4
+      '@storybook/channels': 8.0.10
+      '@storybook/client-logger': 8.0.10
+      '@storybook/components': 8.0.10(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
+      '@storybook/core-events': 8.0.10
+      '@storybook/csf': 0.1.7
+      '@storybook/docs-tools': 8.0.10
       '@storybook/global': 5.0.0
-      '@storybook/icons': 1.2.9(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/manager-api': 8.0.4(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/preview-api': 8.0.4
-      '@storybook/theming': 8.0.4(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 8.0.4
-      '@types/lodash': 4.17.0
+      '@storybook/icons': 1.2.9(react-dom@18.3.1)(react@18.3.1)
+      '@storybook/manager-api': 8.0.10(react-dom@18.3.1)(react@18.3.1)
+      '@storybook/preview-api': 8.0.10
+      '@storybook/theming': 8.0.10(react-dom@18.3.1)(react@18.3.1)
+      '@storybook/types': 8.0.10
+      '@types/lodash': 4.17.1
       color-convert: 2.0.1
       dequal: 2.0.3
       lodash: 4.17.21
-      markdown-to-jsx: 7.3.2(react@18.2.0)
+      markdown-to-jsx: 7.3.2(react@18.3.1)
       memoizerific: 1.11.3
       polished: 4.3.1
-      react: 18.2.0
-      react-colorful: 5.6.1(react-dom@18.2.0)(react@18.2.0)
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-colorful: 5.6.1(react-dom@18.3.1)(react@18.3.1)
+      react-dom: 18.3.1(react@18.3.1)
       telejson: 7.2.0
-      tocbot: 4.25.0
+      tocbot: 4.27.19
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
     transitivePeerDependencies:
@@ -4552,17 +4405,17 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/builder-manager@8.0.4:
-    resolution: {integrity: sha512-BafYVxq77uuTmXdjYo5by42OyOrb6qcpWYKva3ntWK2ZhTaLJlwwqAOdahT1DVzi4VeUP6465YvsTCzIE8fuIw==}
+  /@storybook/builder-manager@8.0.10:
+    resolution: {integrity: sha512-lo57jeeYuYCKYrmGOdLg25rMyiGYSTwJ+zYsQ3RvClVICjP6X0I1RCKAJDzkI0BixH6s1+w5ynD6X3PtDnhUuw==}
     dependencies:
       '@fal-works/esbuild-plugin-global-externals': 2.1.2
-      '@storybook/core-common': 8.0.4
-      '@storybook/manager': 8.0.4
-      '@storybook/node-logger': 8.0.4
+      '@storybook/core-common': 8.0.10
+      '@storybook/manager': 8.0.10
+      '@storybook/node-logger': 8.0.10
       '@types/ejs': 3.1.5
       '@yarnpkg/esbuild-plugin-pnp': 3.0.0-rc.15(esbuild@0.20.2)
       browser-assert: 1.2.1
-      ejs: 3.1.9
+      ejs: 3.1.10
       esbuild: 0.20.2
       esbuild-plugin-alias: 0.2.1
       express: 4.19.2
@@ -4574,8 +4427,8 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/builder-vite@8.0.4(typescript@5.4.3)(vite@5.2.6):
-    resolution: {integrity: sha512-Whb001bGkoGQ6/byp9QTQJ4NO61Qa5bh1p5WEEMJ5wYvHm83b+B/IwwilUfU5mL9bJB/RjbwyKcSQqGP6AxMzA==}
+  /@storybook/builder-vite@8.0.10(typescript@5.4.5)(vite@5.2.11):
+    resolution: {integrity: sha512-Rod/2jYvF4Ng1MjIMZEXe/3z0lPuxkRtetCTr3ECPgi83lHXpHJ+N0NVfJEMs+pXsVqkLP3iGt2hLn6D6yFMwA==}
     peerDependencies:
       '@preact/preset-vite': '*'
       typescript: '>= 4.3.x'
@@ -4589,55 +4442,55 @@ packages:
       vite-plugin-glimmerx:
         optional: true
     dependencies:
-      '@storybook/channels': 8.0.4
-      '@storybook/client-logger': 8.0.4
-      '@storybook/core-common': 8.0.4
-      '@storybook/core-events': 8.0.4
-      '@storybook/csf-plugin': 8.0.4
-      '@storybook/node-logger': 8.0.4
-      '@storybook/preview': 8.0.4
-      '@storybook/preview-api': 8.0.4
-      '@storybook/types': 8.0.4
+      '@storybook/channels': 8.0.10
+      '@storybook/client-logger': 8.0.10
+      '@storybook/core-common': 8.0.10
+      '@storybook/core-events': 8.0.10
+      '@storybook/csf-plugin': 8.0.10
+      '@storybook/node-logger': 8.0.10
+      '@storybook/preview': 8.0.10
+      '@storybook/preview-api': 8.0.10
+      '@storybook/types': 8.0.10
       '@types/find-cache-dir': 3.2.1
       browser-assert: 1.2.1
       es-module-lexer: 0.9.3
       express: 4.19.2
       find-cache-dir: 3.3.2
       fs-extra: 11.2.0
-      magic-string: 0.30.8
+      magic-string: 0.30.10
       ts-dedent: 2.2.0
-      typescript: 5.4.3
-      vite: 5.2.6(@types/node@20.11.30)
+      typescript: 5.4.5
+      vite: 5.2.11(@types/node@20.12.10)
     transitivePeerDependencies:
       - encoding
       - supports-color
     dev: true
 
-  /@storybook/channels@8.0.4:
-    resolution: {integrity: sha512-haKV+8RbiSzLjicowUfc7h2fTClZHX/nz9SRUecf4IEZUEu2T78OgM/TzqZvL7rA3+/fKqp5iI+3PN3OA75Sdg==}
+  /@storybook/channels@8.0.10:
+    resolution: {integrity: sha512-3JLxfD7czlx31dAGvAYJ4J4BNE/Y2+hhj/dsV3xlQTHKVpnWknaoeYEC1a6YScyfsH6W+XmP2rzZKzH4EkLSGQ==}
     dependencies:
-      '@storybook/client-logger': 8.0.4
-      '@storybook/core-events': 8.0.4
+      '@storybook/client-logger': 8.0.10
+      '@storybook/core-events': 8.0.10
       '@storybook/global': 5.0.0
       telejson: 7.2.0
       tiny-invariant: 1.3.3
     dev: true
 
-  /@storybook/cli@8.0.4(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-8jb8hrulRMfyFyNXFEapxHBS51xb42ZZGfVAacXIsHOJtjOd5CnOoSUYn0aOkVl19VF/snoa9JOW7BaW/50Eqw==}
+  /@storybook/cli@8.0.10(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-KUZEO2lyvOS2sRJEFXovt6+5b65iWsh7F8e8S1cM20fCM1rZAlWtwmoxmDVXDmyEp0wTrq4FrRxKnbo9UO518w==}
     hasBin: true
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/types': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/types': 7.24.5
       '@ndelangen/get-tarball': 3.0.9
-      '@storybook/codemod': 8.0.4
-      '@storybook/core-common': 8.0.4
-      '@storybook/core-events': 8.0.4
-      '@storybook/core-server': 8.0.4(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/csf-tools': 8.0.4
-      '@storybook/node-logger': 8.0.4
-      '@storybook/telemetry': 8.0.4
-      '@storybook/types': 8.0.4
+      '@storybook/codemod': 8.0.10
+      '@storybook/core-common': 8.0.10
+      '@storybook/core-events': 8.0.10
+      '@storybook/core-server': 8.0.10(react-dom@18.3.1)(react@18.3.1)
+      '@storybook/csf-tools': 8.0.10
+      '@storybook/node-logger': 8.0.10
+      '@storybook/telemetry': 8.0.10
+      '@storybook/types': 8.0.10
       '@types/semver': 7.5.8
       '@yarnpkg/fslib': 2.10.3
       '@yarnpkg/libzip': 2.3.0
@@ -4645,14 +4498,14 @@ packages:
       commander: 6.2.1
       cross-spawn: 7.0.3
       detect-indent: 6.1.0
-      envinfo: 7.11.1
+      envinfo: 7.13.0
       execa: 5.1.1
       find-up: 5.0.0
       fs-extra: 11.2.0
       get-npm-tarball-url: 2.1.0
       giget: 1.2.3
       globby: 11.1.0
-      jscodeshift: 0.15.2(@babel/preset-env@7.24.3)
+      jscodeshift: 0.15.2(@babel/preset-env@7.24.5)
       leven: 3.1.0
       ora: 5.4.1
       prettier: 3.2.5
@@ -4673,26 +4526,26 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@storybook/client-logger@8.0.4:
-    resolution: {integrity: sha512-2SeEg3PT/d0l/+EAVtyj9hmMLTyTPp+bRBSzxYouBjtJPM1jrdKpFagj1o3uBRovwWm9SIVX6/ZsoRC33PEV1g==}
+  /@storybook/client-logger@8.0.10:
+    resolution: {integrity: sha512-u38SbZNAunZzxZNHMJb9jkUwFkLyWxmvp4xtiRM3u9sMUShXoTnzbw1yKrxs+kYJjg+58UQPZ1JhEBRcHt5Oww==}
     dependencies:
       '@storybook/global': 5.0.0
     dev: true
 
-  /@storybook/codemod@8.0.4:
-    resolution: {integrity: sha512-bysG46P4wjlR3RCpr/ntNAUaupWpzLcWYWti3iNtIyZ/iPrX6KtXoA9QCIwJZrlv41us6F+KEZbzLzkgWbymtQ==}
+  /@storybook/codemod@8.0.10:
+    resolution: {integrity: sha512-t45jKGs/eyR/nKVX6QgRtMZSAjJo5aXWWk3B24xVbW6ywr0jt1LC100FkHG4Af8cApIfh8uUmS9X05hMG5zGGA==}
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/preset-env': 7.24.3(@babel/core@7.24.3)
-      '@babel/types': 7.24.0
-      '@storybook/csf': 0.1.3
-      '@storybook/csf-tools': 8.0.4
-      '@storybook/node-logger': 8.0.4
-      '@storybook/types': 8.0.4
+      '@babel/core': 7.24.5
+      '@babel/preset-env': 7.24.5(@babel/core@7.24.5)
+      '@babel/types': 7.24.5
+      '@storybook/csf': 0.1.7
+      '@storybook/csf-tools': 8.0.10
+      '@storybook/node-logger': 8.0.10
+      '@storybook/types': 8.0.10
       '@types/cross-spawn': 6.0.6
       cross-spawn: 7.0.3
       globby: 11.1.0
-      jscodeshift: 0.15.2(@babel/preset-env@7.24.3)
+      jscodeshift: 0.15.2(@babel/preset-env@7.24.5)
       lodash: 4.17.21
       prettier: 3.2.5
       recast: 0.23.6
@@ -4701,34 +4554,34 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/components@8.0.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-i5ngl5GTOLB9nZ1cmpxTjtWct5IuH9UxzFC73a0jHMkCwN26w16IqufRVDaoQv0AvZN4pd4fNM2in/XVHA10dw==}
+  /@storybook/components@8.0.10(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-eo+oDDcm35YBB3dtDYDfcjJypNVPmRty85VWpAOBsJXpwp/fgU8csx0DM3KmhrQ4cWLf2WzcFowJwI1w+J88Sw==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.73)(react@18.2.0)
-      '@storybook/client-logger': 8.0.4
-      '@storybook/csf': 0.1.3
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.3.1)(react@18.3.1)
+      '@storybook/client-logger': 8.0.10
+      '@storybook/csf': 0.1.7
       '@storybook/global': 5.0.0
-      '@storybook/icons': 1.2.9(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/theming': 8.0.4(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 8.0.4
+      '@storybook/icons': 1.2.9(react-dom@18.3.1)(react@18.3.1)
+      '@storybook/theming': 8.0.10(react-dom@18.3.1)(react@18.3.1)
+      '@storybook/types': 8.0.10
       memoizerific: 1.11.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
       util-deprecate: 1.0.2
     transitivePeerDependencies:
       - '@types/react'
     dev: true
 
-  /@storybook/core-common@8.0.4:
-    resolution: {integrity: sha512-dzFRLm5FxUa2EFE6Rx/KLDTJNLBIp1S2/+Q1K+rG8V+CLvewCc2Cd486rStZqSXEKI7vDnsRs/aMla+N0X/++Q==}
+  /@storybook/core-common@8.0.10:
+    resolution: {integrity: sha512-hsFlPieputaDQoxstnPa3pykTc4bUwEDgCHf8U43+/Z7qmLOQ9fpG+2CFW930rsCRghYpPreOvsmhY7lsGKWLQ==}
     dependencies:
-      '@storybook/core-events': 8.0.4
-      '@storybook/csf-tools': 8.0.4
-      '@storybook/node-logger': 8.0.4
-      '@storybook/types': 8.0.4
+      '@storybook/core-events': 8.0.10
+      '@storybook/csf-tools': 8.0.10
+      '@storybook/node-logger': 8.0.10
+      '@storybook/types': 8.0.10
       '@yarnpkg/fslib': 2.10.3
       '@yarnpkg/libzip': 2.3.0
       chalk: 4.1.2
@@ -4740,7 +4593,7 @@ packages:
       find-cache-dir: 3.3.2
       find-up: 5.0.0
       fs-extra: 11.2.0
-      glob: 10.3.10
+      glob: 10.3.12
       handlebars: 4.7.8
       lazy-universal-dotenv: 4.0.0
       node-fetch: 2.7.0
@@ -4758,34 +4611,34 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/core-events@8.0.4:
-    resolution: {integrity: sha512-1FgLacIGi9i6/fyxw7ZJDC621RK47IMaA3keH4lc11ASRzCSwJ4YOrXjBFjfPc79EF2BuX72DDJNbhj6ynfF3g==}
+  /@storybook/core-events@8.0.10:
+    resolution: {integrity: sha512-TuHPS6p5ZNr4vp4butLb4R98aFx0NRYCI/7VPhJEUH5rPiqNzE3PZd8DC8rnVxavsJ+jO1/y+egNKXRYkEcoPQ==}
     dependencies:
       ts-dedent: 2.2.0
     dev: true
 
-  /@storybook/core-server@8.0.4(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-/633Pp7LPcDWXkPLSW+W9VUYUbVkdVBG6peXjuzogV0vzdM0dM9af/T0uV2NQxUhzoy6/7QdSDljE+eEOBs2Lw==}
+  /@storybook/core-server@8.0.10(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-HYDw2QFBxg1X/d6g0rUhirOB5Jq6g90HBnyrZzxKoqKWJCNsCADSgM+h9HgtUw0jA97qBpIqmNO9n3mXFPWU/Q==}
     dependencies:
       '@aw-web-design/x-default-browser': 1.4.126
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
       '@discoveryjs/json-ext': 0.5.7
-      '@storybook/builder-manager': 8.0.4
-      '@storybook/channels': 8.0.4
-      '@storybook/core-common': 8.0.4
-      '@storybook/core-events': 8.0.4
-      '@storybook/csf': 0.1.3
-      '@storybook/csf-tools': 8.0.4
+      '@storybook/builder-manager': 8.0.10
+      '@storybook/channels': 8.0.10
+      '@storybook/core-common': 8.0.10
+      '@storybook/core-events': 8.0.10
+      '@storybook/csf': 0.1.7
+      '@storybook/csf-tools': 8.0.10
       '@storybook/docs-mdx': 3.0.0
       '@storybook/global': 5.0.0
-      '@storybook/manager': 8.0.4
-      '@storybook/manager-api': 8.0.4(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/node-logger': 8.0.4
-      '@storybook/preview-api': 8.0.4
-      '@storybook/telemetry': 8.0.4
-      '@storybook/types': 8.0.4
+      '@storybook/manager': 8.0.10
+      '@storybook/manager-api': 8.0.10(react-dom@18.3.1)(react@18.3.1)
+      '@storybook/node-logger': 8.0.10
+      '@storybook/preview-api': 8.0.10
+      '@storybook/telemetry': 8.0.10
+      '@storybook/types': 8.0.10
       '@types/detect-port': 1.3.5
-      '@types/node': 18.19.26
+      '@types/node': 18.19.32
       '@types/pretty-hrtime': 1.0.3
       '@types/semver': 7.5.8
       better-opn: 3.0.2
@@ -4809,7 +4662,7 @@ packages:
       util: 0.12.5
       util-deprecate: 1.0.2
       watchpack: 2.4.1
-      ws: 8.16.0
+      ws: 8.17.0
     transitivePeerDependencies:
       - bufferutil
       - encoding
@@ -4819,24 +4672,24 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@storybook/csf-plugin@8.0.4:
-    resolution: {integrity: sha512-pEgctWuS/qeKMFZJJUM2JuKwjKBt27ye+216ft7xhNqpsrmCgumJYrkU/ii2CsFJU/qr5Fu9EYw+N+vof1OalQ==}
+  /@storybook/csf-plugin@8.0.10:
+    resolution: {integrity: sha512-0EsyEx/06sCjI8sn40r7cABtBU1vUKPMPD+S5mJiZymm73BgdARj0qZOlLoK2LP+t2pcaB/Cn7KX/uyhhv7M2g==}
     dependencies:
-      '@storybook/csf-tools': 8.0.4
-      unplugin: 1.10.0
+      '@storybook/csf-tools': 8.0.10
+      unplugin: 1.10.1
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@storybook/csf-tools@8.0.4:
-    resolution: {integrity: sha512-dMSZxWnXBhmXGOZZOAJ4DKZRCYdA0HaqqZ4/eF9MLLsI+qvW4EklcpjVY6bsIzACgubRWtRZkTpxTnjExi/N1A==}
+  /@storybook/csf-tools@8.0.10:
+    resolution: {integrity: sha512-xUc6fVIKoCujf/7JZhkYjrVXeNsTSoDrZFNmqLEmtfktJVqYdXY4LuSAtlBmAIyETi09ULTuuVexrcKFwjzuBA==}
     dependencies:
-      '@babel/generator': 7.24.1
-      '@babel/parser': 7.24.1
-      '@babel/traverse': 7.24.1
-      '@babel/types': 7.24.0
-      '@storybook/csf': 0.1.3
-      '@storybook/types': 8.0.4
+      '@babel/generator': 7.24.5
+      '@babel/parser': 7.24.5
+      '@babel/traverse': 7.24.5
+      '@babel/types': 7.24.5
+      '@storybook/csf': 0.1.7
+      '@storybook/types': 8.0.10
       fs-extra: 11.2.0
       recast: 0.23.6
       ts-dedent: 2.2.0
@@ -4850,8 +4703,8 @@ packages:
       lodash: 4.17.21
     dev: true
 
-  /@storybook/csf@0.1.3:
-    resolution: {integrity: sha512-IPZvXXo4b3G+gpmgBSBqVM81jbp2ePOKsvhgJdhyZJtkYQCII7rg9KKLQhvBQM5sLaF1eU6r0iuwmyynC9d9SA==}
+  /@storybook/csf@0.1.7:
+    resolution: {integrity: sha512-53JeLZBibjQxi0Ep+/AJTfxlofJlxy1jXcSKENlnKxHjWEYyHQCumMP5yTFjf7vhNnMjEpV3zx6t23ssFiGRyw==}
     dependencies:
       type-fest: 2.19.0
     dev: true
@@ -4860,12 +4713,13 @@ packages:
     resolution: {integrity: sha512-NmiGXl2HU33zpwTv1XORe9XG9H+dRUC1Jl11u92L4xr062pZtrShLmD4VKIsOQujxhhOrbxpwhNOt+6TdhyIdQ==}
     dev: true
 
-  /@storybook/docs-tools@8.0.4:
-    resolution: {integrity: sha512-PONfG8j/AOHi79NbEkneFRZIscrShbA0sgA+62zeejH4r9+fuIkIKtLnKcAxvr8Bm6uo9aSQbISJZUcBG42WhQ==}
+  /@storybook/docs-tools@8.0.10:
+    resolution: {integrity: sha512-rg9KS81vEh13VMr4mAgs+7L4kYqoRtG7kVfV1WHxzJxjR3wYcVR0kP9gPTWV4Xha/TA3onHu9sxKxMTWha0urQ==}
     dependencies:
-      '@storybook/core-common': 8.0.4
-      '@storybook/preview-api': 8.0.4
-      '@storybook/types': 8.0.4
+      '@storybook/core-common': 8.0.10
+      '@storybook/core-events': 8.0.10
+      '@storybook/preview-api': 8.0.10
+      '@storybook/types': 8.0.10
       '@types/doctrine': 0.0.3
       assert: 2.1.0
       doctrine: 3.0.0
@@ -4879,41 +4733,41 @@ packages:
     resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
     dev: true
 
-  /@storybook/icons@1.2.9(react-dom@18.2.0)(react@18.2.0):
+  /@storybook/icons@1.2.9(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-cOmylsz25SYXaJL/gvTk/dl3pyk7yBFRfeXTsHvTA3dfhoU/LWSq0NKL9nM7WBasJyn6XPSGnLS4RtKXLw5EUg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: true
 
-  /@storybook/instrumenter@8.0.4:
-    resolution: {integrity: sha512-lkHv1na12oMTZvuDbzufgqrtFlV1XqdXrAAg7YXZOia/oMz6Z/XMldEqwLPUCLGVodbFJofrpE67Wtw8dNTDQg==}
+  /@storybook/instrumenter@8.0.10:
+    resolution: {integrity: sha512-6IYjWeQFA5x68xRoW5dU4yAc1Hwq1ZBkZbXVgJbr5LJw5x+y8eKdZzIaOmSsSKOI96R7J5YWWd2WA1Q0nRurtg==}
     dependencies:
-      '@storybook/channels': 8.0.4
-      '@storybook/client-logger': 8.0.4
-      '@storybook/core-events': 8.0.4
+      '@storybook/channels': 8.0.10
+      '@storybook/client-logger': 8.0.10
+      '@storybook/core-events': 8.0.10
       '@storybook/global': 5.0.0
-      '@storybook/preview-api': 8.0.4
-      '@vitest/utils': 1.4.0
+      '@storybook/preview-api': 8.0.10
+      '@vitest/utils': 1.6.0
       util: 0.12.5
     dev: true
 
-  /@storybook/manager-api@8.0.4(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-TudiRmWlsi8kdjwqW0DDLen76Zp4Sci/AnvTbZvZOWe8C2mruxcr6aaGwuIug6y+uxIyXDvURF6Cek5Twz4isg==}
+  /@storybook/manager-api@8.0.10(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-LLu6YKQLWf5QB3h3RO8IevjLrSOew7aidIQPr9DIr9xC8wA7N2fQabr+qrJdE306p3cHZ0nzhYNYZxSjm4Dvdw==}
     dependencies:
-      '@storybook/channels': 8.0.4
-      '@storybook/client-logger': 8.0.4
-      '@storybook/core-events': 8.0.4
-      '@storybook/csf': 0.1.3
+      '@storybook/channels': 8.0.10
+      '@storybook/client-logger': 8.0.10
+      '@storybook/core-events': 8.0.10
+      '@storybook/csf': 0.1.7
       '@storybook/global': 5.0.0
-      '@storybook/icons': 1.2.9(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/router': 8.0.4
-      '@storybook/theming': 8.0.4(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 8.0.4
+      '@storybook/icons': 1.2.9(react-dom@18.3.1)(react@18.3.1)
+      '@storybook/router': 8.0.10
+      '@storybook/theming': 8.0.10(react-dom@18.3.1)(react@18.3.1)
+      '@storybook/types': 8.0.10
       dequal: 2.0.3
       lodash: 4.17.21
       memoizerific: 1.11.3
@@ -4925,68 +4779,68 @@ packages:
       - react-dom
     dev: true
 
-  /@storybook/manager@8.0.4:
-    resolution: {integrity: sha512-M5IofDSxbIQIdAglxUtZOGKjZ1EAq1Mdbh4UolVsF1PKF6dAvBQJLVW6TiLjEbmPBtqgeYKMgrmmYiFNqVcdBQ==}
+  /@storybook/manager@8.0.10:
+    resolution: {integrity: sha512-bojGglUQNry48L4siURc2zQKswavLzMh69rqsfL3ZXx+i+USfRfB7593azTlaZh0q6HO4bUAjB24RfQCyifLLQ==}
     dev: true
 
-  /@storybook/node-logger@8.0.4:
-    resolution: {integrity: sha512-cALLHuX53vLQsoJamGRlquh2pfhPq9copXou2JTmFT6mrCcipo77SzhBDfeeuhaGv6vUWPfmGjPBEHXWGPe4+g==}
+  /@storybook/node-logger@8.0.10:
+    resolution: {integrity: sha512-UMmaUaA3VOX/mKLsSvOnbZre2/1tZ6hazA6H0eAnClKb51jRD1AJrsBYK+uHr/CAp7t710bB5U8apPov7hayDw==}
     dev: true
 
-  /@storybook/preview-api@8.0.4:
-    resolution: {integrity: sha512-uZCgZ/7BZkFTNudCBWx3YPFVdReMQSZJj9EfQVhQaPmfGORHGMvZMRsQXl0ONhPy7zDD4rVQxu5dSKWmIiYoWQ==}
+  /@storybook/preview-api@8.0.10:
+    resolution: {integrity: sha512-uZ6btF7Iloz9TnDcKLQ5ydi2YK0cnulv/8FLQhBCwSrzLLLb+T2DGz0cAeuWZEvMUNWNmkWJ9PAFQFs09/8p/Q==}
     dependencies:
-      '@storybook/channels': 8.0.4
-      '@storybook/client-logger': 8.0.4
-      '@storybook/core-events': 8.0.4
-      '@storybook/csf': 0.1.3
+      '@storybook/channels': 8.0.10
+      '@storybook/client-logger': 8.0.10
+      '@storybook/core-events': 8.0.10
+      '@storybook/csf': 0.1.7
       '@storybook/global': 5.0.0
-      '@storybook/types': 8.0.4
-      '@types/qs': 6.9.14
+      '@storybook/types': 8.0.10
+      '@types/qs': 6.9.15
       dequal: 2.0.3
       lodash: 4.17.21
       memoizerific: 1.11.3
-      qs: 6.12.0
+      qs: 6.12.1
       tiny-invariant: 1.3.3
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
     dev: true
 
-  /@storybook/preview@8.0.4:
-    resolution: {integrity: sha512-dJa13bIxQBfa5ZsXAeL6X/oXI6b87Fy31pvpKPkW1o+7M6MC4OvwGQBqgAd7m8yn6NuIHxrdwjEupa7l7PGb6w==}
+  /@storybook/preview@8.0.10:
+    resolution: {integrity: sha512-op7gZqop8PSFyPA4tc1Zds8jG6VnskwpYUUsa44pZoEez9PKEFCf4jE+7AQwbBS3hnuCb0CKBfASN8GRyoznbw==}
     dev: true
 
-  /@storybook/react-dom-shim@8.0.4(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-H8bci23e+G40WsdYPuPrhAjCeeXypXuAV6mTVvLHGKH+Yb+3wiB1weaXrot/TgzPbkDNybuhTI3Qm48FPLt0bw==}
+  /@storybook/react-dom-shim@8.0.10(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-3x8EWEkZebpWpp1pwXEzdabGINwOQt8odM5+hsOlDRtFZBmUqmmzK0rtn7orlcGlOXO4rd6QuZj4Tc5WV28dVQ==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: true
 
-  /@storybook/react-vite@8.0.4(react-dom@18.2.0)(react@18.2.0)(typescript@5.4.3)(vite@5.2.6):
-    resolution: {integrity: sha512-SlAsLSDc9I1nhMbf0YgXCHaZbnjzDdv458xirmUj4aJhn45e8yhmODpkPYQ8nGn45VWYMyd0sC66lJNWRvI/FA==}
+  /@storybook/react-vite@8.0.10(react-dom@18.3.1)(react@18.3.1)(typescript@5.4.5)(vite@5.2.11):
+    resolution: {integrity: sha512-J0Tw1jWSQYzc37AWaJCbrFQLlWsCHby0ie0yPx8DVehlnTT6xZWkohiKBq5iwMyYfF9SGrOfZ/dVRiB5q2sOIA==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
       vite: ^4.0.0 || ^5.0.0
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.0(typescript@5.4.3)(vite@5.2.6)
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.0(typescript@5.4.5)(vite@5.2.11)
       '@rollup/pluginutils': 5.1.0
-      '@storybook/builder-vite': 8.0.4(typescript@5.4.3)(vite@5.2.6)
-      '@storybook/node-logger': 8.0.4
-      '@storybook/react': 8.0.4(react-dom@18.2.0)(react@18.2.0)(typescript@5.4.3)
+      '@storybook/builder-vite': 8.0.10(typescript@5.4.5)(vite@5.2.11)
+      '@storybook/node-logger': 8.0.10
+      '@storybook/react': 8.0.10(react-dom@18.3.1)(react@18.3.1)(typescript@5.4.5)
       find-up: 5.0.0
-      magic-string: 0.30.8
-      react: 18.2.0
+      magic-string: 0.30.10
+      react: 18.3.1
       react-docgen: 7.0.3
-      react-dom: 18.2.0(react@18.2.0)
+      react-dom: 18.3.1(react@18.3.1)
       resolve: 1.22.8
       tsconfig-paths: 4.2.0
-      vite: 5.2.6(@types/node@20.11.30)
+      vite: 5.2.11(@types/node@20.12.10)
     transitivePeerDependencies:
       - '@preact/preset-vite'
       - encoding
@@ -4996,8 +4850,8 @@ packages:
       - vite-plugin-glimmerx
     dev: true
 
-  /@storybook/react@8.0.4(react-dom@18.2.0)(react@18.2.0)(typescript@5.4.3):
-    resolution: {integrity: sha512-p4wQSJIhG48UD2fZ6tFDT9zaqrVnvZxjV18+VjSi3dez/pDoEMJ3SWZWcmeDenKwvvk+SPdRH7k5mUHW1Rh0xg==}
+  /@storybook/react@8.0.10(react-dom@18.3.1)(react@18.3.1)(typescript@5.4.5):
+    resolution: {integrity: sha512-/MIMc02TNmiNXDzk55dm9+ujfNE5LVNeqqK+vxXWLlCZ0aXRAd1/ZLYeRFuYLgEETB7mh7IP8AXjvM68NX5HYg==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5007,15 +4861,15 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@storybook/client-logger': 8.0.4
-      '@storybook/docs-tools': 8.0.4
+      '@storybook/client-logger': 8.0.10
+      '@storybook/docs-tools': 8.0.10
       '@storybook/global': 5.0.0
-      '@storybook/preview-api': 8.0.4
-      '@storybook/react-dom-shim': 8.0.4(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 8.0.4
+      '@storybook/preview-api': 8.0.10
+      '@storybook/react-dom-shim': 8.0.10(react-dom@18.3.1)(react@18.3.1)
+      '@storybook/types': 8.0.10
       '@types/escodegen': 0.0.6
       '@types/estree': 0.0.51
-      '@types/node': 18.19.26
+      '@types/node': 18.19.32
       acorn: 7.4.1
       acorn-jsx: 5.3.2(acorn@7.4.1)
       acorn-walk: 7.2.0
@@ -5023,43 +4877,43 @@ packages:
       html-tags: 3.3.1
       lodash: 4.17.21
       prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-element-to-jsx-string: 15.0.0(react-dom@18.2.0)(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-element-to-jsx-string: 15.0.0(react-dom@18.3.1)(react@18.3.1)
       semver: 7.6.0
       ts-dedent: 2.2.0
       type-fest: 2.19.0
-      typescript: 5.4.3
+      typescript: 5.4.5
       util-deprecate: 1.0.2
     transitivePeerDependencies:
       - encoding
       - supports-color
     dev: true
 
-  /@storybook/router@8.0.4:
-    resolution: {integrity: sha512-hlR80QvmLBflAqMeGcgtDuSe6TJlzdizwEAkBLE1lDvFI6tvvEyAliCAXBpIDdOZTe0u/zeeJkOUXKSx33caoQ==}
+  /@storybook/router@8.0.10:
+    resolution: {integrity: sha512-AZhgiet+EK0ZsPbaDgbbVTAHW2LAMCP1z/Un2uMBbdDeD0Ys29Af47AbEj/Ome5r1cqasLvzq2WXJlVXPNB0Zw==}
     dependencies:
-      '@storybook/client-logger': 8.0.4
+      '@storybook/client-logger': 8.0.10
       memoizerific: 1.11.3
-      qs: 6.12.0
+      qs: 6.12.1
     dev: true
 
-  /@storybook/source-loader@8.0.4:
-    resolution: {integrity: sha512-pqaOMMV+dZvjbTdOzuc5RCFN9mGJ81GDtiaxYTKiIYrAyeK+V4JEZi7vHxCbZV4Tci5byeGNhx4FvQgVF2q0Wg==}
+  /@storybook/source-loader@8.0.10:
+    resolution: {integrity: sha512-bv9FRPzELjcoMJLWLDqkUNh1zY0DiCgcvM+9qsZva8pxAD4fzrX+mgCS2vZVJHRg8wMAhw/ymdXixDUodHAvsw==}
     dependencies:
-      '@storybook/csf': 0.1.3
-      '@storybook/types': 8.0.4
+      '@storybook/csf': 0.1.7
+      '@storybook/types': 8.0.10
       estraverse: 5.3.0
       lodash: 4.17.21
       prettier: 3.2.5
     dev: true
 
-  /@storybook/telemetry@8.0.4:
-    resolution: {integrity: sha512-Q3ITY6J46R/TrrPRIU1fs3WNs69ExpTJZ9UlB8087qOUyV90Ex33SYk3i10xVWRczxCmyC1V58Xuht6nxz7mNQ==}
+  /@storybook/telemetry@8.0.10:
+    resolution: {integrity: sha512-s4Uc+KZQkdmD2d+64Qf8wYknhQZwmjf2CxjIjv9b4KLsU/nyfDheK7Fzd1jhBKb2UQUlLW5HhZkBgs1RsZcDHA==}
     dependencies:
-      '@storybook/client-logger': 8.0.4
-      '@storybook/core-common': 8.0.4
-      '@storybook/csf-tools': 8.0.4
+      '@storybook/client-logger': 8.0.10
+      '@storybook/core-common': 8.0.10
+      '@storybook/csf-tools': 8.0.10
       chalk: 4.1.2
       detect-package-manager: 2.0.1
       fetch-retry: 5.0.6
@@ -5070,19 +4924,18 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/test@8.0.4(vitest@1.4.0):
-    resolution: {integrity: sha512-/uvE8Rtu7tIcuyQBUzKq7uuDCsjmADI18BApLdwo/qthmN8ERDxRSz0Ngj2gvBMQFv99At8ESi/xh6oFGu3rWg==}
+  /@storybook/test@8.0.10(vitest@1.6.0):
+    resolution: {integrity: sha512-VqjzKJiOCjaZ0CjLeKygYk8uetiaiKbpIox+BrND9GtpEBHcRZA5AeFY2P1aSCOhsaDwuh4KRBxJWFug7DhWGQ==}
     dependencies:
-      '@storybook/client-logger': 8.0.4
-      '@storybook/core-events': 8.0.4
-      '@storybook/instrumenter': 8.0.4
-      '@storybook/preview-api': 8.0.4
+      '@storybook/client-logger': 8.0.10
+      '@storybook/core-events': 8.0.10
+      '@storybook/instrumenter': 8.0.10
+      '@storybook/preview-api': 8.0.10
       '@testing-library/dom': 9.3.4
-      '@testing-library/jest-dom': 6.4.2(vitest@1.4.0)
+      '@testing-library/jest-dom': 6.4.5(vitest@1.6.0)
       '@testing-library/user-event': 14.5.2(@testing-library/dom@9.3.4)
       '@vitest/expect': 1.3.1
-      '@vitest/spy': 1.4.0
-      chai: 4.4.1
+      '@vitest/spy': 1.6.0
       util: 0.12.5
     transitivePeerDependencies:
       - '@jest/globals'
@@ -5092,8 +4945,8 @@ packages:
       - vitest
     dev: true
 
-  /@storybook/theming@8.0.4(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-NxtTU2wMC0lj375ejoT3Npdcqwv6NeUpLaJl6EZCMXSR41ve9WG4suUNWQ63olhqKxirjzAz0IL7ggH7c3hPvA==}
+  /@storybook/theming@8.0.10(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-7NHt7bMC7lPkwz9KdDpa6DkLoQZz5OV6jsx/qY91kcdLo1rpnRPAiVlJvmWesFxi1oXOpVDpHHllWzf8KDBv8A==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5103,24 +4956,24 @@ packages:
       react-dom:
         optional: true
     dependencies:
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
-      '@storybook/client-logger': 8.0.4
+      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1)
+      '@storybook/client-logger': 8.0.10
       '@storybook/global': 5.0.0
       memoizerific: 1.11.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: true
 
-  /@storybook/types@8.0.4:
-    resolution: {integrity: sha512-OO7QY+qZFCYkItDUBACtIV32p75O7sNziAiyS1V2Oxgo7Ln7fwZwr3mJcA1ruBed6ZcrW3c87k7Xs40T2zAWcg==}
+  /@storybook/types@8.0.10:
+    resolution: {integrity: sha512-S/hKS7+SqNnYIehwxdQ4M2nnlfGDdYWAXdtPCVJCmS+YF2amgAxeuisiHbUg7eypds6VL0Oxk/j2nPEHOHk9pg==}
     dependencies:
-      '@storybook/channels': 8.0.4
+      '@storybook/channels': 8.0.10
       '@types/express': 4.17.21
       file-system-cache: 2.3.0
     dev: true
 
-  /@swc/core-darwin-arm64@1.4.11:
-    resolution: {integrity: sha512-C1j1Qp/IHSelVWdEnT7f0iONWxQz6FAqzjCF2iaL+0vFg4V5f2nlgrueY8vj5pNNzSGhrAlxsMxEIp4dj1MXkg==}
+  /@swc/core-darwin-arm64@1.5.3:
+    resolution: {integrity: sha512-kRmmV2XqWegzGXvJfVVOj10OXhLgaVOOBjaX3p3Aqg7Do5ksg+bY5wi1gAN/Eul7B08Oqf7GG7WJevjDQGWPOg==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [darwin]
@@ -5128,8 +4981,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-darwin-x64@1.4.11:
-    resolution: {integrity: sha512-0TTy3Ni8ncgaMCchSQ7FK8ZXQLlamy0FXmGWbR58c+pVZWYZltYPTmheJUvVcR0H2+gPAymRKyfC0iLszDALjg==}
+  /@swc/core-darwin-x64@1.5.3:
+    resolution: {integrity: sha512-EYs0+ovaRw6ZN9GBr2nIeC7gUXWA0q4RYR+Og3Vo0Qgv2Mt/XudF44A2lPK9X7M3JIfu6JjnxnTuvsK1Lqojfw==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [darwin]
@@ -5137,8 +4990,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-arm-gnueabihf@1.4.11:
-    resolution: {integrity: sha512-XJLB71uw0rog4DjYAPxFGAuGCBQpgJDlPZZK6MTmZOvI/1t0+DelJ24IjHIxk500YYM26Yv47xPabqFPD7I2zQ==}
+  /@swc/core-linux-arm-gnueabihf@1.5.3:
+    resolution: {integrity: sha512-RBVUTidSf4wgPdv98VrgJ4rMzMDN/3LBWdT7l+R7mNFH+mtID7ZAhTON0o/m1HkECgAgi1xcbTOVAw1xgd5KLA==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux]
@@ -5146,8 +4999,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-arm64-gnu@1.4.11:
-    resolution: {integrity: sha512-vYQwzJvm/iu052d5Iw27UFALIN5xSrGkPZXxLNMHPySVko2QMNNBv35HLatkEQHbQ3X+VKSW9J9SkdtAvAVRAQ==}
+  /@swc/core-linux-arm64-gnu@1.5.3:
+    resolution: {integrity: sha512-DCC6El3MiTYfv98CShxz/g2s4Pxn6tV0mldCQ0UdRqaN2ApUn7E+zTrqaj5bk7yII3A43WhE9Mr6wNPbXUeVyg==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
@@ -5155,8 +5008,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-arm64-musl@1.4.11:
-    resolution: {integrity: sha512-eV+KduiRYUFjPsvbZuJ9aknQH9Tj0U2/G9oIZSzLx/18WsYi+upzHbgxmIIHJ2VJgfd7nN40RI/hMtxNsUzR/g==}
+  /@swc/core-linux-arm64-musl@1.5.3:
+    resolution: {integrity: sha512-p04ysjYXEyaCGpJvwHm0T0nkPawXtdKBTThWnlh8M5jYULVNVA1YmC9azG2Avs1GDaLgBPVUgodmFYpdSupOYA==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
@@ -5164,8 +5017,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-x64-gnu@1.4.11:
-    resolution: {integrity: sha512-WA1iGXZ2HpqM1OR9VCQZJ8sQ1KP2or9O4bO8vWZo6HZJIeoQSo7aa9waaCLRpkZvkng1ct/TF/l6ymqSNFXIzQ==}
+  /@swc/core-linux-x64-gnu@1.5.3:
+    resolution: {integrity: sha512-/l4KJu0xwYm6tcVSOvF8RbXrIeIHJAhWnKvuX4ZnYKFkON968kB8Ghx+1yqBQcZf36tMzSuZUC5xBUA9u66lGA==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
@@ -5173,8 +5026,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-x64-musl@1.4.11:
-    resolution: {integrity: sha512-UkVJToKf0owwQYRnGvjHAeYVDfeimCEcx0VQSbJoN7Iy0ckRZi7YPlmWJU31xtKvikE2bQWCOVe0qbSDqqcWXA==}
+  /@swc/core-linux-x64-musl@1.5.3:
+    resolution: {integrity: sha512-54DmSnrTXq4fYEKNR0nFAImG3+FxsHlQ6Tol/v3l+rxmg2K0FeeDOpH7wTXeWhMGhFlGrLIyLSnA+SzabfoDIA==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
@@ -5182,8 +5035,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-win32-arm64-msvc@1.4.11:
-    resolution: {integrity: sha512-35khwkyly7lF5NDSyvIrukBMzxPorgc5iTSDfVO/LvnmN5+fm4lTlrDr4tUfTdOhv3Emy7CsKlsNAeFRJ+Pm+w==}
+  /@swc/core-win32-arm64-msvc@1.5.3:
+    resolution: {integrity: sha512-piUMqoHNwDXChBfaaFIMzYgoxepfd8Ci1uXXNVEnuiRKz3FiIcNLmvXaBD7lKUwKcnGgVziH/CrndX6SldKQNQ==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [win32]
@@ -5191,8 +5044,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-win32-ia32-msvc@1.4.11:
-    resolution: {integrity: sha512-Wx8/6f0ufgQF2pbVPsJ2dAmFLwIOW+xBE5fxnb7VnEbGkTgP1qMDWiiAtD9rtvDSuODG3i1AEmAak/2HAc6i6A==}
+  /@swc/core-win32-ia32-msvc@1.5.3:
+    resolution: {integrity: sha512-zV5utPYBUzYhBOomCByAjKAvfVBcOCJtnszx7Zlfz7SAv/cGm8D1QzPDCvv6jDhIlUtLj6KyL8JXeFr+f95Fjw==}
     engines: {node: '>=10'}
     cpu: [ia32]
     os: [win32]
@@ -5200,8 +5053,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-win32-x64-msvc@1.4.11:
-    resolution: {integrity: sha512-0xRFW6K9UZQH2NVC/0pVB0GJXS45lY24f+6XaPBF1YnMHd8A8GoHl7ugyM5yNUTe2AKhSgk5fJV00EJt/XBtdQ==}
+  /@swc/core-win32-x64-msvc@1.5.3:
+    resolution: {integrity: sha512-QmUiXiPIV5gBADfDh8e2jKynEhyRC+dcKP/zF9y5KqDUErYzlhocLd68uYS4uIegP6AylYlmigHgcaktGEE9VQ==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
@@ -5209,8 +5062,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core@1.4.11:
-    resolution: {integrity: sha512-WKEakMZxkVwRdgMN4AMJ9K5nysY8g8npgQPczmjBeNK5In7QEAZAJwnyccrWwJZU0XjVeHn2uj+XbOKdDW17rg==}
+  /@swc/core@1.5.3:
+    resolution: {integrity: sha512-pSEglypnBGLHBoBcv3aYS7IM2t2LRinubYMyP88UoFIcD2pear2CeB15CbjJ2IzuvERD0ZL/bthM7cDSR9g+aQ==}
     engines: {node: '>=10'}
     requiresBuild: true
     peerDependencies:
@@ -5222,16 +5075,16 @@ packages:
       '@swc/counter': 0.1.3
       '@swc/types': 0.1.6
     optionalDependencies:
-      '@swc/core-darwin-arm64': 1.4.11
-      '@swc/core-darwin-x64': 1.4.11
-      '@swc/core-linux-arm-gnueabihf': 1.4.11
-      '@swc/core-linux-arm64-gnu': 1.4.11
-      '@swc/core-linux-arm64-musl': 1.4.11
-      '@swc/core-linux-x64-gnu': 1.4.11
-      '@swc/core-linux-x64-musl': 1.4.11
-      '@swc/core-win32-arm64-msvc': 1.4.11
-      '@swc/core-win32-ia32-msvc': 1.4.11
-      '@swc/core-win32-x64-msvc': 1.4.11
+      '@swc/core-darwin-arm64': 1.5.3
+      '@swc/core-darwin-x64': 1.5.3
+      '@swc/core-linux-arm-gnueabihf': 1.5.3
+      '@swc/core-linux-arm64-gnu': 1.5.3
+      '@swc/core-linux-arm64-musl': 1.5.3
+      '@swc/core-linux-x64-gnu': 1.5.3
+      '@swc/core-linux-x64-musl': 1.5.3
+      '@swc/core-win32-arm64-msvc': 1.5.3
+      '@swc/core-win32-ia32-msvc': 1.5.3
+      '@swc/core-win32-x64-msvc': 1.5.3
     dev: true
 
   /@swc/counter@0.1.3:
@@ -5255,7 +5108,7 @@ packages:
     engines: {node: '>=14'}
     dependencies:
       '@babel/code-frame': 7.24.2
-      '@babel/runtime': 7.24.1
+      '@babel/runtime': 7.24.5
       '@types/aria-query': 5.0.4
       aria-query: 5.1.3
       chalk: 4.1.2
@@ -5264,8 +5117,8 @@ packages:
       pretty-format: 27.5.1
     dev: true
 
-  /@testing-library/jest-dom@6.4.2(vitest@1.4.0):
-    resolution: {integrity: sha512-CzqH0AFymEMG48CpzXFriYYkOjk6ZGPCLMhW9e9jg3KMCn5OfJecF8GtGW7yGfR/IgCe3SX8BSwjdzI6BBbZLw==}
+  /@testing-library/jest-dom@6.4.5(vitest@1.6.0):
+    resolution: {integrity: sha512-AguB9yvTXmCnySBP1lWjfNNUwpbElsaQ567lt2VdGqAdHtpieLgjmcVyv1q7PMIvLbgpDdkWV5Ydv3FEejyp2A==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
     peerDependencies:
       '@jest/globals': '>= 28'
@@ -5286,14 +5139,14 @@ packages:
         optional: true
     dependencies:
       '@adobe/css-tools': 4.3.3
-      '@babel/runtime': 7.24.1
+      '@babel/runtime': 7.24.5
       aria-query: 5.3.0
       chalk: 3.0.0
       css.escape: 1.5.1
       dom-accessibility-api: 0.6.3
       lodash: 4.17.21
       redent: 3.0.0
-      vitest: 1.4.0(@types/node@20.11.30)
+      vitest: 1.6.0(@types/node@20.12.10)
     dev: true
 
   /@testing-library/user-event@14.5.2(@testing-library/dom@9.3.4):
@@ -5316,8 +5169,8 @@ packages:
   /@types/babel__core@7.20.5:
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
     dependencies:
-      '@babel/parser': 7.24.1
-      '@babel/types': 7.24.0
+      '@babel/parser': 7.24.5
+      '@babel/types': 7.24.5
       '@types/babel__generator': 7.6.8
       '@types/babel__template': 7.4.4
       '@types/babel__traverse': 7.20.5
@@ -5326,39 +5179,39 @@ packages:
   /@types/babel__generator@7.6.8:
     resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==}
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/types': 7.24.5
     dev: true
 
   /@types/babel__template@7.4.4:
     resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
     dependencies:
-      '@babel/parser': 7.24.1
-      '@babel/types': 7.24.0
+      '@babel/parser': 7.24.5
+      '@babel/types': 7.24.5
     dev: true
 
   /@types/babel__traverse@7.20.5:
     resolution: {integrity: sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==}
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/types': 7.24.5
     dev: true
 
   /@types/body-parser@1.19.5:
     resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
     dependencies:
       '@types/connect': 3.4.38
-      '@types/node': 20.11.30
+      '@types/node': 20.12.10
     dev: true
 
   /@types/connect@3.4.38:
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
     dependencies:
-      '@types/node': 20.11.30
+      '@types/node': 20.12.10
     dev: true
 
   /@types/cross-spawn@6.0.6:
     resolution: {integrity: sha512-fXRhhUkG4H3TQk5dBhQ7m/JDdSNHKwR2BBia62lhwEIq9xGiQKLxd6LymNhn47SjXhsUEPmxi+PKw2OkW4LLjA==}
     dependencies:
-      '@types/node': 20.11.30
+      '@types/node': 20.12.10
     dev: true
 
   /@types/d3-array@3.2.1:
@@ -5564,16 +5417,16 @@ packages:
     resolution: {integrity: sha512-nv+GSx77ZtXiJzwKdsASqi+YQ5Z7vwHsTP0JY2SiQgjGckkBRKZnk8nIM+7oUZ1VCtuTz0+By4qVR7fqzp/Dfg==}
     dev: true
 
-  /@types/emscripten@1.39.10:
-    resolution: {integrity: sha512-TB/6hBkYQJxsZHSqyeuO1Jt0AB/bW6G7rHt9g7lML7SOF6lbgcHvw/Lr+69iqN0qxgXLhWKScAon73JNnptuDw==}
+  /@types/emscripten@1.39.11:
+    resolution: {integrity: sha512-dOeX2BeNA7j6BTEqJQL3ut0bRCfsyQMd5i4FT8JfHfYhAOuJPCGh0dQFbxVJxUyQ+75x6enhDdndGb624/QszA==}
     dev: true
 
   /@types/escodegen@0.0.6:
     resolution: {integrity: sha512-AjwI4MvWx3HAOaZqYsjKWyEObT9lcVV0Y0V8nXo6cXzN8ZiMxVhf6F3d/UNvXVGKrEzL/Dluc5p+y9GkzlTWig==}
     dev: true
 
-  /@types/eslint@8.56.6:
-    resolution: {integrity: sha512-ymwc+qb1XkjT/gfoQwxIeHZ6ixH23A+tCT2ADSA/DPVKzAjwYkTXBMCQ/f6fe4wEa85Lhp26VPeUxI7wMhAi7A==}
+  /@types/eslint@8.56.10:
+    resolution: {integrity: sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==}
     dependencies:
       '@types/estree': 1.0.5
       '@types/json-schema': 7.0.15
@@ -5587,11 +5440,11 @@ packages:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
     dev: true
 
-  /@types/express-serve-static-core@4.17.43:
-    resolution: {integrity: sha512-oaYtiBirUOPQGSWNGPWnzyAFJ0BP3cwvN4oWZQY+zUBwpVIGsKUkpBpSztp74drYcjavs7SKFZ4DX1V2QeN8rg==}
+  /@types/express-serve-static-core@4.19.0:
+    resolution: {integrity: sha512-bGyep3JqPCRry1wq+O5n7oiBgGWmeIJXPjXXCo8EK0u8duZGSYar7cGqd3ML2JUsLGeB7fmc06KYo9fLGWqPvQ==}
     dependencies:
-      '@types/node': 20.11.30
-      '@types/qs': 6.9.14
+      '@types/node': 20.12.10
+      '@types/qs': 6.9.15
       '@types/range-parser': 1.2.7
       '@types/send': 0.17.4
     dev: true
@@ -5600,9 +5453,9 @@ packages:
     resolution: {integrity: sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==}
     dependencies:
       '@types/body-parser': 1.19.5
-      '@types/express-serve-static-core': 4.17.43
-      '@types/qs': 6.9.14
-      '@types/serve-static': 1.15.5
+      '@types/express-serve-static-core': 4.19.0
+      '@types/qs': 6.9.15
+      '@types/serve-static': 1.15.7
     dev: true
 
   /@types/find-cache-dir@3.2.1:
@@ -5617,7 +5470,7 @@ packages:
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 20.11.30
+      '@types/node': 20.12.10
     dev: true
 
   /@types/hast@3.0.4:
@@ -5645,42 +5498,38 @@ packages:
   /@types/lodash-es@4.17.12:
     resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
     dependencies:
-      '@types/lodash': 4.17.0
+      '@types/lodash': 4.17.1
     dev: true
 
   /@types/lodash.mergewith@4.6.7:
     resolution: {integrity: sha512-3m+lkO5CLRRYU0fhGRp7zbsGi6+BZj0uTVSwvcKU+nSlhjA9/QRNfuSGnD2mX6hQA7ZbmcCkzk5h4ZYGOtk14A==}
     dependencies:
-      '@types/lodash': 4.17.0
+      '@types/lodash': 4.17.1
     dev: false
 
-  /@types/lodash@4.17.0:
-    resolution: {integrity: sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==}
+  /@types/lodash@4.17.1:
+    resolution: {integrity: sha512-X+2qazGS3jxLAIz5JDXDzglAF3KpijdhFxlf/V1+hEsOUc+HnWi81L/uv/EvGuV90WY+7mPGFCUDGfQC3Gj95Q==}
 
-  /@types/mdx@2.0.12:
-    resolution: {integrity: sha512-H9VZ9YqE+H28FQVchC83RCs5xQ2J7mAAv6qdDEaWmXEVl3OpdH+xfrSUzQ1lp7U7oSTRZ0RvW08ASPJsYBi7Cw==}
+  /@types/mdx@2.0.13:
+    resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
     dev: true
 
   /@types/mime@1.3.5:
     resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
     dev: true
 
-  /@types/mime@3.0.4:
-    resolution: {integrity: sha512-iJt33IQnVRkqeqC7PzBHPTC6fDlRNRW8vjrgqtScAhrmMwe8c4Eo7+fUGTa+XdWrpEgpyKWMYmi2dIwMAYRzPw==}
-    dev: true
-
   /@types/minimatch@5.1.2:
     resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==}
     dev: true
 
-  /@types/node@18.19.26:
-    resolution: {integrity: sha512-+wiMJsIwLOYCvUqSdKTrfkS8mpTp+MPINe6+Np4TAGFWWRWiBQ5kSq9nZGCSPkzx9mvT+uEukzpX4MOSCydcvw==}
+  /@types/node@18.19.32:
+    resolution: {integrity: sha512-2bkg93YBSDKk8DLmmHnmj/Rwr18TLx7/n+I23BigFwgexUJoMHZOd8X1OFxuF/W3NN0S2W2E5sVabI5CPinNvA==}
     dependencies:
       undici-types: 5.26.5
     dev: true
 
-  /@types/node@20.11.30:
-    resolution: {integrity: sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==}
+  /@types/node@20.12.10:
+    resolution: {integrity: sha512-Eem5pH9pmWBHoGAT8Dr5fdc5rYA+4NAovdM4EktRPVAAiJhmWWfQrA0cFhAbOsQdSfIHjAud6YdkbL69+zSKjw==}
     dependencies:
       undici-types: 5.26.5
     dev: true
@@ -5693,10 +5542,6 @@ packages:
     resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
     dev: false
 
-  /@types/picomatch@2.3.3:
-    resolution: {integrity: sha512-Yll76ZHikRFCyz/pffKGjrCwe/le2CDwOP5F210KQo27kpRE46U2rDnzikNlVn6/ezH3Mhn46bJMTfeVTtcYMg==}
-    dev: true
-
   /@types/pretty-hrtime@1.0.3:
     resolution: {integrity: sha512-nj39q0wAIdhwn7DGUyT9irmsKK1tV0bd5WFEhgpqNTMFZ8cE+jieuTphCW0tfdm47S2zVT5mr09B28b1chmQMA==}
     dev: true
@@ -5704,34 +5549,34 @@ packages:
   /@types/prop-types@15.7.12:
     resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
 
-  /@types/qs@6.9.14:
-    resolution: {integrity: sha512-5khscbd3SwWMhFqylJBLQ0zIu7c1K6Vz0uBIt915BI3zV0q1nfjRQD3RqSBcPaO6PHEF4ov/t9y89fSiyThlPA==}
+  /@types/qs@6.9.15:
+    resolution: {integrity: sha512-uXHQKES6DQKKCLh441Xv/dwxOq1TVS3JPUMlEqoEglvlhR6Mxnlew/Xq/LRVHpLyk7iK3zODe1qYHIMltO7XGg==}
     dev: true
 
   /@types/range-parser@1.2.7:
     resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
     dev: true
 
-  /@types/react-dom@18.2.22:
-    resolution: {integrity: sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==}
+  /@types/react-dom@18.3.0:
+    resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==}
     dependencies:
-      '@types/react': 18.2.73
+      '@types/react': 18.3.1
     dev: true
 
   /@types/react-reconciler@0.28.8:
     resolution: {integrity: sha512-SN9c4kxXZonFhbX4hJrZy37yw9e7EIxcpHCxQv5JUS18wDE5ovkQKlqQEkufdJCCMfuI9BnjUJvhYeJ9x5Ra7g==}
     dependencies:
-      '@types/react': 18.2.73
+      '@types/react': 18.3.1
     dev: false
 
   /@types/react-transition-group@4.4.10:
     resolution: {integrity: sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==}
     dependencies:
-      '@types/react': 18.2.73
+      '@types/react': 18.3.1
     dev: false
 
-  /@types/react@18.2.73:
-    resolution: {integrity: sha512-XcGdod0Jjv84HOC7N5ziY3x+qL0AfmubvKOZ9hJjJ2yd5EE+KYjWhdOjt387e9HPheHkdggF9atTifMRtyAaRA==}
+  /@types/react@18.3.1:
+    resolution: {integrity: sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==}
     dependencies:
       '@types/prop-types': 15.7.12
       csstype: 3.1.3
@@ -5748,15 +5593,15 @@ packages:
     resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
     dependencies:
       '@types/mime': 1.3.5
-      '@types/node': 20.11.30
+      '@types/node': 20.12.10
     dev: true
 
-  /@types/serve-static@1.15.5:
-    resolution: {integrity: sha512-PDRk21MnK70hja/YF8AHfC7yIsiQHn1rcXx7ijCFBX/k+XQJhQT/gw3xekXKJvx+5SXaMMS8oqQy09Mzvz2TuQ==}
+  /@types/serve-static@1.15.7:
+    resolution: {integrity: sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==}
     dependencies:
       '@types/http-errors': 2.0.4
-      '@types/mime': 3.0.4
-      '@types/node': 20.11.30
+      '@types/node': 20.12.10
+      '@types/send': 0.17.4
     dev: true
 
   /@types/unist@3.0.2:
@@ -5771,8 +5616,8 @@ packages:
     resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==}
     dev: true
 
-  /@typescript-eslint/eslint-plugin@7.4.0(@typescript-eslint/parser@7.4.0)(eslint@8.57.0)(typescript@5.4.3):
-    resolution: {integrity: sha512-yHMQ/oFaM7HZdVrVm/M2WHaNPgyuJH4WelkSVEWSSsir34kxW2kDJCxlXRhhGWEsMN0WAW/vLpKfKVcm8k+MPw==}
+  /@typescript-eslint/eslint-plugin@7.8.0(@typescript-eslint/parser@7.8.0)(eslint@8.57.0)(typescript@5.4.5):
+    resolution: {integrity: sha512-gFTT+ezJmkwutUPmB0skOj3GZJtlEGnlssems4AjkVweUPGj7jRwwqg0Hhg7++kPGJqKtTYx+R05Ftww372aIg==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^7.0.0
@@ -5783,25 +5628,25 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 7.4.0(eslint@8.57.0)(typescript@5.4.3)
-      '@typescript-eslint/scope-manager': 7.4.0
-      '@typescript-eslint/type-utils': 7.4.0(eslint@8.57.0)(typescript@5.4.3)
-      '@typescript-eslint/utils': 7.4.0(eslint@8.57.0)(typescript@5.4.3)
-      '@typescript-eslint/visitor-keys': 7.4.0
+      '@typescript-eslint/parser': 7.8.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/scope-manager': 7.8.0
+      '@typescript-eslint/type-utils': 7.8.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/utils': 7.8.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/visitor-keys': 7.8.0
       debug: 4.3.4
       eslint: 8.57.0
       graphemer: 1.4.0
       ignore: 5.3.1
       natural-compare: 1.4.0
       semver: 7.6.0
-      ts-api-utils: 1.3.0(typescript@5.4.3)
-      typescript: 5.4.3
+      ts-api-utils: 1.3.0(typescript@5.4.5)
+      typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@7.4.0(eslint@8.57.0)(typescript@5.4.3):
-    resolution: {integrity: sha512-ZvKHxHLusweEUVwrGRXXUVzFgnWhigo4JurEj0dGF1tbcGh6buL+ejDdjxOQxv6ytcY1uhun1p2sm8iWStlgLQ==}
+  /@typescript-eslint/parser@7.8.0(eslint@8.57.0)(typescript@5.4.5):
+    resolution: {integrity: sha512-KgKQly1pv0l4ltcftP59uQZCi4HUYswCLbTqVZEJu7uLX8CTLyswqMLqLN+2QFz4jCptqWVV4SB7vdxcH2+0kQ==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       eslint: ^8.56.0
@@ -5810,13 +5655,13 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 7.4.0
-      '@typescript-eslint/types': 7.4.0
-      '@typescript-eslint/typescript-estree': 7.4.0(typescript@5.4.3)
-      '@typescript-eslint/visitor-keys': 7.4.0
+      '@typescript-eslint/scope-manager': 7.8.0
+      '@typescript-eslint/types': 7.8.0
+      '@typescript-eslint/typescript-estree': 7.8.0(typescript@5.4.5)
+      '@typescript-eslint/visitor-keys': 7.8.0
       debug: 4.3.4
       eslint: 8.57.0
-      typescript: 5.4.3
+      typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -5829,16 +5674,16 @@ packages:
       '@typescript-eslint/visitor-keys': 5.62.0
     dev: true
 
-  /@typescript-eslint/scope-manager@7.4.0:
-    resolution: {integrity: sha512-68VqENG5HK27ypafqLVs8qO+RkNc7TezCduYrx8YJpXq2QGZ30vmNZGJJJC48+MVn4G2dCV8m5ZTVnzRexTVtw==}
+  /@typescript-eslint/scope-manager@7.8.0:
+    resolution: {integrity: sha512-viEmZ1LmwsGcnr85gIq+FCYI7nO90DVbE37/ll51hjv9aG+YZMb4WDE2fyWpUR4O/UrhGRpYXK/XajcGTk2B8g==}
     engines: {node: ^18.18.0 || >=20.0.0}
     dependencies:
-      '@typescript-eslint/types': 7.4.0
-      '@typescript-eslint/visitor-keys': 7.4.0
+      '@typescript-eslint/types': 7.8.0
+      '@typescript-eslint/visitor-keys': 7.8.0
     dev: true
 
-  /@typescript-eslint/type-utils@7.4.0(eslint@8.57.0)(typescript@5.4.3):
-    resolution: {integrity: sha512-247ETeHgr9WTRMqHbbQdzwzhuyaJ8dPTuyuUEMANqzMRB1rj/9qFIuIXK7l0FX9i9FXbHeBQl/4uz6mYuCE7Aw==}
+  /@typescript-eslint/type-utils@7.8.0(eslint@8.57.0)(typescript@5.4.5):
+    resolution: {integrity: sha512-H70R3AefQDQpz9mGv13Uhi121FNMh+WEaRqcXTX09YEDky21km4dV1ZXJIp8QjXc4ZaVkXVdohvWDzbnbHDS+A==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       eslint: ^8.56.0
@@ -5847,12 +5692,12 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 7.4.0(typescript@5.4.3)
-      '@typescript-eslint/utils': 7.4.0(eslint@8.57.0)(typescript@5.4.3)
+      '@typescript-eslint/typescript-estree': 7.8.0(typescript@5.4.5)
+      '@typescript-eslint/utils': 7.8.0(eslint@8.57.0)(typescript@5.4.5)
       debug: 4.3.4
       eslint: 8.57.0
-      ts-api-utils: 1.3.0(typescript@5.4.3)
-      typescript: 5.4.3
+      ts-api-utils: 1.3.0(typescript@5.4.5)
+      typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -5862,12 +5707,12 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@typescript-eslint/types@7.4.0:
-    resolution: {integrity: sha512-mjQopsbffzJskos5B4HmbsadSJQWaRK0UxqQ7GuNA9Ga4bEKeiO6b2DnB6cM6bpc8lemaPseh0H9B/wyg+J7rw==}
+  /@typescript-eslint/types@7.8.0:
+    resolution: {integrity: sha512-wf0peJ+ZGlcH+2ZS23aJbOv+ztjeeP8uQ9GgwMJGVLx/Nj9CJt17GWgWWoSmoRVKAX2X+7fzEnAjxdvK2gqCLw==}
     engines: {node: ^18.18.0 || >=20.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree@5.62.0(typescript@5.4.3):
+  /@typescript-eslint/typescript-estree@5.62.0(typescript@5.4.5):
     resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5882,14 +5727,14 @@ packages:
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.6.0
-      tsutils: 3.21.0(typescript@5.4.3)
-      typescript: 5.4.3
+      tsutils: 3.21.0(typescript@5.4.5)
+      typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/typescript-estree@7.4.0(typescript@5.4.3):
-    resolution: {integrity: sha512-A99j5AYoME/UBQ1ucEbbMEmGkN7SE0BvZFreSnTd1luq7yulcHdyGamZKizU7canpGDWGJ+Q6ZA9SyQobipePg==}
+  /@typescript-eslint/typescript-estree@7.8.0(typescript@5.4.5):
+    resolution: {integrity: sha512-5pfUCOwK5yjPaJQNy44prjCwtr981dO8Qo9J9PwYXZ0MosgAbfEMB008dJ5sNo3+/BN6ytBPuSvXUg9SAqB0dg==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       typescript: '*'
@@ -5897,20 +5742,20 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 7.4.0
-      '@typescript-eslint/visitor-keys': 7.4.0
+      '@typescript-eslint/types': 7.8.0
+      '@typescript-eslint/visitor-keys': 7.8.0
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
-      minimatch: 9.0.3
+      minimatch: 9.0.4
       semver: 7.6.0
-      ts-api-utils: 1.3.0(typescript@5.4.3)
-      typescript: 5.4.3
+      ts-api-utils: 1.3.0(typescript@5.4.5)
+      typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils@5.62.0(eslint@8.57.0)(typescript@5.4.3):
+  /@typescript-eslint/utils@5.62.0(eslint@8.57.0)(typescript@5.4.5):
     resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5921,7 +5766,7 @@ packages:
       '@types/semver': 7.5.8
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.4.3)
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.4.5)
       eslint: 8.57.0
       eslint-scope: 5.1.1
       semver: 7.6.0
@@ -5930,8 +5775,8 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/utils@7.4.0(eslint@8.57.0)(typescript@5.4.3):
-    resolution: {integrity: sha512-NQt9QLM4Tt8qrlBVY9lkMYzfYtNz8/6qwZg8pI3cMGlPnj6mOpRxxAm7BMJN9K0AiY+1BwJ5lVC650YJqYOuNg==}
+  /@typescript-eslint/utils@7.8.0(eslint@8.57.0)(typescript@5.4.5):
+    resolution: {integrity: sha512-L0yFqOCflVqXxiZyXrDr80lnahQfSOfc9ELAAZ75sqicqp2i36kEZZGuUymHNFoYOqxRT05up760b4iGsl02nQ==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       eslint: ^8.56.0
@@ -5939,9 +5784,9 @@ packages:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
       '@types/json-schema': 7.0.15
       '@types/semver': 7.5.8
-      '@typescript-eslint/scope-manager': 7.4.0
-      '@typescript-eslint/types': 7.4.0
-      '@typescript-eslint/typescript-estree': 7.4.0(typescript@5.4.3)
+      '@typescript-eslint/scope-manager': 7.8.0
+      '@typescript-eslint/types': 7.8.0
+      '@typescript-eslint/typescript-estree': 7.8.0(typescript@5.4.5)
       eslint: 8.57.0
       semver: 7.6.0
     transitivePeerDependencies:
@@ -5957,11 +5802,11 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: true
 
-  /@typescript-eslint/visitor-keys@7.4.0:
-    resolution: {integrity: sha512-0zkC7YM0iX5Y41homUUeW1CHtZR01K3ybjM1l6QczoMuay0XKtrb93kv95AxUGwdjGr64nNqnOCwmEl616N8CA==}
+  /@typescript-eslint/visitor-keys@7.8.0:
+    resolution: {integrity: sha512-q4/gibTNBQNA0lGyYQCmWRS5D15n8rXh4QjK3KV+MBPlTYHpfBUT3D3PaPR/HeNiI9W6R7FvlkcGhNyAoP+caA==}
     engines: {node: ^18.18.0 || >=20.0.0}
     dependencies:
-      '@typescript-eslint/types': 7.4.0
+      '@typescript-eslint/types': 7.8.0
       eslint-visitor-keys: 3.4.3
     dev: true
 
@@ -5969,13 +5814,13 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
-  /@vitejs/plugin-react-swc@3.6.0(vite@5.2.6):
+  /@vitejs/plugin-react-swc@3.6.0(vite@5.2.11):
     resolution: {integrity: sha512-XFRbsGgpGxGzEV5i5+vRiro1bwcIaZDIdBRP16qwm+jP68ue/S8FJTBEgOeojtVDYrbSua3XFp71kC8VJE6v+g==}
     peerDependencies:
       vite: ^4 || ^5
     dependencies:
-      '@swc/core': 1.4.11
-      vite: 5.2.6(@types/node@20.11.30)
+      '@swc/core': 1.5.3
+      vite: 5.2.11(@types/node@20.12.10)
     transitivePeerDependencies:
       - '@swc/helpers'
     dev: true
@@ -5988,26 +5833,26 @@ packages:
       chai: 4.4.1
     dev: true
 
-  /@vitest/expect@1.4.0:
-    resolution: {integrity: sha512-Jths0sWCJZ8BxjKe+p+eKsoqev1/T8lYcrjavEaz8auEJ4jAVY0GwW3JKmdVU4mmNPLPHixh4GNXP7GFtAiDHA==}
+  /@vitest/expect@1.6.0:
+    resolution: {integrity: sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==}
     dependencies:
-      '@vitest/spy': 1.4.0
-      '@vitest/utils': 1.4.0
+      '@vitest/spy': 1.6.0
+      '@vitest/utils': 1.6.0
       chai: 4.4.1
     dev: true
 
-  /@vitest/runner@1.4.0:
-    resolution: {integrity: sha512-EDYVSmesqlQ4RD2VvWo3hQgTJ7ZrFQ2VSJdfiJiArkCerDAGeyF1i6dHkmySqk573jLp6d/cfqCN+7wUB5tLgg==}
+  /@vitest/runner@1.6.0:
+    resolution: {integrity: sha512-P4xgwPjwesuBiHisAVz/LSSZtDjOTPYZVmNAnpHHSR6ONrf8eCJOFRvUwdHn30F5M1fxhqtl7QZQUk2dprIXAg==}
     dependencies:
-      '@vitest/utils': 1.4.0
+      '@vitest/utils': 1.6.0
       p-limit: 5.0.0
       pathe: 1.1.2
     dev: true
 
-  /@vitest/snapshot@1.4.0:
-    resolution: {integrity: sha512-saAFnt5pPIA5qDGxOHxJ/XxhMFKkUSBJmVt5VgDsAqPTX6JP326r5C/c9UuCMPoXNzuudTPsYDZCoJ5ilpqG2A==}
+  /@vitest/snapshot@1.6.0:
+    resolution: {integrity: sha512-+Hx43f8Chus+DCmygqqfetcAZrDJwvTj0ymqjQq4CvmpKFSTVteEOBzCusu1x2tt4OJcvBflyHUE0DZSLgEMtQ==}
     dependencies:
-      magic-string: 0.30.8
+      magic-string: 0.30.10
       pathe: 1.1.2
       pretty-format: 29.7.0
     dev: true
@@ -6018,8 +5863,8 @@ packages:
       tinyspy: 2.2.1
     dev: true
 
-  /@vitest/spy@1.4.0:
-    resolution: {integrity: sha512-Ywau/Qs1DzM/8Uc+yA77CwSegizMlcgTJuYGAi0jujOteJOUf1ujunHThYo243KG9nAyWT3L9ifPYZ5+As/+6Q==}
+  /@vitest/spy@1.6.0:
+    resolution: {integrity: sha512-leUTap6B/cqi/bQkXUu6bQV5TZPx7pmMBKBQiI0rJA8c3pB56ZsaTbREnF7CJfmvAS4V2cXIBAh/3rVwrrCYgw==}
     dependencies:
       tinyspy: 2.2.1
     dev: true
@@ -6033,8 +5878,8 @@ packages:
       pretty-format: 29.7.0
     dev: true
 
-  /@vitest/utils@1.4.0:
-    resolution: {integrity: sha512-mx3Yd1/6e2Vt/PUC98DcqTirtfxUyAZ32uK82r8rZzbtBeBo+nqgnjx/LvqQdWsrvNtm14VmurNgcf4nqY5gJg==}
+  /@vitest/utils@1.6.0:
+    resolution: {integrity: sha512-21cPiuGMoMZwiOHa2i4LXkMkMkCGzA+MVFV70jRwHo95dL4x/ts5GZhML1QWuy7yfp3WzK3lRvZi3JnXTYqrBw==}
     dependencies:
       diff-sequences: 29.6.3
       estree-walker: 3.0.3
@@ -6061,24 +5906,24 @@ packages:
       path-browserify: 1.0.1
     dev: true
 
-  /@vue/compiler-core@3.4.21:
-    resolution: {integrity: sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==}
+  /@vue/compiler-core@3.4.26:
+    resolution: {integrity: sha512-N9Vil6Hvw7NaiyFUFBPXrAyETIGlQ8KcFMkyk6hW1Cl6NvoqvP+Y8p1Eqvx+UdqsnrnI9+HMUEJegzia3mhXmQ==}
     dependencies:
-      '@babel/parser': 7.24.1
-      '@vue/shared': 3.4.21
+      '@babel/parser': 7.24.5
+      '@vue/shared': 3.4.26
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.2.0
     dev: true
 
-  /@vue/compiler-dom@3.4.21:
-    resolution: {integrity: sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==}
+  /@vue/compiler-dom@3.4.26:
+    resolution: {integrity: sha512-4CWbR5vR9fMg23YqFOhr6t6WB1Fjt62d6xdFPyj8pxrYub7d+OgZaObMsoxaF9yBUHPMiPFK303v61PwAuGvZA==}
     dependencies:
-      '@vue/compiler-core': 3.4.21
-      '@vue/shared': 3.4.21
+      '@vue/compiler-core': 3.4.26
+      '@vue/shared': 3.4.26
     dev: true
 
-  /@vue/language-core@1.8.27(typescript@5.4.3):
+  /@vue/language-core@1.8.27(typescript@5.4.5):
     resolution: {integrity: sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==}
     peerDependencies:
       typescript: '*'
@@ -6088,18 +5933,18 @@ packages:
     dependencies:
       '@volar/language-core': 1.11.1
       '@volar/source-map': 1.11.1
-      '@vue/compiler-dom': 3.4.21
-      '@vue/shared': 3.4.21
+      '@vue/compiler-dom': 3.4.26
+      '@vue/shared': 3.4.26
       computeds: 0.0.1
-      minimatch: 9.0.3
+      minimatch: 9.0.4
       muggle-string: 0.3.1
       path-browserify: 1.0.1
-      typescript: 5.4.3
+      typescript: 5.4.5
       vue-template-compiler: 2.7.16
     dev: true
 
-  /@vue/shared@3.4.21:
-    resolution: {integrity: sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==}
+  /@vue/shared@3.4.26:
+    resolution: {integrity: sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==}
     dev: true
 
   /@xobotyi/scrollbar-width@1.9.5:
@@ -6128,7 +5973,7 @@ packages:
     resolution: {integrity: sha512-6xm38yGVIa6mKm/DUCF2zFFJhERh/QWp1ufm4cNUvxsONBmfPg8uZ9pZBdOmF6qFGr/HlT6ABBkCSx/dlEtvWg==}
     engines: {node: '>=12 <14 || 14.2 - 14.9 || >14.10.0'}
     dependencies:
-      '@types/emscripten': 1.39.10
+      '@types/emscripten': 1.39.11
       tslib: 1.14.1
     dev: true
 
@@ -6409,7 +6254,7 @@ packages:
   /@zag-js/number-input@0.32.1:
     resolution: {integrity: sha512-atyIOvoMITb4hZtQym7yD6I7grvPW83UeMFO8hCQg3HWwd2zR4+63mouWuyMoWb4QrzVFRVQBaU8OG5xGlknEw==}
     dependencies:
-      '@internationalized/number': 3.5.1
+      '@internationalized/number': 3.5.2
       '@zag-js/anatomy': 0.32.1
       '@zag-js/core': 0.32.1
       '@zag-js/dom-event': 0.32.1
@@ -6519,7 +6364,7 @@ packages:
       '@zag-js/utils': 0.32.1
     dev: false
 
-  /@zag-js/react@0.32.1(react-dom@18.2.0)(react@18.2.0):
+  /@zag-js/react@0.32.1(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-b1SB7hXXv1K6CmXkcy5Y7mb0YRWkyvulyhK8VW5O5hIAPuGxOTx70psmVeZbmVzhjdORCiro9jKx8Ec0LfolFg==}
     peerDependencies:
       react: '>=18.0.0'
@@ -6529,8 +6374,8 @@ packages:
       '@zag-js/store': 0.32.1
       '@zag-js/types': 0.32.1
       proxy-compare: 2.5.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
   /@zag-js/rect-utils@0.32.1:
@@ -6693,18 +6538,6 @@ packages:
     resolution: {integrity: sha512-Vzieo4vNulzY/0zqmVfeYW/LcFJp5xtEoyUgR1FBctH8uBPBRhTIEXxKtoMablW6/vccOVo7zcu0UrR5Vx+eYQ==}
     dev: false
 
-  /@zkochan/retry@0.2.0:
-    resolution: {integrity: sha512-WhB+2B/ZPlW2Xy/kMJBrMbqecWXcbDDgn0K0wKBAgO2OlBTz1iLJrRWduo+DGGn0Akvz1Lu4Xvls7dJojximWw==}
-    engines: {node: '>=10'}
-    dev: true
-
-  /@zkochan/rimraf@2.1.3:
-    resolution: {integrity: sha512-mCfR3gylCzPC+iqdxEA6z5SxJeOgzgbwmyxanKriIne5qZLswDe/M43aD3p5MNzwzXRhbZg/OX+MpES6Zk1a6A==}
-    engines: {node: '>=12.10'}
-    dependencies:
-      rimraf: 3.0.2
-    dev: true
-
   /accepts@1.3.8:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
@@ -6874,7 +6707,7 @@ packages:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.2
+      es-abstract: 1.23.3
       es-object-atoms: 1.0.0
       get-intrinsic: 1.2.4
       is-string: 1.0.7
@@ -6898,7 +6731,7 @@ packages:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.2
+      es-abstract: 1.23.3
       es-errors: 1.3.0
       es-object-atoms: 1.0.0
       es-shim-unscopables: 1.0.2
@@ -6910,7 +6743,7 @@ packages:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.2
+      es-abstract: 1.23.3
       es-errors: 1.3.0
       es-object-atoms: 1.0.0
       es-shim-unscopables: 1.0.2
@@ -6922,7 +6755,7 @@ packages:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.2
+      es-abstract: 1.23.3
       es-shim-unscopables: 1.0.2
     dev: true
 
@@ -6932,7 +6765,7 @@ packages:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.2
+      es-abstract: 1.23.3
       es-shim-unscopables: 1.0.2
     dev: true
 
@@ -6941,7 +6774,7 @@ packages:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.2
+      es-abstract: 1.23.3
       es-shim-unscopables: 1.0.2
     dev: true
 
@@ -6950,7 +6783,7 @@ packages:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.2
+      es-abstract: 1.23.3
       es-errors: 1.3.0
       es-shim-unscopables: 1.0.2
     dev: true
@@ -6962,7 +6795,7 @@ packages:
       array-buffer-byte-length: 1.0.1
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.2
+      es-abstract: 1.23.3
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
       is-array-buffer: 3.0.4
@@ -7006,55 +6839,55 @@ packages:
       possible-typed-array-names: 1.0.0
     dev: true
 
-  /babel-core@7.0.0-bridge.0(@babel/core@7.24.3):
+  /babel-core@7.0.0-bridge.0(@babel/core@7.24.5):
     resolution: {integrity: sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.24.3
+      '@babel/core': 7.24.5
     dev: true
 
   /babel-plugin-macros@3.1.0:
     resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
     engines: {node: '>=10', npm: '>=6'}
     dependencies:
-      '@babel/runtime': 7.24.1
+      '@babel/runtime': 7.24.5
       cosmiconfig: 7.1.0
       resolve: 1.22.8
     dev: false
 
-  /babel-plugin-polyfill-corejs2@0.4.10(@babel/core@7.24.3):
-    resolution: {integrity: sha512-rpIuu//y5OX6jVU+a5BCn1R5RSZYWAl2Nar76iwaOdycqb6JPxediskWFMMl7stfwNJR4b7eiQvh5fB5TEQJTQ==}
+  /babel-plugin-polyfill-corejs2@0.4.11(@babel/core@7.24.5):
+    resolution: {integrity: sha512-sMEJ27L0gRHShOh5G54uAAPaiCOygY/5ratXuiyb2G46FmlSpc9eFCzYVyDiPxfNbwzA7mYahmjQc5q+CZQ09Q==}
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
     dependencies:
-      '@babel/compat-data': 7.24.1
-      '@babel/core': 7.24.3
-      '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.3)
+      '@babel/compat-data': 7.24.4
+      '@babel/core': 7.24.5
+      '@babel/helper-define-polyfill-provider': 0.6.2(@babel/core@7.24.5)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /babel-plugin-polyfill-corejs3@0.10.4(@babel/core@7.24.3):
+  /babel-plugin-polyfill-corejs3@0.10.4(@babel/core@7.24.5):
     resolution: {integrity: sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==}
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.3)
-      core-js-compat: 3.36.1
+      '@babel/core': 7.24.5
+      '@babel/helper-define-polyfill-provider': 0.6.2(@babel/core@7.24.5)
+      core-js-compat: 3.37.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /babel-plugin-polyfill-regenerator@0.6.1(@babel/core@7.24.3):
-    resolution: {integrity: sha512-JfTApdE++cgcTWjsiCQlLyFBMbTUft9ja17saCc93lgV33h4tuCVj7tlvu//qpLwaG+3yEz7/KhahGrUMkVq9g==}
+  /babel-plugin-polyfill-regenerator@0.6.2(@babel/core@7.24.5):
+    resolution: {integrity: sha512-2R25rQZWP63nGwaAswvDazbPXfrM3HwVoBXK6HcqeKrSrL/JqcC/rDcf95l4r7LXLyxDXc8uQDa064GubtCABg==}
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.3)
+      '@babel/core': 7.24.5
+      '@babel/helper-define-polyfill-provider': 0.6.2(@babel/core@7.24.5)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -7117,13 +6950,6 @@ packages:
       - supports-color
     dev: true
 
-  /bole@5.0.11:
-    resolution: {integrity: sha512-KB0Ye0iMAW5BnNbnLfMSQcnI186hKUzE2fpkZWqcxsoTR7eqzlTidSOMYPHJOn/yR7VGH7uSZp37qH9q2Et0zQ==}
-    dependencies:
-      fast-safe-stringify: 2.1.1
-      individual: 3.0.0
-    dev: true
-
   /boolean@3.2.0:
     resolution: {integrity: sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==}
     dev: false
@@ -7170,10 +6996,10 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001600
-      electron-to-chromium: 1.4.719
+      caniuse-lite: 1.0.30001616
+      electron-to-chromium: 1.4.757
       node-releases: 2.0.14
-      update-browserslist-db: 1.0.13(browserslist@4.23.0)
+      update-browserslist-db: 1.0.15(browserslist@4.23.0)
     dev: true
 
   /buffer-from@1.1.2:
@@ -7187,12 +7013,6 @@ packages:
       ieee754: 1.2.1
     dev: true
 
-  /builtins@5.0.1:
-    resolution: {integrity: sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==}
-    dependencies:
-      semver: 7.6.0
-    dev: true
-
   /bytes@3.0.0:
     resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
     engines: {node: '>= 0.8'}
@@ -7223,8 +7043,8 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  /caniuse-lite@1.0.30001600:
-    resolution: {integrity: sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==}
+  /caniuse-lite@1.0.30001616:
+    resolution: {integrity: sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==}
     dev: true
 
   /chai@4.4.1:
@@ -7240,7 +7060,7 @@ packages:
       type-detect: 4.0.8
     dev: true
 
-  /chakra-react-select@4.7.6(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.11.4)(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0):
+  /chakra-react-select@4.7.6(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.11.4)(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-ZL43hyXPnWf1g/HjsZDecbeJ4F2Q6tTPYJozlKWkrQ7lIX7ORP0aZYwmc5/Wly4UNzMimj2Vuosl6MmIXH+G2g==}
     peerDependencies:
       '@chakra-ui/form-control': ^2.0.0
@@ -7254,17 +7074,17 @@ packages:
       react: ^18.0.0
       react-dom: ^18.0.0
     dependencies:
-      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/layout': 2.3.1(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/media-query': 3.3.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/menu': 2.2.1(@chakra-ui/system@2.6.2)(framer-motion@11.0.22)(react@18.2.0)
-      '@chakra-ui/spinner': 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0)
-      '@emotion/react': 11.11.4(@types/react@18.2.73)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-select: 5.7.7(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
+      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/layout': 2.3.1(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/media-query': 3.3.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/menu': 2.2.1(@chakra-ui/system@2.6.2)(framer-motion@11.1.8)(react@18.3.1)
+      '@chakra-ui/spinner': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.1)
+      '@emotion/react': 11.11.4(@types/react@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-select: 5.7.7(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
     dev: false
@@ -7334,8 +7154,8 @@ packages:
       consola: 3.2.3
     dev: true
 
-  /classcat@5.0.4:
-    resolution: {integrity: sha512-sbpkOw6z413p+HDGcBENe498WM9woqWHiJxCq7nvmxe9WmrUmqfAcxpIwAiMtM5Q3AhYkzXcNQHqsWq0mND51g==}
+  /classcat@5.0.5:
+    resolution: {integrity: sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==}
     dev: false
 
   /clean-stack@2.2.0:
@@ -7501,6 +7321,10 @@ packages:
       yargs: 17.7.2
     dev: true
 
+  /confbox@0.1.7:
+    resolution: {integrity: sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==}
+    dev: true
+
   /consola@3.2.3:
     resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -7541,8 +7365,8 @@ packages:
       toggle-selection: 1.0.6
     dev: false
 
-  /core-js-compat@3.36.1:
-    resolution: {integrity: sha512-Dk997v9ZCt3X/npqzyGdTlq6t7lDBhZwGvV94PKzDArjp7BTRm7WlDAXYd/OWdeFHO8OChQYRJNJvUCqCbrtKA==}
+  /core-js-compat@3.37.0:
+    resolution: {integrity: sha512-vYq4L+T8aS5UuFg4UwDhc7YNRWVeVZwltad9C/jV3R2LgVOpS9BDr7l/WL6BN0dbV3k1XejPTHqqEzJgsa0frA==}
     dependencies:
       browserslist: 4.23.0
     dev: true
@@ -7676,11 +7500,6 @@ packages:
       d3-transition: 3.0.1(d3-selection@3.0.0)
     dev: false
 
-  /data-uri-to-buffer@3.0.1:
-    resolution: {integrity: sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==}
-    engines: {node: '>= 6'}
-    dev: true
-
   /data-view-buffer@1.0.1:
     resolution: {integrity: sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==}
     engines: {node: '>= 0.4'}
@@ -7712,7 +7531,7 @@ packages:
     resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
     engines: {node: '>=0.11'}
     dependencies:
-      '@babel/runtime': 7.24.1
+      '@babel/runtime': 7.24.5
     dev: true
 
   /dateformat@5.0.3:
@@ -7941,7 +7760,7 @@ packages:
   /dom-helpers@5.2.1:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
     dependencies:
-      '@babel/runtime': 7.24.1
+      '@babel/runtime': 7.24.5
       csstype: 3.1.3
     dev: false
 
@@ -7961,10 +7780,10 @@ packages:
     dependencies:
       chalk: 4.1.2
       fs-extra: 11.2.0
-      glob: 10.3.10
+      glob: 10.3.12
       ora: 5.4.1
       tslib: 2.6.2
-      typescript: 5.4.3
+      typescript: 5.4.5
       yargs: 17.7.2
     dev: true
 
@@ -7993,16 +7812,16 @@ packages:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
     dev: true
 
-  /ejs@3.1.9:
-    resolution: {integrity: sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==}
+  /ejs@3.1.10:
+    resolution: {integrity: sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==}
     engines: {node: '>=0.10.0'}
     hasBin: true
     dependencies:
-      jake: 10.8.7
+      jake: 10.9.1
     dev: true
 
-  /electron-to-chromium@1.4.719:
-    resolution: {integrity: sha512-FbWy2Q2YgdFzkFUW/W5jBjE9dj+804+98E4Pup78JBPnbdb3pv6IneY2JCPKdeKLh3AOKHQeYf+KwLr7mxGh6Q==}
+  /electron-to-chromium@1.4.757:
+    resolution: {integrity: sha512-jftDaCknYSSt/+KKeXzH3LX5E2CvRLm75P3Hj+J/dv3CL0qUYcOt13d5FN1NiL5IJbbhzHrb3BomeG2tkSlZmw==}
     dev: true
 
   /emoji-regex@8.0.0:
@@ -8013,13 +7832,6 @@ packages:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
     dev: true
 
-  /encode-registry@3.0.1:
-    resolution: {integrity: sha512-6qOwkl1g0fv0DN3Y3ggr2EaZXN71aoAqPp3p/pVaWSBSIo+YjLOWN61Fva43oVyQNPf7kgm8lkudzlzojwE2jw==}
-    engines: {node: '>=10'}
-    dependencies:
-      mem: 8.1.1
-    dev: true
-
   /encodeurl@1.0.2:
     resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
     engines: {node: '>= 0.8'}
@@ -8034,7 +7846,7 @@ packages:
   /engine.io-client@6.5.3:
     resolution: {integrity: sha512-9Z0qLB0NIisTRt1DZ/8U2k12RJn8yls/nXMZLn+/N8hANT3TcYjKFKcwbw5zFQiN4NTde3TSY9zb79e1ij6j9Q==}
     dependencies:
-      '@socket.io/component-emitter': 3.1.0
+      '@socket.io/component-emitter': 3.1.2
       debug: 4.3.4
       engine.io-parser: 5.2.2
       ws: 8.11.0
@@ -8055,16 +7867,12 @@ packages:
     engines: {node: '>=0.12'}
     dev: true
 
-  /envinfo@7.11.1:
-    resolution: {integrity: sha512-8PiZgZNIB4q/Lw4AhOvAfB/ityHAd2bli3lESSWmWSzSsl5dKpy5N1d1Rfkd2teq/g9xN90lc6o98DOjMeYHpg==}
+  /envinfo@7.13.0:
+    resolution: {integrity: sha512-cvcaMr7KqXVh4nyzGTVqTum+gAiL265x5jUWQIDLq//zOGbW+gSW/C+OWLleY/rs9Qole6AZLMXPbtIFQbqu+Q==}
     engines: {node: '>=4'}
     hasBin: true
     dev: true
 
-  /err-code@2.0.3:
-    resolution: {integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==}
-    dev: true
-
   /error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
     dependencies:
@@ -8076,8 +7884,8 @@ packages:
       stackframe: 1.3.4
     dev: false
 
-  /es-abstract@1.23.2:
-    resolution: {integrity: sha512-60s3Xv2T2p1ICykc7c+DNDPLDMm9t4QxCOUU0K9JxiLjM3C1zB9YVdN7tjxrFd4+AkZ8CdX1ovUga4P2+1e+/w==}
+  /es-abstract@1.23.3:
+    resolution: {integrity: sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==}
     engines: {node: '>= 0.4'}
     dependencies:
       array-buffer-byte-length: 1.0.1
@@ -8095,7 +7903,7 @@ packages:
       function.prototype.name: 1.1.6
       get-intrinsic: 1.2.4
       get-symbol-description: 1.0.2
-      globalthis: 1.0.3
+      globalthis: 1.0.4
       gopd: 1.0.1
       has-property-descriptors: 1.0.2
       has-proto: 1.0.3
@@ -8152,18 +7960,18 @@ packages:
       stop-iteration-iterator: 1.0.0
     dev: true
 
-  /es-iterator-helpers@1.0.18:
-    resolution: {integrity: sha512-scxAJaewsahbqTYrGKJihhViaM6DDZDDoucfvzNbK0pOren1g/daDQ3IAhzn+1G14rBG7w+i5N+qul60++zlKA==}
+  /es-iterator-helpers@1.0.19:
+    resolution: {integrity: sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==}
     engines: {node: '>= 0.4'}
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.2
+      es-abstract: 1.23.3
       es-errors: 1.3.0
       es-set-tostringtag: 2.0.3
       function-bind: 1.1.2
       get-intrinsic: 1.2.4
-      globalthis: 1.0.3
+      globalthis: 1.0.4
       has-property-descriptors: 1.0.2
       has-proto: 1.0.3
       has-symbols: 1.0.3
@@ -8301,7 +8109,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-module-utils@2.8.1(@typescript-eslint/parser@7.4.0)(eslint-import-resolver-node@0.3.9)(eslint@8.57.0):
+  /eslint-module-utils@2.8.1(@typescript-eslint/parser@7.8.0)(eslint-import-resolver-node@0.3.9)(eslint@8.57.0):
     resolution: {integrity: sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -8322,7 +8130,7 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 7.4.0(eslint@8.57.0)(typescript@5.4.3)
+      '@typescript-eslint/parser': 7.8.0(eslint@8.57.0)(typescript@5.4.5)
       debug: 3.2.7
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
@@ -8338,7 +8146,7 @@ packages:
       requireindex: 1.1.0
     dev: true
 
-  /eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.4.0)(eslint@8.57.0):
+  /eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.8.0)(eslint@8.57.0):
     resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==}
     engines: {node: '>=4'}
     peerDependencies:
@@ -8348,7 +8156,7 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 7.4.0(eslint@8.57.0)(typescript@5.4.3)
+      '@typescript-eslint/parser': 7.8.0(eslint@8.57.0)(typescript@5.4.5)
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5
       array.prototype.flat: 1.3.2
@@ -8357,7 +8165,7 @@ packages:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.4.0)(eslint-import-resolver-node@0.3.9)(eslint@8.57.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.8.0)(eslint-import-resolver-node@0.3.9)(eslint@8.57.0)
       hasown: 2.0.2
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -8383,8 +8191,8 @@ packages:
       load-tsconfig: 0.2.5
     dev: true
 
-  /eslint-plugin-react-hooks@4.6.0(eslint@8.57.0):
-    resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==}
+  /eslint-plugin-react-hooks@4.6.2(eslint@8.57.0):
+    resolution: {integrity: sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==}
     engines: {node: '>=10'}
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
@@ -8412,7 +8220,7 @@ packages:
       array.prototype.toreversed: 1.1.2
       array.prototype.tosorted: 1.1.3
       doctrine: 2.1.0
-      es-iterator-helpers: 1.0.18
+      es-iterator-helpers: 1.0.19
       eslint: 8.57.0
       estraverse: 5.3.0
       jsx-ast-utils: 3.3.5
@@ -8427,22 +8235,22 @@ packages:
       string.prototype.matchall: 4.0.11
     dev: true
 
-  /eslint-plugin-simple-import-sort@12.0.0(eslint@8.57.0):
-    resolution: {integrity: sha512-8o0dVEdAkYap0Cn5kNeklaKcT1nUsa3LITWEuFk3nJifOoD+5JQGoyDUW2W/iPWwBsNBJpyJS9y4je/BgxLcyQ==}
+  /eslint-plugin-simple-import-sort@12.1.0(eslint@8.57.0):
+    resolution: {integrity: sha512-Y2fqAfC11TcG/WP3TrI1Gi3p3nc8XJyEOJYHyEPEGI/UAgNx6akxxlX74p7SbAQdLcgASKhj8M0GKvH3vq/+ig==}
     peerDependencies:
       eslint: '>=5.0.0'
     dependencies:
       eslint: 8.57.0
     dev: true
 
-  /eslint-plugin-storybook@0.8.0(eslint@8.57.0)(typescript@5.4.3):
+  /eslint-plugin-storybook@0.8.0(eslint@8.57.0)(typescript@5.4.5):
     resolution: {integrity: sha512-CZeVO5EzmPY7qghO2t64oaFM+8FTaD4uzOEjHKp516exyTKo+skKAL9GI3QALS2BXhyALJjNtwbmr1XinGE8bA==}
     engines: {node: '>= 18'}
     peerDependencies:
       eslint: '>=6'
     dependencies:
       '@storybook/csf': 0.0.1
-      '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.4.3)
+      '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.4.5)
       eslint: 8.57.0
       requireindex: 1.2.0
       ts-dedent: 2.2.0
@@ -8451,8 +8259,8 @@ packages:
       - typescript
     dev: true
 
-  /eslint-plugin-unused-imports@3.1.0(@typescript-eslint/eslint-plugin@7.4.0)(eslint@8.57.0):
-    resolution: {integrity: sha512-9l1YFCzXKkw1qtAru1RWUtG2EVDZY0a0eChKXcL+EZ5jitG7qxdctu4RnvhOJHv4xfmUf7h+JJPINlVpGhZMrw==}
+  /eslint-plugin-unused-imports@3.2.0(@typescript-eslint/eslint-plugin@7.8.0)(eslint@8.57.0):
+    resolution: {integrity: sha512-6uXyn6xdINEpxE1MtDjxQsyXB37lfyO2yKGVVgtD7WEWQGORSOZjgrD6hBhvGv4/SO+TOlS+UnC6JppRqbuwGQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       '@typescript-eslint/eslint-plugin': 6 - 7
@@ -8461,7 +8269,7 @@ packages:
       '@typescript-eslint/eslint-plugin':
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 7.4.0(@typescript-eslint/parser@7.4.0)(eslint@8.57.0)(typescript@5.4.3)
+      '@typescript-eslint/eslint-plugin': 7.8.0(@typescript-eslint/parser@7.8.0)(eslint@8.57.0)(typescript@5.4.5)
       eslint: 8.57.0
       eslint-rule-composer: 0.3.0
     dev: true
@@ -8532,7 +8340,7 @@ packages:
       lodash.merge: 4.6.2
       minimatch: 3.1.2
       natural-compare: 1.4.0
-      optionator: 0.9.3
+      optionator: 0.9.4
       strip-ansi: 6.0.1
       text-table: 0.2.0
     transitivePeerDependencies:
@@ -8700,10 +8508,6 @@ packages:
       boolean: 3.2.0
     dev: false
 
-  /fast-safe-stringify@2.1.1:
-    resolution: {integrity: sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==}
-    dev: true
-
   /fast-shallow-equal@1.0.0:
     resolution: {integrity: sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==}
     dev: false
@@ -8718,16 +8522,6 @@ packages:
       reusify: 1.0.4
     dev: true
 
-  /fetch-blob@2.1.2:
-    resolution: {integrity: sha512-YKqtUDwqLyfyMnmbw8XD6Q8j9i/HggKtPEI+pZ1+8bvheBu78biSmNaXWusx1TauGqtUUGx/cBb1mKdq2rLYow==}
-    engines: {node: ^10.17.0 || >=12.3.0}
-    peerDependencies:
-      domexception: '*'
-    peerDependenciesMeta:
-      domexception:
-        optional: true
-    dev: true
-
   /fetch-retry@5.0.6:
     resolution: {integrity: sha512-3yurQZ2hD9VISAhJJP9bpYFNQrHHBXE2JxxjY5aLEcDi46RmAzJE2OC9FAde0yis5ElW0jTTzs0zfg/Cca4XqQ==}
     dev: true
@@ -8739,6 +8533,13 @@ packages:
       flat-cache: 3.2.0
     dev: true
 
+  /file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+    dependencies:
+      flat-cache: 4.0.1
+    dev: true
+
   /file-selector@0.6.0:
     resolution: {integrity: sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==}
     engines: {node: '>= 12'}
@@ -8849,12 +8650,20 @@ packages:
       rimraf: 3.0.2
     dev: true
 
+  /flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+    dependencies:
+      flatted: 3.3.1
+      keyv: 4.5.4
+    dev: true
+
   /flatted@3.3.1:
     resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
     dev: true
 
-  /flow-parser@0.232.0:
-    resolution: {integrity: sha512-U8vcKyYdM+Kb0tPzfPJ5JyPMU0uXKwHxp0L6BcEc+wBlbTW9qRhOqV5DeGXclgclVvtqQNGEG8Strj/b6c/IxA==}
+  /flow-parser@0.235.1:
+    resolution: {integrity: sha512-s04193L4JE+ntEcQXbD6jxRRlyj9QXcgEl2W6xSjH4l9x4b0eHoCHfbYHjqf9LdZFUiM5LhgpiqsvLj/AyOyYQ==}
     engines: {node: '>=0.4.0'}
     dev: true
 
@@ -8890,7 +8699,7 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
-  /framer-motion@10.18.0(react-dom@18.2.0)(react@18.2.0):
+  /framer-motion@10.18.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==}
     peerDependencies:
       react: ^18.0.0
@@ -8901,15 +8710,15 @@ packages:
       react-dom:
         optional: true
     dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
       tslib: 2.6.2
     optionalDependencies:
       '@emotion/is-prop-valid': 0.8.8
     dev: false
 
-  /framer-motion@11.0.22(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-kWyldNJLyKDvLWjPYFmgngQYLiU8973BtAeVBc83r2cnil/NBUQJb1ff/6/EweNQYb5BW3PaXFjZa4D3pn/W2Q==}
+  /framer-motion@11.1.8(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-W2OGZmNfUarhh6A/rLXernq/JthjekbgeRWqzigPpbaShe/+HfQKUDSjiEdL302XOlINtO+SCFCiR1hlqN3uOA==}
     peerDependencies:
       '@emotion/is-prop-valid': '*'
       react: ^18.0.0
@@ -8922,8 +8731,8 @@ packages:
       react-dom:
         optional: true
     dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
       tslib: 2.6.2
     dev: false
 
@@ -8942,15 +8751,6 @@ packages:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
     dev: true
 
-  /fs-extra@10.1.0:
-    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      graceful-fs: 4.2.11
-      jsonfile: 6.1.0
-      universalify: 2.0.1
-    dev: true
-
   /fs-extra@11.1.1:
     resolution: {integrity: sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==}
     engines: {node: '>=14.14'}
@@ -9006,7 +8806,7 @@ packages:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.2
+      es-abstract: 1.23.3
       functions-have-names: 1.2.3
     dev: true
 
@@ -9113,16 +8913,16 @@ packages:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
     dev: true
 
-  /glob@10.3.10:
-    resolution: {integrity: sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==}
+  /glob@10.3.12:
+    resolution: {integrity: sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==}
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
     dependencies:
       foreground-child: 3.1.1
       jackspeak: 2.3.6
-      minimatch: 9.0.3
-      minipass: 7.0.4
-      path-scurry: 1.10.1
+      minimatch: 9.0.4
+      minipass: 7.1.0
+      path-scurry: 1.10.2
     dev: true
 
   /glob@7.2.3:
@@ -9148,11 +8948,12 @@ packages:
       type-fest: 0.20.2
     dev: true
 
-  /globalthis@1.0.3:
-    resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
+  /globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
     engines: {node: '>= 0.4'}
     dependencies:
       define-properties: 1.2.1
+      gopd: 1.0.1
 
   /globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
@@ -9284,20 +9085,6 @@ packages:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
     dev: true
 
-  /hosted-git-info@4.1.0:
-    resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==}
-    engines: {node: '>=10'}
-    dependencies:
-      lru-cache: 6.0.0
-    dev: true
-
-  /hosted-git-info@7.0.1:
-    resolution: {integrity: sha512-+K84LB1DYwMHoHSgaOY/Jfhw3ucPmSET5v98Ke/HdNSw4a0UktWzyW1mjhjpuxxTqOOsfWT/7iVshHmVZ4IpOA==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-    dependencies:
-      lru-cache: 10.2.0
-    dev: true
-
   /html-parse-stringify@3.0.1:
     resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
     dependencies:
@@ -9334,18 +9121,18 @@ packages:
     resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==}
     dev: false
 
-  /i18next-http-backend@2.5.0:
-    resolution: {integrity: sha512-Z/aQsGZk1gSxt2/DztXk92DuDD20J+rNudT7ZCdTrNOiK8uQppfvdjq9+DFQfpAnFPn3VZS+KQIr1S/W1KxhpQ==}
+  /i18next-http-backend@2.5.1:
+    resolution: {integrity: sha512-+rNX1tghdVxdfjfPt0bI1sNg5ahGW9kA7OboG7b4t03Fp69NdDlRIze6yXhIbN8rbHxJ8IP4dzRm/okZ15lkQg==}
     dependencies:
       cross-fetch: 4.0.0
     transitivePeerDependencies:
       - encoding
     dev: false
 
-  /i18next@23.10.1:
-    resolution: {integrity: sha512-NDiIzFbcs3O9PXpfhkjyf7WdqFn5Vq6mhzhtkXzj51aOcNuPNcTwuYNuXCpHsanZGHlHKL35G7huoFeVic1hng==}
+  /i18next@23.11.3:
+    resolution: {integrity: sha512-Pq/aSKowir7JM0rj+Wa23Kb6KKDUGno/HjG+wRQu0PxoTbpQ4N89MAT0rFGvXmLkRLNMb1BbBOKGozl01dabzg==}
     dependencies:
-      '@babel/runtime': 7.24.1
+      '@babel/runtime': 7.24.5
     dev: false
 
   /iconv-lite@0.4.24:
@@ -9372,8 +9159,8 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
-  /immer@10.0.4:
-    resolution: {integrity: sha512-cuBuGK40P/sk5IzWa9QPUaAdvPHjkk1c+xYsd9oZw+YQQEV+10G0P5uMpGctZZKnyQ+ibRO08bD25nWLmYi2pw==}
+  /immer@10.1.1:
+    resolution: {integrity: sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==}
     dev: false
 
   /import-fresh@3.3.0:
@@ -9398,10 +9185,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /individual@3.0.0:
-    resolution: {integrity: sha512-rUY5vtT748NMRbEMrTNiFfy29BgGZwGXUi2NFUVMWQrogSLzlJvQV9eeMWi+g1aVaQ53tpyLAQtd5x/JH0Nh1g==}
-    dev: true
-
   /inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     dependencies:
@@ -9726,11 +9509,6 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
 
-  /isexe@3.1.1:
-    resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==}
-    engines: {node: '>=16'}
-    dev: true
-
   /isobject@3.0.1:
     resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
     engines: {node: '>=0.10.0'}
@@ -9751,13 +9529,13 @@ packages:
       set-function-name: 2.0.2
     dev: true
 
-  /its-fine@1.1.3(react@18.2.0):
-    resolution: {integrity: sha512-mncCA+yb6tuh5zK26cHqKlsSyxm4zdm4YgJpxycyx6p9fgxgK5PLu3iDVpKhzTn57Yrv3jk/r0aK0RFTT1OjFw==}
+  /its-fine@1.2.5(react@18.3.1):
+    resolution: {integrity: sha512-fXtDA0X0t0eBYAGLVM5YsgJGsJ5jEmqZEPrGbzdf5awjv0xE7nqv3TVnvtUF060Tkes15DbDAKW/I48vsb6SyA==}
     peerDependencies:
       react: '>=18.0'
     dependencies:
       '@types/react-reconciler': 0.28.8
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
   /jackspeak@2.3.6:
@@ -9769,8 +9547,8 @@ packages:
       '@pkgjs/parseargs': 0.11.0
     dev: true
 
-  /jake@10.8.7:
-    resolution: {integrity: sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==}
+  /jake@10.9.1:
+    resolution: {integrity: sha512-61btcOHNnLnsOdtLgA5efqQWjnSi/vow5HbI7HMdKKWqvrKR1bLK3BPlJn9gcSaP2ewuamUSMB5XEy76KUIS2w==}
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
@@ -9796,8 +9574,8 @@ packages:
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  /js-tokens@8.0.3:
-    resolution: {integrity: sha512-UfJMcSJc+SEXEl9lH/VLHSZbThQyLpw1vLO1Lb+j4RWDvG3N2f7yj3PVQA3cmkTBNldJ9eFnM+xEXxHIXrYiJw==}
+  /js-tokens@9.0.0:
+    resolution: {integrity: sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==}
     dev: true
 
   /js-yaml@4.1.0:
@@ -9807,7 +9585,7 @@ packages:
       argparse: 2.0.1
     dev: true
 
-  /jscodeshift@0.15.2(@babel/preset-env@7.24.3):
+  /jscodeshift@0.15.2(@babel/preset-env@7.24.5):
     resolution: {integrity: sha512-FquR7Okgmc4Sd0aEDwqho3rEiKR3BdvuG9jfdHjLJ6JQoWSMpavug3AoIfnfWhxFlf+5pzQh8qjqz0DWFrNQzA==}
     hasBin: true
     peerDependencies:
@@ -9816,20 +9594,20 @@ packages:
       '@babel/preset-env':
         optional: true
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/parser': 7.24.1
-      '@babel/plugin-transform-class-properties': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.24.3)
-      '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.24.3)
-      '@babel/preset-env': 7.24.3(@babel/core@7.24.3)
-      '@babel/preset-flow': 7.24.1(@babel/core@7.24.3)
-      '@babel/preset-typescript': 7.24.1(@babel/core@7.24.3)
-      '@babel/register': 7.23.7(@babel/core@7.24.3)
-      babel-core: 7.0.0-bridge.0(@babel/core@7.24.3)
+      '@babel/core': 7.24.5
+      '@babel/parser': 7.24.5
+      '@babel/plugin-transform-class-properties': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.24.5)
+      '@babel/plugin-transform-optional-chaining': 7.24.5(@babel/core@7.24.5)
+      '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.24.5)
+      '@babel/preset-env': 7.24.5(@babel/core@7.24.5)
+      '@babel/preset-flow': 7.24.1(@babel/core@7.24.5)
+      '@babel/preset-typescript': 7.24.1(@babel/core@7.24.5)
+      '@babel/register': 7.23.7(@babel/core@7.24.5)
+      babel-core: 7.0.0-bridge.0(@babel/core@7.24.5)
       chalk: 4.1.2
-      flow-parser: 0.232.0
+      flow-parser: 0.235.1
       graceful-fs: 4.2.11
       micromatch: 4.0.5
       neo-async: 2.6.2
@@ -9859,11 +9637,6 @@ packages:
   /json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
-  /json-parse-even-better-errors@3.0.1:
-    resolution: {integrity: sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    dev: true
-
   /json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
     dev: true
@@ -9872,10 +9645,6 @@ packages:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: true
 
-  /json-stringify-safe@5.0.1:
-    resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
-    dev: true
-
   /json5@1.0.2:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
@@ -9889,10 +9658,6 @@ packages:
     hasBin: true
     dev: true
 
-  /jsonc-parser@3.2.1:
-    resolution: {integrity: sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==}
-    dev: true
-
   /jsondiffpatch@0.6.0:
     resolution: {integrity: sha512-3QItJOXp2AP1uv7waBkao5nCvhEv+QmJAd38Ybq7wNI74Q+BBmnLn4EDKz6yI9xGAIQoUF87qHt+kc1IVxB4zQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -9948,8 +9713,8 @@ packages:
     engines: {node: '>= 8'}
     dev: false
 
-  /knip@5.6.1(@types/node@20.11.30)(typescript@5.4.3):
-    resolution: {integrity: sha512-occwYqHrV6KSyM1DbpWj8qQ8pCQzsdxVxYbjhYcryoXxWmHG2scyxxB4HyxVmp3Xdora4Px+3ZV5QQDi2ArerA==}
+  /knip@5.12.3(@types/node@20.12.10)(typescript@5.4.5):
+    resolution: {integrity: sha512-LL+NsE+3H0TkUnQW6icHQ+5qSrPENmjHJyMHgzjiZPmunstrIsaRG+QjahnzoH/FjMjVJwrdwVOSvksa8ixFbw==}
     engines: {node: '>=18.6.0'}
     hasBin: true
     peerDependencies:
@@ -9958,31 +9723,24 @@ packages:
     dependencies:
       '@ericcornelissen/bash-parser': 0.5.2
       '@nodelib/fs.walk': 2.0.0
-      '@npmcli/map-workspaces': 3.0.4
-      '@npmcli/package-json': 5.0.0
-      '@pnpm/logger': 5.0.0
-      '@pnpm/workspace.pkgs-graph': 2.0.15(@pnpm/logger@5.0.0)
       '@snyk/github-codeowners': 1.1.0
-      '@types/node': 20.11.30
-      '@types/picomatch': 2.3.3
+      '@types/node': 20.12.10
       easy-table: 1.2.0
       fast-glob: 3.3.2
+      file-entry-cache: 8.0.0
       jiti: 1.21.0
       js-yaml: 4.1.0
-      micromatch: 4.0.5
       minimist: 1.2.8
       picocolors: 1.0.0
-      picomatch: 4.0.1
+      picomatch: 4.0.2
       pretty-ms: 9.0.0
+      resolve: 1.22.8
       smol-toml: 1.1.4
       strip-json-comments: 5.0.1
       summary: 2.1.0
-      typescript: 5.4.3
-      zod: 3.22.4
-      zod-validation-error: 3.0.3(zod@3.22.4)
-    transitivePeerDependencies:
-      - bluebird
-      - domexception
+      typescript: 5.4.5
+      zod: 3.23.6
+      zod-validation-error: 3.2.0(zod@3.23.6)
     dev: true
 
   /kolorist@1.8.0:
@@ -10026,16 +9784,6 @@ packages:
       ts-error: 1.0.6
     dev: false
 
-  /load-json-file@6.2.0:
-    resolution: {integrity: sha512-gUD/epcRms75Cw8RT1pUdHugZYM5ce64ucs2GEISABwkRsOQr0q2wm/MV2TKThycIe5e0ytRweW2RZxclogCdQ==}
-    engines: {node: '>=8'}
-    dependencies:
-      graceful-fs: 4.2.11
-      parse-json: 5.2.0
-      strip-bom: 4.0.0
-      type-fest: 0.6.0
-    dev: true
-
   /load-tsconfig@0.2.5:
     resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -10045,8 +9793,8 @@ packages:
     resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
     engines: {node: '>=14'}
     dependencies:
-      mlly: 1.6.1
-      pkg-types: 1.0.3
+      mlly: 1.7.0
+      pkg-types: 1.1.0
     dev: true
 
   /locate-path@3.0.0:
@@ -10123,8 +9871,8 @@ packages:
       get-func-name: 2.0.2
     dev: true
 
-  /lru-cache@10.2.0:
-    resolution: {integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==}
+  /lru-cache@10.2.2:
+    resolution: {integrity: sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==}
     engines: {node: 14 || >=16.14}
     dev: true
 
@@ -10159,9 +9907,8 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
-  /magic-string@0.30.8:
-    resolution: {integrity: sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==}
-    engines: {node: '>=12'}
+  /magic-string@0.30.10:
+    resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
@@ -10181,13 +9928,6 @@ packages:
       semver: 6.3.1
     dev: true
 
-  /map-age-cleaner@0.1.3:
-    resolution: {integrity: sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==}
-    engines: {node: '>=6'}
-    dependencies:
-      p-defer: 1.0.0
-    dev: true
-
   /map-obj@2.0.0:
     resolution: {integrity: sha512-TzQSV2DiMYgoF5RycneKVUzIa9bQsj/B3tTgsE3dOGqlzHnGIDaC7XBE7grnA+8kZPnfqSGFe95VHc2oc0VFUQ==}
     engines: {node: '>=4'}
@@ -10197,13 +9937,13 @@ packages:
     resolution: {integrity: sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==}
     dev: true
 
-  /markdown-to-jsx@7.3.2(react@18.2.0):
+  /markdown-to-jsx@7.3.2(react@18.3.1):
     resolution: {integrity: sha512-B+28F5ucp83aQm+OxNrPkS8z0tMKaeHiy0lHJs3LqCyDQFtWuenaIrkaVTgAm1pf1AU85LXltva86hlaT17i8Q==}
     engines: {node: '>= 10'}
     peerDependencies:
       react: '>= 0.14.0'
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
     dev: true
 
   /mdn-data@2.0.14:
@@ -10215,22 +9955,6 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
-  /mem@6.1.1:
-    resolution: {integrity: sha512-Ci6bIfq/UgcxPTYa8dQQ5FY3BzKkT894bwXWXxC/zqs0XgMO2cT20CGkOqda7gZNkmK5VP4x89IGZ6K7hfbn3Q==}
-    engines: {node: '>=8'}
-    dependencies:
-      map-age-cleaner: 0.1.3
-      mimic-fn: 3.1.0
-    dev: true
-
-  /mem@8.1.1:
-    resolution: {integrity: sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA==}
-    engines: {node: '>=10'}
-    dependencies:
-      map-age-cleaner: 0.1.3
-      mimic-fn: 3.1.0
-    dev: true
-
   /memoize-one@6.0.0:
     resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
     dev: false
@@ -10290,11 +10014,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /mimic-fn@3.1.0:
-    resolution: {integrity: sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==}
-    engines: {node: '>=8'}
-    dev: true
-
   /mimic-fn@4.0.0:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
@@ -10324,8 +10043,8 @@ packages:
       brace-expansion: 2.0.1
     dev: true
 
-  /minimatch@9.0.3:
-    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
+  /minimatch@9.0.4:
+    resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==}
     engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
       brace-expansion: 2.0.1
@@ -10347,8 +10066,8 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /minipass@7.0.4:
-    resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
+  /minipass@7.1.0:
+    resolution: {integrity: sha512-oGZRv2OT1lO2UF1zUcwdTb3wqUwI0kBGTgt/T7OdSj6M6N5m3o5uPf0AIW6lVxGGoiWUR7e2AwTE+xiwK8WQig==}
     engines: {node: '>=16 || 14 >=14.17'}
     dev: true
 
@@ -10370,12 +10089,12 @@ packages:
     hasBin: true
     dev: true
 
-  /mlly@1.6.1:
-    resolution: {integrity: sha512-vLgaHvaeunuOXHSmEbZ9izxPx3USsk8KCQ8iC+aTlp5sKRSoZvwhHh5L9VbKSaVC6sJDqbyohIS76E2VmHIPAA==}
+  /mlly@1.7.0:
+    resolution: {integrity: sha512-U9SDaXGEREBYQgfejV97coK0UL1r+qnF2SyO9A3qcI8MzKnsIFKHNVEkrDyNncQTKQQumsasmeq84eNMdBfsNQ==}
     dependencies:
       acorn: 8.11.3
       pathe: 1.1.2
-      pkg-types: 1.0.3
+      pkg-types: 1.1.0
       ufo: 1.5.3
     dev: true
 
@@ -10398,7 +10117,7 @@ packages:
     resolution: {integrity: sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==}
     dev: true
 
-  /nano-css@5.6.1(react-dom@18.2.0)(react@18.2.0):
+  /nano-css@5.6.1(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-T2Mhc//CepkTa3X4pUhKgbEheJHYAxD0VptuqFhDbGMUWVV2m+lkNiW/Ieuj35wrfC8Zm0l7HvssQh7zcEttSw==}
     peerDependencies:
       react: '*'
@@ -10409,11 +10128,11 @@ packages:
       csstype: 3.1.3
       fastest-stable-stringify: 2.0.2
       inline-style-prefixer: 7.0.0
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
       rtl-css-js: 1.16.1
       stacktrace-js: 2.0.2
-      stylis: 4.3.1
+      stylis: 4.3.2
     dev: false
 
   /nanoid@3.3.7:
@@ -10422,8 +10141,8 @@ packages:
     hasBin: true
     dev: true
 
-  /nanostores@0.10.0:
-    resolution: {integrity: sha512-Poy5+9wFXOD0jAstn4kv9n686U2BFw48z/W8lms8cS8lcbRz7BU20JxZ3e/kkKQVfRrkm4yLWCUA6GQINdvJCQ==}
+  /nanostores@0.10.3:
+    resolution: {integrity: sha512-Nii8O1XqmawqSCf9o2aWqVxhKRN01+iue9/VEd1TiJCr9VT5XxgPFbF1Edl1XN6pwJcZRsl8Ki+z01yb/T/C2g==}
     engines: {node: ^18.0.0 || >=20.0.0}
     dev: false
 
@@ -10436,18 +10155,6 @@ packages:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
 
-  /ndjson@2.0.0:
-    resolution: {integrity: sha512-nGl7LRGrzugTtaFcJMhLbpzJM6XdivmbkdlaGcrk/LXg2KL/YBC6z1g70xh0/al+oFuVFP8N8kiWRucmeEH/qQ==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dependencies:
-      json-stringify-safe: 5.0.1
-      minimist: 1.2.8
-      readable-stream: 3.6.2
-      split2: 3.2.2
-      through2: 4.0.2
-    dev: true
-
   /nearley@2.20.1:
     resolution: {integrity: sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==}
     hasBin: true
@@ -10494,16 +10201,6 @@ packages:
     dependencies:
       whatwg-url: 5.0.0
 
-  /node-fetch@3.0.0-beta.9:
-    resolution: {integrity: sha512-RdbZCEynH2tH46+tj0ua9caUHVWrd/RHnRfvly2EVdqGmI3ndS1Vn/xjm5KuGejDt2RNDQsVRLPNd2QPwcewVg==}
-    engines: {node: ^10.17 || >=12.3}
-    dependencies:
-      data-uri-to-buffer: 3.0.1
-      fetch-blob: 2.1.2
-    transitivePeerDependencies:
-      - domexception
-    dev: true
-
   /node-releases@2.0.14:
     resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
     dev: true
@@ -10517,53 +10214,11 @@ packages:
       validate-npm-package-license: 3.0.4
     dev: true
 
-  /normalize-package-data@6.0.0:
-    resolution: {integrity: sha512-UL7ELRVxYBHBgYEtZCXjxuD5vPxnmvMGq0jp/dGPKKrN7tfsBh2IY7TlJ15WWwdjRWD3RJbnsygUurTK3xkPkg==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-    dependencies:
-      hosted-git-info: 7.0.1
-      is-core-module: 2.13.1
-      semver: 7.6.0
-      validate-npm-package-license: 3.0.4
-    dev: true
-
   /normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /npm-install-checks@6.3.0:
-    resolution: {integrity: sha512-W29RiK/xtpCGqn6f3ixfRYGk+zRyr+Ew9F2E20BfXxT5/euLdA/Nm7fO7OeTGuAmTs30cpgInyJ0cYe708YTZw==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    dependencies:
-      semver: 7.6.0
-    dev: true
-
-  /npm-normalize-package-bin@3.0.1:
-    resolution: {integrity: sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    dev: true
-
-  /npm-package-arg@11.0.1:
-    resolution: {integrity: sha512-M7s1BD4NxdAvBKUPqqRW957Xwcl/4Zvo8Aj+ANrzvIPzGJZElrH7Z//rSaec2ORcND6FHHLnZeY8qgTpXDMFQQ==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-    dependencies:
-      hosted-git-info: 7.0.1
-      proc-log: 3.0.0
-      semver: 7.6.0
-      validate-npm-package-name: 5.0.0
-    dev: true
-
-  /npm-pick-manifest@9.0.0:
-    resolution: {integrity: sha512-VfvRSs/b6n9ol4Qb+bDwNGUXutpy76x6MARw/XssevE0TnctIKcmklJZM5Z7nqs5z5aW+0S63pgCNbpkUNNXBg==}
-    engines: {node: ^16.14.0 || >=18.0.0}
-    dependencies:
-      npm-install-checks: 6.3.0
-      npm-normalize-package-bin: 3.0.1
-      npm-package-arg: 11.0.1
-      semver: 7.6.0
-    dev: true
-
   /npm-run-path@4.0.1:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
@@ -10644,7 +10299,7 @@ packages:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.2
+      es-abstract: 1.23.3
       es-object-atoms: 1.0.0
     dev: true
 
@@ -10654,7 +10309,7 @@ packages:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.2
+      es-abstract: 1.23.3
     dev: true
 
   /object.hasown@1.1.4:
@@ -10662,7 +10317,7 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       define-properties: 1.2.1
-      es-abstract: 1.23.2
+      es-abstract: 1.23.3
       es-object-atoms: 1.0.0
     dev: true
 
@@ -10732,20 +10387,20 @@ packages:
       fast-glob: 3.3.2
       js-yaml: 4.1.0
       supports-color: 9.4.0
-      undici: 5.28.3
+      undici: 5.28.4
       yargs-parser: 21.1.1
     dev: true
 
-  /optionator@0.9.3:
-    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
+  /optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
     dependencies:
-      '@aashutoshrathi/word-wrap': 1.2.6
       deep-is: 0.1.4
       fast-levenshtein: 2.0.6
       levn: 0.4.1
       prelude-ls: 1.2.1
       type-check: 0.4.0
+      word-wrap: 1.2.5
     dev: true
 
   /ora@5.4.1:
@@ -10763,25 +10418,20 @@ packages:
       wcwidth: 1.0.1
     dev: true
 
-  /overlayscrollbars-react@0.5.5(overlayscrollbars@2.6.1)(react@18.2.0):
-    resolution: {integrity: sha512-PakK1QEV/PAi4XniiTykcSeyoBmfDvgv2uBQ290IaY5ThrwvWg3Zk3Z39hosJYkyrS4mJ0zuIWtlHX4AKd2nZQ==}
+  /overlayscrollbars-react@0.5.6(overlayscrollbars@2.7.3)(react@18.3.1):
+    resolution: {integrity: sha512-E5To04bL5brn9GVCZ36SnfGanxa2I2MDkWoa4Cjo5wol7l+diAgi4DBc983V7l2nOk/OLJ6Feg4kySspQEGDBw==}
     peerDependencies:
       overlayscrollbars: ^2.0.0
       react: '>=16.8.0'
     dependencies:
-      overlayscrollbars: 2.6.1
-      react: 18.2.0
+      overlayscrollbars: 2.7.3
+      react: 18.3.1
     dev: false
 
-  /overlayscrollbars@2.6.1:
-    resolution: {integrity: sha512-V+ZAqWMYMyGBJNRDEcdRC7Ch+WT9RBx9hY8bfJSMyFObQeJoecs1Vqg7ZAzBVcpN6sCUXFAZldCbeySwmmD0RA==}
+  /overlayscrollbars@2.7.3:
+    resolution: {integrity: sha512-HmNo8RPtuGUjBhUbVpZBHH7SHci5iSAdg5zSekCZVsjzaM6z8MIr3F9RXrzf4y7m+fOY0nx0+y0emr1fqQmfoA==}
     dev: false
 
-  /p-defer@1.0.0:
-    resolution: {integrity: sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==}
-    engines: {node: '>=4'}
-    dev: true
-
   /p-limit@2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
@@ -10831,14 +10481,6 @@ packages:
       aggregate-error: 3.1.0
     dev: true
 
-  /p-memoize@4.0.1:
-    resolution: {integrity: sha512-km0sP12uE0dOZ5qP+s7kGVf07QngxyG0gS8sYFvFWhqlgzOsSy+m71aUejf/0akxj5W7gE//2G74qTv6b4iMog==}
-    engines: {node: '>=10'}
-    dependencies:
-      mem: 6.1.1
-      mimic-fn: 3.1.0
-    dev: true
-
   /p-try@2.2.0:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
@@ -10868,13 +10510,6 @@ packages:
     engines: {node: '>=18'}
     dev: true
 
-  /parse-npm-tarball-url@3.0.0:
-    resolution: {integrity: sha512-InpdgIdNe5xWMEUcrVQUniQKwnggBtJ7+SCwh7zQAZwbbIYZV9XdgJyhtmDSSvykFyQXoe4BINnzKTfCwWLs5g==}
-    engines: {node: '>=8.15'}
-    dependencies:
-      semver: 6.3.1
-    dev: true
-
   /parseurl@1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
@@ -10912,19 +10547,12 @@ packages:
   /path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
-  /path-scurry@1.10.1:
-    resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==}
+  /path-scurry@1.10.2:
+    resolution: {integrity: sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==}
     engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
-      lru-cache: 10.2.0
-      minipass: 7.0.4
-    dev: true
-
-  /path-temp@2.1.0:
-    resolution: {integrity: sha512-cMMJTAZlion/RWRRC48UbrDymEIt+/YSD/l8NqjneyDw2rDOBQcP5yRkMB4CYGn47KMhZvbblBP7Z79OsMw72w==}
-    engines: {node: '>=8.15'}
-    dependencies:
-      unique-string: 2.0.0
+      lru-cache: 10.2.2
+      minipass: 7.1.0
     dev: true
 
   /path-to-regexp@0.1.7:
@@ -10959,8 +10587,8 @@ packages:
     engines: {node: '>=8.6'}
     dev: true
 
-  /picomatch@4.0.1:
-    resolution: {integrity: sha512-xUXwsxNjwTQ8K3GnT4pCJm+xq3RUPQbmkYJTP5aFIfNIvbcc/4MUxgBaaRSZJ6yGJZiGSyYlM6MzwTsRk8SYCg==}
+  /picomatch@4.0.2:
+    resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     engines: {node: '>=12'}
     dev: true
 
@@ -10995,11 +10623,11 @@ packages:
       find-up: 5.0.0
     dev: true
 
-  /pkg-types@1.0.3:
-    resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
+  /pkg-types@1.1.0:
+    resolution: {integrity: sha512-/RpmvKdxKf8uILTtoOhAgf30wYbP2Qw+L9p3Rvshx1JZVX+XQNZQFjlbmGHEGIm4CkVPlSn+NXmIM8+9oWQaSA==}
     dependencies:
-      jsonc-parser: 3.2.1
-      mlly: 1.6.1
+      confbox: 0.1.7
+      mlly: 1.7.0
       pathe: 1.1.2
     dev: true
 
@@ -11007,7 +10635,7 @@ packages:
     resolution: {integrity: sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==}
     engines: {node: '>=10'}
     dependencies:
-      '@babel/runtime': 7.24.1
+      '@babel/runtime': 7.24.5
     dev: true
 
   /possible-typed-array-names@1.0.0:
@@ -11050,7 +10678,7 @@ packages:
     dependencies:
       '@jest/schemas': 29.6.3
       ansi-styles: 5.2.0
-      react-is: 18.2.0
+      react-is: 18.3.1
     dev: true
 
   /pretty-hrtime@1.0.3:
@@ -11065,11 +10693,6 @@ packages:
       parse-ms: 4.0.0
     dev: true
 
-  /proc-log@3.0.0:
-    resolution: {integrity: sha512-++Vn7NS4Xf9NacaU9Xq3URUuqZETPsf8L4j5/ckhaRYsfPeRyzGw+iDjFhV/Jr3uNmTvvddEJFWh5R1gRgUH8A==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    dev: true
-
   /process-nextick-args@2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
     dev: true
@@ -11079,23 +10702,6 @@ packages:
     engines: {node: '>= 0.6.0'}
     dev: true
 
-  /promise-inflight@1.0.1:
-    resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==}
-    peerDependencies:
-      bluebird: '*'
-    peerDependenciesMeta:
-      bluebird:
-        optional: true
-    dev: true
-
-  /promise-retry@2.0.1:
-    resolution: {integrity: sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==}
-    engines: {node: '>=10'}
-    dependencies:
-      err-code: 2.0.3
-      retry: 0.12.0
-    dev: true
-
   /prompts@2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
@@ -11157,8 +10763,8 @@ packages:
       side-channel: 1.0.6
     dev: true
 
-  /qs@6.12.0:
-    resolution: {integrity: sha512-trVZiI6RMOkO476zLGaBIzszOdFPnCCXHPG9kn0yuS1uz6xdVxPfZdB3vUig9pxPFDM9BRAgz/YUIVQ1/vuiUg==}
+  /qs@6.12.1:
+    resolution: {integrity: sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==}
     engines: {node: '>=0.6'}
     dependencies:
       side-channel: 1.0.6
@@ -11208,49 +10814,49 @@ packages:
       unpipe: 1.0.0
     dev: true
 
-  /re-resizable@6.9.14(react-dom@18.2.0)(react@18.2.0):
+  /re-resizable@6.9.14(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-2UbPrpezMr6gkHKNCRA/N6QGGU237SKOZ78yMHId204A/oXWSAREAIuGZNQ9qlrJosewzcsv2CphZH3u7hC6ng==}
     peerDependencies:
       react: ^16.13.1 || ^17.0.0 || ^18.0.0
       react-dom: ^16.13.1 || ^17.0.0 || ^18.0.0
     dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /react-clientside-effect@1.2.6(react@18.2.0):
+  /react-clientside-effect@1.2.6(react@18.3.1):
     resolution: {integrity: sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==}
     peerDependencies:
       react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
     dependencies:
       '@babel/runtime': 7.24.1
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /react-colorful@5.6.1(react-dom@18.2.0)(react@18.2.0):
+  /react-colorful@5.6.1(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  /react-docgen-typescript@2.2.2(typescript@5.4.3):
+  /react-docgen-typescript@2.2.2(typescript@5.4.5):
     resolution: {integrity: sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==}
     peerDependencies:
       typescript: '>= 4.3.x'
     dependencies:
-      typescript: 5.4.3
+      typescript: 5.4.5
     dev: true
 
   /react-docgen@7.0.3:
     resolution: {integrity: sha512-i8aF1nyKInZnANZ4uZrH49qn1paRgBZ7wZiCNBMnenlPzEv0mRl+ShpTVEI6wZNl8sSc79xZkivtgLKQArcanQ==}
     engines: {node: '>=16.14.0'}
     dependencies:
-      '@babel/core': 7.24.3
-      '@babel/traverse': 7.24.1
-      '@babel/types': 7.24.0
+      '@babel/core': 7.24.5
+      '@babel/traverse': 7.24.5
+      '@babel/types': 7.24.5
       '@types/babel__core': 7.20.5
       '@types/babel__traverse': 7.20.5
       '@types/doctrine': 0.0.9
@@ -11262,16 +10868,16 @@ packages:
       - supports-color
     dev: true
 
-  /react-dom@18.2.0(react@18.2.0):
-    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
+  /react-dom@18.3.1(react@18.3.1):
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
-      react: ^18.2.0
+      react: ^18.3.1
     dependencies:
       loose-envify: 1.4.0
-      react: 18.2.0
-      scheduler: 0.23.0
+      react: 18.3.1
+      scheduler: 0.23.2
 
-  /react-draggable@4.4.6(react-dom@18.2.0)(react@18.2.0):
+  /react-draggable@4.4.6(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==}
     peerDependencies:
       react: '>= 16.3.0'
@@ -11279,11 +10885,11 @@ packages:
     dependencies:
       clsx: 1.2.1
       prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /react-dropzone@14.2.3(react@18.2.0):
+  /react-dropzone@14.2.3(react@18.3.1):
     resolution: {integrity: sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==}
     engines: {node: '>= 10.13'}
     peerDependencies:
@@ -11292,10 +10898,10 @@ packages:
       attr-accept: 2.2.2
       file-selector: 0.6.0
       prop-types: 15.8.1
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /react-element-to-jsx-string@15.0.0(react-dom@18.2.0)(react@18.2.0):
+  /react-element-to-jsx-string@15.0.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-UDg4lXB6BzlobN60P8fHWVPX3Kyw8ORrTeBtClmIlGdkOOE+GYQSFvmEU5iLLpwp/6v42DINwNcwOhOLfQ//FQ==}
     peerDependencies:
       react: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0
@@ -11303,25 +10909,25 @@ packages:
     dependencies:
       '@base2/pretty-print-object': 1.0.1
       is-plain-object: 5.0.0
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
       react-is: 18.1.0
     dev: true
 
-  /react-error-boundary@4.0.13(react@18.2.0):
+  /react-error-boundary@4.0.13(react@18.3.1):
     resolution: {integrity: sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==}
     peerDependencies:
       react: '>=16.13.1'
     dependencies:
-      '@babel/runtime': 7.24.1
-      react: 18.2.0
+      '@babel/runtime': 7.24.5
+      react: 18.3.1
     dev: false
 
   /react-fast-compare@3.2.2:
     resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
     dev: false
 
-  /react-focus-lock@2.11.1(@types/react@18.2.73)(react@18.2.0):
+  /react-focus-lock@2.11.1(@types/react@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-IXLwnTBrLTlKTpASZXqqXJ8oymWrgAlOfuuDYN4XCuN1YJ72dwX198UCaF1QqGUk5C3QOnlMik//n3ufcfe8Ig==}
     peerDependencies:
       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -11331,36 +10937,36 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.23.9
-      '@types/react': 18.2.73
+      '@types/react': 18.3.1
       focus-lock: 1.3.3
       prop-types: 15.8.1
-      react: 18.2.0
-      react-clientside-effect: 1.2.6(react@18.2.0)
-      use-callback-ref: 1.3.1(@types/react@18.2.73)(react@18.2.0)
-      use-sidecar: 1.1.2(@types/react@18.2.73)(react@18.2.0)
+      react: 18.3.1
+      react-clientside-effect: 1.2.6(react@18.3.1)
+      use-callback-ref: 1.3.1(@types/react@18.3.1)(react@18.3.1)
+      use-sidecar: 1.1.2(@types/react@18.3.1)(react@18.3.1)
     dev: false
 
-  /react-hook-form@7.51.2(react@18.2.0):
-    resolution: {integrity: sha512-y++lwaWjtzDt/XNnyGDQy6goHskFualmDlf+jzEZvjvz6KWDf7EboL7pUvRCzPTJd0EOPpdekYaQLEvvG6m6HA==}
+  /react-hook-form@7.51.4(react@18.3.1):
+    resolution: {integrity: sha512-V14i8SEkh+V1gs6YtD0hdHYnoL4tp/HX/A45wWQN15CYr9bFRmmRdYStSO5L65lCCZRF+kYiSKhm9alqbcdiVA==}
     engines: {node: '>=12.22.0'}
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /react-hotkeys-hook@4.5.0(react-dom@18.2.0)(react@18.2.0):
+  /react-hotkeys-hook@4.5.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-Samb85GSgAWFQNvVt3PS90LPPGSf9mkH/r4au81ZP1yOIFayLC3QAvqTgGtJ8YEDMXtPmaVBs6NgipHO6h4Mug==}
     peerDependencies:
       react: '>=16.8.1'
       react-dom: '>=16.8.1'
     dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /react-i18next@14.1.0(i18next@23.10.1)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-3KwX6LHpbvGQ+sBEntjV4sYW3Zovjjl3fpoHbUwSgFHf0uRBcbeCBLR5al6ikncI5+W0EFb71QXZmfop+J6NrQ==}
+  /react-i18next@14.1.1(i18next@23.11.3)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-QSiKw+ihzJ/CIeIYWrarCmXJUySHDwQr5y8uaNIkbxoGRm/5DukkxZs+RPla79IKyyDPzC/DRlgQCABHtrQuQQ==}
     peerDependencies:
       i18next: '>= 23.2.3'
       react: '>= 16.8.0'
@@ -11372,19 +10978,19 @@ packages:
       react-native:
         optional: true
     dependencies:
-      '@babel/runtime': 7.24.1
+      '@babel/runtime': 7.24.5
       html-parse-stringify: 3.0.1
-      i18next: 23.10.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      i18next: 23.11.3
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /react-icons@5.0.1(react@18.2.0):
-    resolution: {integrity: sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==}
+  /react-icons@5.2.0(react@18.3.1):
+    resolution: {integrity: sha512-n52Y7Eb4MgQZHsSZOhSXv1zs2668/hBYKfSRIvKh42yExjyhZu0d1IK2CLLZ3BZB1oo13lDfwx2vOh2z9FTV6Q==}
     peerDependencies:
       react: '*'
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
   /react-is@16.13.1:
@@ -11398,11 +11004,11 @@ packages:
     resolution: {integrity: sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==}
     dev: true
 
-  /react-is@18.2.0:
-    resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
+  /react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
     dev: true
 
-  /react-konva@18.2.10(konva@9.3.6)(react-dom@18.2.0)(react@18.2.0):
+  /react-konva@18.2.10(konva@9.3.6)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-ohcX1BJINL43m4ynjZ24MxFI1syjBdrXhqVxYVDw2rKgr3yuS0x/6m1Y2Z4sl4T/gKhfreBx8KHisd0XC6OT1g==}
     peerDependencies:
       konva: ^8.0.1 || ^7.2.5 || ^9.0.0
@@ -11410,48 +11016,45 @@ packages:
       react-dom: '>=18.0.0'
     dependencies:
       '@types/react-reconciler': 0.28.8
-      its-fine: 1.1.3(react@18.2.0)
+      its-fine: 1.2.5(react@18.3.1)
       konva: 9.3.6
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-reconciler: 0.29.0(react@18.2.0)
-      scheduler: 0.23.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-reconciler: 0.29.2(react@18.3.1)
+      scheduler: 0.23.2
     dev: false
 
-  /react-reconciler@0.29.0(react@18.2.0):
-    resolution: {integrity: sha512-wa0fGj7Zht1EYMRhKWwoo1H9GApxYLBuhoAuXN0TlltESAjDssB+Apf0T/DngVqaMyPypDmabL37vw/2aRM98Q==}
+  /react-reconciler@0.29.2(react@18.3.1):
+    resolution: {integrity: sha512-zZQqIiYgDCTP/f1N/mAR10nJGrPD2ZR+jDSEsKWJHYC7Cm2wodlwbR3upZRdC3cjIjSlTLNVyO7Iu0Yy7t2AYg==}
     engines: {node: '>=0.10.0'}
     peerDependencies:
-      react: ^18.2.0
+      react: ^18.3.1
     dependencies:
       loose-envify: 1.4.0
-      react: 18.2.0
-      scheduler: 0.23.0
+      react: 18.3.1
+      scheduler: 0.23.2
     dev: false
 
-  /react-redux@9.1.0(@types/react@18.2.73)(react@18.2.0)(redux@5.0.1):
-    resolution: {integrity: sha512-6qoDzIO+gbrza8h3hjMA9aq4nwVFCKFtY2iLxCtVT38Swyy2C/dJCGBXHeHLtx6qlg/8qzc2MrhOeduf5K32wQ==}
+  /react-redux@9.1.2(@types/react@18.3.1)(react@18.3.1)(redux@5.0.1):
+    resolution: {integrity: sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==}
     peerDependencies:
       '@types/react': ^18.2.25
       react: ^18.0
-      react-native: '>=0.69'
       redux: ^5.0.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      react-native:
-        optional: true
       redux:
         optional: true
     dependencies:
-      '@types/react': 18.2.73
+      '@types/react': 18.3.1
       '@types/use-sync-external-store': 0.0.3
-      react: 18.2.0
+      react: 18.3.1
       redux: 5.0.1
-      use-sync-external-store: 1.2.0(react@18.2.0)
+      use-sync-external-store: 1.2.2(react@18.3.1)
     dev: false
 
-  /react-remove-scroll-bar@2.3.5(@types/react@18.2.73)(react@18.2.0):
+  /react-remove-scroll-bar@2.3.5(@types/react@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-3cqjOqg6s0XbOjWvmasmqHch+RLxIEk2r/70rzGXuz3iIGQsQheEQyqYCBb5EECoD01Vo2SIbDqW4paLeLTASw==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -11461,13 +11064,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.2.73
-      react: 18.2.0
-      react-style-singleton: 2.2.1(@types/react@18.2.73)(react@18.2.0)
+      '@types/react': 18.3.1
+      react: 18.3.1
+      react-style-singleton: 2.2.1(@types/react@18.3.1)(react@18.3.1)
       tslib: 2.6.2
     dev: false
 
-  /react-remove-scroll@2.5.7(@types/react@18.2.73)(react@18.2.0):
+  /react-remove-scroll@2.5.7(@types/react@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -11477,81 +11080,81 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.2.73
-      react: 18.2.0
-      react-remove-scroll-bar: 2.3.5(@types/react@18.2.73)(react@18.2.0)
-      react-style-singleton: 2.2.1(@types/react@18.2.73)(react@18.2.0)
+      '@types/react': 18.3.1
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.5(@types/react@18.3.1)(react@18.3.1)
+      react-style-singleton: 2.2.1(@types/react@18.3.1)(react@18.3.1)
       tslib: 2.6.2
-      use-callback-ref: 1.3.1(@types/react@18.2.73)(react@18.2.0)
-      use-sidecar: 1.1.2(@types/react@18.2.73)(react@18.2.0)
+      use-callback-ref: 1.3.1(@types/react@18.3.1)(react@18.3.1)
+      use-sidecar: 1.1.2(@types/react@18.3.1)(react@18.3.1)
     dev: false
 
-  /react-resizable-panels@2.0.16(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-UrnxmTZaTnbCl/xIOX38ig35RicqGfLuqt2x5fytpNlQvCRuxyXZwIBEhmF+pmrEGxfajyXFBoCplNxLvhF0CQ==}
+  /react-resizable-panels@2.0.19(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-v3E41kfKSuCPIvJVb4nL4mIZjjKIn/gh6YqZF/gDfQDolv/8XnhJBek4EiV2gOr3hhc5A3kOGOayk3DhanpaQw==}
     peerDependencies:
       react: ^16.14.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /react-rnd@10.4.10(react-dom@18.2.0)(react@18.2.0):
+  /react-rnd@10.4.10(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-YjQAgEeSbNUoOXSD9ZBvIiLVizFb+bNhpDk8DbIRHA557NW02CXbwsAeOTpJQnsdhEL+NP2I+Ssrwejqcodtjg==}
     peerDependencies:
       react: '>=16.3.0'
       react-dom: '>=16.3.0'
     dependencies:
-      re-resizable: 6.9.14(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-draggable: 4.4.6(react-dom@18.2.0)(react@18.2.0)
+      re-resizable: 6.9.14(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-draggable: 4.4.6(react-dom@18.3.1)(react@18.3.1)
       tslib: 2.6.2
     dev: false
 
-  /react-select@5.7.7(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0):
+  /react-select@5.7.7(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-HhashZZJDRlfF/AKj0a0Lnfs3sRdw/46VJIRd8IbB9/Ovr74+ZIwkAdSBjSPXsFMG+u72c5xShqwLSKIJllzqw==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/runtime': 7.24.1
+      '@babel/runtime': 7.24.5
       '@emotion/cache': 11.11.0
-      '@emotion/react': 11.11.4(@types/react@18.2.73)(react@18.2.0)
-      '@floating-ui/dom': 1.6.3
+      '@emotion/react': 11.11.4(@types/react@18.3.1)(react@18.3.1)
+      '@floating-ui/dom': 1.6.5
       '@types/react-transition-group': 4.4.10
       memoize-one: 6.0.0
       prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0)
-      use-isomorphic-layout-effect: 1.1.2(@types/react@18.2.73)(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-transition-group: 4.4.5(react-dom@18.3.1)(react@18.3.1)
+      use-isomorphic-layout-effect: 1.1.2(@types/react@18.3.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
     dev: false
 
-  /react-select@5.8.0(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0):
+  /react-select@5.8.0(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/runtime': 7.24.1
+      '@babel/runtime': 7.24.5
       '@emotion/cache': 11.11.0
-      '@emotion/react': 11.11.4(@types/react@18.2.73)(react@18.2.0)
-      '@floating-ui/dom': 1.6.3
+      '@emotion/react': 11.11.4(@types/react@18.3.1)(react@18.3.1)
+      '@floating-ui/dom': 1.6.5
       '@types/react-transition-group': 4.4.10
       memoize-one: 6.0.0
       prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0)
-      use-isomorphic-layout-effect: 1.1.2(@types/react@18.2.73)(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-transition-group: 4.4.5(react-dom@18.3.1)(react@18.3.1)
+      use-isomorphic-layout-effect: 1.1.2(@types/react@18.3.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
     dev: false
 
-  /react-style-singleton@2.2.1(@types/react@18.2.73)(react@18.2.0):
+  /react-style-singleton@2.2.1(@types/react@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -11561,38 +11164,38 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.2.73
+      '@types/react': 18.3.1
       get-nonce: 1.0.1
       invariant: 2.2.4
-      react: 18.2.0
+      react: 18.3.1
       tslib: 2.6.2
     dev: false
 
-  /react-transition-group@4.4.5(react-dom@18.2.0)(react@18.2.0):
+  /react-transition-group@4.4.5(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:
       react: '>=16.6.0'
       react-dom: '>=16.6.0'
     dependencies:
-      '@babel/runtime': 7.24.1
+      '@babel/runtime': 7.24.5
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /react-universal-interface@0.6.2(react@18.2.0)(tslib@2.6.2):
+  /react-universal-interface@0.6.2(react@18.3.1)(tslib@2.6.2):
     resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==}
     peerDependencies:
       react: '*'
       tslib: '*'
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
       tslib: 2.6.2
     dev: false
 
-  /react-use@17.5.0(react-dom@18.2.0)(react@18.2.0):
+  /react-use@17.5.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-PbfwSPMwp/hoL847rLnm/qkjg3sTRCvn6YhUZiHaUa3FA6/aNoFX79ul5Xt70O1rK+9GxSVqkY0eTwMdsR/bWg==}
     peerDependencies:
       react: '*'
@@ -11604,10 +11207,10 @@ packages:
       fast-deep-equal: 3.1.3
       fast-shallow-equal: 1.0.0
       js-cookie: 2.2.1
-      nano-css: 5.6.1(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-universal-interface: 0.6.2(react@18.2.0)(tslib@2.6.2)
+      nano-css: 5.6.1(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-universal-interface: 0.6.2(react@18.3.1)(tslib@2.6.2)
       resize-observer-polyfill: 1.5.1
       screenfull: 5.2.0
       set-harmonic-interval: 1.0.1
@@ -11616,50 +11219,42 @@ packages:
       tslib: 2.6.2
     dev: false
 
-  /react-virtuoso@4.7.5(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-sYRQ1dHGiLCA/4ngq86U4fjO5SubEbbR53+mmcgcQZjzTK2E+9M300C3nXr54Zgr1ewZfdr9SKt6wpha0CsYUQ==}
+  /react-virtuoso@4.7.10(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-l+fnBf/G1Fp6pHCnhFq2Ra4lkZtT6c5XrS9rCS0OA6de7WGLZviCo0y61CUZZG79TeAw3L7O4czeNPiqh9CIrg==}
     engines: {node: '>=10'}
     peerDependencies:
       react: '>=16 || >=17 || >= 18'
       react-dom: '>=16 || >=17 || >= 18'
     dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /react@18.2.0:
-    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
+  /react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
     dependencies:
       loose-envify: 1.4.0
 
-  /reactflow@11.10.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-0CApYhtYicXEDg/x2kvUHiUk26Qur8lAtTtiSlptNKuyEuGti6P1y5cS32YGaUoDMoCqkm/m+jcKkfMOvSCVRA==}
+  /reactflow@11.11.3(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-wusd1Xpn1wgsSEv7UIa4NNraCwH9syBtubBy4xVNXg3b+CDKM+sFaF3hnMx0tr0et4km9urIDdNvwm34QiZong==}
     peerDependencies:
       react: '>=17'
       react-dom: '>=17'
     dependencies:
-      '@reactflow/background': 11.3.9(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
-      '@reactflow/controls': 11.2.9(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
-      '@reactflow/core': 11.10.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
-      '@reactflow/minimap': 11.7.9(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
-      '@reactflow/node-resizer': 2.2.9(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
-      '@reactflow/node-toolbar': 1.3.9(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@reactflow/background': 11.3.13(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
+      '@reactflow/controls': 11.2.13(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
+      '@reactflow/core': 11.11.3(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
+      '@reactflow/minimap': 11.7.13(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
+      '@reactflow/node-resizer': 2.2.13(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
+      '@reactflow/node-toolbar': 1.3.13(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - immer
     dev: false
 
-  /read-package-json-fast@3.0.2:
-    resolution: {integrity: sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    dependencies:
-      json-parse-even-better-errors: 3.0.1
-      npm-normalize-package-bin: 3.0.1
-    dev: true
-
   /read-pkg-up@7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
     engines: {node: '>=8'}
@@ -11760,10 +11355,10 @@ packages:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.2
+      es-abstract: 1.23.3
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
-      globalthis: 1.0.3
+      globalthis: 1.0.4
       which-builtin-type: 1.1.3
     dev: true
 
@@ -11784,7 +11379,7 @@ packages:
   /regenerator-transform@0.15.2:
     resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==}
     dependencies:
-      '@babel/runtime': 7.24.1
+      '@babel/runtime': 7.24.5
     dev: true
 
   /regexp.prototype.flags@1.5.2:
@@ -11837,14 +11432,6 @@ packages:
       unist-util-visit: 5.0.0
     dev: true
 
-  /rename-overwrite@5.0.0:
-    resolution: {integrity: sha512-vSxE5Ww7Jnyotvaxi3Dj0vOMoojH8KMkBfs9xYeW/qNfJiLTcC1fmwTjrbGUq3mQSOCxkG0DbdcvwTUrpvBN4w==}
-    engines: {node: '>=12.10'}
-    dependencies:
-      '@zkochan/rimraf': 2.1.3
-      fs-extra: 10.1.0
-    dev: true
-
   /require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -11914,11 +11501,6 @@ packages:
     engines: {node: '>=0.12'}
     dev: false
 
-  /retry@0.12.0:
-    resolution: {integrity: sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==}
-    engines: {node: '>= 4'}
-    dev: true
-
   /reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -11979,34 +11561,36 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /rollup@4.13.1:
-    resolution: {integrity: sha512-hFi+fU132IvJ2ZuihN56dwgpltpmLZHZWsx27rMCTZ2sYwrqlgL5sECGy1eeV2lAihD8EzChBVVhsXci0wD4Tg==}
+  /rollup@4.17.2:
+    resolution: {integrity: sha512-/9ClTJPByC0U4zNLowV1tMBe8yMEAxewtR3cUNX5BoEpGH3dQEWpJLr6CLp0fPdYRF/fzVOgvDb1zXuakwF5kQ==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
     dependencies:
       '@types/estree': 1.0.5
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.13.1
-      '@rollup/rollup-android-arm64': 4.13.1
-      '@rollup/rollup-darwin-arm64': 4.13.1
-      '@rollup/rollup-darwin-x64': 4.13.1
-      '@rollup/rollup-linux-arm-gnueabihf': 4.13.1
-      '@rollup/rollup-linux-arm64-gnu': 4.13.1
-      '@rollup/rollup-linux-arm64-musl': 4.13.1
-      '@rollup/rollup-linux-riscv64-gnu': 4.13.1
-      '@rollup/rollup-linux-s390x-gnu': 4.13.1
-      '@rollup/rollup-linux-x64-gnu': 4.13.1
-      '@rollup/rollup-linux-x64-musl': 4.13.1
-      '@rollup/rollup-win32-arm64-msvc': 4.13.1
-      '@rollup/rollup-win32-ia32-msvc': 4.13.1
-      '@rollup/rollup-win32-x64-msvc': 4.13.1
+      '@rollup/rollup-android-arm-eabi': 4.17.2
+      '@rollup/rollup-android-arm64': 4.17.2
+      '@rollup/rollup-darwin-arm64': 4.17.2
+      '@rollup/rollup-darwin-x64': 4.17.2
+      '@rollup/rollup-linux-arm-gnueabihf': 4.17.2
+      '@rollup/rollup-linux-arm-musleabihf': 4.17.2
+      '@rollup/rollup-linux-arm64-gnu': 4.17.2
+      '@rollup/rollup-linux-arm64-musl': 4.17.2
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.17.2
+      '@rollup/rollup-linux-riscv64-gnu': 4.17.2
+      '@rollup/rollup-linux-s390x-gnu': 4.17.2
+      '@rollup/rollup-linux-x64-gnu': 4.17.2
+      '@rollup/rollup-linux-x64-musl': 4.17.2
+      '@rollup/rollup-win32-arm64-msvc': 4.17.2
+      '@rollup/rollup-win32-ia32-msvc': 4.17.2
+      '@rollup/rollup-win32-x64-msvc': 4.17.2
       fsevents: 2.3.3
     dev: true
 
   /rtl-css-js@1.16.1:
     resolution: {integrity: sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==}
     dependencies:
-      '@babel/runtime': 7.24.1
+      '@babel/runtime': 7.24.5
     dev: false
 
   /run-parallel@1.2.0:
@@ -12057,8 +11641,8 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
-  /scheduler@0.23.0:
-    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
+  /scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
     dependencies:
       loose-envify: 1.4.0
 
@@ -12236,7 +11820,7 @@ packages:
     resolution: {integrity: sha512-sJ/tqHOCe7Z50JCBCXrsY3I2k03iOiUe+tj1OmKeD2lXPiGH/RUCdTZFoqVyN7l1MnpIzPrGtLcijffmeouNlQ==}
     engines: {node: '>=10.0.0'}
     dependencies:
-      '@socket.io/component-emitter': 3.1.0
+      '@socket.io/component-emitter': 3.1.2
       debug: 4.3.4
       engine.io-client: 6.5.3
       socket.io-parser: 4.2.4
@@ -12250,7 +11834,7 @@ packages:
     resolution: {integrity: sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==}
     engines: {node: '>=10.0.0'}
     dependencies:
-      '@socket.io/component-emitter': 3.1.0
+      '@socket.io/component-emitter': 3.1.2
       debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
@@ -12322,23 +11906,10 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
-  /split2@3.2.2:
-    resolution: {integrity: sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==}
-    dependencies:
-      readable-stream: 3.6.2
-    dev: true
-
   /sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
     dev: true
 
-  /ssri@10.0.5:
-    resolution: {integrity: sha512-bSf16tAFkGeRlUNDjXu8FzaMQt6g2HZJrun7mtMbIPOddxt3GLMSz5VWUWcqTJUPfLEaDIepGxv+bYQW49596A==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    dependencies:
-      minipass: 7.0.4
-    dev: true
-
   /stack-generator@2.0.10:
     resolution: {integrity: sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==}
     dependencies:
@@ -12388,11 +11959,11 @@ packages:
     resolution: {integrity: sha512-4QcZ+yx7nzEFiV4BMLnr/pRa5HYzNITX2ri0Zh6sT9EyQHbBHacC6YigllUPU9X3D0f/22QCgfokpKs52YRrUg==}
     dev: true
 
-  /storybook@8.0.4(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-FUr3Uc2dSAQ80jINH5fSXz7zD7Ncn08OthROjwRtHAH+jMf4wxyZ+RhF3heFy9xLot2/HXOLIWyHyzZZMtGhxg==}
+  /storybook@8.0.10(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-9/4oxISopLyr5xz7Du27mmQgcIfB7UTLlNzkK4IklWTiSgsOgYgZpsmIwymoXNtkrvh+QsqskdcUP1C7nNiEtw==}
     hasBin: true
     dependencies:
-      '@storybook/cli': 8.0.4(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/cli': 8.0.10(react-dom@18.3.1)(react@18.3.1)
     transitivePeerDependencies:
       - '@babel/preset-env'
       - bufferutil
@@ -12440,7 +12011,7 @@ packages:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.2
+      es-abstract: 1.23.3
       es-errors: 1.3.0
       es-object-atoms: 1.0.0
       get-intrinsic: 1.2.4
@@ -12458,7 +12029,7 @@ packages:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.2
+      es-abstract: 1.23.3
       es-object-atoms: 1.0.0
     dev: true
 
@@ -12510,11 +12081,6 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /strip-bom@4.0.0:
-    resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
-    engines: {node: '>=8'}
-    dev: true
-
   /strip-final-newline@2.0.0:
     resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
     engines: {node: '>=6'}
@@ -12549,18 +12115,18 @@ packages:
     engines: {node: '>=14.16'}
     dev: true
 
-  /strip-literal@2.0.0:
-    resolution: {integrity: sha512-f9vHgsCWBq2ugHAkGMiiYY+AYG0D/cbloKKg0nhaaaSNsujdGIpVXCNsrJpCKr5M0f4aI31mr13UjY6GAuXCKA==}
+  /strip-literal@2.1.0:
+    resolution: {integrity: sha512-Op+UycaUt/8FbN/Z2TWPBLge3jWrP3xj10f3fnYxf052bKuS3EKs1ZQcVGjnEMdsNVAM+plXRdmjrZ/KgG3Skw==}
     dependencies:
-      js-tokens: 8.0.3
+      js-tokens: 9.0.0
     dev: true
 
   /stylis@4.2.0:
     resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
     dev: false
 
-  /stylis@4.3.1:
-    resolution: {integrity: sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==}
+  /stylis@4.3.2:
+    resolution: {integrity: sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==}
     dev: false
 
   /summary@2.1.0:
@@ -12677,21 +12243,15 @@ packages:
       xtend: 4.0.2
     dev: true
 
-  /through2@4.0.2:
-    resolution: {integrity: sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==}
-    dependencies:
-      readable-stream: 3.6.2
-    dev: true
-
   /tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
-  /tinybench@2.6.0:
-    resolution: {integrity: sha512-N8hW3PG/3aOoZAN5V/NSAEDz0ZixDSSt5b/a05iqtpgfLWMSVuCo7w0k2vVvEjdrIoeGqZzweX2WlyioNIHchA==}
+  /tinybench@2.8.0:
+    resolution: {integrity: sha512-1/eK7zUnIklz4JUUlL+658n58XO2hHLQfSk1Zf2LKieUjxidN16eKFEoDEfjHc3ohofSSqK3X5yO6VGb6iW8Lw==}
     dev: true
 
-  /tinypool@0.8.3:
-    resolution: {integrity: sha512-Ud7uepAklqRH1bvwy22ynrliC7Dljz7Tm8M/0RBUW+YRa4YHhZ6e4PpgE+fu1zr/WqB1kbeuVrdfeuyIBpy4tw==}
+  /tinypool@0.8.4:
+    resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==}
     engines: {node: '>=14.0.0'}
     dev: true
 
@@ -12727,8 +12287,8 @@ packages:
       to-no-case: 1.0.2
     dev: true
 
-  /tocbot@4.25.0:
-    resolution: {integrity: sha512-kE5wyCQJ40hqUaRVkyQ4z5+4juzYsv/eK+aqD97N62YH0TxFhzJvo22RUQQZdO3YnXAk42ZOfOpjVdy+Z0YokA==}
+  /tocbot@4.27.19:
+    resolution: {integrity: sha512-0yu8k0L3gCQ1OVNZnKqpbZp+kLd6qtlNEBxsb+e0G/bS0EXMl2tWqWi1Oy9knRX8rTPYfOxd/sI/OzAj3JowGg==}
     dev: true
 
   /toggle-selection@1.0.6:
@@ -12748,13 +12308,13 @@ packages:
     hasBin: true
     dev: true
 
-  /ts-api-utils@1.3.0(typescript@5.4.3):
+  /ts-api-utils@1.3.0(typescript@5.4.5):
     resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
     engines: {node: '>=16'}
     peerDependencies:
       typescript: '>=4.2.0'
     dependencies:
-      typescript: 5.4.3
+      typescript: 5.4.5
     dev: true
 
   /ts-dedent@2.2.0:
@@ -12778,7 +12338,7 @@ packages:
     resolution: {integrity: sha512-gzkapsdbMNwBnTIjgO758GujLCj031IgHK/PKr2mrmkCSJMhSOR5FeOuSxKLMUoYc0vAA4RGEYYbjt/v6afD3g==}
     dev: true
 
-  /tsconfck@3.0.3(typescript@5.4.3):
+  /tsconfck@3.0.3(typescript@5.4.5):
     resolution: {integrity: sha512-4t0noZX9t6GcPTfBAbIbbIU4pfpCwh0ueq3S4O/5qXI1VwK1outmxhe9dOiEWqMz3MW2LKgDTpqWV+37IWuVbA==}
     engines: {node: ^18 || >=20}
     hasBin: true
@@ -12788,7 +12348,7 @@ packages:
       typescript:
         optional: true
     dependencies:
-      typescript: 5.4.3
+      typescript: 5.4.5
     dev: true
 
   /tsconfig-paths@3.15.0:
@@ -12820,14 +12380,14 @@ packages:
   /tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
 
-  /tsutils@3.21.0(typescript@5.4.3):
+  /tsutils@3.21.0(typescript@5.4.5):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
     peerDependencies:
       typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
     dependencies:
       tslib: 1.14.1
-      typescript: 5.4.3
+      typescript: 5.4.5
     dev: true
 
   /type-check@0.4.0:
@@ -12924,8 +12484,8 @@ packages:
     hasBin: true
     dev: true
 
-  /typescript@5.4.3:
-    resolution: {integrity: sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==}
+  /typescript@5.4.5:
+    resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==}
     engines: {node: '>=14.17'}
     hasBin: true
     dev: true
@@ -12955,8 +12515,8 @@ packages:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
     dev: true
 
-  /undici@5.28.3:
-    resolution: {integrity: sha512-3ItfzbrhDlINjaP0duwnNsKpDQk3acHI3gVJ1z4fmwMK31k5G9OVIAMLSIaP6w4FaGkaAkN6zaQO9LUvZ1t7VA==}
+  /undici@5.28.4:
+    resolution: {integrity: sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==}
     engines: {node: '>=14.0'}
     dependencies:
       '@fastify/busboy': 2.1.1
@@ -13034,8 +12594,8 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /unplugin@1.10.0:
-    resolution: {integrity: sha512-CuZtvvO8ua2Wl+9q2jEaqH6m3DoQ38N7pvBYQbbaeNlWGvK2l6GHiKi29aIHDPoSxdUzQ7Unevf1/ugil5X6Pg==}
+  /unplugin@1.10.1:
+    resolution: {integrity: sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==}
     engines: {node: '>=14.0.0'}
     dependencies:
       acorn: 8.11.3
@@ -13049,8 +12609,8 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /update-browserslist-db@1.0.13(browserslist@4.23.0):
-    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
+  /update-browserslist-db@1.0.15(browserslist@4.23.0):
+    resolution: {integrity: sha512-K9HWH62x3/EalU1U6sjSZiylm9C8tgq2mSvshZpqc7QE69RaA2qjhkW2HlNA0tFpEbtyFz7HTqbSdN4MSwUodA==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
@@ -13066,7 +12626,7 @@ packages:
       punycode: 2.3.1
     dev: true
 
-  /use-callback-ref@1.3.1(@types/react@18.2.73)(react@18.2.0):
+  /use-callback-ref@1.3.1(@types/react@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -13076,39 +12636,39 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.2.73
-      react: 18.2.0
+      '@types/react': 18.3.1
+      react: 18.3.1
       tslib: 2.6.2
     dev: false
 
-  /use-debounce@10.0.0(react@18.2.0):
+  /use-debounce@10.0.0(react@18.3.1):
     resolution: {integrity: sha512-XRjvlvCB46bah9IBXVnq/ACP2lxqXyZj0D9hj4K5OzNroMDpTEBg8Anuh1/UfRTRs7pLhQ+RiNxxwZu9+MVl1A==}
     engines: {node: '>= 16.0.0'}
     peerDependencies:
       react: '>=16.8.0'
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /use-device-pixel-ratio@1.1.2(react@18.2.0):
+  /use-device-pixel-ratio@1.1.2(react@18.3.1):
     resolution: {integrity: sha512-nFxV0HwLdRUt20kvIgqHYZe6PK/v4mU1X8/eLsT1ti5ck0l2ob0HDRziaJPx+YWzBo6dMm4cTac3mcyk68Gh+A==}
     peerDependencies:
       react: '>=16.8.0'
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
     dev: false
 
-  /use-image@1.1.1(react-dom@18.2.0)(react@18.2.0):
+  /use-image@1.1.1(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-n4YO2k8AJG/BcDtxmBx8Aa+47kxY5m335dJiCQA5tTeVU4XdhrhqR6wT0WISRXwdMEOv5CSjqekDZkEMiiWaYQ==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /use-isomorphic-layout-effect@1.1.2(@types/react@18.2.73)(react@18.2.0):
+  /use-isomorphic-layout-effect@1.1.2(@types/react@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
     peerDependencies:
       '@types/react': '*'
@@ -13117,11 +12677,11 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.2.73
-      react: 18.2.0
+      '@types/react': 18.3.1
+      react: 18.3.1
     dev: false
 
-  /use-sidecar@1.1.2(@types/react@18.2.73)(react@18.2.0):
+  /use-sidecar@1.1.2(@types/react@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -13131,18 +12691,26 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.2.73
+      '@types/react': 18.3.1
       detect-node-es: 1.1.0
-      react: 18.2.0
+      react: 18.3.1
       tslib: 2.6.2
     dev: false
 
-  /use-sync-external-store@1.2.0(react@18.2.0):
+  /use-sync-external-store@1.2.0(react@18.3.1):
     resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
+    dev: false
+
+  /use-sync-external-store@1.2.2(react@18.3.1):
+    resolution: {integrity: sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.3.1
     dev: false
 
   /util-deprecate@1.0.2:
@@ -13175,20 +12743,6 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /validate-npm-package-name@4.0.0:
-    resolution: {integrity: sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==}
-    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
-    dependencies:
-      builtins: 5.0.1
-    dev: true
-
-  /validate-npm-package-name@5.0.0:
-    resolution: {integrity: sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    dependencies:
-      builtins: 5.0.1
-    dev: true
-
   /validator@13.11.0:
     resolution: {integrity: sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ==}
     engines: {node: '>= 0.10'}
@@ -13199,15 +12753,8 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /version-selector-type@3.0.0:
-    resolution: {integrity: sha512-PSvMIZS7C1MuVNBXl/CDG2pZq8EXy/NW2dHIdm3bVP5N0PC8utDK8ttXLXj44Gn3J0lQE3U7Mpm1estAOd+eiA==}
-    engines: {node: '>=10.13'}
-    dependencies:
-      semver: 7.6.0
-    dev: true
-
-  /vite-node@1.4.0(@types/node@20.11.30):
-    resolution: {integrity: sha512-VZDAseqjrHgNd4Kh8icYHWzTKSCZMhia7GyHfhtzLW33fZlG9SwsB6CEhgyVOWkJfJ2pFLrp/Gj1FSfAiqH9Lw==}
+  /vite-node@1.6.0(@types/node@20.12.10):
+    resolution: {integrity: sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     dependencies:
@@ -13215,7 +12762,7 @@ packages:
       debug: 4.3.4
       pathe: 1.1.2
       picocolors: 1.0.0
-      vite: 5.2.6(@types/node@20.11.30)
+      vite: 5.2.11(@types/node@20.12.10)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -13227,16 +12774,16 @@ packages:
       - terser
     dev: true
 
-  /vite-plugin-css-injected-by-js@3.5.0(vite@5.2.6):
-    resolution: {integrity: sha512-d0QaHH9kS93J25SwRqJNEfE29PSuQS5jn51y9N9i2Yoq0FRO7rjuTeLvjM5zwklZlRrIn6SUdtOEDKyHokgJZg==}
+  /vite-plugin-css-injected-by-js@3.5.1(vite@5.2.11):
+    resolution: {integrity: sha512-9ioqwDuEBxW55gNoWFEDhfLTrVKXEEZgl5adhWmmqa88EQGKfTmexy4v1Rh0pAS6RhKQs2bUYQArprB32JpUZQ==}
     peerDependencies:
       vite: '>2.0.0-0'
     dependencies:
-      vite: 5.2.6(@types/node@20.11.30)
+      vite: 5.2.11(@types/node@20.12.10)
     dev: true
 
-  /vite-plugin-dts@3.8.0(@types/node@20.11.30)(typescript@5.4.3)(vite@5.2.6):
-    resolution: {integrity: sha512-wt9ST1MwS5lkxHtA3M30+lSA3TO8RnaUu3YUPmGgY1iKm+vWZmB7KBss6qspyUlto9ynLNHYG2eJ09d2Q4/7Qg==}
+  /vite-plugin-dts@3.9.1(@types/node@20.12.10)(typescript@5.4.5)(vite@5.2.11):
+    resolution: {integrity: sha512-rVp2KM9Ue22NGWB8dNtWEr+KekN3rIgz1tWD050QnRGlriUCmaDwa7qA5zDEjbXg5lAXhYMSBJtx3q3hQIJZSg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -13245,35 +12792,35 @@ packages:
       vite:
         optional: true
     dependencies:
-      '@microsoft/api-extractor': 7.43.0(@types/node@20.11.30)
+      '@microsoft/api-extractor': 7.43.0(@types/node@20.12.10)
       '@rollup/pluginutils': 5.1.0
-      '@vue/language-core': 1.8.27(typescript@5.4.3)
+      '@vue/language-core': 1.8.27(typescript@5.4.5)
       debug: 4.3.4
       kolorist: 1.8.0
-      magic-string: 0.30.8
-      typescript: 5.4.3
-      vite: 5.2.6(@types/node@20.11.30)
-      vue-tsc: 1.8.27(typescript@5.4.3)
+      magic-string: 0.30.10
+      typescript: 5.4.5
+      vite: 5.2.11(@types/node@20.12.10)
+      vue-tsc: 1.8.27(typescript@5.4.5)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
       - supports-color
     dev: true
 
-  /vite-plugin-eslint@1.8.1(eslint@8.57.0)(vite@5.2.6):
+  /vite-plugin-eslint@1.8.1(eslint@8.57.0)(vite@5.2.11):
     resolution: {integrity: sha512-PqdMf3Y2fLO9FsNPmMX+//2BF5SF8nEWspZdgl4kSt7UvHDRHVVfHvxsD7ULYzZrJDGRxR81Nq7TOFgwMnUang==}
     peerDependencies:
       eslint: '>=7'
       vite: '>=2'
     dependencies:
       '@rollup/pluginutils': 4.2.1
-      '@types/eslint': 8.56.6
+      '@types/eslint': 8.56.10
       eslint: 8.57.0
       rollup: 2.79.1
-      vite: 5.2.6(@types/node@20.11.30)
+      vite: 5.2.11(@types/node@20.12.10)
     dev: true
 
-  /vite-tsconfig-paths@4.3.2(typescript@5.4.3)(vite@5.2.6):
+  /vite-tsconfig-paths@4.3.2(typescript@5.4.5)(vite@5.2.11):
     resolution: {integrity: sha512-0Vd/a6po6Q+86rPlntHye7F31zA2URZMbH8M3saAZ/xR9QoGN/L21bxEGfXdWmFdNkqPpRdxFT7nmNe12e9/uA==}
     peerDependencies:
       vite: '*'
@@ -13283,15 +12830,15 @@ packages:
     dependencies:
       debug: 4.3.4
       globrex: 0.1.2
-      tsconfck: 3.0.3(typescript@5.4.3)
-      vite: 5.2.6(@types/node@20.11.30)
+      tsconfck: 3.0.3(typescript@5.4.5)
+      vite: 5.2.11(@types/node@20.12.10)
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /vite@5.2.6(@types/node@20.11.30):
-    resolution: {integrity: sha512-FPtnxFlSIKYjZ2eosBQamz4CbyrTizbZ3hnGJlh/wMtCrlp1Hah6AzBLjGI5I2urTfNnpovpHdrL6YRuBOPnCA==}
+  /vite@5.2.11(@types/node@20.12.10):
+    resolution: {integrity: sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -13318,23 +12865,23 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 20.11.30
+      '@types/node': 20.12.10
       esbuild: 0.20.2
       postcss: 8.4.38
-      rollup: 4.13.1
+      rollup: 4.17.2
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
 
-  /vitest@1.4.0(@types/node@20.11.30):
-    resolution: {integrity: sha512-gujzn0g7fmwf83/WzrDTnncZt2UiXP41mHuFYFrdwaLRVQ6JYQEiME2IfEjU3vcFL3VKa75XhI3lFgn+hfVsQw==}
+  /vitest@1.6.0(@types/node@20.12.10):
+    resolution: {integrity: sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@types/node': ^18.0.0 || >=20.0.0
-      '@vitest/browser': 1.4.0
-      '@vitest/ui': 1.4.0
+      '@vitest/browser': 1.6.0
+      '@vitest/ui': 1.6.0
       happy-dom: '*'
       jsdom: '*'
     peerDependenciesMeta:
@@ -13351,26 +12898,26 @@ packages:
       jsdom:
         optional: true
     dependencies:
-      '@types/node': 20.11.30
-      '@vitest/expect': 1.4.0
-      '@vitest/runner': 1.4.0
-      '@vitest/snapshot': 1.4.0
-      '@vitest/spy': 1.4.0
-      '@vitest/utils': 1.4.0
+      '@types/node': 20.12.10
+      '@vitest/expect': 1.6.0
+      '@vitest/runner': 1.6.0
+      '@vitest/snapshot': 1.6.0
+      '@vitest/spy': 1.6.0
+      '@vitest/utils': 1.6.0
       acorn-walk: 8.3.2
       chai: 4.4.1
       debug: 4.3.4
       execa: 8.0.1
       local-pkg: 0.5.0
-      magic-string: 0.30.8
+      magic-string: 0.30.10
       pathe: 1.1.2
       picocolors: 1.0.0
       std-env: 3.7.0
-      strip-literal: 2.0.0
-      tinybench: 2.6.0
-      tinypool: 0.8.3
-      vite: 5.2.6(@types/node@20.11.30)
-      vite-node: 1.4.0(@types/node@20.11.30)
+      strip-literal: 2.1.0
+      tinybench: 2.8.0
+      tinypool: 0.8.4
+      vite: 5.2.11(@types/node@20.12.10)
+      vite-node: 1.6.0(@types/node@20.12.10)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less
@@ -13398,16 +12945,16 @@ packages:
       he: 1.2.0
     dev: true
 
-  /vue-tsc@1.8.27(typescript@5.4.3):
+  /vue-tsc@1.8.27(typescript@5.4.5):
     resolution: {integrity: sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==}
     hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
       '@volar/typescript': 1.11.1
-      '@vue/language-core': 1.8.27(typescript@5.4.3)
+      '@vue/language-core': 1.8.27(typescript@5.4.5)
       semver: 7.6.0
-      typescript: 5.4.3
+      typescript: 5.4.5
     dev: true
 
   /watchpack@2.4.1:
@@ -13499,14 +13046,6 @@ packages:
       isexe: 2.0.0
     dev: true
 
-  /which@4.0.0:
-    resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==}
-    engines: {node: ^16.13.0 || >=18.0.0}
-    hasBin: true
-    dependencies:
-      isexe: 3.1.1
-    dev: true
-
   /why-is-node-running@2.2.2:
     resolution: {integrity: sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==}
     engines: {node: '>=8'}
@@ -13516,6 +13055,11 @@ packages:
       stackback: 0.0.2
     dev: true
 
+  /word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /wordwrap@1.0.0:
     resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
     dev: true
@@ -13563,8 +13107,8 @@ packages:
         optional: true
     dev: false
 
-  /ws@8.16.0:
-    resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==}
+  /ws@8.17.0:
+    resolution: {integrity: sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       bufferutil: ^4.0.1
@@ -13644,18 +13188,18 @@ packages:
       commander: 9.5.0
     dev: true
 
-  /zod-validation-error@3.0.3(zod@3.22.4):
-    resolution: {integrity: sha512-cETTrcMq3Ze58vhdR0zD37uJm/694I6mAxcf/ei5bl89cC++fBNxrC2z8lkFze/8hVMPwrbtrwXHR2LB50fpHw==}
+  /zod-validation-error@3.2.0(zod@3.23.6):
+    resolution: {integrity: sha512-cYlPR6zuyrgmu2wRTdumEAJGuwI7eHVHGT+VyneAQxmRAKtGRL1/7pjz4wfLhz4J05f5qoSZc3rGacswgyTjjw==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       zod: ^3.18.0
     dependencies:
-      zod: 3.22.4
+      zod: 3.23.6
 
-  /zod@3.22.4:
-    resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
+  /zod@3.23.6:
+    resolution: {integrity: sha512-RTHJlZhsRbuA8Hmp/iNL7jnfc4nZishjsanDAfEY1QpDQZCahUp3xDzl+zfweE9BklxMUcgBgS1b7Lvie/ZVwA==}
 
-  /zustand@4.5.2(@types/react@18.2.73)(react@18.2.0):
+  /zustand@4.5.2(@types/react@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==}
     engines: {node: '>=12.7.0'}
     peerDependencies:
@@ -13670,7 +13214,7 @@ packages:
       react:
         optional: true
     dependencies:
-      '@types/react': 18.2.73
-      react: 18.2.0
-      use-sync-external-store: 1.2.0(react@18.2.0)
+      '@types/react': 18.3.1
+      react: 18.3.1
+      use-sync-external-store: 1.2.0(react@18.3.1)
     dev: false

From 67d6cf19c6d4d1e42ca5643c31bc1f7e5bf96e0f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 07:39:44 +1000
Subject: [PATCH 031/116] fix(ui): switch to viewer if auto-switch is enabled

---
 .../listeners/socketio/socketInvocationComplete.ts        | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts
index 279f9aac5b..fb3a4a41c9 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts
@@ -2,7 +2,12 @@ import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { parseify } from 'common/util/serialize';
 import { addImageToStagingArea } from 'features/canvas/store/canvasSlice';
-import { boardIdSelected, galleryViewChanged, imageSelected } from 'features/gallery/store/gallerySlice';
+import {
+  boardIdSelected,
+  galleryViewChanged,
+  imageSelected,
+  isImageViewerOpenChanged,
+} from 'features/gallery/store/gallerySlice';
 import { IMAGE_CATEGORIES } from 'features/gallery/store/types';
 import { isImageOutput } from 'features/nodes/types/common';
 import { CANVAS_OUTPUT } from 'features/nodes/util/graph/constants';
@@ -101,6 +106,7 @@ export const addInvocationCompleteEventListener = (startAppListening: AppStartLi
             }
 
             dispatch(imageSelected(imageDTO));
+            dispatch(isImageViewerOpenChanged(true));
           }
         }
       }

From b6c19a8e47aa0c3a810f9a8870f59e553c71a44a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 07:43:54 +1000
Subject: [PATCH 032/116] feat(ui): close viewer when adding a RG layer

---
 .../frontend/web/src/features/gallery/store/gallerySlice.ts   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
index 892c5c954d..16e0dd9770 100644
--- a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
+++ b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
@@ -1,6 +1,7 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice, isAnyOf } from '@reduxjs/toolkit';
 import type { PersistConfig, RootState } from 'app/store/store';
+import { rgLayerAdded } from 'features/controlLayers/store/controlLayersSlice';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { uniqBy } from 'lodash-es';
 import { boardsApi } from 'services/api/endpoints/boards';
@@ -89,6 +90,9 @@ export const gallerySlice = createSlice({
     builder.addCase(setActiveTab, (state) => {
       state.isImageViewerOpen = false;
     });
+    builder.addCase(rgLayerAdded, (state) => {
+      state.isImageViewerOpen = false;
+    });
     builder.addMatcher(isAnyBoardDeleted, (state, action) => {
       const deletedBoardId = action.meta.arg.originalArgs;
       if (deletedBoardId === state.selectedBoardId) {

From a826f8f8c54c8b22bf30cdcc09782202a7ea4527 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 08:05:05 +1000
Subject: [PATCH 033/116] fix(ui): show total layer count in control layers tab

---
 .../hooks/useControlLayersTitle.ts            | 51 -------------------
 .../components/ParametersPanelTextToImage.tsx | 11 ++--
 2 files changed, 8 insertions(+), 54 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/features/controlLayers/hooks/useControlLayersTitle.ts

diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/useControlLayersTitle.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/useControlLayersTitle.ts
deleted file mode 100644
index bf0fa661a9..0000000000
--- a/invokeai/frontend/web/src/features/controlLayers/hooks/useControlLayersTitle.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
-import {
-  isControlAdapterLayer,
-  isInitialImageLayer,
-  isIPAdapterLayer,
-  isRegionalGuidanceLayer,
-  selectControlLayersSlice,
-} from 'features/controlLayers/store/controlLayersSlice';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const selectValidLayerCount = createSelector(selectControlLayersSlice, (controlLayers) => {
-  let count = 0;
-  controlLayers.present.layers.forEach((l) => {
-    if (isRegionalGuidanceLayer(l)) {
-      const hasTextPrompt = Boolean(l.positivePrompt || l.negativePrompt);
-      const hasAtLeastOneImagePrompt = l.ipAdapters.filter((ipa) => Boolean(ipa.image)).length > 0;
-      if (hasTextPrompt || hasAtLeastOneImagePrompt) {
-        count += 1;
-      }
-    }
-    if (isControlAdapterLayer(l)) {
-      if (l.controlAdapter.image || l.controlAdapter.processedImage) {
-        count += 1;
-      }
-    }
-    if (isIPAdapterLayer(l)) {
-      if (l.ipAdapter.image) {
-        count += 1;
-      }
-    }
-    if (isInitialImageLayer(l)) {
-      if (l.image) {
-        count += 1;
-      }
-    }
-  });
-
-  return count;
-});
-
-export const useControlLayersTitle = () => {
-  const { t } = useTranslation();
-  const validLayerCount = useAppSelector(selectValidLayerCount);
-  const title = useMemo(() => {
-    const suffix = validLayerCount > 0 ? ` (${validLayerCount})` : '';
-    return `${t('controlLayers.controlLayers')}${suffix}`;
-  }, [t, validLayerCount]);
-  return title;
-};
diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
index 3e02e1e132..a7a401cde4 100644
--- a/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
@@ -3,7 +3,6 @@ import { Box, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/u
 import { useAppSelector } from 'app/store/storeHooks';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import { ControlLayersPanelContent } from 'features/controlLayers/components/ControlLayersPanelContent';
-import { useControlLayersTitle } from 'features/controlLayers/hooks/useControlLayersTitle';
 import { Prompts } from 'features/parameters/components/Prompts/Prompts';
 import QueueControls from 'features/queue/components/QueueControls';
 import { SDXLPrompts } from 'features/sdxl/components/SDXLPrompts/SDXLPrompts';
@@ -16,7 +15,7 @@ import { RefinerSettingsAccordion } from 'features/settingsAccordions/components
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties } from 'react';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const overlayScrollbarsStyles: CSSProperties = {
@@ -39,7 +38,13 @@ const selectedStyles: ChakraProps['sx'] = {
 const ParametersPanelTextToImage = () => {
   const { t } = useTranslation();
   const activeTabName = useAppSelector(activeTabNameSelector);
-  const controlLayersTitle = useControlLayersTitle();
+  const controlLayersCount = useAppSelector((s) => s.controlLayers.present.layers.length);
+  const controlLayersTitle = useMemo(() => {
+    if (controlLayersCount === 0) {
+      return t('controlLayers.controlLayers');
+    }
+    return `${t('controlLayers.controlLayers')} (${controlLayersCount})`;
+  }, [controlLayersCount, t]);
   const isSDXL = useAppSelector((s) => s.generation.model?.base === 'sdxl');
 
   return (

From 72ce2395925884c1d5e61debf7abb40424efd6f9 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 08:06:19 +1000
Subject: [PATCH 034/116] revert(ui): remove floating viewer

There are unresolved platform-specific issues with this component, and its utility is debatable.

Should be easy to just revert this commit to add it back in the future if desired.
---
 invokeai/frontend/web/package.json            |   1 -
 invokeai/frontend/web/pnpm-lock.yaml          |  43 ----
 .../frontend/web/src/app/components/App.tsx   |   2 -
 .../ImageViewer/FloatingImageViewer.tsx       | 190 ------------------
 .../features/gallery/store/gallerySlice.ts    |   5 -
 .../web/src/features/gallery/store/types.ts   |   1 -
 .../src/features/ui/components/InvokeTabs.tsx |   2 -
 7 files changed, 244 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/features/gallery/components/ImageViewer/FloatingImageViewer.tsx

diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json
index a598d0a2c7..78e8ca44ca 100644
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@@ -89,7 +89,6 @@
     "react-konva": "^18.2.10",
     "react-redux": "9.1.2",
     "react-resizable-panels": "^2.0.19",
-    "react-rnd": "^10.4.10",
     "react-select": "5.8.0",
     "react-use": "^17.5.0",
     "react-virtuoso": "^4.7.10",
diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml
index 2a3710ae9c..2703477200 100644
--- a/invokeai/frontend/web/pnpm-lock.yaml
+++ b/invokeai/frontend/web/pnpm-lock.yaml
@@ -122,9 +122,6 @@ dependencies:
   react-resizable-panels:
     specifier: ^2.0.19
     version: 2.0.19(react-dom@18.3.1)(react@18.3.1)
-  react-rnd:
-    specifier: ^10.4.10
-    version: 10.4.10(react-dom@18.3.1)(react@18.3.1)
   react-select:
     specifier: 5.8.0
     version: 5.8.0(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1)
@@ -7208,11 +7205,6 @@ packages:
     requiresBuild: true
     dev: true
 
-  /clsx@1.2.1:
-    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
-    engines: {node: '>=6'}
-    dev: false
-
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -10814,16 +10806,6 @@ packages:
       unpipe: 1.0.0
     dev: true
 
-  /re-resizable@6.9.14(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-2UbPrpezMr6gkHKNCRA/N6QGGU237SKOZ78yMHId204A/oXWSAREAIuGZNQ9qlrJosewzcsv2CphZH3u7hC6ng==}
-    peerDependencies:
-      react: ^16.13.1 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.13.1 || ^17.0.0 || ^18.0.0
-    dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    dev: false
-
   /react-clientside-effect@1.2.6(react@18.3.1):
     resolution: {integrity: sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==}
     peerDependencies:
@@ -10877,18 +10859,6 @@ packages:
       react: 18.3.1
       scheduler: 0.23.2
 
-  /react-draggable@4.4.6(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==}
-    peerDependencies:
-      react: '>= 16.3.0'
-      react-dom: '>= 16.3.0'
-    dependencies:
-      clsx: 1.2.1
-      prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    dev: false
-
   /react-dropzone@14.2.3(react@18.3.1):
     resolution: {integrity: sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==}
     engines: {node: '>= 10.13'}
@@ -11099,19 +11069,6 @@ packages:
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
-  /react-rnd@10.4.10(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-YjQAgEeSbNUoOXSD9ZBvIiLVizFb+bNhpDk8DbIRHA557NW02CXbwsAeOTpJQnsdhEL+NP2I+Ssrwejqcodtjg==}
-    peerDependencies:
-      react: '>=16.3.0'
-      react-dom: '>=16.3.0'
-    dependencies:
-      re-resizable: 6.9.14(react-dom@18.3.1)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-draggable: 4.4.6(react-dom@18.3.1)(react@18.3.1)
-      tslib: 2.6.2
-    dev: false
-
   /react-select@5.7.7(@types/react@18.3.1)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-HhashZZJDRlfF/AKj0a0Lnfs3sRdw/46VJIRd8IbB9/Ovr74+ZIwkAdSBjSPXsFMG+u72c5xShqwLSKIJllzqw==}
     peerDependencies:
diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx
index 03c854bb48..30d8f41200 100644
--- a/invokeai/frontend/web/src/app/components/App.tsx
+++ b/invokeai/frontend/web/src/app/components/App.tsx
@@ -12,7 +12,6 @@ import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
 import ChangeBoardModal from 'features/changeBoardModal/components/ChangeBoardModal';
 import DeleteImageModal from 'features/deleteImageModal/components/DeleteImageModal';
 import { DynamicPromptsModal } from 'features/dynamicPrompts/components/DynamicPromptsPreviewModal';
-import { FloatingImageViewer } from 'features/gallery/components/ImageViewer/FloatingImageViewer';
 import { useStarterModelsToast } from 'features/modelManagerV2/hooks/useStarterModelsToast';
 import { configChanged } from 'features/system/store/configSlice';
 import { languageSelector } from 'features/system/store/systemSelectors';
@@ -97,7 +96,6 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
       <DynamicPromptsModal />
       <Toaster />
       <PreselectedImage selectedImage={selectedImage} />
-      <FloatingImageViewer />
     </ErrorBoundary>
   );
 };
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/FloatingImageViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/FloatingImageViewer.tsx
deleted file mode 100644
index 1d91dafd1c..0000000000
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/FloatingImageViewer.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import { Flex, IconButton, Spacer, Text, useShiftModifier } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import CurrentImagePreview from 'features/gallery/components/ImageViewer/CurrentImagePreview';
-import { isFloatingImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
-import { memo, useCallback, useLayoutEffect, useRef } from 'react';
-import { flushSync } from 'react-dom';
-import { useTranslation } from 'react-i18next';
-import { PiHourglassBold, PiXBold } from 'react-icons/pi';
-import { Rnd } from 'react-rnd';
-
-const defaultDim = 256;
-const maxDim = 512;
-const defaultSize = { width: defaultDim, height: defaultDim + 24 };
-const maxSize = { width: maxDim, height: maxDim + 24 };
-const rndDefault = { x: 0, y: 0, ...defaultSize };
-
-const rndStyles = {
-  zIndex: 11,
-};
-
-const enableResizing = {
-  top: false,
-  right: false,
-  bottom: false,
-  left: false,
-  topRight: false,
-  bottomRight: true,
-  bottomLeft: false,
-  topLeft: false,
-};
-
-const FloatingImageViewerComponent = memo(() => {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const shift = useShiftModifier();
-  const rndRef = useRef<Rnd>(null);
-  const imagePreviewRef = useRef<HTMLDivElement>(null);
-  const onClose = useCallback(() => {
-    dispatch(isFloatingImageViewerOpenChanged(false));
-  }, [dispatch]);
-
-  const fitToScreen = useCallback(() => {
-    if (!imagePreviewRef.current || !rndRef.current) {
-      return;
-    }
-    const el = imagePreviewRef.current;
-    const rnd = rndRef.current;
-
-    const { top, right, bottom, left, width, height } = el.getBoundingClientRect();
-    const { innerWidth, innerHeight } = window;
-
-    const newPosition = rnd.getDraggablePosition();
-
-    if (top < 0) {
-      newPosition.y = 0;
-    }
-    if (left < 0) {
-      newPosition.x = 0;
-    }
-    if (bottom > innerHeight) {
-      newPosition.y = innerHeight - height;
-    }
-    if (right > innerWidth) {
-      newPosition.x = innerWidth - width;
-    }
-    rnd.updatePosition(newPosition);
-  }, []);
-
-  const onDoubleClick = useCallback(() => {
-    if (!rndRef.current || !imagePreviewRef.current) {
-      return;
-    }
-    const { width, height } = imagePreviewRef.current.getBoundingClientRect();
-    if (width === defaultSize.width && height === defaultSize.height) {
-      rndRef.current.updateSize(maxSize);
-    } else {
-      rndRef.current.updateSize(defaultSize);
-    }
-    flushSync(fitToScreen);
-  }, [fitToScreen]);
-
-  useLayoutEffect(() => {
-    window.addEventListener('resize', fitToScreen);
-    return () => {
-      window.removeEventListener('resize', fitToScreen);
-    };
-  }, [fitToScreen]);
-
-  useLayoutEffect(() => {
-    // Set the initial position
-    if (!imagePreviewRef.current || !rndRef.current) {
-      return;
-    }
-
-    const { width, height } = imagePreviewRef.current.getBoundingClientRect();
-
-    const initialPosition = {
-      // 54 = width of left-hand vertical bar of tab icons
-      // 430 = width of parameters panel
-      x: 54 + 430 / 2 - width / 2,
-      // 16 = just a reasonable bottom padding
-      y: window.innerHeight - height - 16,
-    };
-
-    rndRef.current.updatePosition(initialPosition);
-  }, [fitToScreen]);
-
-  return (
-    <Rnd
-      ref={rndRef}
-      default={rndDefault}
-      bounds="window"
-      lockAspectRatio={shift}
-      minWidth={defaultSize.width}
-      minHeight={defaultSize.height}
-      maxWidth={maxSize.width}
-      maxHeight={maxSize.height}
-      style={rndStyles}
-      enableResizing={enableResizing}
-    >
-      <Flex
-        ref={imagePreviewRef}
-        flexDir="column"
-        bg="base.850"
-        borderRadius="base"
-        w="full"
-        h="full"
-        borderWidth={1}
-        shadow="dark-lg"
-        cursor="move"
-      >
-        <Flex bg="base.800" w="full" p={1} onDoubleClick={onDoubleClick}>
-          <Text fontSize="sm" fontWeight="semibold" color="base.300" ps={2}>
-            {t('common.viewer')}
-          </Text>
-          <Spacer />
-          <IconButton aria-label={t('common.close')} icon={<PiXBold />} size="sm" variant="link" onClick={onClose} />
-        </Flex>
-        <Flex p={2} w="full" h="full">
-          <CurrentImagePreview
-            isDragDisabled={true}
-            isDropDisabled={true}
-            withNextPrevButtons={false}
-            withMetadata={false}
-            alwaysShowProgress
-          />
-        </Flex>
-      </Flex>
-    </Rnd>
-  );
-});
-
-FloatingImageViewerComponent.displayName = 'FloatingImageViewerComponent';
-
-export const FloatingImageViewer = memo(() => {
-  const isOpen = useAppSelector((s) => s.gallery.isFloatingImageViewerOpen);
-
-  if (!isOpen) {
-    return null;
-  }
-
-  return <FloatingImageViewerComponent />;
-});
-
-FloatingImageViewer.displayName = 'FloatingImageViewer';
-
-export const ToggleFloatingImageViewerButton = memo(() => {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const isOpen = useAppSelector((s) => s.gallery.isFloatingImageViewerOpen);
-
-  const onToggle = useCallback(() => {
-    dispatch(isFloatingImageViewerOpenChanged(!isOpen));
-  }, [dispatch, isOpen]);
-
-  return (
-    <IconButton
-      tooltip={isOpen ? t('gallery.closeFloatingViewer') : t('gallery.openFloatingViewer')}
-      aria-label={isOpen ? t('gallery.closeFloatingViewer') : t('gallery.openFloatingViewer')}
-      icon={<PiHourglassBold fontSize={16} />}
-      size="sm"
-      onClick={onToggle}
-      variant="link"
-      colorScheme={isOpen ? 'invokeBlue' : 'base'}
-      boxSize={8}
-    />
-  );
-});
-
-ToggleFloatingImageViewerButton.displayName = 'ToggleFloatingImageViewerButton';
diff --git a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
index 16e0dd9770..744dc09f3f 100644
--- a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
+++ b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
@@ -24,7 +24,6 @@ const initialGalleryState: GalleryState = {
   limit: INITIAL_IMAGE_LIMIT,
   offset: 0,
   isImageViewerOpen: false,
-  isFloatingImageViewerOpen: false,
 };
 
 export const gallerySlice = createSlice({
@@ -82,9 +81,6 @@ export const gallerySlice = createSlice({
     isImageViewerOpenChanged: (state, action: PayloadAction<boolean>) => {
       state.isImageViewerOpen = action.payload;
     },
-    isFloatingImageViewerOpenChanged: (state, action: PayloadAction<boolean>) => {
-      state.isFloatingImageViewerOpen = action.payload;
-    },
   },
   extraReducers: (builder) => {
     builder.addCase(setActiveTab, (state) => {
@@ -129,7 +125,6 @@ export const {
   moreImagesLoaded,
   alwaysShowImageSizeBadgeChanged,
   isImageViewerOpenChanged,
-  isFloatingImageViewerOpenChanged,
 } = gallerySlice.actions;
 
 const isAnyBoardDeleted = isAnyOf(
diff --git a/invokeai/frontend/web/src/features/gallery/store/types.ts b/invokeai/frontend/web/src/features/gallery/store/types.ts
index 9c258060c9..0e86d2d4be 100644
--- a/invokeai/frontend/web/src/features/gallery/store/types.ts
+++ b/invokeai/frontend/web/src/features/gallery/store/types.ts
@@ -21,5 +21,4 @@ export type GalleryState = {
   limit: number;
   alwaysShowImageSizeBadge: boolean;
   isImageViewerOpen: boolean;
-  isFloatingImageViewerOpen: boolean;
 };
diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
index 4152f4065b..42df03872c 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@@ -4,7 +4,6 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { $customNavComponent } from 'app/store/nanostores/customNavComponent';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent';
-import { ToggleFloatingImageViewerButton } from 'features/gallery/components/ImageViewer/FloatingImageViewer';
 import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
 import NodeEditorPanelGroup from 'features/nodes/components/sidePanel/NodeEditorPanelGroup';
 import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent';
@@ -224,7 +223,6 @@ const InvokeTabs = () => {
         </TabList>
         <Spacer />
         <StatusIndicator />
-        <ToggleFloatingImageViewerButton />
         {customNavComponent ? customNavComponent : <SettingsMenu />}
       </Flex>
       <PanelGroup

From 5e684c11f16f0fb48943177b605bd1a5f81895da Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 6 May 2024 18:38:33 +1000
Subject: [PATCH 035/116] Update invokeai_version.py

---
 invokeai/version/invokeai_version.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/version/invokeai_version.py b/invokeai/version/invokeai_version.py
index afcedcd6bb..b6bcb5a14c 100644
--- a/invokeai/version/invokeai_version.py
+++ b/invokeai/version/invokeai_version.py
@@ -1 +1 @@
-__version__ = "4.2.0b1"
+__version__ = "4.2.0b2"

From 886f5c90a39997dc75d26afacb52ddde72443fb3 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 09:47:21 +1000
Subject: [PATCH 036/116] feat(ui): move img2img strength out of advanced on
 canvas

---
 .../ImageSettingsAccordion/ImageSettingsAccordion.tsx       | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
index e9a9263605..853d7f3a78 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
@@ -85,7 +85,10 @@ export const ImageSettingsAccordion = memo(() => {
       onToggle={onToggleAccordion}
     >
       <Flex px={4} pt={4} w="full" h="full" flexDir="column" data-testid="image-settings-accordion">
-        {activeTabName === 'canvas' ? <ImageSizeCanvas /> : <ImageSizeLinear />}
+        <Flex flexDir="column" gap={4}>
+          {activeTabName === 'canvas' ? <ImageSizeCanvas /> : <ImageSizeLinear />}
+          {activeTabName === 'canvas' && <ImageToImageStrength />}
+        </Flex>
         <Expander label={t('accordions.advanced.options')} isOpen={isOpenExpander} onToggle={onToggleExpander}>
           <Flex gap={4} pb={4} flexDir="column">
             <Flex gap={4} alignItems="center">
@@ -93,7 +96,6 @@ export const ImageSettingsAccordion = memo(() => {
               <ParamSeedShuffle />
               <ParamSeedRandomize />
             </Flex>
-            {activeTabName === 'canvas' && <ImageToImageStrength />}
             {activeTabName === 'generation' && !isSDXL && <HrfSettings />}
             {activeTabName === 'canvas' && (
               <>

From e8d60e8d8358a6417b5198cd243b0da27111e271 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 09:50:54 +1000
Subject: [PATCH 037/116] fix(ui): image metadata viewer stuck when spamming
 hotkey

---
 .../ImageViewer/CurrentImagePreview.tsx       | 27 ++++---------------
 1 file changed, 5 insertions(+), 22 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
index 8e6eccbe73..f40ecfca32 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx
@@ -103,24 +103,11 @@ const CurrentImagePreview = ({
           dataTestId="image-preview"
         />
       )}
-      <AnimatePresence>
-        {shouldShowImageDetails && imageDTO && withMetadata && (
-          <Box
-            as={motion.div}
-            key="metadataViewer"
-            initial={initial}
-            animate={animateMetadata}
-            exit={exit}
-            position="absolute"
-            top={0}
-            width="full"
-            height="full"
-            borderRadius="base"
-          >
-            <ImageMetadataViewer image={imageDTO} />
-          </Box>
-        )}
-      </AnimatePresence>
+      {shouldShowImageDetails && imageDTO && withMetadata && (
+        <Box position="absolute" opacity={0.8} top={0} width="full" height="full" borderRadius="base">
+          <ImageMetadataViewer image={imageDTO} />
+        </Box>
+      )}
       <AnimatePresence>
         {withNextPrevButtons && shouldShowNextPrevButtons && imageDTO && (
           <Box
@@ -152,10 +139,6 @@ const animateArrows: AnimationProps['animate'] = {
   opacity: 1,
   transition: { duration: 0.07 },
 };
-const animateMetadata: AnimationProps['animate'] = {
-  opacity: 0.8,
-  transition: { duration: 0.07 },
-};
 const exit: AnimationProps['exit'] = {
   opacity: 0,
   transition: { duration: 0.07 },

From 4adc5926572534d7172faea4a3ac553d41f8061f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 10:10:03 +1000
Subject: [PATCH 038/116] feat(ui): move strength to init image layer

This further splits the control layers state into its own thing.
---
 .../components/IILayer/IILayer.tsx            | 10 +++++++-
 .../controlLayers/store/controlLayersSlice.ts | 13 +++++++++-
 .../src/features/controlLayers/store/types.ts |  3 ++-
 .../graph/addInitialImageToLinearGraph.ts     | 11 +++++----
 .../Canvas/ParamImageToImageStrength.tsx      | 20 ++++++++++++++++
 .../ImageToImage/ImageToImageStrength.tsx     | 24 +++++++++----------
 .../ImageSettingsAccordion.tsx                |  4 ++--
 7 files changed, 64 insertions(+), 21 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/parameters/components/Canvas/ParamImageToImageStrength.tsx

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IILayer/IILayer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IILayer/IILayer.tsx
index 772dbd7332..c6efd041ca 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/IILayer/IILayer.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IILayer/IILayer.tsx
@@ -8,6 +8,7 @@ import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerT
 import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle';
 import { LayerWrapper } from 'features/controlLayers/components/LayerCommon/LayerWrapper';
 import {
+  iiLayerDenoisingStrengthChanged,
   iiLayerImageChanged,
   layerSelected,
   selectIILayerOrThrow,
@@ -36,6 +37,13 @@ export const IILayer = memo(({ layerId }: Props) => {
     [dispatch, layerId]
   );
 
+  const onChangeDenoisingStrength = useCallback(
+    (denoisingStrength: number) => {
+      dispatch(iiLayerDenoisingStrengthChanged({ layerId, denoisingStrength }));
+    },
+    [dispatch, layerId]
+  );
+
   const droppableData = useMemo<IILayerImageDropData>(
     () => ({
       actionType: 'SET_II_LAYER_IMAGE',
@@ -67,7 +75,7 @@ export const IILayer = memo(({ layerId }: Props) => {
       </Flex>
       {isOpen && (
         <Flex flexDir="column" gap={3} px={3} pb={3}>
-          <ImageToImageStrength />
+          <ImageToImageStrength value={layer.denoisingStrength} onChange={onChangeDenoisingStrength} />
           <InitialImagePreview
             image={layer.image}
             onChangeImage={onChangeImage}
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
index 1ef90ead3a..bbe0464aa7 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
@@ -49,7 +49,7 @@ import type {
 } from './types';
 
 export const initialControlLayersState: ControlLayersState = {
-  _version: 1,
+  _version: 2,
   selectedLayerId: null,
   brushSize: 100,
   layers: [],
@@ -642,6 +642,7 @@ export const controlLayersSlice = createSlice({
           isEnabled: true,
           image: imageDTO ? imageDTOToImageWithDims(imageDTO) : null,
           isSelected: true,
+          denoisingStrength: 0.75,
         };
         state.layers.push(layer);
         state.selectedLayerId = layer.id;
@@ -666,6 +667,11 @@ export const controlLayersSlice = createSlice({
       const layer = selectIILayerOrThrow(state, layerId);
       layer.opacity = opacity;
     },
+    iiLayerDenoisingStrengthChanged: (state, action: PayloadAction<{ layerId: string; denoisingStrength: number }>) => {
+      const { layerId, denoisingStrength } = action.payload;
+      const layer = selectIILayerOrThrow(state, layerId);
+      layer.denoisingStrength = denoisingStrength;
+    },
     //#endregion
 
     //#region Globals
@@ -841,6 +847,7 @@ export const {
   iiLayerAdded,
   iiLayerImageChanged,
   iiLayerOpacityChanged,
+  iiLayerDenoisingStrengthChanged,
   // Globals
   positivePromptChanged,
   negativePromptChanged,
@@ -860,6 +867,10 @@ export const selectControlLayersSlice = (state: RootState) => state.controlLayer
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 const migrateControlLayersState = (state: any): any => {
+  if (state._version === 1) {
+    // Reset state for users on v1 (e.g. beta users), some changes could cause
+    return deepClone(initialControlLayersState);
+  }
   return state;
 };
 
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/types.ts b/invokeai/frontend/web/src/features/controlLayers/store/types.ts
index afb04aae37..d469506c60 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/types.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/types.ts
@@ -79,12 +79,13 @@ export type InitialImageLayer = RenderableLayerBase & {
   type: 'initial_image_layer';
   opacity: number;
   image: ImageWithDims | null;
+  denoisingStrength: number;
 };
 
 export type Layer = RegionalGuidanceLayer | ControlAdapterLayer | IPAdapterLayer | InitialImageLayer;
 
 export type ControlLayersState = {
-  _version: 1;
+  _version: 2;
   selectedLayerId: string | null;
   layers: Layer[];
   brushSize: number;
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addInitialImageToLinearGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addInitialImageToLinearGraph.ts
index eae45acc5b..54cf0ee59e 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addInitialImageToLinearGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addInitialImageToLinearGraph.ts
@@ -15,13 +15,13 @@ export const addInitialImageToLinearGraph = (
   denoiseNodeId: string
 ): boolean => {
   // Remove Existing UNet Connections
-  const { img2imgStrength, vaePrecision, model } = state.generation;
+  const { vaePrecision, model } = state.generation;
   const { refinerModel, refinerStart } = state.sdxl;
   const { width, height } = state.controlLayers.present.size;
   const initialImageLayer = state.controlLayers.present.layers.find(isInitialImageLayer);
   const initialImage = initialImageLayer?.isEnabled ? initialImageLayer?.image : null;
 
-  if (!initialImage) {
+  if (!initialImage || !initialImageLayer) {
     return false;
   }
 
@@ -31,7 +31,10 @@ export const addInitialImageToLinearGraph = (
   const denoiseNode = graph.nodes[denoiseNodeId];
   assert(denoiseNode?.type === 'denoise_latents', `Missing denoise node or incorrect type: ${denoiseNode?.type}`);
 
-  denoiseNode.denoising_start = useRefinerStartEnd ? Math.min(refinerStart, 1 - img2imgStrength) : 1 - img2imgStrength;
+  const { denoisingStrength } = initialImageLayer;
+  denoiseNode.denoising_start = useRefinerStartEnd
+    ? Math.min(refinerStart, 1 - denoisingStrength)
+    : 1 - denoisingStrength;
   denoiseNode.denoising_end = useRefinerStartEnd ? refinerStart : 1;
 
   // We conditionally hook the image in depending on if a resize is needed
@@ -122,7 +125,7 @@ export const addInitialImageToLinearGraph = (
 
   upsertMetadata(graph, {
     generation_mode: isSDXL ? 'sdxl_img2img' : 'img2img',
-    strength: img2imgStrength,
+    strength: denoisingStrength,
     init_image: initialImage.imageName,
   });
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/ParamImageToImageStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/ParamImageToImageStrength.tsx
new file mode 100644
index 0000000000..2519f9dad0
--- /dev/null
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/ParamImageToImageStrength.tsx
@@ -0,0 +1,20 @@
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import ImageToImageStrength from 'features/parameters/components/ImageToImage/ImageToImageStrength';
+import { setImg2imgStrength } from 'features/parameters/store/generationSlice';
+import { memo, useCallback } from 'react';
+
+const ParamImageToImageStrength = () => {
+  const img2imgStrength = useAppSelector((s) => s.generation.img2imgStrength);
+  const dispatch = useAppDispatch();
+
+  const onChange = useCallback(
+    (v: number) => {
+      dispatch(setImg2imgStrength(v));
+    },
+    [dispatch]
+  );
+
+  return <ImageToImageStrength value={img2imgStrength} onChange={onChange} />;
+};
+
+export default memo(ParamImageToImageStrength);
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx
index e92831ecd9..c56fef1903 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageStrength.tsx
@@ -1,14 +1,17 @@
 import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
-import { setImg2imgStrength } from 'features/parameters/store/generationSlice';
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const marks = [0, 0.5, 1];
 
-const ImageToImageStrength = () => {
-  const img2imgStrength = useAppSelector((s) => s.generation.img2imgStrength);
+type Props = {
+  value: number;
+  onChange: (v: number) => void;
+};
+
+const ImageToImageStrength = ({ value, onChange }: Props) => {
   const initial = useAppSelector((s) => s.config.sd.img2imgStrength.initial);
   const sliderMin = useAppSelector((s) => s.config.sd.img2imgStrength.sliderMin);
   const sliderMax = useAppSelector((s) => s.config.sd.img2imgStrength.sliderMax);
@@ -16,11 +19,8 @@ const ImageToImageStrength = () => {
   const numberInputMax = useAppSelector((s) => s.config.sd.img2imgStrength.numberInputMax);
   const coarseStep = useAppSelector((s) => s.config.sd.img2imgStrength.coarseStep);
   const fineStep = useAppSelector((s) => s.config.sd.img2imgStrength.fineStep);
-  const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
-  const handleChange = useCallback((v: number) => dispatch(setImg2imgStrength(v)), [dispatch]);
-
   return (
     <FormControl>
       <InformationalPopover feature="paramDenoisingStrength">
@@ -31,8 +31,8 @@ const ImageToImageStrength = () => {
         fineStep={fineStep}
         min={sliderMin}
         max={sliderMax}
-        onChange={handleChange}
-        value={img2imgStrength}
+        onChange={onChange}
+        value={value}
         defaultValue={initial}
         marks={marks}
       />
@@ -41,8 +41,8 @@ const ImageToImageStrength = () => {
         fineStep={fineStep}
         min={numberInputMin}
         max={numberInputMax}
-        onChange={handleChange}
-        value={img2imgStrength}
+        onChange={onChange}
+        value={value}
         defaultValue={initial}
       />
     </FormControl>
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
index 853d7f3a78..47392cdb8c 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion.tsx
@@ -9,7 +9,7 @@ import { selectHrfSlice } from 'features/hrf/store/hrfSlice';
 import ParamScaleBeforeProcessing from 'features/parameters/components/Canvas/InfillAndScaling/ParamScaleBeforeProcessing';
 import ParamScaledHeight from 'features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight';
 import ParamScaledWidth from 'features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth';
-import ImageToImageStrength from 'features/parameters/components/ImageToImage/ImageToImageStrength';
+import ParamImageToImageStrength from 'features/parameters/components/Canvas/ParamImageToImageStrength';
 import { ParamSeedNumberInput } from 'features/parameters/components/Seed/ParamSeedNumberInput';
 import { ParamSeedRandomize } from 'features/parameters/components/Seed/ParamSeedRandomize';
 import { ParamSeedShuffle } from 'features/parameters/components/Seed/ParamSeedShuffle';
@@ -87,7 +87,7 @@ export const ImageSettingsAccordion = memo(() => {
       <Flex px={4} pt={4} w="full" h="full" flexDir="column" data-testid="image-settings-accordion">
         <Flex flexDir="column" gap={4}>
           {activeTabName === 'canvas' ? <ImageSizeCanvas /> : <ImageSizeLinear />}
-          {activeTabName === 'canvas' && <ImageToImageStrength />}
+          {activeTabName === 'canvas' && <ParamImageToImageStrength />}
         </Flex>
         <Expander label={t('accordions.advanced.options')} isOpen={isOpenExpander} onToggle={onToggleExpander}>
           <Flex gap={4} pb={4} flexDir="column">

From a7aa529b99e78aea96709699a03eae431fb023b4 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 11:16:06 +1000
Subject: [PATCH 039/116] tidy(ui): "imageName" -> "name"

---
 .../listeners/imageDeleted.ts                 | 10 +++---
 .../ControlAdapterImagePreview.tsx            |  4 +--
 .../IPAdapterImagePreview.tsx                 |  2 +-
 .../IILayer/InitialImagePreview.tsx           |  2 +-
 .../controlLayers/util/controlAdapters.ts     | 32 +++++++++----------
 .../features/controlLayers/util/renderers.ts  |  8 ++---
 .../deleteImageModal/store/selectors.ts       |  8 ++---
 .../util/graph/addControlLayersToGraph.ts     | 22 ++++++-------
 .../graph/addInitialImageToLinearGraph.ts     |  6 ++--
 9 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts
index 95d17da653..501f71db70 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDeleted.ts
@@ -73,25 +73,25 @@ const deleteControlAdapterImages = (state: RootState, dispatch: AppDispatch, ima
 const deleteControlLayerImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {
   state.controlLayers.present.layers.forEach((l) => {
     if (isRegionalGuidanceLayer(l)) {
-      if (l.ipAdapters.some((ipa) => ipa.image?.imageName === imageDTO.image_name)) {
+      if (l.ipAdapters.some((ipa) => ipa.image?.name === imageDTO.image_name)) {
         dispatch(layerDeleted(l.id));
       }
     }
     if (isControlAdapterLayer(l)) {
       if (
-        l.controlAdapter.image?.imageName === imageDTO.image_name ||
-        l.controlAdapter.processedImage?.imageName === imageDTO.image_name
+        l.controlAdapter.image?.name === imageDTO.image_name ||
+        l.controlAdapter.processedImage?.name === imageDTO.image_name
       ) {
         dispatch(layerDeleted(l.id));
       }
     }
     if (isIPAdapterLayer(l)) {
-      if (l.ipAdapter.image?.imageName === imageDTO.image_name) {
+      if (l.ipAdapter.image?.name === imageDTO.image_name) {
         dispatch(layerDeleted(l.id));
       }
     }
     if (isInitialImageLayer(l)) {
-      if (l.image?.imageName === imageDTO.image_name) {
+      if (l.image?.name === imageDTO.image_name) {
         dispatch(layerDeleted(l.id));
       }
     }
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterImagePreview.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterImagePreview.tsx
index e6c6aae286..c1da425186 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterImagePreview.tsx
@@ -42,10 +42,10 @@ export const ControlAdapterImagePreview = memo(
     const [isMouseOverImage, setIsMouseOverImage] = useState(false);
 
     const { currentData: controlImage, isError: isErrorControlImage } = useGetImageDTOQuery(
-      controlAdapter.image?.imageName ?? skipToken
+      controlAdapter.image?.name ?? skipToken
     );
     const { currentData: processedControlImage, isError: isErrorProcessedControlImage } = useGetImageDTOQuery(
-      controlAdapter.processedImage?.imageName ?? skipToken
+      controlAdapter.processedImage?.name ?? skipToken
     );
 
     const [changeIsIntermediate] = useChangeImageIsIntermediateMutation();
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/IPAdapterImagePreview.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/IPAdapterImagePreview.tsx
index 83dd250cd0..e2ea215314 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/IPAdapterImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/IPAdapterImagePreview.tsx
@@ -35,7 +35,7 @@ export const IPAdapterImagePreview = memo(
     const shift = useShiftModifier();
 
     const { currentData: controlImage, isError: isErrorControlImage } = useGetImageDTOQuery(
-      image?.imageName ?? skipToken
+      image?.name ?? skipToken
     );
     const handleResetControlImage = useCallback(() => {
       onChangeImage(null);
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IILayer/InitialImagePreview.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IILayer/InitialImagePreview.tsx
index e355d5db86..9053c0c123 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/IILayer/InitialImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IILayer/InitialImagePreview.tsx
@@ -32,7 +32,7 @@ export const InitialImagePreview = memo(({ image, onChangeImage, droppableData,
   const optimalDimension = useAppSelector(selectOptimalDimension);
   const shift = useShiftModifier();
 
-  const { currentData: imageDTO, isError: isErrorControlImage } = useGetImageDTOQuery(image?.imageName ?? skipToken);
+  const { currentData: imageDTO, isError: isErrorControlImage } = useGetImageDTOQuery(image?.name ?? skipToken);
 
   const onReset = useCallback(() => {
     onChangeImage(null);
diff --git a/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts b/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
index 2964a2eb6c..617b527475 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
@@ -79,7 +79,7 @@ export type ProcessorConfig =
   | ZoeDepthProcessorConfig;
 
 export type ImageWithDims = {
-  imageName: string;
+  name: string;
   width: number;
   height: number;
 };
@@ -190,7 +190,7 @@ export const CA_PROCESSOR_DATA: CAProcessorsData = {
     buildNode: (image, config) => ({
       ...config,
       type: 'canny_image_processor',
-      image: { image_name: image.imageName },
+      image: { image_name: image.name },
       detect_resolution: minDim(image),
       image_resolution: minDim(image),
     }),
@@ -207,7 +207,7 @@ export const CA_PROCESSOR_DATA: CAProcessorsData = {
     buildNode: (image, config) => ({
       ...config,
       type: 'color_map_image_processor',
-      image: { image_name: image.imageName },
+      image: { image_name: image.name },
     }),
   },
   content_shuffle_image_processor: {
@@ -223,7 +223,7 @@ export const CA_PROCESSOR_DATA: CAProcessorsData = {
     }),
     buildNode: (image, config) => ({
       ...config,
-      image: { image_name: image.imageName },
+      image: { image_name: image.name },
       detect_resolution: minDim(image),
       image_resolution: minDim(image),
     }),
@@ -239,7 +239,7 @@ export const CA_PROCESSOR_DATA: CAProcessorsData = {
     }),
     buildNode: (image, config) => ({
       ...config,
-      image: { image_name: image.imageName },
+      image: { image_name: image.name },
       resolution: minDim(image),
     }),
   },
@@ -254,7 +254,7 @@ export const CA_PROCESSOR_DATA: CAProcessorsData = {
     }),
     buildNode: (image, config) => ({
       ...config,
-      image: { image_name: image.imageName },
+      image: { image_name: image.name },
       detect_resolution: minDim(image),
       image_resolution: minDim(image),
     }),
@@ -269,7 +269,7 @@ export const CA_PROCESSOR_DATA: CAProcessorsData = {
     }),
     buildNode: (image, config) => ({
       ...config,
-      image: { image_name: image.imageName },
+      image: { image_name: image.name },
       detect_resolution: minDim(image),
       image_resolution: minDim(image),
     }),
@@ -285,7 +285,7 @@ export const CA_PROCESSOR_DATA: CAProcessorsData = {
     }),
     buildNode: (image, config) => ({
       ...config,
-      image: { image_name: image.imageName },
+      image: { image_name: image.name },
       detect_resolution: minDim(image),
       image_resolution: minDim(image),
     }),
@@ -302,7 +302,7 @@ export const CA_PROCESSOR_DATA: CAProcessorsData = {
     }),
     buildNode: (image, config) => ({
       ...config,
-      image: { image_name: image.imageName },
+      image: { image_name: image.name },
       detect_resolution: minDim(image),
       image_resolution: minDim(image),
     }),
@@ -319,7 +319,7 @@ export const CA_PROCESSOR_DATA: CAProcessorsData = {
     }),
     buildNode: (image, config) => ({
       ...config,
-      image: { image_name: image.imageName },
+      image: { image_name: image.name },
       detect_resolution: minDim(image),
       image_resolution: minDim(image),
     }),
@@ -336,7 +336,7 @@ export const CA_PROCESSOR_DATA: CAProcessorsData = {
     }),
     buildNode: (image, config) => ({
       ...config,
-      image: { image_name: image.imageName },
+      image: { image_name: image.name },
       detect_resolution: minDim(image),
       image_resolution: minDim(image),
     }),
@@ -351,7 +351,7 @@ export const CA_PROCESSOR_DATA: CAProcessorsData = {
     }),
     buildNode: (image, config) => ({
       ...config,
-      image: { image_name: image.imageName },
+      image: { image_name: image.name },
       detect_resolution: minDim(image),
       image_resolution: minDim(image),
     }),
@@ -369,7 +369,7 @@ export const CA_PROCESSOR_DATA: CAProcessorsData = {
     }),
     buildNode: (image, config) => ({
       ...config,
-      image: { image_name: image.imageName },
+      image: { image_name: image.name },
       image_resolution: minDim(image),
     }),
   },
@@ -385,7 +385,7 @@ export const CA_PROCESSOR_DATA: CAProcessorsData = {
     }),
     buildNode: (image, config) => ({
       ...config,
-      image: { image_name: image.imageName },
+      image: { image_name: image.name },
       detect_resolution: minDim(image),
       image_resolution: minDim(image),
     }),
@@ -400,7 +400,7 @@ export const CA_PROCESSOR_DATA: CAProcessorsData = {
     }),
     buildNode: (image, config) => ({
       ...config,
-      image: { image_name: image.imageName },
+      image: { image_name: image.name },
     }),
   },
 };
@@ -462,7 +462,7 @@ export const buildControlAdapterProcessorV2 = (
 };
 
 export const imageDTOToImageWithDims = ({ image_name, width, height }: ImageDTO): ImageWithDims => ({
-  imageName: image_name,
+  name: image_name,
   width,
   height,
 });
diff --git a/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts b/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
index f58b1e3b74..559d82aa5c 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
@@ -510,7 +510,7 @@ const updateInitialImageLayerImageSource = async (
   reduxLayer: InitialImageLayer
 ) => {
   if (reduxLayer.image) {
-    const { imageName } = reduxLayer.image;
+    const imageName = reduxLayer.image.name;
     const req = getStore().dispatch(imagesApi.endpoints.getImageDTO.initiate(imageName));
     const imageDTO = await req.unwrap();
     req.unsubscribe();
@@ -543,7 +543,7 @@ const renderInitialImageLayer = (stage: Konva.Stage, reduxLayer: InitialImageLay
   let imageSourceNeedsUpdate = false;
   if (canvasImageSource instanceof HTMLImageElement) {
     const image = reduxLayer.image;
-    if (image && canvasImageSource.id !== getCALayerImageId(reduxLayer.id, image.imageName)) {
+    if (image && canvasImageSource.id !== getCALayerImageId(reduxLayer.id, image.name)) {
       imageSourceNeedsUpdate = true;
     } else if (!image) {
       imageSourceNeedsUpdate = true;
@@ -585,7 +585,7 @@ const updateControlNetLayerImageSource = async (
 ) => {
   const image = reduxLayer.controlAdapter.processedImage ?? reduxLayer.controlAdapter.image;
   if (image) {
-    const { imageName } = image;
+    const imageName = image.name;
     const req = getStore().dispatch(imagesApi.endpoints.getImageDTO.initiate(imageName));
     const imageDTO = await req.unwrap();
     req.unsubscribe();
@@ -653,7 +653,7 @@ const renderControlNetLayer = (stage: Konva.Stage, reduxLayer: ControlAdapterLay
   let imageSourceNeedsUpdate = false;
   if (canvasImageSource instanceof HTMLImageElement) {
     const image = reduxLayer.controlAdapter.processedImage ?? reduxLayer.controlAdapter.image;
-    if (image && canvasImageSource.id !== getCALayerImageId(reduxLayer.id, image.imageName)) {
+    if (image && canvasImageSource.id !== getCALayerImageId(reduxLayer.id, image.name)) {
       imageSourceNeedsUpdate = true;
     } else if (!image) {
       imageSourceNeedsUpdate = true;
diff --git a/invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts b/invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts
index ce989de7b1..7e2605c6cf 100644
--- a/invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts
+++ b/invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts
@@ -46,18 +46,18 @@ export const getImageUsage = (
 
   const isControlLayerImage = controlLayers.layers.some((l) => {
     if (isRegionalGuidanceLayer(l)) {
-      return l.ipAdapters.some((ipa) => ipa.image?.imageName === image_name);
+      return l.ipAdapters.some((ipa) => ipa.image?.name === image_name);
     }
     if (isControlAdapterLayer(l)) {
       return (
-        l.controlAdapter.image?.imageName === image_name || l.controlAdapter.processedImage?.imageName === image_name
+        l.controlAdapter.image?.name === image_name || l.controlAdapter.processedImage?.name === image_name
       );
     }
     if (isIPAdapterLayer(l)) {
-      return l.ipAdapter.image?.imageName === image_name;
+      return l.ipAdapter.image?.name === image_name;
     }
     if (isInitialImageLayer(l)) {
-      return l.image?.imageName === image_name;
+      return l.image?.name === image_name;
     }
     return false;
   });
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
index 30c15fae10..e1836a3dc6 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
@@ -56,12 +56,12 @@ const buildControlImage = (
   if (processedImage && processorConfig) {
     // We've processed the image in the app - use it for the control image.
     return {
-      image_name: processedImage.imageName,
+      image_name: processedImage.name,
     };
   } else if (image) {
     // No processor selected, and we have an image - the user provided a processed image, use it for the control image.
     return {
-      image_name: image.imageName,
+      image_name: image.name,
     };
   }
   assert(false, 'Attempted to add unprocessed control image');
@@ -76,7 +76,7 @@ const buildControlNetMetadata = (controlNet: ControlNetConfigV2): S['ControlNetM
   const processed_image =
     processedImage && processorConfig
       ? {
-          image_name: processedImage.imageName,
+          image_name: processedImage.name,
         }
       : null;
 
@@ -88,7 +88,7 @@ const buildControlNetMetadata = (controlNet: ControlNetConfigV2): S['ControlNetM
     end_step_percent: beginEndStepPct[1],
     resize_mode: 'just_resize',
     image: {
-      image_name: image.imageName,
+      image_name: image.name,
     },
     processed_image,
   };
@@ -169,7 +169,7 @@ const buildT2IAdapterMetadata = (t2iAdapter: T2IAdapterConfigV2): S['T2IAdapterM
   const processed_image =
     processedImage && processorConfig
       ? {
-          image_name: processedImage.imageName,
+          image_name: processedImage.name,
         }
       : null;
 
@@ -180,7 +180,7 @@ const buildT2IAdapterMetadata = (t2iAdapter: T2IAdapterConfigV2): S['T2IAdapterM
     end_step_percent: beginEndStepPct[1],
     resize_mode: 'just_resize',
     image: {
-      image_name: image.imageName,
+      image_name: image.name,
     },
     processed_image,
   };
@@ -266,7 +266,7 @@ const buildIPAdapterMetadata = (ipAdapter: IPAdapterConfigV2): S['IPAdapterMetad
     begin_step_percent: beginEndStepPct[0],
     end_step_percent: beginEndStepPct[1],
     image: {
-      image_name: image.imageName,
+      image_name: image.name,
     },
   };
 };
@@ -319,7 +319,7 @@ const addGlobalIPAdaptersToGraph = async (
       begin_step_percent: beginEndStepPct[0],
       end_step_percent: beginEndStepPct[1],
       image: {
-        image_name: image.imageName,
+        image_name: image.name,
       },
     };
 
@@ -402,7 +402,7 @@ export const addControlLayersToGraph = async (state: RootState, graph: NonNullab
     // Only layers with prompts get added to the graph
     .filter((l) => {
       const hasTextPrompt = Boolean(l.positivePrompt || l.negativePrompt);
-      const hasIPAdapter = l.ipAdapters.length !== 0;
+      const hasIPAdapter = l.ipAdapters.filter((ipa) => ipa.image).length > 0;
       return hasTextPrompt || hasIPAdapter;
     });
 
@@ -648,7 +648,7 @@ export const addControlLayersToGraph = async (state: RootState, graph: NonNullab
         begin_step_percent: beginEndStepPct[0],
         end_step_percent: beginEndStepPct[1],
         image: {
-          image_name: image.imageName,
+          image_name: image.name,
         },
       };
 
@@ -673,7 +673,7 @@ export const addControlLayersToGraph = async (state: RootState, graph: NonNullab
 
 const getMaskImage = async (layer: RegionalGuidanceLayer, blob: Blob): Promise<ImageDTO> => {
   if (layer.uploadedMaskImage) {
-    const imageDTO = await getImageDTO(layer.uploadedMaskImage.imageName);
+    const imageDTO = await getImageDTO(layer.uploadedMaskImage.name);
     if (imageDTO) {
       return imageDTO;
     }
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addInitialImageToLinearGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addInitialImageToLinearGraph.ts
index 54cf0ee59e..2460b187a4 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addInitialImageToLinearGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addInitialImageToLinearGraph.ts
@@ -66,7 +66,7 @@ export const addInitialImageToLinearGraph = (
       id: RESIZE,
       type: 'img_resize',
       image: {
-        image_name: initialImage.imageName,
+        image_name: initialImage.name,
       },
       is_intermediate: true,
       width,
@@ -103,7 +103,7 @@ export const addInitialImageToLinearGraph = (
   } else {
     // We are not resizing, so we need to set the image on the `IMAGE_TO_LATENTS` node explicitly
     i2lNode.image = {
-      image_name: initialImage.imageName,
+      image_name: initialImage.name,
     };
 
     // Pass the image's dimensions to the `NOISE` node
@@ -126,7 +126,7 @@ export const addInitialImageToLinearGraph = (
   upsertMetadata(graph, {
     generation_mode: isSDXL ? 'sdxl_img2img' : 'img2img',
     strength: denoisingStrength,
-    init_image: initialImage.imageName,
+    init_image: initialImage.name,
   });
 
   return true;

From 8342f32f2e2a293ff4b839bb7ae66391fb08117b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 15:14:47 +1000
Subject: [PATCH 040/116] refactor(ui): rewrite all types as zod schemas

This change prepares for safe metadata recall.
---
 .../src/features/controlLayers/store/types.ts | 177 +++++++-----
 .../util/controlAdapters.test.ts              |  68 ++++-
 .../controlLayers/util/controlAdapters.ts     | 268 +++++++++++++-----
 .../parameters/types/parameterSchemas.ts      |   8 +-
 4 files changed, 361 insertions(+), 160 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/store/types.ts b/invokeai/frontend/web/src/features/controlLayers/store/types.ts
index d469506c60..11266c8049 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/types.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/types.ts
@@ -1,88 +1,121 @@
-import type {
-  ControlNetConfigV2,
-  ImageWithDims,
-  IPAdapterConfigV2,
-  T2IAdapterConfigV2,
+import {
+  zControlNetConfigV2,
+  zImageWithDims,
+  zIPAdapterConfigV2,
+  zT2IAdapterConfigV2,
 } from 'features/controlLayers/util/controlAdapters';
 import type { AspectRatioState } from 'features/parameters/components/ImageSize/types';
-import type {
-  ParameterAutoNegative,
-  ParameterHeight,
-  ParameterNegativePrompt,
-  ParameterNegativeStylePromptSDXL,
-  ParameterPositivePrompt,
-  ParameterPositiveStylePromptSDXL,
-  ParameterWidth,
+import {
+  type ParameterHeight,
+  type ParameterNegativePrompt,
+  type ParameterNegativeStylePromptSDXL,
+  type ParameterPositivePrompt,
+  type ParameterPositiveStylePromptSDXL,
+  type ParameterWidth,
+  zAutoNegative,
+  zParameterNegativePrompt,
+  zParameterPositivePrompt,
+  zParameterStrength,
 } from 'features/parameters/types/parameterSchemas';
-import type { IRect } from 'konva/lib/types';
-import type { RgbColor } from 'react-colorful';
+import { z } from 'zod';
 
-export type DrawingTool = 'brush' | 'eraser';
+export const zTool = z.enum(['brush', 'eraser', 'move', 'rect']);
+export type Tool = z.infer<typeof zTool>;
+export const zDrawingTool = zTool.extract(['brush', 'eraser']);
+export type DrawingTool = z.infer<typeof zDrawingTool>;
 
-export type Tool = DrawingTool | 'move' | 'rect';
+const zPoints = z.array(z.number()).refine((points) => points.length % 2 === 0, {
+  message: 'Must have an even number of points',
+});
+export const zVectorMaskLine = z.object({
+  id: z.string(),
+  type: z.literal('vector_mask_line'),
+  tool: zDrawingTool,
+  strokeWidth: z.number().min(1),
+  points: zPoints,
+});
+export type VectorMaskLine = z.infer<typeof zVectorMaskLine>;
 
-export type VectorMaskLine = {
-  id: string;
-  type: 'vector_mask_line';
-  tool: DrawingTool;
-  strokeWidth: number;
-  points: number[];
-};
+export const zVectorMaskRect = z.object({
+  id: z.string(),
+  type: z.literal('vector_mask_rect'),
+  x: z.number(),
+  y: z.number(),
+  width: z.number().min(1),
+  height: z.number().min(1),
+});
+export type VectorMaskRect = z.infer<typeof zVectorMaskRect>;
 
-export type VectorMaskRect = {
-  id: string;
-  type: 'vector_mask_rect';
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-};
+const zLayerBase = z.object({
+  id: z.string(),
+  isEnabled: z.boolean(),
+});
 
-type LayerBase = {
-  id: string;
-  isEnabled: boolean;
-};
+const zRect = z.object({
+  x: z.number(),
+  y: z.number(),
+  width: z.number().min(1),
+  height: z.number().min(1),
+});
+const zRenderableLayerBase = zLayerBase.extend({
+  x: z.number(),
+  y: z.number(),
+  bbox: zRect.nullable(),
+  bboxNeedsUpdate: z.boolean(),
+  isSelected: z.boolean(),
+});
 
-type RenderableLayerBase = LayerBase & {
-  x: number;
-  y: number;
-  bbox: IRect | null;
-  bboxNeedsUpdate: boolean;
-  isSelected: boolean;
-};
+const zControlAdapterLayer = zRenderableLayerBase.extend({
+  type: z.literal('control_adapter_layer'),
+  opacity: z.number().gte(0).lte(1),
+  isFilterEnabled: z.boolean(),
+  controlAdapter: z.discriminatedUnion('type', [zControlNetConfigV2, zT2IAdapterConfigV2]),
+});
+export type ControlAdapterLayer = z.infer<typeof zControlAdapterLayer>;
 
-export type ControlAdapterLayer = RenderableLayerBase & {
-  type: 'control_adapter_layer'; // technically, also t2i adapter layer
-  opacity: number;
-  isFilterEnabled: boolean;
-  controlAdapter: ControlNetConfigV2 | T2IAdapterConfigV2;
-};
+const zIPAdapterLayer = zLayerBase.extend({
+  type: z.literal('ip_adapter_layer'),
+  ipAdapter: zIPAdapterConfigV2,
+});
+export type IPAdapterLayer = z.infer<typeof zIPAdapterLayer>;
 
-export type IPAdapterLayer = LayerBase & {
-  type: 'ip_adapter_layer';
-  ipAdapter: IPAdapterConfigV2;
-};
+const zRgbColor = z.object({
+  r: z.number().int().min(0).max(255),
+  g: z.number().int().min(0).max(255),
+  b: z.number().int().min(0).max(255),
+});
+const zRegionalGuidanceLayer = zRenderableLayerBase.extend({
+  type: z.literal('regional_guidance_layer'),
+  maskObjects: z.array(z.discriminatedUnion('type', [zVectorMaskLine, zVectorMaskRect])),
+  positivePrompt: zParameterPositivePrompt.nullable(),
+  negativePrompt: zParameterNegativePrompt.nullable(),
+  ipAdapters: z.array(zIPAdapterConfigV2),
+  previewColor: zRgbColor,
+  autoNegative: zAutoNegative,
+  needsPixelBbox: z
+    .boolean()
+    .describe(
+      'Whether the layer needs the slower pixel-based bbox calculation. Set to true when an there is an eraser object.'
+    ),
+  uploadedMaskImage: zImageWithDims.nullable(),
+});
+export type RegionalGuidanceLayer = z.infer<typeof zRegionalGuidanceLayer>;
 
-export type RegionalGuidanceLayer = RenderableLayerBase & {
-  type: 'regional_guidance_layer';
-  maskObjects: (VectorMaskLine | VectorMaskRect)[];
-  positivePrompt: ParameterPositivePrompt | null;
-  negativePrompt: ParameterNegativePrompt | null; // Up to one text prompt per mask
-  ipAdapters: IPAdapterConfigV2[]; // Any number of image prompts
-  previewColor: RgbColor;
-  autoNegative: ParameterAutoNegative;
-  needsPixelBbox: boolean; // Needs the slower pixel-based bbox calculation - set to true when an there is an eraser object
-  uploadedMaskImage: ImageWithDims | null;
-};
+const zInitialImageLayer = zRenderableLayerBase.extend({
+  type: z.literal('initial_image_layer'),
+  opacity: z.number().gte(0).lte(1),
+  image: zImageWithDims.nullable(),
+  denoisingStrength: zParameterStrength,
+});
+export type InitialImageLayer = z.infer<typeof zInitialImageLayer>;
 
-export type InitialImageLayer = RenderableLayerBase & {
-  type: 'initial_image_layer';
-  opacity: number;
-  image: ImageWithDims | null;
-  denoisingStrength: number;
-};
-
-export type Layer = RegionalGuidanceLayer | ControlAdapterLayer | IPAdapterLayer | InitialImageLayer;
+export const zLayer = z.discriminatedUnion('type', [
+  zRegionalGuidanceLayer,
+  zControlAdapterLayer,
+  zIPAdapterLayer,
+  zInitialImageLayer,
+]);
+export type Layer = z.infer<typeof zLayer>;
 
 export type ControlLayersState = {
   _version: 2;
diff --git a/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.test.ts b/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.test.ts
index 880514bf7c..31eb54e730 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.test.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.test.ts
@@ -4,20 +4,74 @@ import { assert } from 'tsafe';
 import { describe, test } from 'vitest';
 
 import type {
+  _CannyProcessorConfig,
+  _ColorMapProcessorConfig,
+  _ContentShuffleProcessorConfig,
+  _DepthAnythingProcessorConfig,
+  _DWOpenposeProcessorConfig,
+  _HedProcessorConfig,
+  _LineartAnimeProcessorConfig,
+  _LineartProcessorConfig,
+  _MediapipeFaceProcessorConfig,
+  _MidasDepthProcessorConfig,
+  _MlsdProcessorConfig,
+  _NormalbaeProcessorConfig,
+  _PidiProcessorConfig,
+  _ZoeDepthProcessorConfig,
+  CannyProcessorConfig,
   CLIPVisionModelV2,
+  ColorMapProcessorConfig,
+  ContentShuffleProcessorConfig,
   ControlModeV2,
   DepthAnythingModelSize,
+  DepthAnythingProcessorConfig,
+  DWOpenposeProcessorConfig,
+  HedProcessorConfig,
   IPMethodV2,
+  LineartAnimeProcessorConfig,
+  LineartProcessorConfig,
+  MediapipeFaceProcessorConfig,
+  MidasDepthProcessorConfig,
+  MlsdProcessorConfig,
+  NormalbaeProcessorConfig,
+  PidiProcessorConfig,
   ProcessorConfig,
   ProcessorTypeV2,
+  ZoeDepthProcessorConfig,
 } from './controlAdapters';
 
 describe('Control Adapter Types', () => {
-  test('ProcessorType', () => assert<Equals<ProcessorConfig['type'], ProcessorTypeV2>>());
-  test('IP Adapter Method', () => assert<Equals<NonNullable<S['IPAdapterInvocation']['method']>, IPMethodV2>>());
-  test('CLIP Vision Model', () =>
-    assert<Equals<NonNullable<S['IPAdapterInvocation']['clip_vision_model']>, CLIPVisionModelV2>>());
-  test('Control Mode', () => assert<Equals<NonNullable<S['ControlNetInvocation']['control_mode']>, ControlModeV2>>());
-  test('DepthAnything Model Size', () =>
-    assert<Equals<NonNullable<S['DepthAnythingImageProcessorInvocation']['model_size']>, DepthAnythingModelSize>>());
+  test('ProcessorType', () => {
+    assert<Equals<ProcessorConfig['type'], ProcessorTypeV2>>();
+  });
+  test('IP Adapter Method', () => {
+    assert<Equals<NonNullable<S['IPAdapterInvocation']['method']>, IPMethodV2>>();
+  });
+  test('CLIP Vision Model', () => {
+    assert<Equals<NonNullable<S['IPAdapterInvocation']['clip_vision_model']>, CLIPVisionModelV2>>();
+  });
+  test('Control Mode', () => {
+    assert<Equals<NonNullable<S['ControlNetInvocation']['control_mode']>, ControlModeV2>>();
+  });
+  test('DepthAnything Model Size', () => {
+    assert<Equals<NonNullable<S['DepthAnythingImageProcessorInvocation']['model_size']>, DepthAnythingModelSize>>();
+  });
+  test('Processor Configs', () => {
+    // The processor configs are manually modeled zod schemas. This test ensures that the inferred types are correct.
+    // The types prefixed with `_` are types generated from OpenAPI, while the types without the prefix are manually modeled.
+    assert<Equals<_CannyProcessorConfig, CannyProcessorConfig>>();
+    assert<Equals<_ColorMapProcessorConfig, ColorMapProcessorConfig>>();
+    assert<Equals<_ContentShuffleProcessorConfig, ContentShuffleProcessorConfig>>();
+    assert<Equals<_DepthAnythingProcessorConfig, DepthAnythingProcessorConfig>>();
+    assert<Equals<_HedProcessorConfig, HedProcessorConfig>>();
+    assert<Equals<_LineartAnimeProcessorConfig, LineartAnimeProcessorConfig>>();
+    assert<Equals<_LineartProcessorConfig, LineartProcessorConfig>>();
+    assert<Equals<_MediapipeFaceProcessorConfig, MediapipeFaceProcessorConfig>>();
+    assert<Equals<_MidasDepthProcessorConfig, MidasDepthProcessorConfig>>();
+    assert<Equals<_MlsdProcessorConfig, MlsdProcessorConfig>>();
+    assert<Equals<_NormalbaeProcessorConfig, NormalbaeProcessorConfig>>();
+    assert<Equals<_DWOpenposeProcessorConfig, DWOpenposeProcessorConfig>>();
+    assert<Equals<_PidiProcessorConfig, PidiProcessorConfig>>();
+    assert<Equals<_ZoeDepthProcessorConfig, ZoeDepthProcessorConfig>>();
+  });
 });
diff --git a/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts b/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
index 617b527475..9e885c56e2 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
@@ -1,9 +1,5 @@
 import { deepClone } from 'common/util/deepClone';
-import type {
-  ParameterControlNetModel,
-  ParameterIPAdapterModel,
-  ParameterT2IAdapterModel,
-} from 'features/parameters/types/parameterSchemas';
+import { zModelIdentifierField } from 'features/nodes/types/common';
 import { merge, omit } from 'lodash-es';
 import type {
   BaseModelType,
@@ -28,90 +24,207 @@ import type {
 } from 'services/api/types';
 import { z } from 'zod';
 
+const zId = z.string().min(1);
+
+const zCannyProcessorConfig = z.object({
+  id: zId,
+  type: z.literal('canny_image_processor'),
+  low_threshold: z.number().int().gte(0).lte(255),
+  high_threshold: z.number().int().gte(0).lte(255),
+});
+export type _CannyProcessorConfig = Required<
+  Pick<CannyImageProcessorInvocation, 'id' | 'type' | 'low_threshold' | 'high_threshold'>
+>;
+export type CannyProcessorConfig = z.infer<typeof zCannyProcessorConfig>;
+
+const zColorMapProcessorConfig = z.object({
+  id: zId,
+  type: z.literal('color_map_image_processor'),
+  color_map_tile_size: z.number().int().gte(1),
+});
+export type _ColorMapProcessorConfig = Required<
+  Pick<ColorMapImageProcessorInvocation, 'id' | 'type' | 'color_map_tile_size'>
+>;
+export type ColorMapProcessorConfig = z.infer<typeof zColorMapProcessorConfig>;
+
+const zContentShuffleProcessorConfig = z.object({
+  id: zId,
+  type: z.literal('content_shuffle_image_processor'),
+  w: z.number().int().gte(0),
+  h: z.number().int().gte(0),
+  f: z.number().int().gte(0),
+});
+export type _ContentShuffleProcessorConfig = Required<
+  Pick<ContentShuffleImageProcessorInvocation, 'id' | 'type' | 'w' | 'h' | 'f'>
+>;
+export type ContentShuffleProcessorConfig = z.infer<typeof zContentShuffleProcessorConfig>;
+
 const zDepthAnythingModelSize = z.enum(['large', 'base', 'small']);
 export type DepthAnythingModelSize = z.infer<typeof zDepthAnythingModelSize>;
 export const isDepthAnythingModelSize = (v: unknown): v is DepthAnythingModelSize =>
   zDepthAnythingModelSize.safeParse(v).success;
-
-export type CannyProcessorConfig = Required<
-  Pick<CannyImageProcessorInvocation, 'id' | 'type' | 'low_threshold' | 'high_threshold'>
->;
-export type ColorMapProcessorConfig = Required<
-  Pick<ColorMapImageProcessorInvocation, 'id' | 'type' | 'color_map_tile_size'>
->;
-export type ContentShuffleProcessorConfig = Required<
-  Pick<ContentShuffleImageProcessorInvocation, 'id' | 'type' | 'w' | 'h' | 'f'>
->;
-export type DepthAnythingProcessorConfig = Required<
+const zDepthAnythingProcessorConfig = z.object({
+  id: zId,
+  type: z.literal('depth_anything_image_processor'),
+  model_size: zDepthAnythingModelSize,
+});
+export type _DepthAnythingProcessorConfig = Required<
   Pick<DepthAnythingImageProcessorInvocation, 'id' | 'type' | 'model_size'>
 >;
-export type HedProcessorConfig = Required<Pick<HedImageProcessorInvocation, 'id' | 'type' | 'scribble'>>;
-type LineartAnimeProcessorConfig = Required<Pick<LineartAnimeImageProcessorInvocation, 'id' | 'type'>>;
-export type LineartProcessorConfig = Required<Pick<LineartImageProcessorInvocation, 'id' | 'type' | 'coarse'>>;
-export type MediapipeFaceProcessorConfig = Required<
+export type DepthAnythingProcessorConfig = z.infer<typeof zDepthAnythingProcessorConfig>;
+
+const zHedProcessorConfig = z.object({
+  id: zId,
+  type: z.literal('hed_image_processor'),
+  scribble: z.boolean(),
+});
+export type _HedProcessorConfig = Required<Pick<HedImageProcessorInvocation, 'id' | 'type' | 'scribble'>>;
+export type HedProcessorConfig = z.infer<typeof zHedProcessorConfig>;
+
+const zLineartAnimeProcessorConfig = z.object({
+  id: zId,
+  type: z.literal('lineart_anime_image_processor'),
+});
+export type _LineartAnimeProcessorConfig = Required<Pick<LineartAnimeImageProcessorInvocation, 'id' | 'type'>>;
+export type LineartAnimeProcessorConfig = z.infer<typeof zLineartAnimeProcessorConfig>;
+
+const zLineartProcessorConfig = z.object({
+  id: zId,
+  type: z.literal('lineart_image_processor'),
+  coarse: z.boolean(),
+});
+export type _LineartProcessorConfig = Required<Pick<LineartImageProcessorInvocation, 'id' | 'type' | 'coarse'>>;
+export type LineartProcessorConfig = z.infer<typeof zLineartProcessorConfig>;
+
+const zMediapipeFaceProcessorConfig = z.object({
+  id: zId,
+  type: z.literal('mediapipe_face_processor'),
+  max_faces: z.number().int().gte(1),
+  min_confidence: z.number().gte(0).lte(1),
+});
+export type _MediapipeFaceProcessorConfig = Required<
   Pick<MediapipeFaceProcessorInvocation, 'id' | 'type' | 'max_faces' | 'min_confidence'>
 >;
-export type MidasDepthProcessorConfig = Required<
+export type MediapipeFaceProcessorConfig = z.infer<typeof zMediapipeFaceProcessorConfig>;
+
+const zMidasDepthProcessorConfig = z.object({
+  id: zId,
+  type: z.literal('midas_depth_image_processor'),
+  a_mult: z.number().gte(0),
+  bg_th: z.number().gte(0),
+});
+export type _MidasDepthProcessorConfig = Required<
   Pick<MidasDepthImageProcessorInvocation, 'id' | 'type' | 'a_mult' | 'bg_th'>
 >;
-export type MlsdProcessorConfig = Required<Pick<MlsdImageProcessorInvocation, 'id' | 'type' | 'thr_v' | 'thr_d'>>;
-type NormalbaeProcessorConfig = Required<Pick<NormalbaeImageProcessorInvocation, 'id' | 'type'>>;
-export type DWOpenposeProcessorConfig = Required<
+export type MidasDepthProcessorConfig = z.infer<typeof zMidasDepthProcessorConfig>;
+
+const zMlsdProcessorConfig = z.object({
+  id: zId,
+  type: z.literal('mlsd_image_processor'),
+  thr_v: z.number().gte(0),
+  thr_d: z.number().gte(0),
+});
+export type _MlsdProcessorConfig = Required<Pick<MlsdImageProcessorInvocation, 'id' | 'type' | 'thr_v' | 'thr_d'>>;
+export type MlsdProcessorConfig = z.infer<typeof zMlsdProcessorConfig>;
+
+const zNormalbaeProcessorConfig = z.object({
+  id: zId,
+  type: z.literal('normalbae_image_processor'),
+});
+export type _NormalbaeProcessorConfig = Required<Pick<NormalbaeImageProcessorInvocation, 'id' | 'type'>>;
+export type NormalbaeProcessorConfig = z.infer<typeof zNormalbaeProcessorConfig>;
+
+const zDWOpenposeProcessorConfig = z.object({
+  id: zId,
+  type: z.literal('dw_openpose_image_processor'),
+  draw_body: z.boolean(),
+  draw_face: z.boolean(),
+  draw_hands: z.boolean(),
+});
+export type _DWOpenposeProcessorConfig = Required<
   Pick<DWOpenposeImageProcessorInvocation, 'id' | 'type' | 'draw_body' | 'draw_face' | 'draw_hands'>
 >;
-export type PidiProcessorConfig = Required<Pick<PidiImageProcessorInvocation, 'id' | 'type' | 'safe' | 'scribble'>>;
-type ZoeDepthProcessorConfig = Required<Pick<ZoeDepthImageProcessorInvocation, 'id' | 'type'>>;
+export type DWOpenposeProcessorConfig = z.infer<typeof zDWOpenposeProcessorConfig>;
 
-export type ProcessorConfig =
-  | CannyProcessorConfig
-  | ColorMapProcessorConfig
-  | ContentShuffleProcessorConfig
-  | DepthAnythingProcessorConfig
-  | HedProcessorConfig
-  | LineartAnimeProcessorConfig
-  | LineartProcessorConfig
-  | MediapipeFaceProcessorConfig
-  | MidasDepthProcessorConfig
-  | MlsdProcessorConfig
-  | NormalbaeProcessorConfig
-  | DWOpenposeProcessorConfig
-  | PidiProcessorConfig
-  | ZoeDepthProcessorConfig;
+const zPidiProcessorConfig = z.object({
+  id: zId,
+  type: z.literal('pidi_image_processor'),
+  safe: z.boolean(),
+  scribble: z.boolean(),
+});
+export type _PidiProcessorConfig = Required<Pick<PidiImageProcessorInvocation, 'id' | 'type' | 'safe' | 'scribble'>>;
+export type PidiProcessorConfig = z.infer<typeof zPidiProcessorConfig>;
 
-export type ImageWithDims = {
-  name: string;
-  width: number;
-  height: number;
-};
+const zZoeDepthProcessorConfig = z.object({
+  id: zId,
+  type: z.literal('zoe_depth_image_processor'),
+});
+export type _ZoeDepthProcessorConfig = Required<Pick<ZoeDepthImageProcessorInvocation, 'id' | 'type'>>;
+export type ZoeDepthProcessorConfig = z.infer<typeof zZoeDepthProcessorConfig>;
 
-type ControlAdapterBase = {
-  id: string;
-  weight: number;
-  image: ImageWithDims | null;
-  processedImage: ImageWithDims | null;
-  isProcessingImage: boolean;
-  processorConfig: ProcessorConfig | null;
-  beginEndStepPct: [number, number];
-};
+export const zProcessorConfig = z.discriminatedUnion('type', [
+  zCannyProcessorConfig,
+  zColorMapProcessorConfig,
+  zContentShuffleProcessorConfig,
+  zDepthAnythingProcessorConfig,
+  zHedProcessorConfig,
+  zLineartAnimeProcessorConfig,
+  zLineartProcessorConfig,
+  zMediapipeFaceProcessorConfig,
+  zMidasDepthProcessorConfig,
+  zMlsdProcessorConfig,
+  zNormalbaeProcessorConfig,
+  zDWOpenposeProcessorConfig,
+  zPidiProcessorConfig,
+  zZoeDepthProcessorConfig,
+]);
+export type ProcessorConfig = z.infer<typeof zProcessorConfig>;
+
+export const zImageWithDims = z.object({
+  name: z.string(),
+  width: z.number().int().positive(),
+  height: z.number().int().positive(),
+});
+export type ImageWithDims = z.infer<typeof zImageWithDims>;
+
+const zBeginEndStepPct = z
+  .tuple([z.number().gte(0).lte(1), z.number().gte(0).lte(1)])
+  .refine(([begin, end]) => begin < end, {
+    message: 'Begin must be less than end',
+  });
+
+const zControlAdapterBase = z.object({
+  id: zId,
+  weight: z.number().gte(0).lte(0),
+  image: zImageWithDims.nullable(),
+  processedImage: zImageWithDims.nullable(),
+  isProcessingImage: z.boolean(),
+  processorConfig: zProcessorConfig.nullable(),
+  beginEndStepPct: zBeginEndStepPct,
+});
 
 const zControlModeV2 = z.enum(['balanced', 'more_prompt', 'more_control', 'unbalanced']);
 export type ControlModeV2 = z.infer<typeof zControlModeV2>;
 export const isControlModeV2 = (v: unknown): v is ControlModeV2 => zControlModeV2.safeParse(v).success;
 
-export type ControlNetConfigV2 = ControlAdapterBase & {
-  type: 'controlnet';
-  model: ParameterControlNetModel | null;
-  controlMode: ControlModeV2;
-};
-export const isControlNetConfigV2 = (ca: ControlNetConfigV2 | T2IAdapterConfigV2): ca is ControlNetConfigV2 =>
-  ca.type === 'controlnet';
+export const zControlNetConfigV2 = zControlAdapterBase.extend({
+  type: z.literal('controlnet'),
+  model: zModelIdentifierField.nullable(),
+  controlMode: zControlModeV2,
+});
+export type ControlNetConfigV2 = z.infer<typeof zControlNetConfigV2>;
+
+export const isControlNetConfigV2 = (ca: ControlNetConfigV2 | T2IAdapterConfigV2): ca is ControlNetConfigV2 =>
+  zControlNetConfigV2.safeParse(ca).success;
+
+export const zT2IAdapterConfigV2 = zControlAdapterBase.extend({
+  type: z.literal('t2i_adapter'),
+  model: zModelIdentifierField.nullable(),
+});
+export type T2IAdapterConfigV2 = z.infer<typeof zT2IAdapterConfigV2>;
 
-export type T2IAdapterConfigV2 = ControlAdapterBase & {
-  type: 't2i_adapter';
-  model: ParameterT2IAdapterModel | null;
-};
 export const isT2IAdapterConfigV2 = (ca: ControlNetConfigV2 | T2IAdapterConfigV2): ca is T2IAdapterConfigV2 =>
-  ca.type === 't2i_adapter';
+  zT2IAdapterConfigV2.safeParse(ca).success;
 
 const zCLIPVisionModelV2 = z.enum(['ViT-H', 'ViT-G']);
 export type CLIPVisionModelV2 = z.infer<typeof zCLIPVisionModelV2>;
@@ -121,16 +234,17 @@ const zIPMethodV2 = z.enum(['full', 'style', 'composition']);
 export type IPMethodV2 = z.infer<typeof zIPMethodV2>;
 export const isIPMethodV2 = (v: unknown): v is IPMethodV2 => zIPMethodV2.safeParse(v).success;
 
-export type IPAdapterConfigV2 = {
-  id: string;
-  type: 'ip_adapter';
-  weight: number;
-  method: IPMethodV2;
-  image: ImageWithDims | null;
-  model: ParameterIPAdapterModel | null;
-  clipVisionModel: CLIPVisionModelV2;
-  beginEndStepPct: [number, number];
-};
+export const zIPAdapterConfigV2 = z.object({
+  id: zId,
+  type: z.literal('ip_adapter'),
+  weight: z.number().gte(0).lte(0),
+  method: zIPMethodV2,
+  image: zImageWithDims.nullable(),
+  model: zModelIdentifierField.nullable(),
+  clipVisionModel: zCLIPVisionModelV2,
+  beginEndStepPct: zBeginEndStepPct,
+});
+export type IPAdapterConfigV2 = z.infer<typeof zIPAdapterConfigV2>;
 
 const zProcessorTypeV2 = z.enum([
   'canny_image_processor',
diff --git a/invokeai/frontend/web/src/features/parameters/types/parameterSchemas.ts b/invokeai/frontend/web/src/features/parameters/types/parameterSchemas.ts
index a18cc7f86d..8a808ed0c5 100644
--- a/invokeai/frontend/web/src/features/parameters/types/parameterSchemas.ts
+++ b/invokeai/frontend/web/src/features/parameters/types/parameterSchemas.ts
@@ -16,14 +16,14 @@ import { z } from 'zod';
  */
 
 // #region Positive prompt
-const zParameterPositivePrompt = z.string();
+export const zParameterPositivePrompt = z.string();
 export type ParameterPositivePrompt = z.infer<typeof zParameterPositivePrompt>;
 export const isParameterPositivePrompt = (val: unknown): val is ParameterPositivePrompt =>
   zParameterPositivePrompt.safeParse(val).success;
 // #endregion
 
 // #region Negative prompt
-const zParameterNegativePrompt = z.string();
+export const zParameterNegativePrompt = z.string();
 export type ParameterNegativePrompt = z.infer<typeof zParameterNegativePrompt>;
 export const isParameterNegativePrompt = (val: unknown): val is ParameterNegativePrompt =>
   zParameterNegativePrompt.safeParse(val).success;
@@ -127,7 +127,7 @@ export type ParameterT2IAdapterModel = z.infer<typeof zParameterT2IAdapterModel>
 // #endregion
 
 // #region Strength (l2l strength)
-const zParameterStrength = z.number().min(0).max(1);
+export const zParameterStrength = z.number().min(0).max(1);
 export type ParameterStrength = z.infer<typeof zParameterStrength>;
 export const isParameterStrength = (val: unknown): val is ParameterStrength =>
   zParameterStrength.safeParse(val).success;
@@ -198,6 +198,6 @@ export const isParameterLoRAWeight = (val: unknown): val is ParameterLoRAWeight
 // #endregion
 
 // #region Regional Prompts AutoNegative
-const zAutoNegative = z.enum(['off', 'invert']);
+export const zAutoNegative = z.enum(['off', 'invert']);
 export type ParameterAutoNegative = z.infer<typeof zAutoNegative>;
 // #endregion

From e840de27ed069641bf191426648e3010ecfc09a4 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 16:45:07 +1000
Subject: [PATCH 041/116] feat(ui): extend zod with a `is` typeguard` method

Feels dangerous, but it's very handy.
---
 invokeai/frontend/web/src/extend-zod.ts       | 8 ++++++++
 invokeai/frontend/web/src/main.tsx            | 2 ++
 invokeai/frontend/web/src/zod-extensions.d.ts | 8 ++++++++
 3 files changed, 18 insertions(+)
 create mode 100644 invokeai/frontend/web/src/extend-zod.ts
 create mode 100644 invokeai/frontend/web/src/zod-extensions.d.ts

diff --git a/invokeai/frontend/web/src/extend-zod.ts b/invokeai/frontend/web/src/extend-zod.ts
new file mode 100644
index 0000000000..b1c155062d
--- /dev/null
+++ b/invokeai/frontend/web/src/extend-zod.ts
@@ -0,0 +1,8 @@
+import { assert } from 'tsafe';
+import { z } from 'zod';
+
+assert(!Object.hasOwn(z.ZodType.prototype, 'is'));
+
+z.ZodType.prototype.is = function (val: unknown): val is z.infer<typeof this> {
+  return this.safeParse(val).success;
+};
diff --git a/invokeai/frontend/web/src/main.tsx b/invokeai/frontend/web/src/main.tsx
index acf9491778..129d1bc9e5 100644
--- a/invokeai/frontend/web/src/main.tsx
+++ b/invokeai/frontend/web/src/main.tsx
@@ -1,3 +1,5 @@
+import 'extend-zod';
+
 import ReactDOM from 'react-dom/client';
 
 import InvokeAIUI from './app/components/InvokeAIUI';
diff --git a/invokeai/frontend/web/src/zod-extensions.d.ts b/invokeai/frontend/web/src/zod-extensions.d.ts
new file mode 100644
index 0000000000..0abab07a19
--- /dev/null
+++ b/invokeai/frontend/web/src/zod-extensions.d.ts
@@ -0,0 +1,8 @@
+import 'zod';
+
+declare module 'zod' {
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  export interface ZodType<Output = any> {
+    is(val: unknown): val is Output;
+  }
+}

From e47629cbe7aa5668a5cf86d2cc55bfc1d9e297c9 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 16:49:10 +1000
Subject: [PATCH 042/116] feat(ui): add zod schema for layers array

---
 invokeai/frontend/web/src/features/controlLayers/store/types.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/invokeai/frontend/web/src/features/controlLayers/store/types.ts b/invokeai/frontend/web/src/features/controlLayers/store/types.ts
index 11266c8049..1a3f94debc 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/types.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/types.ts
@@ -116,6 +116,7 @@ export const zLayer = z.discriminatedUnion('type', [
   zInitialImageLayer,
 ]);
 export type Layer = z.infer<typeof zLayer>;
+export const zLayers = z.array(zLayer);
 
 export type ControlLayersState = {
   _version: 2;

From 6e8b7f9421d2ebbf8a0a029ee56ec1b5928ce529 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 17:04:53 +1000
Subject: [PATCH 043/116] feat(ui): write layers to metadata

---
 .../util/graph/addControlLayersToGraph.ts     | 64 ++++++++-----------
 1 file changed, 28 insertions(+), 36 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
index e1836a3dc6..9aa82fdb92 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
@@ -6,7 +6,7 @@ import {
   isRegionalGuidanceLayer,
   rgLayerMaskImageUploaded,
 } from 'features/controlLayers/store/controlLayersSlice';
-import type { RegionalGuidanceLayer } from 'features/controlLayers/store/types';
+import type { Layer, RegionalGuidanceLayer } from 'features/controlLayers/store/types';
 import {
   type ControlNetConfigV2,
   type ImageWithDims,
@@ -344,57 +344,45 @@ export const addControlLayersToGraph = async (state: RootState, graph: NonNullab
   assert(mainModel, 'Missing main model when building graph');
   const isSDXL = mainModel.base === 'sdxl';
 
+  const layersMetadata: Layer[] = [];
+
   // Add global control adapters
-  const globalControlNets = state.controlLayers.present.layers
-    // Must be a CA layer
+  const validControlAdapterLayers = state.controlLayers.present.layers
+    // Must be a Control Adapter layer
     .filter(isControlAdapterLayer)
     // Must be enabled
     .filter((l) => l.isEnabled)
-    // We want the CAs themselves
-    .map((l) => l.controlAdapter)
-    // Must be a ControlNet
-    .filter(isControlNetConfigV2)
-    .filter((ca) => {
+    .filter((l) => {
+      const ca = l.controlAdapter;
+      // Must be have a model that matches the current base and must have a control image
       const hasModel = Boolean(ca.model);
       const modelMatchesBase = ca.model?.base === mainModel.base;
       const hasControlImage = ca.image || (ca.processedImage && ca.processorConfig);
       return hasModel && modelMatchesBase && hasControlImage;
     });
-  addGlobalControlNetsToGraph(globalControlNets, graph, denoiseNodeId);
+  const validControlNets = validControlAdapterLayers.map((l) => l.controlAdapter).filter(isControlNetConfigV2);
+  addGlobalControlNetsToGraph(validControlNets, graph, denoiseNodeId);
 
-  const globalT2IAdapters = state.controlLayers.present.layers
-    // Must be a CA layer
-    .filter(isControlAdapterLayer)
-    // Must be enabled
-    .filter((l) => l.isEnabled)
-    // We want the CAs themselves
-    .map((l) => l.controlAdapter)
-    // Must have a ControlNet CA
-    .filter(isT2IAdapterConfigV2)
-    .filter((ca) => {
-      const hasModel = Boolean(ca.model);
-      const modelMatchesBase = ca.model?.base === mainModel.base;
-      const hasControlImage = ca.image || (ca.processedImage && ca.processorConfig);
-      return hasModel && modelMatchesBase && hasControlImage;
-    });
-  addGlobalT2IAdaptersToGraph(globalT2IAdapters, graph, denoiseNodeId);
+  const validT2IAdapters = validControlAdapterLayers.map((l) => l.controlAdapter).filter(isT2IAdapterConfigV2);
+  addGlobalT2IAdaptersToGraph(validT2IAdapters, graph, denoiseNodeId);
 
-  const globalIPAdapters = state.controlLayers.present.layers
+  const validIPAdapterLayers = state.controlLayers.present.layers
     // Must be an IP Adapter layer
     .filter(isIPAdapterLayer)
     // Must be enabled
     .filter((l) => l.isEnabled)
     // We want the IP Adapters themselves
-    .map((l) => l.ipAdapter)
-    .filter((ca) => {
-      const hasModel = Boolean(ca.model);
-      const modelMatchesBase = ca.model?.base === mainModel.base;
-      const hasControlImage = Boolean(ca.image);
-      return hasModel && modelMatchesBase && hasControlImage;
+    .filter((l) => {
+      const ipa = l.ipAdapter;
+      const hasModel = Boolean(ipa.model);
+      const modelMatchesBase = ipa.model?.base === mainModel.base;
+      const hasImage = Boolean(ipa.image);
+      return hasModel && modelMatchesBase && hasImage;
     });
-  addGlobalIPAdaptersToGraph(globalIPAdapters, graph, denoiseNodeId);
+  const validIPAdapters = validIPAdapterLayers.map((l) => l.ipAdapter);
+  addGlobalIPAdaptersToGraph(validIPAdapters, graph, denoiseNodeId);
 
-  const rgLayers = state.controlLayers.present.layers
+  const validRGLayers = state.controlLayers.present.layers
     // Only RG layers are get masks
     .filter(isRegionalGuidanceLayer)
     // Only visible layers are rendered on the canvas
@@ -406,6 +394,8 @@ export const addControlLayersToGraph = async (state: RootState, graph: NonNullab
       return hasTextPrompt || hasIPAdapter;
     });
 
+  layersMetadata.push(...validRGLayers, ...validControlAdapterLayers, ...validIPAdapterLayers);
+
   // TODO: We should probably just use conditioning collectors by default, and skip all this fanagling with re-routing
   // the existing conditioning nodes.
 
@@ -468,11 +458,11 @@ export const addControlLayersToGraph = async (state: RootState, graph: NonNullab
     },
   });
 
-  const layerIds = rgLayers.map((l) => l.id);
+  const layerIds = validRGLayers.map((l) => l.id);
   const blobs = await getRegionalPromptLayerBlobs(layerIds);
   assert(size(blobs) === size(layerIds), 'Mismatch between layer IDs and blobs');
 
-  for (const layer of rgLayers) {
+  for (const layer of validRGLayers) {
     const blob = blobs[layer.id];
     assert(blob, `Blob for layer ${layer.id} not found`);
     // Upload the mask image, or get the cached image if it exists
@@ -669,6 +659,8 @@ export const addControlLayersToGraph = async (state: RootState, graph: NonNullab
       });
     }
   }
+
+  upsertMetadata(graph, { layers: layersMetadata });
 };
 
 const getMaskImage = async (layer: RegionalGuidanceLayer, blob: Blob): Promise<ImageDTO> => {

From bfad814862c770c6a129a6bf28d9eee57f2cb4ef Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 17:37:45 +1000
Subject: [PATCH 044/116] fix(ui): fix IPAdapterConfigV2 schema weight

---
 .../web/src/features/controlLayers/util/controlAdapters.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts b/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
index 9e885c56e2..0fbcaa6c2b 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
@@ -237,7 +237,7 @@ export const isIPMethodV2 = (v: unknown): v is IPMethodV2 => zIPMethodV2.safePar
 export const zIPAdapterConfigV2 = z.object({
   id: zId,
   type: z.literal('ip_adapter'),
-  weight: z.number().gte(0).lte(0),
+  weight: z.number().gte(0).lte(1),
   method: zIPMethodV2,
   image: zImageWithDims.nullable(),
   model: zModelIdentifierField.nullable(),

From ccd399e277e6caf4a24d26af2a6f2c9294c0e8ce Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 17:44:50 +1000
Subject: [PATCH 045/116] feat(ui): add `getIsVisible` to metadata handlers

---
 .../metadata/components/MetadataItem.tsx        |  5 +++++
 .../frontend/web/src/features/metadata/types.ts | 17 +++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/invokeai/frontend/web/src/features/metadata/components/MetadataItem.tsx b/invokeai/frontend/web/src/features/metadata/components/MetadataItem.tsx
index 66d101f458..7489b05158 100644
--- a/invokeai/frontend/web/src/features/metadata/components/MetadataItem.tsx
+++ b/invokeai/frontend/web/src/features/metadata/components/MetadataItem.tsx
@@ -3,6 +3,7 @@ import { MetadataItemView } from 'features/metadata/components/MetadataItemView'
 import { useMetadataItem } from 'features/metadata/hooks/useMetadataItem';
 import type { MetadataHandlers } from 'features/metadata/types';
 import { MetadataParseFailedToken } from 'features/metadata/util/parsers';
+import { isSymbol } from 'lodash-es';
 
 type MetadataItemProps<T> = {
   metadata: unknown;
@@ -17,6 +18,10 @@ const _MetadataItem = typedMemo(<T,>({ metadata, handlers, direction = 'row' }:
     return null;
   }
 
+  if (handlers.getIsVisible && !isSymbol(value) && !handlers.getIsVisible(value)) {
+    return null;
+  }
+
   return (
     <MetadataItemView
       label={label}
diff --git a/invokeai/frontend/web/src/features/metadata/types.ts b/invokeai/frontend/web/src/features/metadata/types.ts
index 30a34ec0c6..b65f2ae5e8 100644
--- a/invokeai/frontend/web/src/features/metadata/types.ts
+++ b/invokeai/frontend/web/src/features/metadata/types.ts
@@ -50,6 +50,14 @@ export type MetadataParseFunc<T = unknown> = (metadata: unknown) => Promise<T>;
  */
 export type MetadataValidateFunc<T> = (value: T) => Promise<T>;
 
+/**
+ * A function that determines whether a metadata item should be visible.
+ *
+ * @param value The value to check.
+ * @returns True if the item should be visible, false otherwise.
+ */
+export type MetadataGetIsVisibleFunc<T> = (value: T) => boolean;
+
 export type MetadataHandlers<TValue = unknown, TItem = unknown> = {
   /**
    * Gets the label of the current metadata item as a string.
@@ -111,6 +119,14 @@ export type MetadataHandlers<TValue = unknown, TItem = unknown> = {
    * @returns The rendered item.
    */
   renderItemValue?: MetadataRenderValueFunc<TItem>;
+  /**
+   * Checks if a parsed metadata value should be visible.
+   * If not provided, the item is always visible.
+   *
+   * @param value The value to check.
+   * @returns True if the item should be visible, false otherwise.
+   */
+  getIsVisible?: MetadataGetIsVisibleFunc<TValue>;
 };
 
 // TODO(psyche): The types for item handlers should be able to be inferred from the type of the value:
@@ -127,6 +143,7 @@ type BuildMetadataHandlersArg<TValue, TItem> = {
   getLabel: MetadataGetLabelFunc;
   renderValue?: MetadataRenderValueFunc<TValue>;
   renderItemValue?: MetadataRenderValueFunc<TItem>;
+  getIsVisible?: MetadataGetIsVisibleFunc<TValue>;
 };
 
 export type BuildMetadataHandlers = <TValue, TItem>(

From e537de2f6d39f9c33dc289167a8e882ac8628d26 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 17:47:09 +1000
Subject: [PATCH 046/116] feat(ui): layers recall

This still needs some finessing - needs logic depending on the tab...
---
 invokeai/frontend/web/public/locales/en.json  |  4 ++-
 .../controlLayers/store/controlLayersSlice.ts | 14 +++++++++
 .../ImageMetadataActions.tsx                  |  1 +
 .../src/features/metadata/util/handlers.ts    | 31 +++++++++++++++++--
 .../web/src/features/metadata/util/parsers.ts | 16 ++++++++++
 .../src/features/metadata/util/recallers.ts   | 24 ++++++++++++++
 .../src/features/metadata/util/validators.ts  | 25 +++++++++++++++
 7 files changed, 112 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 83e80e8a81..0c7c6cd6e1 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -1559,7 +1559,9 @@
         "opacityFilter": "Opacity Filter",
         "clearProcessor": "Clear Processor",
         "resetProcessor": "Reset Processor to Defaults",
-        "noLayersAdded": "No Layers Added"
+        "noLayersAdded": "No Layers Added",
+        "layers_one": "Layer",
+        "layers_other": "Layers"
     },
     "ui": {
         "tabs": {
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
index bbe0464aa7..6f6176c242 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
@@ -255,6 +255,10 @@ export const controlLayersSlice = createSlice({
         payload: { layerId: uuidv4(), controlAdapter },
       }),
     },
+    caLayerRecalled: (state, action: PayloadAction<ControlAdapterLayer>) => {
+      state.layers.push({ ...action.payload, isSelected: true });
+      state.selectedLayerId = action.payload.id;
+    },
     caLayerImageChanged: (state, action: PayloadAction<{ layerId: string; imageDTO: ImageDTO | null }>) => {
       const { layerId, imageDTO } = action.payload;
       const layer = selectCALayerOrThrow(state, layerId);
@@ -368,6 +372,9 @@ export const controlLayersSlice = createSlice({
       },
       prepare: (ipAdapter: IPAdapterConfigV2) => ({ payload: { layerId: uuidv4(), ipAdapter } }),
     },
+    ipaLayerRecalled: (state, action: PayloadAction<IPAdapterLayer>) => {
+      state.layers.push(action.payload);
+    },
     ipaLayerImageChanged: (state, action: PayloadAction<{ layerId: string; imageDTO: ImageDTO | null }>) => {
       const { layerId, imageDTO } = action.payload;
       const layer = selectIPALayerOrThrow(state, layerId);
@@ -462,6 +469,10 @@ export const controlLayersSlice = createSlice({
       },
       prepare: () => ({ payload: { layerId: uuidv4() } }),
     },
+    rgLayerRecalled: (state, action: PayloadAction<RegionalGuidanceLayer>) => {
+      state.layers.push({ ...action.payload, isSelected: true });
+      state.selectedLayerId = action.payload.id;
+    },
     rgLayerPositivePromptChanged: (state, action: PayloadAction<{ layerId: string; prompt: string | null }>) => {
       const { layerId, prompt } = action.payload;
       const layer = selectRGLayerOrThrow(state, layerId);
@@ -805,6 +816,7 @@ export const {
   allLayersDeleted,
   // CA Layers
   caLayerAdded,
+  caLayerRecalled,
   caLayerImageChanged,
   caLayerProcessedImageChanged,
   caLayerModelChanged,
@@ -817,6 +829,7 @@ export const {
   caLayerT2IAdaptersDeleted,
   // IPA Layers
   ipaLayerAdded,
+  ipaLayerRecalled,
   ipaLayerImageChanged,
   ipaLayerMethodChanged,
   ipaLayerModelChanged,
@@ -827,6 +840,7 @@ export const {
   caOrIPALayerBeginEndStepPctChanged,
   // RG Layers
   rgLayerAdded,
+  rgLayerRecalled,
   rgLayerPositivePromptChanged,
   rgLayerNegativePromptChanged,
   rgLayerPreviewColorChanged,
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
index c73f5b1817..7dd2be55b0 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
@@ -51,6 +51,7 @@ const ImageMetadataActions = (props: Props) => {
       <MetadataItem metadata={metadata} handlers={handlers.refinerScheduler} />
       <MetadataItem metadata={metadata} handlers={handlers.refinerStart} />
       <MetadataItem metadata={metadata} handlers={handlers.refinerSteps} />
+      <MetadataItem metadata={metadata} handlers={handlers.layers} />
       <MetadataLoRAs metadata={metadata} />
       {activeTabName !== 'generation' && <MetadataControlNets metadata={metadata} />}
       {activeTabName !== 'generation' && <MetadataT2IAdapters metadata={metadata} />}
diff --git a/invokeai/frontend/web/src/features/metadata/util/handlers.ts b/invokeai/frontend/web/src/features/metadata/util/handlers.ts
index 467f702cea..4cbe69668f 100644
--- a/invokeai/frontend/web/src/features/metadata/util/handlers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/handlers.ts
@@ -1,5 +1,6 @@
 import { objectKeys } from 'common/util/objectKeys';
 import { toast } from 'common/util/toast';
+import type { Layer } from 'features/controlLayers/store/types';
 import type { LoRA } from 'features/lora/store/loraSlice';
 import type {
   AnyControlAdapterConfigMetadata,
@@ -52,6 +53,9 @@ const renderControlAdapterValueV2: MetadataRenderValueFunc<AnyControlAdapterConf
     return `${value.model.key} (${value.model.base.toUpperCase()}) - ${value.weight}`;
   }
 };
+const renderLayersValue: MetadataRenderValueFunc<Layer[]> = async (value) => {
+  return `${value.length} ${t('controlLayers.layers', { count: value.length })}`;
+};
 
 const parameterSetToast = (parameter: string, description?: string) => {
   toast({
@@ -171,6 +175,7 @@ const buildHandlers: BuildMetadataHandlers = ({
   itemValidator,
   renderValue,
   renderItemValue,
+  getIsVisible,
 }) => ({
   parse: buildParse({ parser, getLabel }),
   parseItem: itemParser ? buildParseItem({ itemParser, getLabel }) : undefined,
@@ -179,6 +184,7 @@ const buildHandlers: BuildMetadataHandlers = ({
   getLabel,
   renderValue: renderValue ?? resolveToString,
   renderItemValue: renderItemValue ?? resolveToString,
+  getIsVisible,
 });
 
 export const handlers = {
@@ -380,6 +386,14 @@ export const handlers = {
     itemValidator: validators.t2iAdapterV2,
     renderItemValue: renderControlAdapterValueV2,
   }),
+  layers: buildHandlers({
+    getLabel: () => t('controlLayers.layers_other'),
+    parser: parsers.layers,
+    recaller: recallers.layers,
+    validator: validators.layers,
+    renderValue: renderLayersValue,
+    getIsVisible: (value) => value.length > 0,
+  }),
 } as const;
 
 export const parseAndRecallPrompts = async (metadata: unknown) => {
@@ -435,9 +449,22 @@ export const parseAndRecallImageDimensions = async (metadata: unknown) => {
 };
 
 // These handlers should be omitted when recalling to control layers
-const TO_CONTROL_LAYERS_SKIP_KEYS: (keyof typeof handlers)[] = ['controlNets', 'ipAdapters', 't2iAdapters'];
+const TO_CONTROL_LAYERS_SKIP_KEYS: (keyof typeof handlers)[] = [
+  'controlNets',
+  'ipAdapters',
+  't2iAdapters',
+  'controlNetsV2',
+  'ipAdaptersV2',
+  't2iAdaptersV2',
+];
 // These handlers should be omitted when recalling to the rest of the app
-const NOT_TO_CONTROL_LAYERS_SKIP_KEYS: (keyof typeof handlers)[] = ['controlNetsV2', 'ipAdaptersV2', 't2iAdaptersV2'];
+const NOT_TO_CONTROL_LAYERS_SKIP_KEYS: (keyof typeof handlers)[] = [
+  'controlNetsV2',
+  'ipAdaptersV2',
+  't2iAdaptersV2',
+  'initialImage',
+  'layers',
+];
 
 export const parseAndRecallAllMetadata = async (
   metadata: unknown,
diff --git a/invokeai/frontend/web/src/features/metadata/util/parsers.ts b/invokeai/frontend/web/src/features/metadata/util/parsers.ts
index 8641977b1f..25ab72536a 100644
--- a/invokeai/frontend/web/src/features/metadata/util/parsers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/parsers.ts
@@ -5,6 +5,8 @@ import {
   initialT2IAdapter,
 } from 'features/controlAdapters/util/buildControlAdapter';
 import { buildControlAdapterProcessor } from 'features/controlAdapters/util/buildControlAdapterProcessor';
+import type { Layer } from 'features/controlLayers/store/types';
+import { zLayer } from 'features/controlLayers/store/types';
 import {
   CA_PROCESSOR_DATA,
   imageDTOToImageWithDims,
@@ -623,6 +625,19 @@ const parseIPAdapterV2: MetadataParseFunc<IPAdapterConfigV2Metadata> = async (me
   return ipAdapter;
 };
 
+const parseLayers: MetadataParseFunc<Layer[]> = async (metadata) => {
+  try {
+    const layersRaw = await getProperty(metadata, 'layers', isArray);
+    const parseResults = await Promise.allSettled(layersRaw.map((layerRaw) => zLayer.parseAsync(layerRaw)));
+    const layers = parseResults
+      .filter((result): result is PromiseFulfilledResult<Layer> => result.status === 'fulfilled')
+      .map((result) => result.value);
+    return layers;
+  } catch {
+    return [];
+  }
+};
+
 const parseAllIPAdaptersV2: MetadataParseFunc<IPAdapterConfigV2Metadata[]> = async (metadata) => {
   try {
     const ipAdaptersRaw = await getProperty(metadata, 'ipAdapters', isArray);
@@ -678,4 +693,5 @@ export const parsers = {
   t2iAdaptersV2: parseAllT2IAdaptersV2,
   ipAdapterV2: parseIPAdapterV2,
   ipAdaptersV2: parseAllIPAdaptersV2,
+  layers: parseLayers,
 } as const;
diff --git a/invokeai/frontend/web/src/features/metadata/util/recallers.ts b/invokeai/frontend/web/src/features/metadata/util/recallers.ts
index b29d937159..3782c789e0 100644
--- a/invokeai/frontend/web/src/features/metadata/util/recallers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/recallers.ts
@@ -6,19 +6,24 @@ import {
   t2iAdaptersReset,
 } from 'features/controlAdapters/store/controlAdaptersSlice';
 import {
+  allLayersDeleted,
   caLayerAdded,
   caLayerControlNetsDeleted,
+  caLayerRecalled,
   caLayerT2IAdaptersDeleted,
   heightChanged,
   iiLayerAdded,
   ipaLayerAdded,
+  ipaLayerRecalled,
   ipaLayersDeleted,
   negativePrompt2Changed,
   negativePromptChanged,
   positivePrompt2Changed,
   positivePromptChanged,
+  rgLayerRecalled,
   widthChanged,
 } from 'features/controlLayers/store/controlLayersSlice';
+import type { Layer } from 'features/controlLayers/store/types';
 import { setHrfEnabled, setHrfMethod, setHrfStrength } from 'features/hrf/store/hrfSlice';
 import type { LoRA } from 'features/lora/store/loraSlice';
 import { loraRecalled, lorasReset } from 'features/lora/store/loraSlice';
@@ -290,6 +295,24 @@ const recallIPAdaptersV2: MetadataRecallFunc<IPAdapterConfigV2Metadata[]> = (ipA
   });
 };
 
+const recallLayers: MetadataRecallFunc<Layer[]> = (layers) => {
+  const { dispatch } = getStore();
+  dispatch(allLayersDeleted());
+  for (const l of layers) {
+    switch (l.type) {
+      case 'control_adapter_layer':
+        dispatch(caLayerRecalled(l));
+        break;
+      case 'ip_adapter_layer':
+        dispatch(ipaLayerRecalled(l));
+        break;
+      case 'regional_guidance_layer':
+        dispatch(rgLayerRecalled(l));
+        break;
+    }
+  }
+};
+
 export const recallers = {
   positivePrompt: recallPositivePrompt,
   negativePrompt: recallNegativePrompt,
@@ -330,4 +353,5 @@ export const recallers = {
   t2iAdaptersV2: recallT2IAdaptersV2,
   ipAdapterV2: recallIPAdapterV2,
   ipAdaptersV2: recallIPAdaptersV2,
+  layers: recallLayers,
 } as const;
diff --git a/invokeai/frontend/web/src/features/metadata/util/validators.ts b/invokeai/frontend/web/src/features/metadata/util/validators.ts
index d09321003f..aca988f85a 100644
--- a/invokeai/frontend/web/src/features/metadata/util/validators.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/validators.ts
@@ -1,4 +1,5 @@
 import { getStore } from 'app/store/nanostores/store';
+import type { Layer } from 'features/controlLayers/store/types';
 import type { LoRA } from 'features/lora/store/loraSlice';
 import type {
   ControlNetConfigMetadata,
@@ -165,6 +166,29 @@ const validateIPAdaptersV2: MetadataValidateFunc<IPAdapterConfigV2Metadata[]> =
   return new Promise((resolve) => resolve(validatedIPAdapters));
 };
 
+const validateLayers: MetadataValidateFunc<Layer[]> = (layers) => {
+  const validatedLayers: Layer[] = [];
+  for (const l of layers) {
+    try {
+      if (l.type === 'control_adapter_layer') {
+        validateBaseCompatibility(l.controlAdapter.model?.base, 'Layer incompatible with currently-selected model');
+      }
+      if (l.type === 'ip_adapter_layer') {
+        validateBaseCompatibility(l.ipAdapter.model?.base, 'Layer incompatible with currently-selected model');
+      }
+      if (l.type === 'regional_guidance_layer') {
+        for (const ipa of l.ipAdapters) {
+          validateBaseCompatibility(ipa.model?.base, 'Layer incompatible with currently-selected model');
+        }
+      }
+      validatedLayers.push(l);
+    } catch {
+      // This is a no-op - we want to continue validating the rest of the layers, and an empty list is valid.
+    }
+  }
+  return new Promise((resolve) => resolve(validatedLayers));
+};
+
 export const validators = {
   refinerModel: validateRefinerModel,
   vaeModel: validateVAEModel,
@@ -182,4 +206,5 @@ export const validators = {
   t2iAdaptersV2: validateT2IAdaptersV2,
   ipAdapterV2: validateIPAdapterV2,
   ipAdaptersV2: validateIPAdaptersV2,
+  layers: validateLayers,
 } as const;

From b43b2714cc0a48989538ab732da52d391d5d629a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 7 May 2024 18:11:20 +1000
Subject: [PATCH 047/116] feat(ui): add `fracturedjsonjs` to pretty-serialize
 objects

In use on the metadata viewer - makes it sooo much easier on the eyes.
---
 invokeai/frontend/web/package.json                         | 1 +
 invokeai/frontend/web/pnpm-lock.yaml                       | 7 +++++++
 .../gallery/components/ImageMetadataViewer/DataViewer.tsx  | 5 ++++-
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json
index 78e8ca44ca..8f6f2c6038 100644
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@@ -65,6 +65,7 @@
     "chakra-react-select": "^4.7.6",
     "compare-versions": "^6.1.0",
     "dateformat": "^5.0.3",
+    "fracturedjsonjs": "^4.0.1",
     "framer-motion": "^11.1.8",
     "i18next": "^23.11.3",
     "i18next-http-backend": "^2.5.1",
diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml
index 2703477200..b5de9e6426 100644
--- a/invokeai/frontend/web/pnpm-lock.yaml
+++ b/invokeai/frontend/web/pnpm-lock.yaml
@@ -50,6 +50,9 @@ dependencies:
   dateformat:
     specifier: ^5.0.3
     version: 5.0.3
+  fracturedjsonjs:
+    specifier: ^4.0.1
+    version: 4.0.1
   framer-motion:
     specifier: ^11.1.8
     version: 11.1.8(react-dom@18.3.1)(react@18.3.1)
@@ -8691,6 +8694,10 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /fracturedjsonjs@4.0.1:
+    resolution: {integrity: sha512-KMhSx7o45aPVj4w27dwdQyKJkNU8oBqw8UiK/s3VzsQB3+pKQ/3AqG/YOEQblV2BDuYE5dKp0OMf8RDsshrjTA==}
+    dev: false
+
   /framer-motion@10.18.0(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==}
     peerDependencies:
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
index a6d0481b89..2cbf93b899 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
@@ -1,5 +1,6 @@
 import { Box, Flex, IconButton, Tooltip, useShiftModifier } from '@invoke-ai/ui-library';
 import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
+import { Formatter } from 'fracturedjsonjs';
 import { isString } from 'lodash-es';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties } from 'react';
@@ -7,6 +8,8 @@ import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiCopyBold, PiDownloadSimpleBold } from 'react-icons/pi';
 
+const formatter = new Formatter();
+
 type Props = {
   label: string;
   data: unknown;
@@ -20,7 +23,7 @@ const overlayscrollbarsOptions = getOverlayScrollbarsParams('scroll', 'scroll').
 
 const DataViewer = (props: Props) => {
   const { label, data, fileName, withDownload = true, withCopy = true, extraCopyActions } = props;
-  const dataString = useMemo(() => (isString(data) ? data : JSON.stringify(data, null, 2)), [data]);
+  const dataString = useMemo(() => (isString(data) ? data : formatter.Serialize(data)) ?? '', [data]);
   const shift = useShiftModifier();
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(dataString);

From dfbd7eb1cfc8bd02eef63d6f3a0924513480f8bb Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 8 May 2024 09:58:34 +1000
Subject: [PATCH 048/116] feat(ui): individual layer recall

---
 .../controlLayers/store/controlLayersSlice.ts | 15 ++++
 .../ImageMetadataActions.tsx                  |  3 +-
 .../metadata/components/MetadataLayers.tsx    | 68 +++++++++++++++++++
 .../src/features/metadata/util/handlers.ts    | 24 ++++++-
 .../metadata/util/modelFetchingHelpers.ts     | 19 ++++++
 .../web/src/features/metadata/util/parsers.ts | 29 ++++----
 .../src/features/metadata/util/recallers.ts   | 32 ++++++---
 .../src/features/metadata/util/validators.ts  | 41 +++++++----
 8 files changed, 192 insertions(+), 39 deletions(-)
 create mode 100644 invokeai/frontend/web/src/features/metadata/components/MetadataLayers.tsx

diff --git a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
index 6f6176c242..bc9f133075 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
@@ -124,6 +124,12 @@ const getVectorMaskPreviewColor = (state: ControlLayersState): RgbColor => {
   const lastColor = rgLayers[rgLayers.length - 1]?.previewColor;
   return LayerColors.next(lastColor);
 };
+const deselectAllLayers = (state: ControlLayersState) => {
+  for (const layer of state.layers.filter(isRenderableLayer)) {
+    layer.isSelected = false;
+  }
+  state.selectedLayerId = null;
+};
 
 export const controlLayersSlice = createSlice({
   name: 'controlLayers',
@@ -256,6 +262,7 @@ export const controlLayersSlice = createSlice({
       }),
     },
     caLayerRecalled: (state, action: PayloadAction<ControlAdapterLayer>) => {
+      deselectAllLayers(state);
       state.layers.push({ ...action.payload, isSelected: true });
       state.selectedLayerId = action.payload.id;
     },
@@ -470,6 +477,7 @@ export const controlLayersSlice = createSlice({
       prepare: () => ({ payload: { layerId: uuidv4() } }),
     },
     rgLayerRecalled: (state, action: PayloadAction<RegionalGuidanceLayer>) => {
+      deselectAllLayers(state);
       state.layers.push({ ...action.payload, isSelected: true });
       state.selectedLayerId = action.payload.id;
     },
@@ -665,6 +673,12 @@ export const controlLayersSlice = createSlice({
       },
       prepare: (imageDTO: ImageDTO | null) => ({ payload: { layerId: 'initial_image_layer', imageDTO } }),
     },
+    iiLayerRecalled: (state, action: PayloadAction<InitialImageLayer>) => {
+      deselectAllLayers(state);
+      state.layers = state.layers.filter((l) => (isInitialImageLayer(l) ? false : true));
+      state.layers.push({ ...action.payload, isSelected: true });
+      state.selectedLayerId = action.payload.id;
+    },
     iiLayerImageChanged: (state, action: PayloadAction<{ layerId: string; imageDTO: ImageDTO | null }>) => {
       const { layerId, imageDTO } = action.payload;
       const layer = selectIILayerOrThrow(state, layerId);
@@ -859,6 +873,7 @@ export const {
   rgLayerIPAdapterCLIPVisionModelChanged,
   // II Layer
   iiLayerAdded,
+  iiLayerRecalled,
   iiLayerImageChanged,
   iiLayerOpacityChanged,
   iiLayerDenoisingStrengthChanged,
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
index 7dd2be55b0..04e8fd2eca 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
@@ -4,6 +4,7 @@ import { MetadataControlNetsV2 } from 'features/metadata/components/MetadataCont
 import { MetadataIPAdapters } from 'features/metadata/components/MetadataIPAdapters';
 import { MetadataIPAdaptersV2 } from 'features/metadata/components/MetadataIPAdaptersV2';
 import { MetadataItem } from 'features/metadata/components/MetadataItem';
+import { MetadataLayers } from 'features/metadata/components/MetadataLayers';
 import { MetadataLoRAs } from 'features/metadata/components/MetadataLoRAs';
 import { MetadataT2IAdapters } from 'features/metadata/components/MetadataT2IAdapters';
 import { MetadataT2IAdaptersV2 } from 'features/metadata/components/MetadataT2IAdaptersV2';
@@ -51,8 +52,8 @@ const ImageMetadataActions = (props: Props) => {
       <MetadataItem metadata={metadata} handlers={handlers.refinerScheduler} />
       <MetadataItem metadata={metadata} handlers={handlers.refinerStart} />
       <MetadataItem metadata={metadata} handlers={handlers.refinerSteps} />
-      <MetadataItem metadata={metadata} handlers={handlers.layers} />
       <MetadataLoRAs metadata={metadata} />
+      <MetadataLayers metadata={metadata} />
       {activeTabName !== 'generation' && <MetadataControlNets metadata={metadata} />}
       {activeTabName !== 'generation' && <MetadataT2IAdapters metadata={metadata} />}
       {activeTabName !== 'generation' && <MetadataIPAdapters metadata={metadata} />}
diff --git a/invokeai/frontend/web/src/features/metadata/components/MetadataLayers.tsx b/invokeai/frontend/web/src/features/metadata/components/MetadataLayers.tsx
new file mode 100644
index 0000000000..ab4ce03987
--- /dev/null
+++ b/invokeai/frontend/web/src/features/metadata/components/MetadataLayers.tsx
@@ -0,0 +1,68 @@
+import type { Layer } from 'features/controlLayers/store/types';
+import { MetadataItemView } from 'features/metadata/components/MetadataItemView';
+import type { MetadataHandlers } from 'features/metadata/types';
+import { handlers } from 'features/metadata/util/handlers';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+type Props = {
+  metadata: unknown;
+};
+
+export const MetadataLayers = ({ metadata }: Props) => {
+  const [layers, setLayers] = useState<Layer[]>([]);
+
+  useEffect(() => {
+    const parse = async () => {
+      try {
+        const parsed = await handlers.layers.parse(metadata);
+        setLayers(parsed);
+      } catch (e) {
+        setLayers([]);
+      }
+    };
+    parse();
+  }, [metadata]);
+
+  const label = useMemo(() => handlers.layers.getLabel(), []);
+
+  return (
+    <>
+      {layers.map((layer) => (
+        <MetadataViewLayer key={layer.id} label={label} layer={layer} handlers={handlers.layers} />
+      ))}
+    </>
+  );
+};
+
+const MetadataViewLayer = ({
+  label,
+  layer,
+  handlers,
+}: {
+  label: string;
+  layer: Layer;
+  handlers: MetadataHandlers<Layer[], Layer>;
+}) => {
+  const onRecall = useCallback(() => {
+    if (!handlers.recallItem) {
+      return;
+    }
+    handlers.recallItem(layer, true);
+  }, [handlers, layer]);
+
+  const [renderedValue, setRenderedValue] = useState<React.ReactNode>(null);
+  useEffect(() => {
+    const _renderValue = async () => {
+      if (!handlers.renderItemValue) {
+        setRenderedValue(null);
+        return;
+      }
+      const rendered = await handlers.renderItemValue(layer);
+      setRenderedValue(rendered);
+    };
+
+    _renderValue();
+  }, [handlers, layer]);
+
+  return <MetadataItemView label={label} isDisabled={false} onRecall={onRecall} renderedValue={renderedValue} />;
+};
diff --git a/invokeai/frontend/web/src/features/metadata/util/handlers.ts b/invokeai/frontend/web/src/features/metadata/util/handlers.ts
index 4cbe69668f..a2ba3dfc22 100644
--- a/invokeai/frontend/web/src/features/metadata/util/handlers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/handlers.ts
@@ -17,6 +17,7 @@ import { fetchModelConfig } from 'features/metadata/util/modelFetchingHelpers';
 import { validators } from 'features/metadata/util/validators';
 import type { ModelIdentifierField } from 'features/nodes/types/common';
 import { t } from 'i18next';
+import { assert } from 'tsafe';
 
 import { parsers } from './parsers';
 import { recallers } from './recallers';
@@ -53,8 +54,23 @@ const renderControlAdapterValueV2: MetadataRenderValueFunc<AnyControlAdapterConf
     return `${value.model.key} (${value.model.base.toUpperCase()}) - ${value.weight}`;
   }
 };
-const renderLayersValue: MetadataRenderValueFunc<Layer[]> = async (value) => {
-  return `${value.length} ${t('controlLayers.layers', { count: value.length })}`;
+const renderLayerValue: MetadataRenderValueFunc<Layer> = async (layer) => {
+  if (layer.type === 'initial_image_layer') {
+    return t('controlLayers.initialImageLayer');
+  }
+  if (layer.type === 'control_adapter_layer') {
+    return t('controlLayers.controlAdapterLayer');
+  }
+  if (layer.type === 'ip_adapter_layer') {
+    return t('controlLayers.ipAdapterLayer');
+  }
+  if (layer.type === 'regional_guidance_layer') {
+    return t('controlLayers.regionalGuidanceLayer');
+  }
+  assert(false, 'Unknown layer type');
+};
+const renderLayersValue: MetadataRenderValueFunc<Layer[]> = async (layers) => {
+  return `${layers.length} ${t('controlLayers.layers', { count: layers.length })}`;
 };
 
 const parameterSetToast = (parameter: string, description?: string) => {
@@ -389,8 +405,12 @@ export const handlers = {
   layers: buildHandlers({
     getLabel: () => t('controlLayers.layers_other'),
     parser: parsers.layers,
+    itemParser: parsers.layer,
     recaller: recallers.layers,
+    itemRecaller: recallers.layer,
     validator: validators.layers,
+    itemValidator: validators.layer,
+    renderItemValue: renderLayerValue,
     renderValue: renderLayersValue,
     getIsVisible: (value) => value.length > 0,
   }),
diff --git a/invokeai/frontend/web/src/features/metadata/util/modelFetchingHelpers.ts b/invokeai/frontend/web/src/features/metadata/util/modelFetchingHelpers.ts
index a237582ed8..a2db414937 100644
--- a/invokeai/frontend/web/src/features/metadata/util/modelFetchingHelpers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/modelFetchingHelpers.ts
@@ -1,4 +1,5 @@
 import { getStore } from 'app/store/nanostores/store';
+import type { ModelIdentifierField } from 'features/nodes/types/common';
 import { isModelIdentifier, isModelIdentifierV2 } from 'features/nodes/types/common';
 import { modelsApi } from 'services/api/endpoints/models';
 import type { AnyModelConfig, BaseModelType, ModelType } from 'services/api/types';
@@ -68,6 +69,24 @@ const fetchModelConfigByAttrs = async (name: string, base: BaseModelType, type:
   }
 };
 
+/**
+ * Fetches the model config given an identifier. First attempts to fetch by key, then falls back to fetching by attrs.
+ * @param identifier The model identifier.
+ * @returns A promise that resolves to the model config.
+ * @throws {ModelConfigNotFoundError} If the model config is unable to be fetched.
+ */
+export const fetchModelConfigByIdentifier = async (identifier: ModelIdentifierField): Promise<AnyModelConfig> => {
+  try {
+    return await fetchModelConfig(identifier.key);
+  } catch {
+    try {
+      return await fetchModelConfigByAttrs(identifier.name, identifier.base, identifier.type);
+    } catch {
+      throw new ModelConfigNotFoundError(`Unable to retrieve model config for identifier ${identifier}`);
+    }
+  }
+};
+
 /**
  * Fetches the model config for a given model key and type, and ensures that the model config is of a specific type.
  * @param key The model key.
diff --git a/invokeai/frontend/web/src/features/metadata/util/parsers.ts b/invokeai/frontend/web/src/features/metadata/util/parsers.ts
index 25ab72536a..f59bbc90c6 100644
--- a/invokeai/frontend/web/src/features/metadata/util/parsers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/parsers.ts
@@ -625,19 +625,6 @@ const parseIPAdapterV2: MetadataParseFunc<IPAdapterConfigV2Metadata> = async (me
   return ipAdapter;
 };
 
-const parseLayers: MetadataParseFunc<Layer[]> = async (metadata) => {
-  try {
-    const layersRaw = await getProperty(metadata, 'layers', isArray);
-    const parseResults = await Promise.allSettled(layersRaw.map((layerRaw) => zLayer.parseAsync(layerRaw)));
-    const layers = parseResults
-      .filter((result): result is PromiseFulfilledResult<Layer> => result.status === 'fulfilled')
-      .map((result) => result.value);
-    return layers;
-  } catch {
-    return [];
-  }
-};
-
 const parseAllIPAdaptersV2: MetadataParseFunc<IPAdapterConfigV2Metadata[]> = async (metadata) => {
   try {
     const ipAdaptersRaw = await getProperty(metadata, 'ipAdapters', isArray);
@@ -651,6 +638,21 @@ const parseAllIPAdaptersV2: MetadataParseFunc<IPAdapterConfigV2Metadata[]> = asy
   }
 };
 
+const parseLayer: MetadataParseFunc<Layer> = async (metadataItem) => zLayer.parseAsync(metadataItem);
+
+const parseLayers: MetadataParseFunc<Layer[]> = async (metadata) => {
+  try {
+    const layersRaw = await getProperty(metadata, 'layers', isArray);
+    const parseResults = await Promise.allSettled(layersRaw.map(parseLayer));
+    const layers = parseResults
+      .filter((result): result is PromiseFulfilledResult<Layer> => result.status === 'fulfilled')
+      .map((result) => result.value);
+    return layers;
+  } catch {
+    return [];
+  }
+};
+
 export const parsers = {
   createdBy: parseCreatedBy,
   generationMode: parseGenerationMode,
@@ -693,5 +695,6 @@ export const parsers = {
   t2iAdaptersV2: parseAllT2IAdaptersV2,
   ipAdapterV2: parseIPAdapterV2,
   ipAdaptersV2: parseAllIPAdaptersV2,
+  layer: parseLayer,
   layers: parseLayers,
 } as const;
diff --git a/invokeai/frontend/web/src/features/metadata/util/recallers.ts b/invokeai/frontend/web/src/features/metadata/util/recallers.ts
index 3782c789e0..390e840776 100644
--- a/invokeai/frontend/web/src/features/metadata/util/recallers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/recallers.ts
@@ -13,6 +13,7 @@ import {
   caLayerT2IAdaptersDeleted,
   heightChanged,
   iiLayerAdded,
+  iiLayerRecalled,
   ipaLayerAdded,
   ipaLayerRecalled,
   ipaLayersDeleted,
@@ -295,21 +296,29 @@ const recallIPAdaptersV2: MetadataRecallFunc<IPAdapterConfigV2Metadata[]> = (ipA
   });
 };
 
+const recallLayer: MetadataRecallFunc<Layer> = (layer) => {
+  const { dispatch } = getStore();
+  switch (layer.type) {
+    case 'control_adapter_layer':
+      dispatch(caLayerRecalled(layer));
+      break;
+    case 'ip_adapter_layer':
+      dispatch(ipaLayerRecalled(layer));
+      break;
+    case 'regional_guidance_layer':
+      dispatch(rgLayerRecalled(layer));
+      break;
+    case 'initial_image_layer':
+      dispatch(iiLayerRecalled(layer));
+      break;
+  }
+};
+
 const recallLayers: MetadataRecallFunc<Layer[]> = (layers) => {
   const { dispatch } = getStore();
   dispatch(allLayersDeleted());
   for (const l of layers) {
-    switch (l.type) {
-      case 'control_adapter_layer':
-        dispatch(caLayerRecalled(l));
-        break;
-      case 'ip_adapter_layer':
-        dispatch(ipaLayerRecalled(l));
-        break;
-      case 'regional_guidance_layer':
-        dispatch(rgLayerRecalled(l));
-        break;
-    }
+    recallLayer(l);
   }
 };
 
@@ -353,5 +362,6 @@ export const recallers = {
   t2iAdaptersV2: recallT2IAdaptersV2,
   ipAdapterV2: recallIPAdapterV2,
   ipAdaptersV2: recallIPAdaptersV2,
+  layer: recallLayer,
   layers: recallLayers,
 } as const;
diff --git a/invokeai/frontend/web/src/features/metadata/util/validators.ts b/invokeai/frontend/web/src/features/metadata/util/validators.ts
index aca988f85a..7381d7aee0 100644
--- a/invokeai/frontend/web/src/features/metadata/util/validators.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/validators.ts
@@ -10,9 +10,10 @@ import type {
   T2IAdapterConfigMetadata,
   T2IAdapterConfigV2Metadata,
 } from 'features/metadata/types';
-import { InvalidModelConfigError } from 'features/metadata/util/modelFetchingHelpers';
+import { fetchModelConfigByIdentifier, InvalidModelConfigError } from 'features/metadata/util/modelFetchingHelpers';
 import type { ParameterSDXLRefinerModel, ParameterVAEModel } from 'features/parameters/types/parameterSchemas';
 import type { BaseModelType } from 'services/api/types';
+import { assert } from 'tsafe';
 
 /**
  * Checks the given base model type against the currently-selected model's base type and throws an error if they are
@@ -166,21 +167,36 @@ const validateIPAdaptersV2: MetadataValidateFunc<IPAdapterConfigV2Metadata[]> =
   return new Promise((resolve) => resolve(validatedIPAdapters));
 };
 
+const validateLayer: MetadataValidateFunc<Layer> = async (layer) => {
+  if (layer.type === 'control_adapter_layer') {
+    const model = layer.controlAdapter.model;
+    assert(model, 'Control Adapter layer missing model');
+    validateBaseCompatibility(model.base, 'Layer incompatible with currently-selected model');
+    fetchModelConfigByIdentifier(model);
+  }
+  if (layer.type === 'ip_adapter_layer') {
+    const model = layer.ipAdapter.model;
+    assert(model, 'IP Adapter layer missing model');
+    validateBaseCompatibility(model.base, 'Layer incompatible with currently-selected model');
+    fetchModelConfigByIdentifier(model);
+  }
+  if (layer.type === 'regional_guidance_layer') {
+    for (const ipa of layer.ipAdapters) {
+      const model = ipa.model;
+      assert(model, 'IP Adapter layer missing model');
+      validateBaseCompatibility(model.base, 'Layer incompatible with currently-selected model');
+      fetchModelConfigByIdentifier(model);
+    }
+  }
+
+  return layer;
+};
+
 const validateLayers: MetadataValidateFunc<Layer[]> = (layers) => {
   const validatedLayers: Layer[] = [];
   for (const l of layers) {
     try {
-      if (l.type === 'control_adapter_layer') {
-        validateBaseCompatibility(l.controlAdapter.model?.base, 'Layer incompatible with currently-selected model');
-      }
-      if (l.type === 'ip_adapter_layer') {
-        validateBaseCompatibility(l.ipAdapter.model?.base, 'Layer incompatible with currently-selected model');
-      }
-      if (l.type === 'regional_guidance_layer') {
-        for (const ipa of l.ipAdapters) {
-          validateBaseCompatibility(ipa.model?.base, 'Layer incompatible with currently-selected model');
-        }
-      }
+      validateLayer(l);
       validatedLayers.push(l);
     } catch {
       // This is a no-op - we want to continue validating the rest of the layers, and an empty list is valid.
@@ -206,5 +222,6 @@ export const validators = {
   t2iAdaptersV2: validateT2IAdaptersV2,
   ipAdapterV2: validateIPAdapterV2,
   ipAdaptersV2: validateIPAdaptersV2,
+  layer: validateLayer,
   layers: validateLayers,
 } as const;

From 8b25c1a62e8ce4600188ad434aef9414565f6f60 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 8 May 2024 10:12:57 +1000
Subject: [PATCH 049/116] tidy(ui): remove extraneous metadata handlers

---
 .../controlLayers/store/controlLayersSlice.ts |  12 -
 .../ImageMetadataActions.tsx                  |   7 -
 .../components/MetadataControlNetsV2.tsx      |  72 ------
 .../components/MetadataIPAdaptersV2.tsx       |  72 ------
 .../components/MetadataT2IAdaptersV2.tsx      |  72 ------
 .../web/src/features/metadata/types.ts        |  13 --
 .../src/features/metadata/util/handlers.ts    |  82 +------
 .../web/src/features/metadata/util/parsers.ts | 218 +-----------------
 .../src/features/metadata/util/recallers.ts   |  68 +-----
 .../src/features/metadata/util/validators.ts  |  63 -----
 10 files changed, 6 insertions(+), 673 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/features/metadata/components/MetadataControlNetsV2.tsx
 delete mode 100644 invokeai/frontend/web/src/features/metadata/components/MetadataIPAdaptersV2.tsx
 delete mode 100644 invokeai/frontend/web/src/features/metadata/components/MetadataT2IAdaptersV2.tsx

diff --git a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
index bc9f133075..27b7e4c3fd 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
@@ -357,12 +357,6 @@ export const controlLayersSlice = createSlice({
       const layer = selectCALayerOrThrow(state, layerId);
       layer.controlAdapter.isProcessingImage = isProcessingImage;
     },
-    caLayerControlNetsDeleted: (state) => {
-      state.layers = state.layers.filter((l) => !isControlAdapterLayer(l) || l.controlAdapter.type !== 'controlnet');
-    },
-    caLayerT2IAdaptersDeleted: (state) => {
-      state.layers = state.layers.filter((l) => !isControlAdapterLayer(l) || l.controlAdapter.type !== 't2i_adapter');
-    },
     //#endregion
 
     //#region IP Adapter Layers
@@ -415,9 +409,6 @@ export const controlLayersSlice = createSlice({
       const layer = selectIPALayerOrThrow(state, layerId);
       layer.ipAdapter.clipVisionModel = clipVisionModel;
     },
-    ipaLayersDeleted: (state) => {
-      state.layers = state.layers.filter((l) => !isIPAdapterLayer(l));
-    },
     //#endregion
 
     //#region CA or IPA Layers
@@ -839,8 +830,6 @@ export const {
   caLayerIsFilterEnabledChanged,
   caLayerOpacityChanged,
   caLayerIsProcessingImageChanged,
-  caLayerControlNetsDeleted,
-  caLayerT2IAdaptersDeleted,
   // IPA Layers
   ipaLayerAdded,
   ipaLayerRecalled,
@@ -848,7 +837,6 @@ export const {
   ipaLayerMethodChanged,
   ipaLayerModelChanged,
   ipaLayerCLIPVisionModelChanged,
-  ipaLayersDeleted,
   // CA or IPA Layers
   caOrIPALayerWeightChanged,
   caOrIPALayerBeginEndStepPctChanged,
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
index 04e8fd2eca..f8425182dd 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
@@ -1,13 +1,10 @@
 import { useAppSelector } from 'app/store/storeHooks';
 import { MetadataControlNets } from 'features/metadata/components/MetadataControlNets';
-import { MetadataControlNetsV2 } from 'features/metadata/components/MetadataControlNetsV2';
 import { MetadataIPAdapters } from 'features/metadata/components/MetadataIPAdapters';
-import { MetadataIPAdaptersV2 } from 'features/metadata/components/MetadataIPAdaptersV2';
 import { MetadataItem } from 'features/metadata/components/MetadataItem';
 import { MetadataLayers } from 'features/metadata/components/MetadataLayers';
 import { MetadataLoRAs } from 'features/metadata/components/MetadataLoRAs';
 import { MetadataT2IAdapters } from 'features/metadata/components/MetadataT2IAdapters';
-import { MetadataT2IAdaptersV2 } from 'features/metadata/components/MetadataT2IAdaptersV2';
 import { handlers } from 'features/metadata/util/handlers';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { memo } from 'react';
@@ -40,7 +37,6 @@ const ImageMetadataActions = (props: Props) => {
       <MetadataItem metadata={metadata} handlers={handlers.scheduler} />
       <MetadataItem metadata={metadata} handlers={handlers.cfgScale} />
       <MetadataItem metadata={metadata} handlers={handlers.cfgRescaleMultiplier} />
-      <MetadataItem metadata={metadata} handlers={handlers.initialImage} />
       <MetadataItem metadata={metadata} handlers={handlers.strength} />
       <MetadataItem metadata={metadata} handlers={handlers.hrfEnabled} />
       <MetadataItem metadata={metadata} handlers={handlers.hrfMethod} />
@@ -57,9 +53,6 @@ const ImageMetadataActions = (props: Props) => {
       {activeTabName !== 'generation' && <MetadataControlNets metadata={metadata} />}
       {activeTabName !== 'generation' && <MetadataT2IAdapters metadata={metadata} />}
       {activeTabName !== 'generation' && <MetadataIPAdapters metadata={metadata} />}
-      {activeTabName === 'generation' && <MetadataControlNetsV2 metadata={metadata} />}
-      {activeTabName === 'generation' && <MetadataT2IAdaptersV2 metadata={metadata} />}
-      {activeTabName === 'generation' && <MetadataIPAdaptersV2 metadata={metadata} />}
     </>
   );
 };
diff --git a/invokeai/frontend/web/src/features/metadata/components/MetadataControlNetsV2.tsx b/invokeai/frontend/web/src/features/metadata/components/MetadataControlNetsV2.tsx
deleted file mode 100644
index 5f4df78afc..0000000000
--- a/invokeai/frontend/web/src/features/metadata/components/MetadataControlNetsV2.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { MetadataItemView } from 'features/metadata/components/MetadataItemView';
-import type { ControlNetConfigV2Metadata, MetadataHandlers } from 'features/metadata/types';
-import { handlers } from 'features/metadata/util/handlers';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-type Props = {
-  metadata: unknown;
-};
-
-export const MetadataControlNetsV2 = ({ metadata }: Props) => {
-  const [controlNets, setControlNets] = useState<ControlNetConfigV2Metadata[]>([]);
-
-  useEffect(() => {
-    const parse = async () => {
-      try {
-        const parsed = await handlers.controlNetsV2.parse(metadata);
-        setControlNets(parsed);
-      } catch (e) {
-        setControlNets([]);
-      }
-    };
-    parse();
-  }, [metadata]);
-
-  const label = useMemo(() => handlers.controlNetsV2.getLabel(), []);
-
-  return (
-    <>
-      {controlNets.map((controlNet) => (
-        <MetadataViewControlNet
-          key={controlNet.id}
-          label={label}
-          controlNet={controlNet}
-          handlers={handlers.controlNetsV2}
-        />
-      ))}
-    </>
-  );
-};
-
-const MetadataViewControlNet = ({
-  label,
-  controlNet,
-  handlers,
-}: {
-  label: string;
-  controlNet: ControlNetConfigV2Metadata;
-  handlers: MetadataHandlers<ControlNetConfigV2Metadata[], ControlNetConfigV2Metadata>;
-}) => {
-  const onRecall = useCallback(() => {
-    if (!handlers.recallItem) {
-      return;
-    }
-    handlers.recallItem(controlNet, true);
-  }, [handlers, controlNet]);
-
-  const [renderedValue, setRenderedValue] = useState<React.ReactNode>(null);
-  useEffect(() => {
-    const _renderValue = async () => {
-      if (!handlers.renderItemValue) {
-        setRenderedValue(null);
-        return;
-      }
-      const rendered = await handlers.renderItemValue(controlNet);
-      setRenderedValue(rendered);
-    };
-
-    _renderValue();
-  }, [handlers, controlNet]);
-
-  return <MetadataItemView label={label} isDisabled={false} onRecall={onRecall} renderedValue={renderedValue} />;
-};
diff --git a/invokeai/frontend/web/src/features/metadata/components/MetadataIPAdaptersV2.tsx b/invokeai/frontend/web/src/features/metadata/components/MetadataIPAdaptersV2.tsx
deleted file mode 100644
index 201ebc4cb4..0000000000
--- a/invokeai/frontend/web/src/features/metadata/components/MetadataIPAdaptersV2.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { MetadataItemView } from 'features/metadata/components/MetadataItemView';
-import type { IPAdapterConfigV2Metadata, MetadataHandlers } from 'features/metadata/types';
-import { handlers } from 'features/metadata/util/handlers';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-type Props = {
-  metadata: unknown;
-};
-
-export const MetadataIPAdaptersV2 = ({ metadata }: Props) => {
-  const [ipAdapters, setIPAdapters] = useState<IPAdapterConfigV2Metadata[]>([]);
-
-  useEffect(() => {
-    const parse = async () => {
-      try {
-        const parsed = await handlers.ipAdaptersV2.parse(metadata);
-        setIPAdapters(parsed);
-      } catch (e) {
-        setIPAdapters([]);
-      }
-    };
-    parse();
-  }, [metadata]);
-
-  const label = useMemo(() => handlers.ipAdaptersV2.getLabel(), []);
-
-  return (
-    <>
-      {ipAdapters.map((ipAdapter) => (
-        <MetadataViewIPAdapter
-          key={ipAdapter.id}
-          label={label}
-          ipAdapter={ipAdapter}
-          handlers={handlers.ipAdaptersV2}
-        />
-      ))}
-    </>
-  );
-};
-
-const MetadataViewIPAdapter = ({
-  label,
-  ipAdapter,
-  handlers,
-}: {
-  label: string;
-  ipAdapter: IPAdapterConfigV2Metadata;
-  handlers: MetadataHandlers<IPAdapterConfigV2Metadata[], IPAdapterConfigV2Metadata>;
-}) => {
-  const onRecall = useCallback(() => {
-    if (!handlers.recallItem) {
-      return;
-    }
-    handlers.recallItem(ipAdapter, true);
-  }, [handlers, ipAdapter]);
-
-  const [renderedValue, setRenderedValue] = useState<React.ReactNode>(null);
-  useEffect(() => {
-    const _renderValue = async () => {
-      if (!handlers.renderItemValue) {
-        setRenderedValue(null);
-        return;
-      }
-      const rendered = await handlers.renderItemValue(ipAdapter);
-      setRenderedValue(rendered);
-    };
-
-    _renderValue();
-  }, [handlers, ipAdapter]);
-
-  return <MetadataItemView label={label} isDisabled={false} onRecall={onRecall} renderedValue={renderedValue} />;
-};
diff --git a/invokeai/frontend/web/src/features/metadata/components/MetadataT2IAdaptersV2.tsx b/invokeai/frontend/web/src/features/metadata/components/MetadataT2IAdaptersV2.tsx
deleted file mode 100644
index 42d3de2ec2..0000000000
--- a/invokeai/frontend/web/src/features/metadata/components/MetadataT2IAdaptersV2.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { MetadataItemView } from 'features/metadata/components/MetadataItemView';
-import type { MetadataHandlers, T2IAdapterConfigV2Metadata } from 'features/metadata/types';
-import { handlers } from 'features/metadata/util/handlers';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-type Props = {
-  metadata: unknown;
-};
-
-export const MetadataT2IAdaptersV2 = ({ metadata }: Props) => {
-  const [t2iAdapters, setT2IAdapters] = useState<T2IAdapterConfigV2Metadata[]>([]);
-
-  useEffect(() => {
-    const parse = async () => {
-      try {
-        const parsed = await handlers.t2iAdaptersV2.parse(metadata);
-        setT2IAdapters(parsed);
-      } catch (e) {
-        setT2IAdapters([]);
-      }
-    };
-    parse();
-  }, [metadata]);
-
-  const label = useMemo(() => handlers.t2iAdaptersV2.getLabel(), []);
-
-  return (
-    <>
-      {t2iAdapters.map((t2iAdapter) => (
-        <MetadataViewT2IAdapter
-          key={t2iAdapter.id}
-          label={label}
-          t2iAdapter={t2iAdapter}
-          handlers={handlers.t2iAdaptersV2}
-        />
-      ))}
-    </>
-  );
-};
-
-const MetadataViewT2IAdapter = ({
-  label,
-  t2iAdapter,
-  handlers,
-}: {
-  label: string;
-  t2iAdapter: T2IAdapterConfigV2Metadata;
-  handlers: MetadataHandlers<T2IAdapterConfigV2Metadata[], T2IAdapterConfigV2Metadata>;
-}) => {
-  const onRecall = useCallback(() => {
-    if (!handlers.recallItem) {
-      return;
-    }
-    handlers.recallItem(t2iAdapter, true);
-  }, [handlers, t2iAdapter]);
-
-  const [renderedValue, setRenderedValue] = useState<React.ReactNode>(null);
-  useEffect(() => {
-    const _renderValue = async () => {
-      if (!handlers.renderItemValue) {
-        setRenderedValue(null);
-        return;
-      }
-      const rendered = await handlers.renderItemValue(t2iAdapter);
-      setRenderedValue(rendered);
-    };
-
-    _renderValue();
-  }, [handlers, t2iAdapter]);
-
-  return <MetadataItemView label={label} isDisabled={false} onRecall={onRecall} renderedValue={renderedValue} />;
-};
diff --git a/invokeai/frontend/web/src/features/metadata/types.ts b/invokeai/frontend/web/src/features/metadata/types.ts
index b65f2ae5e8..1d87efaf2e 100644
--- a/invokeai/frontend/web/src/features/metadata/types.ts
+++ b/invokeai/frontend/web/src/features/metadata/types.ts
@@ -1,9 +1,4 @@
 import type { ControlNetConfig, IPAdapterConfig, T2IAdapterConfig } from 'features/controlAdapters/store/types';
-import type {
-  ControlNetConfigV2,
-  IPAdapterConfigV2,
-  T2IAdapterConfigV2,
-} from 'features/controlLayers/util/controlAdapters';
 import type { O } from 'ts-toolbelt';
 
 /**
@@ -157,11 +152,3 @@ export type AnyControlAdapterConfigMetadata =
   | ControlNetConfigMetadata
   | T2IAdapterConfigMetadata
   | IPAdapterConfigMetadata;
-
-export type ControlNetConfigV2Metadata = O.NonNullable<ControlNetConfigV2, 'model'>;
-export type T2IAdapterConfigV2Metadata = O.NonNullable<T2IAdapterConfigV2, 'model'>;
-export type IPAdapterConfigV2Metadata = O.NonNullable<IPAdapterConfigV2, 'model'>;
-export type AnyControlAdapterConfigV2Metadata =
-  | ControlNetConfigV2Metadata
-  | T2IAdapterConfigV2Metadata
-  | IPAdapterConfigV2Metadata;
diff --git a/invokeai/frontend/web/src/features/metadata/util/handlers.ts b/invokeai/frontend/web/src/features/metadata/util/handlers.ts
index a2ba3dfc22..a4cceb5ec2 100644
--- a/invokeai/frontend/web/src/features/metadata/util/handlers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/handlers.ts
@@ -4,7 +4,6 @@ import type { Layer } from 'features/controlLayers/store/types';
 import type { LoRA } from 'features/lora/store/loraSlice';
 import type {
   AnyControlAdapterConfigMetadata,
-  AnyControlAdapterConfigV2Metadata,
   BuildMetadataHandlers,
   MetadataGetLabelFunc,
   MetadataHandlers,
@@ -46,14 +45,6 @@ const renderControlAdapterValue: MetadataRenderValueFunc<AnyControlAdapterConfig
     return `${value.model.key} (${value.model.base.toUpperCase()}) - ${value.weight}`;
   }
 };
-const renderControlAdapterValueV2: MetadataRenderValueFunc<AnyControlAdapterConfigV2Metadata> = async (value) => {
-  try {
-    const modelConfig = await fetchModelConfig(value.model.key ?? 'none');
-    return `${modelConfig.name} (${modelConfig.base.toUpperCase()}) - ${value.weight}`;
-  } catch {
-    return `${value.model.key} (${value.model.base.toUpperCase()}) - ${value.weight}`;
-  }
-};
 const renderLayerValue: MetadataRenderValueFunc<Layer> = async (layer) => {
   if (layer.type === 'initial_image_layer') {
     return t('controlLayers.initialImageLayer');
@@ -93,26 +84,6 @@ const parameterNotSetToast = (parameter: string, description?: string) => {
   });
 };
 
-// const allParameterSetToast = (description?: string) => {
-//   toast({
-//     title: t('toast.parametersSet'),
-//     status: 'info',
-//     description,
-//     duration: 2500,
-//     isClosable: true,
-//   });
-// };
-
-// const allParameterNotSetToast = (description?: string) => {
-//   toast({
-//     title: t('toast.parametersNotSet'),
-//     status: 'warning',
-//     description,
-//     duration: 2500,
-//     isClosable: true,
-//   });
-// };
-
 const buildParse =
   <TValue, TItem>(arg: {
     parser: MetadataParseFunc<TValue>;
@@ -220,12 +191,6 @@ export const handlers = {
     recaller: recallers.cfgScale,
   }),
   height: buildHandlers({ getLabel: () => t('metadata.height'), parser: parsers.height, recaller: recallers.height }),
-  initialImage: buildHandlers({
-    getLabel: () => t('metadata.initImage'),
-    parser: parsers.initialImage,
-    recaller: recallers.initialImage,
-    renderValue: async (imageDTO) => imageDTO.image_name,
-  }),
   negativePrompt: buildHandlers({
     getLabel: () => t('metadata.negativePrompt'),
     parser: parsers.negativePrompt,
@@ -372,36 +337,6 @@ export const handlers = {
     itemValidator: validators.t2iAdapter,
     renderItemValue: renderControlAdapterValue,
   }),
-  controlNetsV2: buildHandlers({
-    getLabel: () => t('common.controlNet'),
-    parser: parsers.controlNetsV2,
-    itemParser: parsers.controlNetV2,
-    recaller: recallers.controlNetsV2,
-    itemRecaller: recallers.controlNetV2,
-    validator: validators.controlNetsV2,
-    itemValidator: validators.controlNetV2,
-    renderItemValue: renderControlAdapterValueV2,
-  }),
-  ipAdaptersV2: buildHandlers({
-    getLabel: () => t('common.ipAdapter'),
-    parser: parsers.ipAdaptersV2,
-    itemParser: parsers.ipAdapterV2,
-    recaller: recallers.ipAdaptersV2,
-    itemRecaller: recallers.ipAdapterV2,
-    validator: validators.ipAdaptersV2,
-    itemValidator: validators.ipAdapterV2,
-    renderItemValue: renderControlAdapterValueV2,
-  }),
-  t2iAdaptersV2: buildHandlers({
-    getLabel: () => t('common.t2iAdapter'),
-    parser: parsers.t2iAdaptersV2,
-    itemParser: parsers.t2iAdapterV2,
-    recaller: recallers.t2iAdaptersV2,
-    itemRecaller: recallers.t2iAdapterV2,
-    validator: validators.t2iAdaptersV2,
-    itemValidator: validators.t2iAdapterV2,
-    renderItemValue: renderControlAdapterValueV2,
-  }),
   layers: buildHandlers({
     getLabel: () => t('controlLayers.layers_other'),
     parser: parsers.layers,
@@ -469,22 +404,9 @@ export const parseAndRecallImageDimensions = async (metadata: unknown) => {
 };
 
 // These handlers should be omitted when recalling to control layers
-const TO_CONTROL_LAYERS_SKIP_KEYS: (keyof typeof handlers)[] = [
-  'controlNets',
-  'ipAdapters',
-  't2iAdapters',
-  'controlNetsV2',
-  'ipAdaptersV2',
-  't2iAdaptersV2',
-];
+const TO_CONTROL_LAYERS_SKIP_KEYS: (keyof typeof handlers)[] = ['controlNets', 'ipAdapters', 't2iAdapters'];
 // These handlers should be omitted when recalling to the rest of the app
-const NOT_TO_CONTROL_LAYERS_SKIP_KEYS: (keyof typeof handlers)[] = [
-  'controlNetsV2',
-  'ipAdaptersV2',
-  't2iAdaptersV2',
-  'initialImage',
-  'layers',
-];
+const NOT_TO_CONTROL_LAYERS_SKIP_KEYS: (keyof typeof handlers)[] = ['layers'];
 
 export const parseAndRecallAllMetadata = async (
   metadata: unknown,
diff --git a/invokeai/frontend/web/src/features/metadata/util/parsers.ts b/invokeai/frontend/web/src/features/metadata/util/parsers.ts
index f59bbc90c6..c17463c986 100644
--- a/invokeai/frontend/web/src/features/metadata/util/parsers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/parsers.ts
@@ -7,24 +7,13 @@ import {
 import { buildControlAdapterProcessor } from 'features/controlAdapters/util/buildControlAdapterProcessor';
 import type { Layer } from 'features/controlLayers/store/types';
 import { zLayer } from 'features/controlLayers/store/types';
-import {
-  CA_PROCESSOR_DATA,
-  imageDTOToImageWithDims,
-  initialControlNetV2,
-  initialIPAdapterV2,
-  initialT2IAdapterV2,
-  isProcessorTypeV2,
-} from 'features/controlLayers/util/controlAdapters';
 import type { LoRA } from 'features/lora/store/loraSlice';
 import { defaultLoRAConfig } from 'features/lora/store/loraSlice';
 import type {
   ControlNetConfigMetadata,
-  ControlNetConfigV2Metadata,
   IPAdapterConfigMetadata,
-  IPAdapterConfigV2Metadata,
   MetadataParseFunc,
   T2IAdapterConfigMetadata,
-  T2IAdapterConfigV2Metadata,
 } from 'features/metadata/types';
 import { fetchModelConfigWithTypeGuard, getModelKey } from 'features/metadata/util/modelFetchingHelpers';
 import { zControlField, zIPAdapterField, zModelIdentifierField, zT2IAdapterField } from 'features/nodes/types/common';
@@ -71,7 +60,7 @@ import {
   isParameterWidth,
 } from 'features/parameters/types/parameterSchemas';
 import { get, isArray, isString } from 'lodash-es';
-import { getImageDTO, imagesApi } from 'services/api/endpoints/images';
+import { imagesApi } from 'services/api/endpoints/images';
 import type { ImageDTO } from 'services/api/types';
 import {
   isControlNetModelConfig,
@@ -441,203 +430,7 @@ const parseAllIPAdapters: MetadataParseFunc<IPAdapterConfigMetadata[]> = async (
   }
 };
 
-//#region V2/Control Layers
-const parseControlNetV2: MetadataParseFunc<ControlNetConfigV2Metadata> = async (metadataItem) => {
-  const control_model = await getProperty(metadataItem, 'control_model');
-  const key = await getModelKey(control_model, 'controlnet');
-  const controlNetModel = await fetchModelConfigWithTypeGuard(key, isControlNetModelConfig);
-  const image = zControlField.shape.image
-    .nullish()
-    .catch(null)
-    .parse(await getProperty(metadataItem, 'image'));
-  const processedImage = zControlField.shape.image
-    .nullish()
-    .catch(null)
-    .parse(await getProperty(metadataItem, 'processed_image'));
-  const control_weight = zControlField.shape.control_weight
-    .nullish()
-    .catch(null)
-    .parse(await getProperty(metadataItem, 'control_weight'));
-  const begin_step_percent = zControlField.shape.begin_step_percent
-    .nullish()
-    .catch(null)
-    .parse(await getProperty(metadataItem, 'begin_step_percent'));
-  const end_step_percent = zControlField.shape.end_step_percent
-    .nullish()
-    .catch(null)
-    .parse(await getProperty(metadataItem, 'end_step_percent'));
-  const control_mode = zControlField.shape.control_mode
-    .nullish()
-    .catch(null)
-    .parse(await getProperty(metadataItem, 'control_mode'));
-
-  const id = uuidv4();
-  const defaultPreprocessor = controlNetModel.default_settings?.preprocessor;
-  const processorConfig = isProcessorTypeV2(defaultPreprocessor)
-    ? CA_PROCESSOR_DATA[defaultPreprocessor].buildDefaults()
-    : null;
-  const beginEndStepPct: [number, number] = [
-    begin_step_percent ?? initialControlNetV2.beginEndStepPct[0],
-    end_step_percent ?? initialControlNetV2.beginEndStepPct[1],
-  ];
-  const imageDTO = image ? await getImageDTO(image.image_name) : null;
-  const processedImageDTO = processedImage ? await getImageDTO(processedImage.image_name) : null;
-
-  const controlNet: ControlNetConfigV2Metadata = {
-    id,
-    type: 'controlnet',
-    model: zModelIdentifierField.parse(controlNetModel),
-    weight: typeof control_weight === 'number' ? control_weight : initialControlNetV2.weight,
-    beginEndStepPct,
-    controlMode: control_mode ?? initialControlNetV2.controlMode,
-    image: imageDTO ? imageDTOToImageWithDims(imageDTO) : null,
-    processedImage: processedImageDTO ? imageDTOToImageWithDims(processedImageDTO) : null,
-    processorConfig,
-    isProcessingImage: false,
-  };
-
-  return controlNet;
-};
-
-const parseAllControlNetsV2: MetadataParseFunc<ControlNetConfigV2Metadata[]> = async (metadata) => {
-  try {
-    const controlNetsRaw = await getProperty(metadata, 'controlnets', isArray || undefined);
-    const parseResults = await Promise.allSettled(controlNetsRaw.map((cn) => parseControlNetV2(cn)));
-    const controlNets = parseResults
-      .filter((result): result is PromiseFulfilledResult<ControlNetConfigV2Metadata> => result.status === 'fulfilled')
-      .map((result) => result.value);
-    return controlNets;
-  } catch {
-    return [];
-  }
-};
-
-const parseT2IAdapterV2: MetadataParseFunc<T2IAdapterConfigV2Metadata> = async (metadataItem) => {
-  const t2i_adapter_model = await getProperty(metadataItem, 't2i_adapter_model');
-  const key = await getModelKey(t2i_adapter_model, 't2i_adapter');
-  const t2iAdapterModel = await fetchModelConfigWithTypeGuard(key, isT2IAdapterModelConfig);
-
-  const image = zT2IAdapterField.shape.image
-    .nullish()
-    .catch(null)
-    .parse(await getProperty(metadataItem, 'image'));
-  const processedImage = zT2IAdapterField.shape.image
-    .nullish()
-    .catch(null)
-    .parse(await getProperty(metadataItem, 'processed_image'));
-  const weight = zT2IAdapterField.shape.weight
-    .nullish()
-    .catch(null)
-    .parse(await getProperty(metadataItem, 'weight'));
-  const begin_step_percent = zT2IAdapterField.shape.begin_step_percent
-    .nullish()
-    .catch(null)
-    .parse(await getProperty(metadataItem, 'begin_step_percent'));
-  const end_step_percent = zT2IAdapterField.shape.end_step_percent
-    .nullish()
-    .catch(null)
-    .parse(await getProperty(metadataItem, 'end_step_percent'));
-
-  const id = uuidv4();
-  const defaultPreprocessor = t2iAdapterModel.default_settings?.preprocessor;
-  const processorConfig = isProcessorTypeV2(defaultPreprocessor)
-    ? CA_PROCESSOR_DATA[defaultPreprocessor].buildDefaults()
-    : null;
-  const beginEndStepPct: [number, number] = [
-    begin_step_percent ?? initialT2IAdapterV2.beginEndStepPct[0],
-    end_step_percent ?? initialT2IAdapterV2.beginEndStepPct[1],
-  ];
-  const imageDTO = image ? await getImageDTO(image.image_name) : null;
-  const processedImageDTO = processedImage ? await getImageDTO(processedImage.image_name) : null;
-
-  const t2iAdapter: T2IAdapterConfigV2Metadata = {
-    id,
-    type: 't2i_adapter',
-    model: zModelIdentifierField.parse(t2iAdapterModel),
-    weight: typeof weight === 'number' ? weight : initialT2IAdapterV2.weight,
-    beginEndStepPct,
-    image: imageDTO ? imageDTOToImageWithDims(imageDTO) : null,
-    processedImage: processedImageDTO ? imageDTOToImageWithDims(processedImageDTO) : null,
-    processorConfig,
-    isProcessingImage: false,
-  };
-
-  return t2iAdapter;
-};
-
-const parseAllT2IAdaptersV2: MetadataParseFunc<T2IAdapterConfigV2Metadata[]> = async (metadata) => {
-  try {
-    const t2iAdaptersRaw = await getProperty(metadata, 't2iAdapters', isArray);
-    const parseResults = await Promise.allSettled(t2iAdaptersRaw.map((t2iAdapter) => parseT2IAdapterV2(t2iAdapter)));
-    const t2iAdapters = parseResults
-      .filter((result): result is PromiseFulfilledResult<T2IAdapterConfigV2Metadata> => result.status === 'fulfilled')
-      .map((result) => result.value);
-    return t2iAdapters;
-  } catch {
-    return [];
-  }
-};
-
-const parseIPAdapterV2: MetadataParseFunc<IPAdapterConfigV2Metadata> = async (metadataItem) => {
-  const ip_adapter_model = await getProperty(metadataItem, 'ip_adapter_model');
-  const key = await getModelKey(ip_adapter_model, 'ip_adapter');
-  const ipAdapterModel = await fetchModelConfigWithTypeGuard(key, isIPAdapterModelConfig);
-
-  const image = zIPAdapterField.shape.image
-    .nullish()
-    .catch(null)
-    .parse(await getProperty(metadataItem, 'image'));
-  const weight = zIPAdapterField.shape.weight
-    .nullish()
-    .catch(null)
-    .parse(await getProperty(metadataItem, 'weight'));
-  const method = zIPAdapterField.shape.method
-    .nullish()
-    .catch(null)
-    .parse(await getProperty(metadataItem, 'method'));
-  const begin_step_percent = zIPAdapterField.shape.begin_step_percent
-    .nullish()
-    .catch(null)
-    .parse(await getProperty(metadataItem, 'begin_step_percent'));
-  const end_step_percent = zIPAdapterField.shape.end_step_percent
-    .nullish()
-    .catch(null)
-    .parse(await getProperty(metadataItem, 'end_step_percent'));
-
-  const id = uuidv4();
-  const beginEndStepPct: [number, number] = [
-    begin_step_percent ?? initialIPAdapterV2.beginEndStepPct[0],
-    end_step_percent ?? initialIPAdapterV2.beginEndStepPct[1],
-  ];
-  const imageDTO = image ? await getImageDTO(image.image_name) : null;
-
-  const ipAdapter: IPAdapterConfigV2Metadata = {
-    id,
-    type: 'ip_adapter',
-    model: zModelIdentifierField.parse(ipAdapterModel),
-    weight: typeof weight === 'number' ? weight : initialIPAdapterV2.weight,
-    beginEndStepPct,
-    image: imageDTO ? imageDTOToImageWithDims(imageDTO) : null,
-    clipVisionModel: initialIPAdapterV2.clipVisionModel, // TODO: This needs to be added to the zIPAdapterField...
-    method: method ?? initialIPAdapterV2.method,
-  };
-
-  return ipAdapter;
-};
-
-const parseAllIPAdaptersV2: MetadataParseFunc<IPAdapterConfigV2Metadata[]> = async (metadata) => {
-  try {
-    const ipAdaptersRaw = await getProperty(metadata, 'ipAdapters', isArray);
-    const parseResults = await Promise.allSettled(ipAdaptersRaw.map((ipAdapter) => parseIPAdapterV2(ipAdapter)));
-    const ipAdapters = parseResults
-      .filter((result): result is PromiseFulfilledResult<IPAdapterConfigV2Metadata> => result.status === 'fulfilled')
-      .map((result) => result.value);
-    return ipAdapters;
-  } catch {
-    return [];
-  }
-};
-
+//#region Control Layers
 const parseLayer: MetadataParseFunc<Layer> = async (metadataItem) => zLayer.parseAsync(metadataItem);
 
 const parseLayers: MetadataParseFunc<Layer[]> = async (metadata) => {
@@ -652,6 +445,7 @@ const parseLayers: MetadataParseFunc<Layer[]> = async (metadata) => {
     return [];
   }
 };
+//#endregion
 
 export const parsers = {
   createdBy: parseCreatedBy,
@@ -689,12 +483,6 @@ export const parsers = {
   t2iAdapters: parseAllT2IAdapters,
   ipAdapter: parseIPAdapter,
   ipAdapters: parseAllIPAdapters,
-  controlNetV2: parseControlNetV2,
-  controlNetsV2: parseAllControlNetsV2,
-  t2iAdapterV2: parseT2IAdapterV2,
-  t2iAdaptersV2: parseAllT2IAdaptersV2,
-  ipAdapterV2: parseIPAdapterV2,
-  ipAdaptersV2: parseAllIPAdaptersV2,
   layer: parseLayer,
   layers: parseLayers,
 } as const;
diff --git a/invokeai/frontend/web/src/features/metadata/util/recallers.ts b/invokeai/frontend/web/src/features/metadata/util/recallers.ts
index 390e840776..09c405c3d6 100644
--- a/invokeai/frontend/web/src/features/metadata/util/recallers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/recallers.ts
@@ -7,16 +7,10 @@ import {
 } from 'features/controlAdapters/store/controlAdaptersSlice';
 import {
   allLayersDeleted,
-  caLayerAdded,
-  caLayerControlNetsDeleted,
   caLayerRecalled,
-  caLayerT2IAdaptersDeleted,
   heightChanged,
-  iiLayerAdded,
   iiLayerRecalled,
-  ipaLayerAdded,
   ipaLayerRecalled,
-  ipaLayersDeleted,
   negativePrompt2Changed,
   negativePromptChanged,
   positivePrompt2Changed,
@@ -30,12 +24,9 @@ import type { LoRA } from 'features/lora/store/loraSlice';
 import { loraRecalled, lorasReset } from 'features/lora/store/loraSlice';
 import type {
   ControlNetConfigMetadata,
-  ControlNetConfigV2Metadata,
   IPAdapterConfigMetadata,
-  IPAdapterConfigV2Metadata,
   MetadataRecallFunc,
   T2IAdapterConfigMetadata,
-  T2IAdapterConfigV2Metadata,
 } from 'features/metadata/types';
 import { modelSelected } from 'features/parameters/store/actions';
 import {
@@ -78,7 +69,6 @@ import {
   setRefinerStart,
   setRefinerSteps,
 } from 'features/sdxl/store/sdxlSlice';
-import type { ImageDTO } from 'services/api/types';
 
 const recallPositivePrompt: MetadataRecallFunc<ParameterPositivePrompt> = (positivePrompt) => {
   getStore().dispatch(positivePromptChanged(positivePrompt));
@@ -112,10 +102,6 @@ const recallScheduler: MetadataRecallFunc<ParameterScheduler> = (scheduler) => {
   getStore().dispatch(setScheduler(scheduler));
 };
 
-const recallInitialImage: MetadataRecallFunc<ImageDTO> = async (imageDTO) => {
-  getStore().dispatch(iiLayerAdded(imageDTO));
-};
-
 const setSizeOptions = { updateAspectRatio: true, clamp: true };
 
 const recallWidth: MetadataRecallFunc<ParameterWidth> = (width) => {
@@ -250,52 +236,7 @@ const recallIPAdapters: MetadataRecallFunc<IPAdapterConfigMetadata[]> = (ipAdapt
   });
 };
 
-//#region V2/Control Layer
-const recallControlNetV2: MetadataRecallFunc<ControlNetConfigV2Metadata> = (controlNet) => {
-  getStore().dispatch(caLayerAdded(controlNet));
-};
-
-const recallControlNetsV2: MetadataRecallFunc<ControlNetConfigV2Metadata[]> = (controlNets) => {
-  const { dispatch } = getStore();
-  dispatch(caLayerControlNetsDeleted());
-  if (!controlNets.length) {
-    return;
-  }
-  controlNets.forEach((controlNet) => {
-    dispatch(caLayerAdded(controlNet));
-  });
-};
-
-const recallT2IAdapterV2: MetadataRecallFunc<T2IAdapterConfigV2Metadata> = (t2iAdapter) => {
-  getStore().dispatch(caLayerAdded(t2iAdapter));
-};
-
-const recallT2IAdaptersV2: MetadataRecallFunc<T2IAdapterConfigV2Metadata[]> = (t2iAdapters) => {
-  const { dispatch } = getStore();
-  dispatch(caLayerT2IAdaptersDeleted());
-  if (!t2iAdapters.length) {
-    return;
-  }
-  t2iAdapters.forEach((t2iAdapters) => {
-    dispatch(caLayerAdded(t2iAdapters));
-  });
-};
-
-const recallIPAdapterV2: MetadataRecallFunc<IPAdapterConfigV2Metadata> = (ipAdapter) => {
-  getStore().dispatch(ipaLayerAdded(ipAdapter));
-};
-
-const recallIPAdaptersV2: MetadataRecallFunc<IPAdapterConfigV2Metadata[]> = (ipAdapters) => {
-  const { dispatch } = getStore();
-  dispatch(ipaLayersDeleted());
-  if (!ipAdapters.length) {
-    return;
-  }
-  ipAdapters.forEach((ipAdapter) => {
-    dispatch(ipaLayerAdded(ipAdapter));
-  });
-};
-
+//#region Control Layers
 const recallLayer: MetadataRecallFunc<Layer> = (layer) => {
   const { dispatch } = getStore();
   switch (layer.type) {
@@ -331,7 +272,6 @@ export const recallers = {
   cfgScale: recallCFGScale,
   cfgRescaleMultiplier: recallCFGRescaleMultiplier,
   scheduler: recallScheduler,
-  initialImage: recallInitialImage,
   width: recallWidth,
   height: recallHeight,
   steps: recallSteps,
@@ -356,12 +296,6 @@ export const recallers = {
   t2iAdapter: recallT2IAdapter,
   ipAdapters: recallIPAdapters,
   ipAdapter: recallIPAdapter,
-  controlNetV2: recallControlNetV2,
-  controlNetsV2: recallControlNetsV2,
-  t2iAdapterV2: recallT2IAdapterV2,
-  t2iAdaptersV2: recallT2IAdaptersV2,
-  ipAdapterV2: recallIPAdapterV2,
-  ipAdaptersV2: recallIPAdaptersV2,
   layer: recallLayer,
   layers: recallLayers,
 } as const;
diff --git a/invokeai/frontend/web/src/features/metadata/util/validators.ts b/invokeai/frontend/web/src/features/metadata/util/validators.ts
index 7381d7aee0..a308021a1e 100644
--- a/invokeai/frontend/web/src/features/metadata/util/validators.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/validators.ts
@@ -3,12 +3,9 @@ import type { Layer } from 'features/controlLayers/store/types';
 import type { LoRA } from 'features/lora/store/loraSlice';
 import type {
   ControlNetConfigMetadata,
-  ControlNetConfigV2Metadata,
   IPAdapterConfigMetadata,
-  IPAdapterConfigV2Metadata,
   MetadataValidateFunc,
   T2IAdapterConfigMetadata,
-  T2IAdapterConfigV2Metadata,
 } from 'features/metadata/types';
 import { fetchModelConfigByIdentifier, InvalidModelConfigError } from 'features/metadata/util/modelFetchingHelpers';
 import type { ParameterSDXLRefinerModel, ParameterVAEModel } from 'features/parameters/types/parameterSchemas';
@@ -113,60 +110,6 @@ const validateIPAdapters: MetadataValidateFunc<IPAdapterConfigMetadata[]> = (ipA
   return new Promise((resolve) => resolve(validatedIPAdapters));
 };
 
-const validateControlNetV2: MetadataValidateFunc<ControlNetConfigV2Metadata> = (controlNet) => {
-  validateBaseCompatibility(controlNet.model?.base, 'ControlNet incompatible with currently-selected model');
-  return new Promise((resolve) => resolve(controlNet));
-};
-
-const validateControlNetsV2: MetadataValidateFunc<ControlNetConfigV2Metadata[]> = (controlNets) => {
-  const validatedControlNets: ControlNetConfigV2Metadata[] = [];
-  controlNets.forEach((controlNet) => {
-    try {
-      validateBaseCompatibility(controlNet.model?.base, 'ControlNet incompatible with currently-selected model');
-      validatedControlNets.push(controlNet);
-    } catch {
-      // This is a no-op - we want to continue validating the rest of the ControlNets, and an empty list is valid.
-    }
-  });
-  return new Promise((resolve) => resolve(validatedControlNets));
-};
-
-const validateT2IAdapterV2: MetadataValidateFunc<T2IAdapterConfigV2Metadata> = (t2iAdapter) => {
-  validateBaseCompatibility(t2iAdapter.model?.base, 'T2I Adapter incompatible with currently-selected model');
-  return new Promise((resolve) => resolve(t2iAdapter));
-};
-
-const validateT2IAdaptersV2: MetadataValidateFunc<T2IAdapterConfigV2Metadata[]> = (t2iAdapters) => {
-  const validatedT2IAdapters: T2IAdapterConfigV2Metadata[] = [];
-  t2iAdapters.forEach((t2iAdapter) => {
-    try {
-      validateBaseCompatibility(t2iAdapter.model?.base, 'T2I Adapter incompatible with currently-selected model');
-      validatedT2IAdapters.push(t2iAdapter);
-    } catch {
-      // This is a no-op - we want to continue validating the rest of the T2I Adapters, and an empty list is valid.
-    }
-  });
-  return new Promise((resolve) => resolve(validatedT2IAdapters));
-};
-
-const validateIPAdapterV2: MetadataValidateFunc<IPAdapterConfigV2Metadata> = (ipAdapter) => {
-  validateBaseCompatibility(ipAdapter.model?.base, 'IP Adapter incompatible with currently-selected model');
-  return new Promise((resolve) => resolve(ipAdapter));
-};
-
-const validateIPAdaptersV2: MetadataValidateFunc<IPAdapterConfigV2Metadata[]> = (ipAdapters) => {
-  const validatedIPAdapters: IPAdapterConfigV2Metadata[] = [];
-  ipAdapters.forEach((ipAdapter) => {
-    try {
-      validateBaseCompatibility(ipAdapter.model?.base, 'IP Adapter incompatible with currently-selected model');
-      validatedIPAdapters.push(ipAdapter);
-    } catch {
-      // This is a no-op - we want to continue validating the rest of the IP Adapters, and an empty list is valid.
-    }
-  });
-  return new Promise((resolve) => resolve(validatedIPAdapters));
-};
-
 const validateLayer: MetadataValidateFunc<Layer> = async (layer) => {
   if (layer.type === 'control_adapter_layer') {
     const model = layer.controlAdapter.model;
@@ -216,12 +159,6 @@ export const validators = {
   t2iAdapters: validateT2IAdapters,
   ipAdapter: validateIPAdapter,
   ipAdapters: validateIPAdapters,
-  controlNetV2: validateControlNetV2,
-  controlNetsV2: validateControlNetsV2,
-  t2iAdapterV2: validateT2IAdapterV2,
-  t2iAdaptersV2: validateT2IAdaptersV2,
-  ipAdapterV2: validateIPAdapterV2,
-  ipAdaptersV2: validateIPAdaptersV2,
   layer: validateLayer,
   layers: validateLayers,
 } as const;

From e36e5871a1ee8026c6053d98aae1d4b179ffc9da Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 8 May 2024 10:15:16 +1000
Subject: [PATCH 050/116] chore(ui): lint

---
 .../ControlAndIPAdapter/IPAdapterImagePreview.tsx        | 4 +---
 .../web/src/features/controlLayers/store/types.ts        | 9 ++++-----
 .../src/features/controlLayers/util/controlAdapters.ts   | 8 ++++----
 .../web/src/features/deleteImageModal/store/selectors.ts | 4 +---
 invokeai/frontend/web/src/features/metadata/types.ts     | 2 +-
 5 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/IPAdapterImagePreview.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/IPAdapterImagePreview.tsx
index e2ea215314..93d493bcbc 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/IPAdapterImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/IPAdapterImagePreview.tsx
@@ -34,9 +34,7 @@ export const IPAdapterImagePreview = memo(
     const optimalDimension = useAppSelector(selectOptimalDimension);
     const shift = useShiftModifier();
 
-    const { currentData: controlImage, isError: isErrorControlImage } = useGetImageDTOQuery(
-      image?.name ?? skipToken
-    );
+    const { currentData: controlImage, isError: isErrorControlImage } = useGetImageDTOQuery(image?.name ?? skipToken);
     const handleResetControlImage = useCallback(() => {
       onChangeImage(null);
     }, [onChangeImage]);
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/types.ts b/invokeai/frontend/web/src/features/controlLayers/store/types.ts
index 1a3f94debc..cd9db6e962 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/types.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/types.ts
@@ -19,15 +19,15 @@ import {
 } from 'features/parameters/types/parameterSchemas';
 import { z } from 'zod';
 
-export const zTool = z.enum(['brush', 'eraser', 'move', 'rect']);
+const zTool = z.enum(['brush', 'eraser', 'move', 'rect']);
 export type Tool = z.infer<typeof zTool>;
-export const zDrawingTool = zTool.extract(['brush', 'eraser']);
+const zDrawingTool = zTool.extract(['brush', 'eraser']);
 export type DrawingTool = z.infer<typeof zDrawingTool>;
 
 const zPoints = z.array(z.number()).refine((points) => points.length % 2 === 0, {
   message: 'Must have an even number of points',
 });
-export const zVectorMaskLine = z.object({
+const zVectorMaskLine = z.object({
   id: z.string(),
   type: z.literal('vector_mask_line'),
   tool: zDrawingTool,
@@ -36,7 +36,7 @@ export const zVectorMaskLine = z.object({
 });
 export type VectorMaskLine = z.infer<typeof zVectorMaskLine>;
 
-export const zVectorMaskRect = z.object({
+const zVectorMaskRect = z.object({
   id: z.string(),
   type: z.literal('vector_mask_rect'),
   x: z.number(),
@@ -116,7 +116,6 @@ export const zLayer = z.discriminatedUnion('type', [
   zInitialImageLayer,
 ]);
 export type Layer = z.infer<typeof zLayer>;
-export const zLayers = z.array(zLayer);
 
 export type ControlLayersState = {
   _version: 2;
diff --git a/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts b/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
index 0fbcaa6c2b..f9dc114767 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
@@ -162,7 +162,7 @@ const zZoeDepthProcessorConfig = z.object({
 export type _ZoeDepthProcessorConfig = Required<Pick<ZoeDepthImageProcessorInvocation, 'id' | 'type'>>;
 export type ZoeDepthProcessorConfig = z.infer<typeof zZoeDepthProcessorConfig>;
 
-export const zProcessorConfig = z.discriminatedUnion('type', [
+const zProcessorConfig = z.discriminatedUnion('type', [
   zCannyProcessorConfig,
   zColorMapProcessorConfig,
   zContentShuffleProcessorConfig,
@@ -519,7 +519,7 @@ export const CA_PROCESSOR_DATA: CAProcessorsData = {
   },
 };
 
-export const initialControlNetV2: Omit<ControlNetConfigV2, 'id'> = {
+const initialControlNetV2: Omit<ControlNetConfigV2, 'id'> = {
   type: 'controlnet',
   model: null,
   weight: 1,
@@ -531,7 +531,7 @@ export const initialControlNetV2: Omit<ControlNetConfigV2, 'id'> = {
   processorConfig: CA_PROCESSOR_DATA.canny_image_processor.buildDefaults(),
 };
 
-export const initialT2IAdapterV2: Omit<T2IAdapterConfigV2, 'id'> = {
+const initialT2IAdapterV2: Omit<T2IAdapterConfigV2, 'id'> = {
   type: 't2i_adapter',
   model: null,
   weight: 1,
@@ -542,7 +542,7 @@ export const initialT2IAdapterV2: Omit<T2IAdapterConfigV2, 'id'> = {
   processorConfig: CA_PROCESSOR_DATA.canny_image_processor.buildDefaults(),
 };
 
-export const initialIPAdapterV2: Omit<IPAdapterConfigV2, 'id'> = {
+const initialIPAdapterV2: Omit<IPAdapterConfigV2, 'id'> = {
   type: 'ip_adapter',
   image: null,
   model: null,
diff --git a/invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts b/invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts
index 7e2605c6cf..a7934f72d2 100644
--- a/invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts
+++ b/invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts
@@ -49,9 +49,7 @@ export const getImageUsage = (
       return l.ipAdapters.some((ipa) => ipa.image?.name === image_name);
     }
     if (isControlAdapterLayer(l)) {
-      return (
-        l.controlAdapter.image?.name === image_name || l.controlAdapter.processedImage?.name === image_name
-      );
+      return l.controlAdapter.image?.name === image_name || l.controlAdapter.processedImage?.name === image_name;
     }
     if (isIPAdapterLayer(l)) {
       return l.ipAdapter.image?.name === image_name;
diff --git a/invokeai/frontend/web/src/features/metadata/types.ts b/invokeai/frontend/web/src/features/metadata/types.ts
index 1d87efaf2e..dfc1e828c9 100644
--- a/invokeai/frontend/web/src/features/metadata/types.ts
+++ b/invokeai/frontend/web/src/features/metadata/types.ts
@@ -51,7 +51,7 @@ export type MetadataValidateFunc<T> = (value: T) => Promise<T>;
  * @param value The value to check.
  * @returns True if the item should be visible, false otherwise.
  */
-export type MetadataGetIsVisibleFunc<T> = (value: T) => boolean;
+type MetadataGetIsVisibleFunc<T> = (value: T) => boolean;
 
 export type MetadataHandlers<TValue = unknown, TItem = unknown> = {
   /**

From de33d6e6470fd2d4334d0eb8c1b2c27e3745e80c Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 8 May 2024 10:41:52 +1000
Subject: [PATCH 051/116] fix(ui): metadata "Layers" -> "Layer"

---
 invokeai/frontend/web/src/features/metadata/util/handlers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/metadata/util/handlers.ts b/invokeai/frontend/web/src/features/metadata/util/handlers.ts
index a4cceb5ec2..da8150fff4 100644
--- a/invokeai/frontend/web/src/features/metadata/util/handlers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/handlers.ts
@@ -338,7 +338,7 @@ export const handlers = {
     renderItemValue: renderControlAdapterValue,
   }),
   layers: buildHandlers({
-    getLabel: () => t('controlLayers.layers_other'),
+    getLabel: () => t('controlLayers.layers_one'),
     parser: parsers.layers,
     itemParser: parsers.layer,
     recaller: recallers.layers,

From 6107e3d28131482a6c904dc103642777cb51108d Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 8 May 2024 11:01:20 +1000
Subject: [PATCH 052/116] fix(ui): fix zControlAdapterBase schema weight

---
 .../web/src/features/controlLayers/util/controlAdapters.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts b/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
index f9dc114767..b643e4a64d 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
@@ -195,7 +195,7 @@ const zBeginEndStepPct = z
 
 const zControlAdapterBase = z.object({
   id: zId,
-  weight: z.number().gte(0).lte(0),
+  weight: z.number().gte(0).lte(1),
   image: zImageWithDims.nullable(),
   processedImage: zImageWithDims.nullable(),
   isProcessingImage: z.boolean(),

From f147f99befa572c82c23862220b36c08f2fd0a50 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 8 May 2024 11:02:07 +1000
Subject: [PATCH 053/116] feat(ui): better metadata labels for layers

---
 invokeai/frontend/web/public/locales/en.json  |  2 --
 .../src/features/metadata/util/handlers.ts    | 33 ++++++++++++++++---
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 0c7c6cd6e1..375f691ab2 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -1547,8 +1547,6 @@
         "addIPAdapter": "Add $t(common.ipAdapter)",
         "regionalGuidance": "Regional Guidance",
         "regionalGuidanceLayer": "$t(controlLayers.regionalGuidance) $t(unifiedCanvas.layer)",
-        "controlNetLayer": "$t(common.controlNet) $t(unifiedCanvas.layer)",
-        "ipAdapterLayer": "$t(common.ipAdapter) $t(unifiedCanvas.layer)",
         "opacity": "Opacity",
         "globalControlAdapter": "Global $t(controlnet.controlAdapter_one)",
         "globalControlAdapterLayer": "Global $t(controlnet.controlAdapter_one) $t(unifiedCanvas.layer)",
diff --git a/invokeai/frontend/web/src/features/metadata/util/handlers.ts b/invokeai/frontend/web/src/features/metadata/util/handlers.ts
index da8150fff4..bf5fa2eaec 100644
--- a/invokeai/frontend/web/src/features/metadata/util/handlers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/handlers.ts
@@ -47,16 +47,41 @@ const renderControlAdapterValue: MetadataRenderValueFunc<AnyControlAdapterConfig
 };
 const renderLayerValue: MetadataRenderValueFunc<Layer> = async (layer) => {
   if (layer.type === 'initial_image_layer') {
-    return t('controlLayers.initialImageLayer');
+    let rendered = t('controlLayers.globalInitialImageLayer');
+    if (layer.image) {
+      rendered += ` (${layer.image})`;
+    }
+    return rendered;
   }
   if (layer.type === 'control_adapter_layer') {
-    return t('controlLayers.controlAdapterLayer');
+    let rendered = t('controlLayers.globalControlAdapterLayer');
+    const model = layer.controlAdapter.model;
+    if (model) {
+      rendered += ` (${model.name} - ${model.base.toUpperCase()})`;
+    }
+    return rendered;
   }
   if (layer.type === 'ip_adapter_layer') {
-    return t('controlLayers.ipAdapterLayer');
+    let rendered = t('controlLayers.globalIPAdapterLayer');
+    const model = layer.ipAdapter.model;
+    if (model) {
+      rendered += ` (${model.name} - ${model.base.toUpperCase()})`;
+    }
+    return rendered;
   }
   if (layer.type === 'regional_guidance_layer') {
-    return t('controlLayers.regionalGuidanceLayer');
+    const rendered = t('controlLayers.regionalGuidanceLayer');
+    const items: string[] = [];
+    if (layer.positivePrompt) {
+      items.push(`Positive: ${layer.positivePrompt}`);
+    }
+    if (layer.negativePrompt) {
+      items.push(`Negative: ${layer.negativePrompt}`);
+    }
+    if (layer.ipAdapters.length > 0) {
+      items.push(`${layer.ipAdapters.length} IP Adapters`);
+    }
+    return `${rendered} (${items.join(', ')})`;
   }
   assert(false, 'Unknown layer type');
 };

From 3f489c92c843e4ea39d0c9ecb05c74e236ba6f8b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 8 May 2024 14:22:19 +1000
Subject: [PATCH 054/116] feat(ui): handle initial image layers in control
 layers helper

---
 .../util/graph/addControlLayersToGraph.ts     | 239 +++++++++++-------
 .../util/graph/buildGenerationTabGraph.ts     |  16 +-
 .../util/graph/buildGenerationTabSDXLGraph.ts |   9 +-
 3 files changed, 157 insertions(+), 107 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
index 9aa82fdb92..de3456f371 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
@@ -2,11 +2,12 @@ import { getStore } from 'app/store/nanostores/store';
 import type { RootState } from 'app/store/store';
 import {
   isControlAdapterLayer,
+  isInitialImageLayer,
   isIPAdapterLayer,
   isRegionalGuidanceLayer,
   rgLayerMaskImageUploaded,
 } from 'features/controlLayers/store/controlLayersSlice';
-import type { Layer, RegionalGuidanceLayer } from 'features/controlLayers/store/types';
+import type { InitialImageLayer, Layer, RegionalGuidanceLayer } from 'features/controlLayers/store/types';
 import {
   type ControlNetConfigV2,
   type ImageWithDims,
@@ -20,9 +21,11 @@ import { getRegionalPromptLayerBlobs } from 'features/controlLayers/util/getLaye
 import type { ImageField } from 'features/nodes/types/common';
 import {
   CONTROL_NET_COLLECT,
+  IMAGE_TO_LATENTS,
   IP_ADAPTER_COLLECT,
   NEGATIVE_CONDITIONING,
   NEGATIVE_CONDITIONING_COLLECT,
+  NOISE,
   POSITIVE_CONDITIONING,
   POSITIVE_CONDITIONING_COLLECT,
   PROMPT_REGION_INVERT_TENSOR_MASK_PREFIX,
@@ -30,6 +33,7 @@ import {
   PROMPT_REGION_NEGATIVE_COND_PREFIX,
   PROMPT_REGION_POSITIVE_COND_INVERTED_PREFIX,
   PROMPT_REGION_POSITIVE_COND_PREFIX,
+  RESIZE,
   T2I_ADAPTER_COLLECT,
 } from 'features/nodes/util/graph/constants';
 import { upsertMetadata } from 'features/nodes/util/graph/metadata';
@@ -38,9 +42,10 @@ import { getImageDTO, imagesApi } from 'services/api/endpoints/images';
 import type {
   CollectInvocation,
   ControlNetInvocation,
-  CoreMetadataInvocation,
   Edge,
   ImageDTO,
+  ImageResizeInvocation,
+  ImageToLatentsInvocation,
   IPAdapterInvocation,
   NonNullableGraph,
   S,
@@ -67,33 +72,6 @@ const buildControlImage = (
   assert(false, 'Attempted to add unprocessed control image');
 };
 
-const buildControlNetMetadata = (controlNet: ControlNetConfigV2): S['ControlNetMetadataField'] => {
-  const { beginEndStepPct, controlMode, image, model, processedImage, processorConfig, weight } = controlNet;
-
-  assert(model, 'ControlNet model is required');
-  assert(image, 'ControlNet image is required');
-
-  const processed_image =
-    processedImage && processorConfig
-      ? {
-          image_name: processedImage.name,
-        }
-      : null;
-
-  return {
-    control_model: model,
-    control_weight: weight,
-    control_mode: controlMode,
-    begin_step_percent: beginEndStepPct[0],
-    end_step_percent: beginEndStepPct[1],
-    resize_mode: 'just_resize',
-    image: {
-      image_name: image.name,
-    },
-    processed_image,
-  };
-};
-
 const addControlNetCollectorSafe = (graph: NonNullableGraph, denoiseNodeId: string) => {
   if (graph.nodes[CONTROL_NET_COLLECT]) {
     // You see, we've already got one!
@@ -123,7 +101,6 @@ const addGlobalControlNetsToGraph = async (
   if (controlNets.length === 0) {
     return;
   }
-  const controlNetMetadata: CoreMetadataInvocation['controlnets'] = [];
   addControlNetCollectorSafe(graph, denoiseNodeId);
 
   for (const controlNet of controlNets) {
@@ -147,8 +124,6 @@ const addGlobalControlNetsToGraph = async (
 
     graph.nodes[controlNetNode.id] = controlNetNode;
 
-    controlNetMetadata.push(buildControlNetMetadata(controlNet));
-
     graph.edges.push({
       source: { node_id: controlNetNode.id, field: 'control' },
       destination: {
@@ -157,33 +132,6 @@ const addGlobalControlNetsToGraph = async (
       },
     });
   }
-  upsertMetadata(graph, { controlnets: controlNetMetadata });
-};
-
-const buildT2IAdapterMetadata = (t2iAdapter: T2IAdapterConfigV2): S['T2IAdapterMetadataField'] => {
-  const { beginEndStepPct, image, model, processedImage, processorConfig, weight } = t2iAdapter;
-
-  assert(model, 'T2I Adapter model is required');
-  assert(image, 'T2I Adapter image is required');
-
-  const processed_image =
-    processedImage && processorConfig
-      ? {
-          image_name: processedImage.name,
-        }
-      : null;
-
-  return {
-    t2i_adapter_model: model,
-    weight,
-    begin_step_percent: beginEndStepPct[0],
-    end_step_percent: beginEndStepPct[1],
-    resize_mode: 'just_resize',
-    image: {
-      image_name: image.name,
-    },
-    processed_image,
-  };
 };
 
 const addT2IAdapterCollectorSafe = (graph: NonNullableGraph, denoiseNodeId: string) => {
@@ -215,7 +163,6 @@ const addGlobalT2IAdaptersToGraph = async (
   if (t2iAdapters.length === 0) {
     return;
   }
-  const t2iAdapterMetadata: CoreMetadataInvocation['t2iAdapters'] = [];
   addT2IAdapterCollectorSafe(graph, denoiseNodeId);
 
   for (const t2iAdapter of t2iAdapters) {
@@ -238,8 +185,6 @@ const addGlobalT2IAdaptersToGraph = async (
 
     graph.nodes[t2iAdapterNode.id] = t2iAdapterNode;
 
-    t2iAdapterMetadata.push(buildT2IAdapterMetadata(t2iAdapter));
-
     graph.edges.push({
       source: { node_id: t2iAdapterNode.id, field: 't2i_adapter' },
       destination: {
@@ -248,27 +193,6 @@ const addGlobalT2IAdaptersToGraph = async (
       },
     });
   }
-
-  upsertMetadata(graph, { t2iAdapters: t2iAdapterMetadata });
-};
-
-const buildIPAdapterMetadata = (ipAdapter: IPAdapterConfigV2): S['IPAdapterMetadataField'] => {
-  const { weight, model, clipVisionModel, method, beginEndStepPct, image } = ipAdapter;
-
-  assert(model, 'IP Adapter model is required');
-  assert(image, 'IP Adapter image is required');
-
-  return {
-    ip_adapter_model: model,
-    clip_vision_model: clipVisionModel,
-    weight,
-    method,
-    begin_step_percent: beginEndStepPct[0],
-    end_step_percent: beginEndStepPct[1],
-    image: {
-      image_name: image.name,
-    },
-  };
 };
 
 const addIPAdapterCollectorSafe = (graph: NonNullableGraph, denoiseNodeId: string) => {
@@ -300,7 +224,6 @@ const addGlobalIPAdaptersToGraph = async (
   if (ipAdapters.length === 0) {
     return;
   }
-  const ipAdapterMetdata: CoreMetadataInvocation['ipAdapters'] = [];
   addIPAdapterCollectorSafe(graph, denoiseNodeId);
 
   for (const ipAdapter of ipAdapters) {
@@ -325,8 +248,6 @@ const addGlobalIPAdaptersToGraph = async (
 
     graph.nodes[ipAdapterNode.id] = ipAdapterNode;
 
-    ipAdapterMetdata.push(buildIPAdapterMetadata(ipAdapter));
-
     graph.edges.push({
       source: { node_id: ipAdapterNode.id, field: 'ip_adapter' },
       destination: {
@@ -335,16 +256,131 @@ const addGlobalIPAdaptersToGraph = async (
       },
     });
   }
-
-  upsertMetadata(graph, { ipAdapters: ipAdapterMetdata });
 };
 
-export const addControlLayersToGraph = async (state: RootState, graph: NonNullableGraph, denoiseNodeId: string) => {
+const addInitialImageLayerToGraph = (
+  state: RootState,
+  graph: NonNullableGraph,
+  denoiseNodeId: string,
+  layer: InitialImageLayer
+) => {
+  const { vaePrecision, model } = state.generation;
+  const { refinerModel, refinerStart } = state.sdxl;
+  const { width, height } = state.controlLayers.present.size;
+  assert(layer.isEnabled, 'Initial image layer is not enabled');
+  assert(layer.image, 'Initial image layer has no image');
+
+  const isSDXL = model?.base === 'sdxl';
+  const useRefinerStartEnd = isSDXL && Boolean(refinerModel);
+
+  const denoiseNode = graph.nodes[denoiseNodeId];
+  assert(denoiseNode?.type === 'denoise_latents', `Missing denoise node or incorrect type: ${denoiseNode?.type}`);
+
+  const { denoisingStrength } = layer;
+  denoiseNode.denoising_start = useRefinerStartEnd
+    ? Math.min(refinerStart, 1 - denoisingStrength)
+    : 1 - denoisingStrength;
+  denoiseNode.denoising_end = useRefinerStartEnd ? refinerStart : 1;
+
+  // We conditionally hook the image in depending on if a resize is needed
+  const i2lNode: ImageToLatentsInvocation = {
+    type: 'i2l',
+    id: IMAGE_TO_LATENTS,
+    is_intermediate: true,
+    use_cache: true,
+    fp32: vaePrecision === 'fp32',
+  };
+
+  graph.nodes[i2lNode.id] = i2lNode;
+  graph.edges.push({
+    source: {
+      node_id: IMAGE_TO_LATENTS,
+      field: 'latents',
+    },
+    destination: {
+      node_id: denoiseNode.id,
+      field: 'latents',
+    },
+  });
+
+  if (layer.image.width !== width || layer.image.height !== height) {
+    // The init image needs to be resized to the specified width and height before being passed to `IMAGE_TO_LATENTS`
+
+    // Create a resize node, explicitly setting its image
+    const resizeNode: ImageResizeInvocation = {
+      id: RESIZE,
+      type: 'img_resize',
+      image: {
+        image_name: layer.image.name,
+      },
+      is_intermediate: true,
+      width,
+      height,
+    };
+
+    graph.nodes[RESIZE] = resizeNode;
+
+    // The `RESIZE` node then passes its image to `IMAGE_TO_LATENTS`
+    graph.edges.push({
+      source: { node_id: RESIZE, field: 'image' },
+      destination: {
+        node_id: IMAGE_TO_LATENTS,
+        field: 'image',
+      },
+    });
+
+    // The `RESIZE` node also passes its width and height to `NOISE`
+    graph.edges.push({
+      source: { node_id: RESIZE, field: 'width' },
+      destination: {
+        node_id: NOISE,
+        field: 'width',
+      },
+    });
+
+    graph.edges.push({
+      source: { node_id: RESIZE, field: 'height' },
+      destination: {
+        node_id: NOISE,
+        field: 'height',
+      },
+    });
+  } else {
+    // We are not resizing, so we need to set the image on the `IMAGE_TO_LATENTS` node explicitly
+    i2lNode.image = {
+      image_name: layer.image.name,
+    };
+
+    // Pass the image's dimensions to the `NOISE` node
+    graph.edges.push({
+      source: { node_id: IMAGE_TO_LATENTS, field: 'width' },
+      destination: {
+        node_id: NOISE,
+        field: 'width',
+      },
+    });
+    graph.edges.push({
+      source: { node_id: IMAGE_TO_LATENTS, field: 'height' },
+      destination: {
+        node_id: NOISE,
+        field: 'height',
+      },
+    });
+  }
+
+  upsertMetadata(graph, { generation_mode: isSDXL ? 'sdxl_img2img' : 'img2img' });
+};
+
+export const addControlLayersToGraph = async (
+  state: RootState,
+  graph: NonNullableGraph,
+  denoiseNodeId: string
+): Promise<Layer[]> => {
   const mainModel = state.generation.model;
   assert(mainModel, 'Missing main model when building graph');
   const isSDXL = mainModel.base === 'sdxl';
 
-  const layersMetadata: Layer[] = [];
+  const validLayers: Layer[] = [];
 
   // Add global control adapters
   const validControlAdapterLayers = state.controlLayers.present.layers
@@ -366,6 +402,8 @@ export const addControlLayersToGraph = async (state: RootState, graph: NonNullab
   const validT2IAdapters = validControlAdapterLayers.map((l) => l.controlAdapter).filter(isT2IAdapterConfigV2);
   addGlobalT2IAdaptersToGraph(validT2IAdapters, graph, denoiseNodeId);
 
+  validLayers.push(...validControlAdapterLayers);
+
   const validIPAdapterLayers = state.controlLayers.present.layers
     // Must be an IP Adapter layer
     .filter(isIPAdapterLayer)
@@ -381,6 +419,21 @@ export const addControlLayersToGraph = async (state: RootState, graph: NonNullab
     });
   const validIPAdapters = validIPAdapterLayers.map((l) => l.ipAdapter);
   addGlobalIPAdaptersToGraph(validIPAdapters, graph, denoiseNodeId);
+  validLayers.push(...validIPAdapterLayers);
+
+  const initialImageLayer = state.controlLayers.present.layers.filter(isInitialImageLayer).find((l) => {
+    if (!l.isEnabled) {
+      return false;
+    }
+    if (!l.image) {
+      return false;
+    }
+    return true;
+  });
+  if (initialImageLayer) {
+    addInitialImageLayerToGraph(state, graph, denoiseNodeId, initialImageLayer);
+    validLayers.push(initialImageLayer);
+  }
 
   const validRGLayers = state.controlLayers.present.layers
     // Only RG layers are get masks
@@ -393,8 +446,7 @@ export const addControlLayersToGraph = async (state: RootState, graph: NonNullab
       const hasIPAdapter = l.ipAdapters.filter((ipa) => ipa.image).length > 0;
       return hasTextPrompt || hasIPAdapter;
     });
-
-  layersMetadata.push(...validRGLayers, ...validControlAdapterLayers, ...validIPAdapterLayers);
+  validLayers.push(...validRGLayers);
 
   // TODO: We should probably just use conditioning collectors by default, and skip all this fanagling with re-routing
   // the existing conditioning nodes.
@@ -660,7 +712,8 @@ export const addControlLayersToGraph = async (state: RootState, graph: NonNullab
     }
   }
 
-  upsertMetadata(graph, { layers: layersMetadata });
+  upsertMetadata(graph, { layers: validLayers });
+  return validLayers;
 };
 
 const getMaskImage = async (layer: RegionalGuidanceLayer, blob: Blob): Promise<ImageDTO> => {
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildGenerationTabGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildGenerationTabGraph.ts
index 41f9f4f748..a1ee581736 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildGenerationTabGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildGenerationTabGraph.ts
@@ -1,8 +1,8 @@
 import { logger } from 'app/logging/logger';
 import type { RootState } from 'app/store/store';
+import { isInitialImageLayer, isRegionalGuidanceLayer } from 'features/controlLayers/store/controlLayersSlice';
 import { fetchModelConfigWithTypeGuard } from 'features/metadata/util/modelFetchingHelpers';
 import { addControlLayersToGraph } from 'features/nodes/util/graph/addControlLayersToGraph';
-import { addInitialImageToLinearGraph } from 'features/nodes/util/graph/addInitialImageToLinearGraph';
 import { getBoardField, getIsIntermediate } from 'features/nodes/util/graph/graphBuilderUtils';
 import { isNonRefinerMainModelConfig, type NonNullableGraph } from 'services/api/types';
 
@@ -232,24 +232,24 @@ export const buildGenerationTabGraph = async (state: RootState): Promise<NonNull
     LATENTS_TO_IMAGE
   );
 
-  const didAddInitialImage = addInitialImageToLinearGraph(state, graph, DENOISE_LATENTS);
-
   // Add Seamless To Graph
   if (seamlessXAxis || seamlessYAxis) {
     addSeamlessToLinearGraph(state, graph, modelLoaderNodeId);
     modelLoaderNodeId = SEAMLESS;
   }
 
-  // optionally add custom VAE
-  await addVAEToGraph(state, graph, modelLoaderNodeId);
-
   // add LoRA support
   await addLoRAsToGraph(state, graph, DENOISE_LATENTS, modelLoaderNodeId);
 
-  await addControlLayersToGraph(state, graph, DENOISE_LATENTS);
+  const addedLayers = await addControlLayersToGraph(state, graph, DENOISE_LATENTS);
 
+  // optionally add custom VAE
+  await addVAEToGraph(state, graph, modelLoaderNodeId);
+
+  const shouldUseHRF = !addedLayers.some((l) => isInitialImageLayer(l) || isRegionalGuidanceLayer(l));
   // High resolution fix.
-  if (state.hrf.hrfEnabled && !didAddInitialImage) {
+  if (state.hrf.hrfEnabled && shouldUseHRF) {
+    console.log('HRFING');
     addHrfToGraph(state, graph);
   }
 
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildGenerationTabSDXLGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildGenerationTabSDXLGraph.ts
index 900e993602..fbf6b3848c 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildGenerationTabSDXLGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildGenerationTabSDXLGraph.ts
@@ -2,7 +2,6 @@ import { logger } from 'app/logging/logger';
 import type { RootState } from 'app/store/store';
 import { fetchModelConfigWithTypeGuard } from 'features/metadata/util/modelFetchingHelpers';
 import { addControlLayersToGraph } from 'features/nodes/util/graph/addControlLayersToGraph';
-import { addInitialImageToLinearGraph } from 'features/nodes/util/graph/addInitialImageToLinearGraph';
 import { isNonRefinerMainModelConfig, type NonNullableGraph } from 'services/api/types';
 
 import { addNSFWCheckerToGraph } from './addNSFWCheckerToGraph';
@@ -242,8 +241,6 @@ export const buildGenerationTabSDXLGraph = async (state: RootState): Promise<Non
     LATENTS_TO_IMAGE
   );
 
-  addInitialImageToLinearGraph(state, graph, SDXL_DENOISE_LATENTS);
-
   // Add Seamless To Graph
   if (seamlessXAxis || seamlessYAxis) {
     addSeamlessToLinearGraph(state, graph, modelLoaderNodeId);
@@ -258,14 +255,14 @@ export const buildGenerationTabSDXLGraph = async (state: RootState): Promise<Non
     }
   }
 
-  // optionally add custom VAE
-  await addVAEToGraph(state, graph, modelLoaderNodeId);
-
   // add LoRA support
   await addSDXLLoRAsToGraph(state, graph, SDXL_DENOISE_LATENTS, modelLoaderNodeId);
 
   await addControlLayersToGraph(state, graph, SDXL_DENOISE_LATENTS);
 
+  // optionally add custom VAE
+  await addVAEToGraph(state, graph, modelLoaderNodeId);
+
   // NSFW & watermark - must be last thing added to graph
   if (state.system.shouldUseNSFWChecker) {
     // must add before watermarker!

From 00f36cb491b3f67a7bfa4a1c604c01b23d4e162d Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 8 May 2024 15:21:51 +1000
Subject: [PATCH 055/116] tidy(ui): clean up control layers graph builder

---
 .../util/graph/addControlLayersToGraph.ts     | 768 +++++++++---------
 1 file changed, 370 insertions(+), 398 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
index de3456f371..5abbce028b 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
@@ -8,14 +8,12 @@ import {
   rgLayerMaskImageUploaded,
 } from 'features/controlLayers/store/controlLayersSlice';
 import type { InitialImageLayer, Layer, RegionalGuidanceLayer } from 'features/controlLayers/store/types';
-import {
-  type ControlNetConfigV2,
-  type ImageWithDims,
-  type IPAdapterConfigV2,
-  isControlNetConfigV2,
-  isT2IAdapterConfigV2,
-  type ProcessorConfig,
-  type T2IAdapterConfigV2,
+import type {
+  ControlNetConfigV2,
+  ImageWithDims,
+  IPAdapterConfigV2,
+  ProcessorConfig,
+  T2IAdapterConfigV2,
 } from 'features/controlLayers/util/controlAdapters';
 import { getRegionalPromptLayerBlobs } from 'features/controlLayers/util/getLayerBlobs';
 import type { ImageField } from 'features/nodes/types/common';
@@ -40,6 +38,7 @@ import { upsertMetadata } from 'features/nodes/util/graph/metadata';
 import { size } from 'lodash-es';
 import { getImageDTO, imagesApi } from 'services/api/endpoints/images';
 import type {
+  BaseModelType,
   CollectInvocation,
   ControlNetInvocation,
   Edge,
@@ -53,324 +52,6 @@ import type {
 } from 'services/api/types';
 import { assert } from 'tsafe';
 
-const buildControlImage = (
-  image: ImageWithDims | null,
-  processedImage: ImageWithDims | null,
-  processorConfig: ProcessorConfig | null
-): ImageField => {
-  if (processedImage && processorConfig) {
-    // We've processed the image in the app - use it for the control image.
-    return {
-      image_name: processedImage.name,
-    };
-  } else if (image) {
-    // No processor selected, and we have an image - the user provided a processed image, use it for the control image.
-    return {
-      image_name: image.name,
-    };
-  }
-  assert(false, 'Attempted to add unprocessed control image');
-};
-
-const addControlNetCollectorSafe = (graph: NonNullableGraph, denoiseNodeId: string) => {
-  if (graph.nodes[CONTROL_NET_COLLECT]) {
-    // You see, we've already got one!
-    return;
-  }
-  // Add the ControlNet collector
-  const controlNetIterateNode: CollectInvocation = {
-    id: CONTROL_NET_COLLECT,
-    type: 'collect',
-    is_intermediate: true,
-  };
-  graph.nodes[CONTROL_NET_COLLECT] = controlNetIterateNode;
-  graph.edges.push({
-    source: { node_id: CONTROL_NET_COLLECT, field: 'collection' },
-    destination: {
-      node_id: denoiseNodeId,
-      field: 'control',
-    },
-  });
-};
-
-const addGlobalControlNetsToGraph = async (
-  controlNets: ControlNetConfigV2[],
-  graph: NonNullableGraph,
-  denoiseNodeId: string
-) => {
-  if (controlNets.length === 0) {
-    return;
-  }
-  addControlNetCollectorSafe(graph, denoiseNodeId);
-
-  for (const controlNet of controlNets) {
-    if (!controlNet.model) {
-      return;
-    }
-    const { id, beginEndStepPct, controlMode, image, model, processedImage, processorConfig, weight } = controlNet;
-
-    const controlNetNode: ControlNetInvocation = {
-      id: `control_net_${id}`,
-      type: 'controlnet',
-      is_intermediate: true,
-      begin_step_percent: beginEndStepPct[0],
-      end_step_percent: beginEndStepPct[1],
-      control_mode: controlMode,
-      resize_mode: 'just_resize',
-      control_model: model,
-      control_weight: weight,
-      image: buildControlImage(image, processedImage, processorConfig),
-    };
-
-    graph.nodes[controlNetNode.id] = controlNetNode;
-
-    graph.edges.push({
-      source: { node_id: controlNetNode.id, field: 'control' },
-      destination: {
-        node_id: CONTROL_NET_COLLECT,
-        field: 'item',
-      },
-    });
-  }
-};
-
-const addT2IAdapterCollectorSafe = (graph: NonNullableGraph, denoiseNodeId: string) => {
-  if (graph.nodes[T2I_ADAPTER_COLLECT]) {
-    // You see, we've already got one!
-    return;
-  }
-  // Even though denoise_latents' t2i adapter input is collection or scalar, keep it simple and always use a collect
-  const t2iAdapterCollectNode: CollectInvocation = {
-    id: T2I_ADAPTER_COLLECT,
-    type: 'collect',
-    is_intermediate: true,
-  };
-  graph.nodes[T2I_ADAPTER_COLLECT] = t2iAdapterCollectNode;
-  graph.edges.push({
-    source: { node_id: T2I_ADAPTER_COLLECT, field: 'collection' },
-    destination: {
-      node_id: denoiseNodeId,
-      field: 't2i_adapter',
-    },
-  });
-};
-
-const addGlobalT2IAdaptersToGraph = async (
-  t2iAdapters: T2IAdapterConfigV2[],
-  graph: NonNullableGraph,
-  denoiseNodeId: string
-) => {
-  if (t2iAdapters.length === 0) {
-    return;
-  }
-  addT2IAdapterCollectorSafe(graph, denoiseNodeId);
-
-  for (const t2iAdapter of t2iAdapters) {
-    if (!t2iAdapter.model) {
-      return;
-    }
-    const { id, beginEndStepPct, image, model, processedImage, processorConfig, weight } = t2iAdapter;
-
-    const t2iAdapterNode: T2IAdapterInvocation = {
-      id: `t2i_adapter_${id}`,
-      type: 't2i_adapter',
-      is_intermediate: true,
-      begin_step_percent: beginEndStepPct[0],
-      end_step_percent: beginEndStepPct[1],
-      resize_mode: 'just_resize',
-      t2i_adapter_model: model,
-      weight: weight,
-      image: buildControlImage(image, processedImage, processorConfig),
-    };
-
-    graph.nodes[t2iAdapterNode.id] = t2iAdapterNode;
-
-    graph.edges.push({
-      source: { node_id: t2iAdapterNode.id, field: 't2i_adapter' },
-      destination: {
-        node_id: T2I_ADAPTER_COLLECT,
-        field: 'item',
-      },
-    });
-  }
-};
-
-const addIPAdapterCollectorSafe = (graph: NonNullableGraph, denoiseNodeId: string) => {
-  if (graph.nodes[IP_ADAPTER_COLLECT]) {
-    // You see, we've already got one!
-    return;
-  }
-
-  const ipAdapterCollectNode: CollectInvocation = {
-    id: IP_ADAPTER_COLLECT,
-    type: 'collect',
-    is_intermediate: true,
-  };
-  graph.nodes[IP_ADAPTER_COLLECT] = ipAdapterCollectNode;
-  graph.edges.push({
-    source: { node_id: IP_ADAPTER_COLLECT, field: 'collection' },
-    destination: {
-      node_id: denoiseNodeId,
-      field: 'ip_adapter',
-    },
-  });
-};
-
-const addGlobalIPAdaptersToGraph = async (
-  ipAdapters: IPAdapterConfigV2[],
-  graph: NonNullableGraph,
-  denoiseNodeId: string
-) => {
-  if (ipAdapters.length === 0) {
-    return;
-  }
-  addIPAdapterCollectorSafe(graph, denoiseNodeId);
-
-  for (const ipAdapter of ipAdapters) {
-    const { id, weight, model, clipVisionModel, method, beginEndStepPct, image } = ipAdapter;
-    assert(image, 'IP Adapter image is required');
-    assert(model, 'IP Adapter model is required');
-
-    const ipAdapterNode: IPAdapterInvocation = {
-      id: `ip_adapter_${id}`,
-      type: 'ip_adapter',
-      is_intermediate: true,
-      weight,
-      method,
-      ip_adapter_model: model,
-      clip_vision_model: clipVisionModel,
-      begin_step_percent: beginEndStepPct[0],
-      end_step_percent: beginEndStepPct[1],
-      image: {
-        image_name: image.name,
-      },
-    };
-
-    graph.nodes[ipAdapterNode.id] = ipAdapterNode;
-
-    graph.edges.push({
-      source: { node_id: ipAdapterNode.id, field: 'ip_adapter' },
-      destination: {
-        node_id: IP_ADAPTER_COLLECT,
-        field: 'item',
-      },
-    });
-  }
-};
-
-const addInitialImageLayerToGraph = (
-  state: RootState,
-  graph: NonNullableGraph,
-  denoiseNodeId: string,
-  layer: InitialImageLayer
-) => {
-  const { vaePrecision, model } = state.generation;
-  const { refinerModel, refinerStart } = state.sdxl;
-  const { width, height } = state.controlLayers.present.size;
-  assert(layer.isEnabled, 'Initial image layer is not enabled');
-  assert(layer.image, 'Initial image layer has no image');
-
-  const isSDXL = model?.base === 'sdxl';
-  const useRefinerStartEnd = isSDXL && Boolean(refinerModel);
-
-  const denoiseNode = graph.nodes[denoiseNodeId];
-  assert(denoiseNode?.type === 'denoise_latents', `Missing denoise node or incorrect type: ${denoiseNode?.type}`);
-
-  const { denoisingStrength } = layer;
-  denoiseNode.denoising_start = useRefinerStartEnd
-    ? Math.min(refinerStart, 1 - denoisingStrength)
-    : 1 - denoisingStrength;
-  denoiseNode.denoising_end = useRefinerStartEnd ? refinerStart : 1;
-
-  // We conditionally hook the image in depending on if a resize is needed
-  const i2lNode: ImageToLatentsInvocation = {
-    type: 'i2l',
-    id: IMAGE_TO_LATENTS,
-    is_intermediate: true,
-    use_cache: true,
-    fp32: vaePrecision === 'fp32',
-  };
-
-  graph.nodes[i2lNode.id] = i2lNode;
-  graph.edges.push({
-    source: {
-      node_id: IMAGE_TO_LATENTS,
-      field: 'latents',
-    },
-    destination: {
-      node_id: denoiseNode.id,
-      field: 'latents',
-    },
-  });
-
-  if (layer.image.width !== width || layer.image.height !== height) {
-    // The init image needs to be resized to the specified width and height before being passed to `IMAGE_TO_LATENTS`
-
-    // Create a resize node, explicitly setting its image
-    const resizeNode: ImageResizeInvocation = {
-      id: RESIZE,
-      type: 'img_resize',
-      image: {
-        image_name: layer.image.name,
-      },
-      is_intermediate: true,
-      width,
-      height,
-    };
-
-    graph.nodes[RESIZE] = resizeNode;
-
-    // The `RESIZE` node then passes its image to `IMAGE_TO_LATENTS`
-    graph.edges.push({
-      source: { node_id: RESIZE, field: 'image' },
-      destination: {
-        node_id: IMAGE_TO_LATENTS,
-        field: 'image',
-      },
-    });
-
-    // The `RESIZE` node also passes its width and height to `NOISE`
-    graph.edges.push({
-      source: { node_id: RESIZE, field: 'width' },
-      destination: {
-        node_id: NOISE,
-        field: 'width',
-      },
-    });
-
-    graph.edges.push({
-      source: { node_id: RESIZE, field: 'height' },
-      destination: {
-        node_id: NOISE,
-        field: 'height',
-      },
-    });
-  } else {
-    // We are not resizing, so we need to set the image on the `IMAGE_TO_LATENTS` node explicitly
-    i2lNode.image = {
-      image_name: layer.image.name,
-    };
-
-    // Pass the image's dimensions to the `NOISE` node
-    graph.edges.push({
-      source: { node_id: IMAGE_TO_LATENTS, field: 'width' },
-      destination: {
-        node_id: NOISE,
-        field: 'width',
-      },
-    });
-    graph.edges.push({
-      source: { node_id: IMAGE_TO_LATENTS, field: 'height' },
-      destination: {
-        node_id: NOISE,
-        field: 'height',
-      },
-    });
-  }
-
-  upsertMetadata(graph, { generation_mode: isSDXL ? 'sdxl_img2img' : 'img2img' });
-};
-
 export const addControlLayersToGraph = async (
   state: RootState,
   graph: NonNullableGraph,
@@ -380,74 +61,24 @@ export const addControlLayersToGraph = async (
   assert(mainModel, 'Missing main model when building graph');
   const isSDXL = mainModel.base === 'sdxl';
 
-  const validLayers: Layer[] = [];
+  // Filter out layers with incompatible base model, missing control image
+  const validLayers = state.controlLayers.present.layers.filter((l) => isValidLayer(l, mainModel.base));
 
-  // Add global control adapters
-  const validControlAdapterLayers = state.controlLayers.present.layers
-    // Must be a Control Adapter layer
-    .filter(isControlAdapterLayer)
-    // Must be enabled
-    .filter((l) => l.isEnabled)
-    .filter((l) => {
-      const ca = l.controlAdapter;
-      // Must be have a model that matches the current base and must have a control image
-      const hasModel = Boolean(ca.model);
-      const modelMatchesBase = ca.model?.base === mainModel.base;
-      const hasControlImage = ca.image || (ca.processedImage && ca.processorConfig);
-      return hasModel && modelMatchesBase && hasControlImage;
-    });
-  const validControlNets = validControlAdapterLayers.map((l) => l.controlAdapter).filter(isControlNetConfigV2);
-  addGlobalControlNetsToGraph(validControlNets, graph, denoiseNodeId);
-
-  const validT2IAdapters = validControlAdapterLayers.map((l) => l.controlAdapter).filter(isT2IAdapterConfigV2);
-  addGlobalT2IAdaptersToGraph(validT2IAdapters, graph, denoiseNodeId);
-
-  validLayers.push(...validControlAdapterLayers);
-
-  const validIPAdapterLayers = state.controlLayers.present.layers
-    // Must be an IP Adapter layer
-    .filter(isIPAdapterLayer)
-    // Must be enabled
-    .filter((l) => l.isEnabled)
-    // We want the IP Adapters themselves
-    .filter((l) => {
-      const ipa = l.ipAdapter;
-      const hasModel = Boolean(ipa.model);
-      const modelMatchesBase = ipa.model?.base === mainModel.base;
-      const hasImage = Boolean(ipa.image);
-      return hasModel && modelMatchesBase && hasImage;
-    });
-  const validIPAdapters = validIPAdapterLayers.map((l) => l.ipAdapter);
-  addGlobalIPAdaptersToGraph(validIPAdapters, graph, denoiseNodeId);
-  validLayers.push(...validIPAdapterLayers);
-
-  const initialImageLayer = state.controlLayers.present.layers.filter(isInitialImageLayer).find((l) => {
-    if (!l.isEnabled) {
-      return false;
-    }
-    if (!l.image) {
-      return false;
-    }
-    return true;
-  });
-  if (initialImageLayer) {
-    addInitialImageLayerToGraph(state, graph, denoiseNodeId, initialImageLayer);
-    validLayers.push(initialImageLayer);
+  const validControlAdapters = validLayers.filter(isControlAdapterLayer).map((l) => l.controlAdapter);
+  for (const ca of validControlAdapters) {
+    addGlobalControlAdapterToGraph(ca, graph, denoiseNodeId);
   }
 
-  const validRGLayers = state.controlLayers.present.layers
-    // Only RG layers are get masks
-    .filter(isRegionalGuidanceLayer)
-    // Only visible layers are rendered on the canvas
-    .filter((l) => l.isEnabled)
-    // Only layers with prompts get added to the graph
-    .filter((l) => {
-      const hasTextPrompt = Boolean(l.positivePrompt || l.negativePrompt);
-      const hasIPAdapter = l.ipAdapters.filter((ipa) => ipa.image).length > 0;
-      return hasTextPrompt || hasIPAdapter;
-    });
-  validLayers.push(...validRGLayers);
+  const validIPAdapters = validLayers.filter(isIPAdapterLayer).map((l) => l.ipAdapter);
+  for (const ipAdapter of validIPAdapters) {
+    addGlobalIPAdapterToGraph(ipAdapter, graph, denoiseNodeId);
+  }
 
+  const initialImageLayers = validLayers.filter(isInitialImageLayer);
+  assert(initialImageLayers.length <= 1, 'Only one initial image layer allowed');
+  if (initialImageLayers[0]) {
+    addInitialImageLayerToGraph(state, graph, denoiseNodeId, initialImageLayers[0]);
+  }
   // TODO: We should probably just use conditioning collectors by default, and skip all this fanagling with re-routing
   // the existing conditioning nodes.
 
@@ -510,6 +141,7 @@ export const addControlLayersToGraph = async (
     },
   });
 
+  const validRGLayers = validLayers.filter(isRegionalGuidanceLayer);
   const layerIds = validRGLayers.map((l) => l.id);
   const blobs = await getRegionalPromptLayerBlobs(layerIds);
   assert(size(blobs) === size(layerIds), 'Mismatch between layer IDs and blobs');
@@ -665,15 +297,11 @@ export const addControlLayersToGraph = async (
       }
     }
 
-    // TODO(psyche): For some reason, I have to explicitly annotate regionalIPAdapters here. Not sure why.
-    const regionalIPAdapters: IPAdapterConfigV2[] = layer.ipAdapters.filter((ipAdapter) => {
-      const hasModel = Boolean(ipAdapter.model);
-      const modelMatchesBase = ipAdapter.model?.base === mainModel.base;
-      const hasControlImage = Boolean(ipAdapter.image);
-      return hasModel && modelMatchesBase && hasControlImage;
-    });
+    const validRegionalIPAdapters: IPAdapterConfigV2[] = layer.ipAdapters.filter((ipa) =>
+      isValidIPAdapter(ipa, mainModel.base)
+    );
 
-    for (const ipAdapter of regionalIPAdapters) {
+    for (const ipAdapter of validRegionalIPAdapters) {
       addIPAdapterCollectorSafe(graph, denoiseNodeId);
       const { id, weight, model, clipVisionModel, method, beginEndStepPct, image } = ipAdapter;
       assert(model, 'IP Adapter model is required');
@@ -735,3 +363,347 @@ const getMaskImage = async (layer: RegionalGuidanceLayer, blob: Blob): Promise<I
   dispatch(rgLayerMaskImageUploaded({ layerId: layer.id, imageDTO }));
   return imageDTO;
 };
+
+const buildControlImage = (
+  image: ImageWithDims | null,
+  processedImage: ImageWithDims | null,
+  processorConfig: ProcessorConfig | null
+): ImageField => {
+  if (processedImage && processorConfig) {
+    // We've processed the image in the app - use it for the control image.
+    return {
+      image_name: processedImage.name,
+    };
+  } else if (image) {
+    // No processor selected, and we have an image - the user provided a processed image, use it for the control image.
+    return {
+      image_name: image.name,
+    };
+  }
+  assert(false, 'Attempted to add unprocessed control image');
+};
+
+const addGlobalControlAdapterToGraph = (
+  controlAdapter: ControlNetConfigV2 | T2IAdapterConfigV2,
+  graph: NonNullableGraph,
+  denoiseNodeId: string
+) => {
+  if (controlAdapter.type === 'controlnet') {
+    addGlobalControlNetToGraph(controlAdapter, graph, denoiseNodeId);
+  }
+  if (controlAdapter.type === 't2i_adapter') {
+    addGlobalT2IAdapterToGraph(controlAdapter, graph, denoiseNodeId);
+  }
+};
+
+const addControlNetCollectorSafe = (graph: NonNullableGraph, denoiseNodeId: string) => {
+  if (graph.nodes[CONTROL_NET_COLLECT]) {
+    // You see, we've already got one!
+    return;
+  }
+  // Add the ControlNet collector
+  const controlNetIterateNode: CollectInvocation = {
+    id: CONTROL_NET_COLLECT,
+    type: 'collect',
+    is_intermediate: true,
+  };
+  graph.nodes[CONTROL_NET_COLLECT] = controlNetIterateNode;
+  graph.edges.push({
+    source: { node_id: CONTROL_NET_COLLECT, field: 'collection' },
+    destination: {
+      node_id: denoiseNodeId,
+      field: 'control',
+    },
+  });
+};
+
+const addGlobalControlNetToGraph = (controlNet: ControlNetConfigV2, graph: NonNullableGraph, denoiseNodeId: string) => {
+  const { id, beginEndStepPct, controlMode, image, model, processedImage, processorConfig, weight } = controlNet;
+  assert(model, 'ControlNet model is required');
+  const controlImage = buildControlImage(image, processedImage, processorConfig);
+  addControlNetCollectorSafe(graph, denoiseNodeId);
+
+  const controlNetNode: ControlNetInvocation = {
+    id: `control_net_${id}`,
+    type: 'controlnet',
+    is_intermediate: true,
+    begin_step_percent: beginEndStepPct[0],
+    end_step_percent: beginEndStepPct[1],
+    control_mode: controlMode,
+    resize_mode: 'just_resize',
+    control_model: model,
+    control_weight: weight,
+    image: controlImage,
+  };
+
+  graph.nodes[controlNetNode.id] = controlNetNode;
+
+  graph.edges.push({
+    source: { node_id: controlNetNode.id, field: 'control' },
+    destination: {
+      node_id: CONTROL_NET_COLLECT,
+      field: 'item',
+    },
+  });
+};
+
+const addT2IAdapterCollectorSafe = (graph: NonNullableGraph, denoiseNodeId: string) => {
+  if (graph.nodes[T2I_ADAPTER_COLLECT]) {
+    // You see, we've already got one!
+    return;
+  }
+  // Even though denoise_latents' t2i adapter input is collection or scalar, keep it simple and always use a collect
+  const t2iAdapterCollectNode: CollectInvocation = {
+    id: T2I_ADAPTER_COLLECT,
+    type: 'collect',
+    is_intermediate: true,
+  };
+  graph.nodes[T2I_ADAPTER_COLLECT] = t2iAdapterCollectNode;
+  graph.edges.push({
+    source: { node_id: T2I_ADAPTER_COLLECT, field: 'collection' },
+    destination: {
+      node_id: denoiseNodeId,
+      field: 't2i_adapter',
+    },
+  });
+};
+
+const addGlobalT2IAdapterToGraph = (t2iAdapter: T2IAdapterConfigV2, graph: NonNullableGraph, denoiseNodeId: string) => {
+  const { id, beginEndStepPct, image, model, processedImage, processorConfig, weight } = t2iAdapter;
+  assert(model, 'T2I Adapter model is required');
+  const controlImage = buildControlImage(image, processedImage, processorConfig);
+  addT2IAdapterCollectorSafe(graph, denoiseNodeId);
+
+  const t2iAdapterNode: T2IAdapterInvocation = {
+    id: `t2i_adapter_${id}`,
+    type: 't2i_adapter',
+    is_intermediate: true,
+    begin_step_percent: beginEndStepPct[0],
+    end_step_percent: beginEndStepPct[1],
+    resize_mode: 'just_resize',
+    t2i_adapter_model: model,
+    weight: weight,
+    image: controlImage,
+  };
+
+  graph.nodes[t2iAdapterNode.id] = t2iAdapterNode;
+
+  graph.edges.push({
+    source: { node_id: t2iAdapterNode.id, field: 't2i_adapter' },
+    destination: {
+      node_id: T2I_ADAPTER_COLLECT,
+      field: 'item',
+    },
+  });
+};
+
+const addIPAdapterCollectorSafe = (graph: NonNullableGraph, denoiseNodeId: string) => {
+  if (graph.nodes[IP_ADAPTER_COLLECT]) {
+    // You see, we've already got one!
+    return;
+  }
+
+  const ipAdapterCollectNode: CollectInvocation = {
+    id: IP_ADAPTER_COLLECT,
+    type: 'collect',
+    is_intermediate: true,
+  };
+  graph.nodes[IP_ADAPTER_COLLECT] = ipAdapterCollectNode;
+  graph.edges.push({
+    source: { node_id: IP_ADAPTER_COLLECT, field: 'collection' },
+    destination: {
+      node_id: denoiseNodeId,
+      field: 'ip_adapter',
+    },
+  });
+};
+
+const addGlobalIPAdapterToGraph = (ipAdapter: IPAdapterConfigV2, graph: NonNullableGraph, denoiseNodeId: string) => {
+  addIPAdapterCollectorSafe(graph, denoiseNodeId);
+  const { id, weight, model, clipVisionModel, method, beginEndStepPct, image } = ipAdapter;
+  assert(image, 'IP Adapter image is required');
+  assert(model, 'IP Adapter model is required');
+
+  const ipAdapterNode: IPAdapterInvocation = {
+    id: `ip_adapter_${id}`,
+    type: 'ip_adapter',
+    is_intermediate: true,
+    weight,
+    method,
+    ip_adapter_model: model,
+    clip_vision_model: clipVisionModel,
+    begin_step_percent: beginEndStepPct[0],
+    end_step_percent: beginEndStepPct[1],
+    image: {
+      image_name: image.name,
+    },
+  };
+
+  graph.nodes[ipAdapterNode.id] = ipAdapterNode;
+
+  graph.edges.push({
+    source: { node_id: ipAdapterNode.id, field: 'ip_adapter' },
+    destination: {
+      node_id: IP_ADAPTER_COLLECT,
+      field: 'item',
+    },
+  });
+};
+
+const addInitialImageLayerToGraph = (
+  state: RootState,
+  graph: NonNullableGraph,
+  denoiseNodeId: string,
+  layer: InitialImageLayer
+) => {
+  const { vaePrecision, model } = state.generation;
+  const { refinerModel, refinerStart } = state.sdxl;
+  const { width, height } = state.controlLayers.present.size;
+  assert(layer.isEnabled, 'Initial image layer is not enabled');
+  assert(layer.image, 'Initial image layer has no image');
+
+  const isSDXL = model?.base === 'sdxl';
+  const useRefinerStartEnd = isSDXL && Boolean(refinerModel);
+
+  const denoiseNode = graph.nodes[denoiseNodeId];
+  assert(denoiseNode?.type === 'denoise_latents', `Missing denoise node or incorrect type: ${denoiseNode?.type}`);
+
+  const { denoisingStrength } = layer;
+  denoiseNode.denoising_start = useRefinerStartEnd
+    ? Math.min(refinerStart, 1 - denoisingStrength)
+    : 1 - denoisingStrength;
+  denoiseNode.denoising_end = useRefinerStartEnd ? refinerStart : 1;
+
+  const i2lNode: ImageToLatentsInvocation = {
+    type: 'i2l',
+    id: IMAGE_TO_LATENTS,
+    is_intermediate: true,
+    use_cache: true,
+    fp32: vaePrecision === 'fp32',
+  };
+
+  graph.nodes[i2lNode.id] = i2lNode;
+  graph.edges.push({
+    source: {
+      node_id: IMAGE_TO_LATENTS,
+      field: 'latents',
+    },
+    destination: {
+      node_id: denoiseNode.id,
+      field: 'latents',
+    },
+  });
+
+  if (layer.image.width !== width || layer.image.height !== height) {
+    // The init image needs to be resized to the specified width and height before being passed to `IMAGE_TO_LATENTS`
+
+    // Create a resize node, explicitly setting its image
+    const resizeNode: ImageResizeInvocation = {
+      id: RESIZE,
+      type: 'img_resize',
+      image: {
+        image_name: layer.image.name,
+      },
+      is_intermediate: true,
+      width,
+      height,
+    };
+
+    graph.nodes[RESIZE] = resizeNode;
+
+    // The `RESIZE` node then passes its image to `IMAGE_TO_LATENTS`
+    graph.edges.push({
+      source: { node_id: RESIZE, field: 'image' },
+      destination: {
+        node_id: IMAGE_TO_LATENTS,
+        field: 'image',
+      },
+    });
+
+    // The `RESIZE` node also passes its width and height to `NOISE`
+    graph.edges.push({
+      source: { node_id: RESIZE, field: 'width' },
+      destination: {
+        node_id: NOISE,
+        field: 'width',
+      },
+    });
+
+    graph.edges.push({
+      source: { node_id: RESIZE, field: 'height' },
+      destination: {
+        node_id: NOISE,
+        field: 'height',
+      },
+    });
+  } else {
+    // We are not resizing, so we need to set the image on the `IMAGE_TO_LATENTS` node explicitly
+    i2lNode.image = {
+      image_name: layer.image.name,
+    };
+
+    // Pass the image's dimensions to the `NOISE` node
+    graph.edges.push({
+      source: { node_id: IMAGE_TO_LATENTS, field: 'width' },
+      destination: {
+        node_id: NOISE,
+        field: 'width',
+      },
+    });
+    graph.edges.push({
+      source: { node_id: IMAGE_TO_LATENTS, field: 'height' },
+      destination: {
+        node_id: NOISE,
+        field: 'height',
+      },
+    });
+  }
+
+  upsertMetadata(graph, { generation_mode: isSDXL ? 'sdxl_img2img' : 'img2img' });
+};
+
+const isValidControlAdapter = (ca: ControlNetConfigV2 | T2IAdapterConfigV2, base: BaseModelType): boolean => {
+  // Must be have a model that matches the current base and must have a control image
+  const hasModel = Boolean(ca.model);
+  const modelMatchesBase = ca.model?.base === base;
+  const hasControlImage = Boolean(ca.image || (ca.processedImage && ca.processorConfig));
+  return hasModel && modelMatchesBase && hasControlImage;
+};
+
+const isValidIPAdapter = (ipa: IPAdapterConfigV2, base: BaseModelType): boolean => {
+  // Must be have a model that matches the current base and must have a control image
+  const hasModel = Boolean(ipa.model);
+  const modelMatchesBase = ipa.model?.base === base;
+  const hasImage = Boolean(ipa.image);
+  return hasModel && modelMatchesBase && hasImage;
+};
+
+const isValidLayer = (layer: Layer, base: BaseModelType) => {
+  if (isControlAdapterLayer(layer)) {
+    if (!layer.isEnabled) {
+      return false;
+    }
+    return isValidControlAdapter(layer.controlAdapter, base);
+  }
+  if (isIPAdapterLayer(layer)) {
+    if (!layer.isEnabled) {
+      return false;
+    }
+    return isValidIPAdapter(layer.ipAdapter, base);
+  }
+  if (isInitialImageLayer(layer)) {
+    if (!layer.isEnabled) {
+      return false;
+    }
+    if (!layer.image) {
+      return false;
+    }
+    return true;
+  }
+  if (isRegionalGuidanceLayer(layer)) {
+    const hasTextPrompt = Boolean(layer.positivePrompt || layer.negativePrompt);
+    const hasIPAdapter = layer.ipAdapters.filter((ipa) => isValidIPAdapter(ipa, base)).length > 0;
+    return hasTextPrompt || hasIPAdapter;
+  }
+  return false;
+};

From 23ad6fb730013c40c83c87393ac191f74ff363c2 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 8 May 2024 15:49:19 +1000
Subject: [PATCH 056/116] feat(ui): handle missing images/models when recalling
 control layers

---
 .../src/features/metadata/util/recallers.ts   | 89 ++++++++++++++++---
 .../src/features/metadata/util/validators.ts  | 11 +--
 2 files changed, 79 insertions(+), 21 deletions(-)

diff --git a/invokeai/frontend/web/src/features/metadata/util/recallers.ts b/invokeai/frontend/web/src/features/metadata/util/recallers.ts
index 09c405c3d6..673e2187f2 100644
--- a/invokeai/frontend/web/src/features/metadata/util/recallers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/recallers.ts
@@ -1,4 +1,5 @@
 import { getStore } from 'app/store/nanostores/store';
+import { deepClone } from 'common/util/deepClone';
 import {
   controlAdapterRecalled,
   controlNetsReset,
@@ -28,6 +29,7 @@ import type {
   MetadataRecallFunc,
   T2IAdapterConfigMetadata,
 } from 'features/metadata/types';
+import { fetchModelConfigByIdentifier } from 'features/metadata/util/modelFetchingHelpers';
 import { modelSelected } from 'features/parameters/store/actions';
 import {
   setCfgRescaleMultiplier,
@@ -69,6 +71,7 @@ import {
   setRefinerStart,
   setRefinerSteps,
 } from 'features/sdxl/store/sdxlSlice';
+import { getImageDTO } from 'services/api/endpoints/images';
 
 const recallPositivePrompt: MetadataRecallFunc<ParameterPositivePrompt> = (positivePrompt) => {
   getStore().dispatch(positivePromptChanged(positivePrompt));
@@ -237,21 +240,79 @@ const recallIPAdapters: MetadataRecallFunc<IPAdapterConfigMetadata[]> = (ipAdapt
 };
 
 //#region Control Layers
-const recallLayer: MetadataRecallFunc<Layer> = (layer) => {
+const recallLayer: MetadataRecallFunc<Layer> = async (layer) => {
   const { dispatch } = getStore();
-  switch (layer.type) {
-    case 'control_adapter_layer':
-      dispatch(caLayerRecalled(layer));
-      break;
-    case 'ip_adapter_layer':
-      dispatch(ipaLayerRecalled(layer));
-      break;
-    case 'regional_guidance_layer':
-      dispatch(rgLayerRecalled(layer));
-      break;
-    case 'initial_image_layer':
-      dispatch(iiLayerRecalled(layer));
-      break;
+  // We need to check for the existence of all images and models when recalling. If they do not exist, SMITE THEM!
+  if (layer.type === 'control_adapter_layer') {
+    const clone = deepClone(layer);
+    if (clone.controlAdapter.image) {
+      const imageDTO = await getImageDTO(clone.controlAdapter.image.name);
+      if (!imageDTO) {
+        clone.controlAdapter.image = null;
+      }
+    }
+    if (clone.controlAdapter.processedImage) {
+      const imageDTO = await getImageDTO(clone.controlAdapter.processedImage.name);
+      if (!imageDTO) {
+        clone.controlAdapter.processedImage = null;
+      }
+    }
+    if (clone.controlAdapter.model) {
+      try {
+        await fetchModelConfigByIdentifier(clone.controlAdapter.model);
+      } catch {
+        clone.controlAdapter.model = null;
+      }
+    }
+    dispatch(caLayerRecalled(clone));
+    return;
+  }
+  if (layer.type === 'ip_adapter_layer') {
+    const clone = deepClone(layer);
+    if (clone.ipAdapter.image) {
+      const imageDTO = await getImageDTO(clone.ipAdapter.image.name);
+      if (!imageDTO) {
+        clone.ipAdapter.image = null;
+      }
+    }
+    if (clone.ipAdapter.model) {
+      try {
+        await fetchModelConfigByIdentifier(clone.ipAdapter.model);
+      } catch {
+        clone.ipAdapter.model = null;
+      }
+    }
+    dispatch(ipaLayerRecalled(clone));
+    return;
+  }
+
+  if (layer.type === 'regional_guidance_layer') {
+    const clone = deepClone(layer);
+    // Strip out the uploaded mask image property - this is an intermediate image
+    clone.uploadedMaskImage = null;
+
+    for (const ipAdapter of clone.ipAdapters) {
+      if (ipAdapter.image) {
+        const imageDTO = await getImageDTO(ipAdapter.image.name);
+        if (!imageDTO) {
+          ipAdapter.image = null;
+        }
+      }
+      if (ipAdapter.model) {
+        try {
+          await fetchModelConfigByIdentifier(ipAdapter.model);
+        } catch {
+          ipAdapter.model = null;
+        }
+      }
+    }
+    dispatch(rgLayerRecalled(clone));
+    return;
+  }
+
+  if (layer.type === 'initial_image_layer') {
+    dispatch(iiLayerRecalled(layer));
+    return;
   }
 };
 
diff --git a/invokeai/frontend/web/src/features/metadata/util/validators.ts b/invokeai/frontend/web/src/features/metadata/util/validators.ts
index a308021a1e..759e8ba561 100644
--- a/invokeai/frontend/web/src/features/metadata/util/validators.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/validators.ts
@@ -7,7 +7,7 @@ import type {
   MetadataValidateFunc,
   T2IAdapterConfigMetadata,
 } from 'features/metadata/types';
-import { fetchModelConfigByIdentifier, InvalidModelConfigError } from 'features/metadata/util/modelFetchingHelpers';
+import { InvalidModelConfigError } from 'features/metadata/util/modelFetchingHelpers';
 import type { ParameterSDXLRefinerModel, ParameterVAEModel } from 'features/parameters/types/parameterSchemas';
 import type { BaseModelType } from 'services/api/types';
 import { assert } from 'tsafe';
@@ -115,32 +115,29 @@ const validateLayer: MetadataValidateFunc<Layer> = async (layer) => {
     const model = layer.controlAdapter.model;
     assert(model, 'Control Adapter layer missing model');
     validateBaseCompatibility(model.base, 'Layer incompatible with currently-selected model');
-    fetchModelConfigByIdentifier(model);
   }
   if (layer.type === 'ip_adapter_layer') {
     const model = layer.ipAdapter.model;
     assert(model, 'IP Adapter layer missing model');
     validateBaseCompatibility(model.base, 'Layer incompatible with currently-selected model');
-    fetchModelConfigByIdentifier(model);
   }
   if (layer.type === 'regional_guidance_layer') {
     for (const ipa of layer.ipAdapters) {
       const model = ipa.model;
       assert(model, 'IP Adapter layer missing model');
       validateBaseCompatibility(model.base, 'Layer incompatible with currently-selected model');
-      fetchModelConfigByIdentifier(model);
     }
   }
 
   return layer;
 };
 
-const validateLayers: MetadataValidateFunc<Layer[]> = (layers) => {
+const validateLayers: MetadataValidateFunc<Layer[]> = async (layers) => {
   const validatedLayers: Layer[] = [];
   for (const l of layers) {
     try {
-      validateLayer(l);
-      validatedLayers.push(l);
+      const validated = await validateLayer(l);
+      validatedLayers.push(validated);
     } catch {
       // This is a no-op - we want to continue validating the rest of the layers, and an empty list is valid.
     }

From e9d2ffe3d77c969fba8deb0022bf34e6aee851fe Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 8 May 2024 15:49:51 +1000
Subject: [PATCH 057/116] fix(ui): process control image on recall if no
 processed image

---
 .../listeners/controlAdapterPreprocessor.ts                  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlAdapterPreprocessor.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlAdapterPreprocessor.ts
index 7d5aa27f20..92c3e7afa7 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlAdapterPreprocessor.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlAdapterPreprocessor.ts
@@ -8,6 +8,7 @@ import {
   caLayerModelChanged,
   caLayerProcessedImageChanged,
   caLayerProcessorConfigChanged,
+  caLayerRecalled,
   isControlAdapterLayer,
 } from 'features/controlLayers/store/controlLayersSlice';
 import { CA_PROCESSOR_DATA } from 'features/controlLayers/util/controlAdapters';
@@ -20,7 +21,7 @@ import { queueApi } from 'services/api/endpoints/queue';
 import type { BatchConfig, ImageDTO } from 'services/api/types';
 import { socketInvocationComplete } from 'services/events/actions';
 
-const matcher = isAnyOf(caLayerImageChanged, caLayerProcessorConfigChanged, caLayerModelChanged);
+const matcher = isAnyOf(caLayerImageChanged, caLayerProcessorConfigChanged, caLayerModelChanged, caLayerRecalled);
 
 const DEBOUNCE_MS = 300;
 const log = logger('session');
@@ -29,7 +30,7 @@ export const addControlAdapterPreprocessor = (startAppListening: AppStartListeni
   startAppListening({
     matcher,
     effect: async (action, { dispatch, getState, getOriginalState, cancelActiveListeners, delay, take }) => {
-      const { layerId } = action.payload;
+      const layerId = caLayerRecalled.match(action) ? action.payload.id : action.payload.layerId;
       const precheckLayerOriginal = getOriginalState()
         .controlLayers.present.layers.filter(isControlAdapterLayer)
         .find((l) => l.id === layerId);

From a3a6449786377578401f384574fee4d10c17732d Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 8 May 2024 16:00:16 +1000
Subject: [PATCH 058/116] feat(ui): versioned control layers metadata

---
 invokeai/frontend/web/src/features/metadata/util/parsers.ts    | 3 ++-
 .../src/features/nodes/util/graph/addControlLayersToGraph.ts   | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/metadata/util/parsers.ts b/invokeai/frontend/web/src/features/metadata/util/parsers.ts
index c17463c986..213a4666fe 100644
--- a/invokeai/frontend/web/src/features/metadata/util/parsers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/parsers.ts
@@ -435,7 +435,8 @@ const parseLayer: MetadataParseFunc<Layer> = async (metadataItem) => zLayer.pars
 
 const parseLayers: MetadataParseFunc<Layer[]> = async (metadata) => {
   try {
-    const layersRaw = await getProperty(metadata, 'layers', isArray);
+    const control_layers = await getProperty(metadata, 'control_layers');
+    const layersRaw = await getProperty(control_layers, 'layers', isArray);
     const parseResults = await Promise.allSettled(layersRaw.map(parseLayer));
     const layers = parseResults
       .filter((result): result is PromiseFulfilledResult<Layer> => result.status === 'fulfilled')
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
index 5abbce028b..6f249fd522 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
@@ -340,7 +340,7 @@ export const addControlLayersToGraph = async (
     }
   }
 
-  upsertMetadata(graph, { layers: validLayers });
+  upsertMetadata(graph, { control_layers: { layers: validLayers, version: state.controlLayers.present._version } });
   return validLayers;
 };
 

From e8023c44b0eef64692af054d7a37e2348c6ebc52 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 8 May 2024 16:01:34 +1000
Subject: [PATCH 059/116] chore(ui): lint

---
 .../controlLayers/util/controlAdapters.ts     |   6 -
 .../graph/addInitialImageToLinearGraph.ts     | 133 ------------------
 2 files changed, 139 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/features/nodes/util/graph/addInitialImageToLinearGraph.ts

diff --git a/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts b/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
index b643e4a64d..070ca64b32 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
@@ -214,18 +214,12 @@ export const zControlNetConfigV2 = zControlAdapterBase.extend({
 });
 export type ControlNetConfigV2 = z.infer<typeof zControlNetConfigV2>;
 
-export const isControlNetConfigV2 = (ca: ControlNetConfigV2 | T2IAdapterConfigV2): ca is ControlNetConfigV2 =>
-  zControlNetConfigV2.safeParse(ca).success;
-
 export const zT2IAdapterConfigV2 = zControlAdapterBase.extend({
   type: z.literal('t2i_adapter'),
   model: zModelIdentifierField.nullable(),
 });
 export type T2IAdapterConfigV2 = z.infer<typeof zT2IAdapterConfigV2>;
 
-export const isT2IAdapterConfigV2 = (ca: ControlNetConfigV2 | T2IAdapterConfigV2): ca is T2IAdapterConfigV2 =>
-  zT2IAdapterConfigV2.safeParse(ca).success;
-
 const zCLIPVisionModelV2 = z.enum(['ViT-H', 'ViT-G']);
 export type CLIPVisionModelV2 = z.infer<typeof zCLIPVisionModelV2>;
 export const isCLIPVisionModelV2 = (v: unknown): v is CLIPVisionModelV2 => zCLIPVisionModelV2.safeParse(v).success;
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addInitialImageToLinearGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addInitialImageToLinearGraph.ts
deleted file mode 100644
index 2460b187a4..0000000000
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addInitialImageToLinearGraph.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import type { RootState } from 'app/store/store';
-import { isInitialImageLayer } from 'features/controlLayers/store/controlLayersSlice';
-import { upsertMetadata } from 'features/nodes/util/graph/metadata';
-import type { ImageResizeInvocation, ImageToLatentsInvocation, NonNullableGraph } from 'services/api/types';
-import { assert } from 'tsafe';
-
-import { IMAGE_TO_LATENTS, NOISE, RESIZE } from './constants';
-
-/**
- * Returns true if an initial image was added, false if not.
- */
-export const addInitialImageToLinearGraph = (
-  state: RootState,
-  graph: NonNullableGraph,
-  denoiseNodeId: string
-): boolean => {
-  // Remove Existing UNet Connections
-  const { vaePrecision, model } = state.generation;
-  const { refinerModel, refinerStart } = state.sdxl;
-  const { width, height } = state.controlLayers.present.size;
-  const initialImageLayer = state.controlLayers.present.layers.find(isInitialImageLayer);
-  const initialImage = initialImageLayer?.isEnabled ? initialImageLayer?.image : null;
-
-  if (!initialImage || !initialImageLayer) {
-    return false;
-  }
-
-  const isSDXL = model?.base === 'sdxl';
-  const useRefinerStartEnd = isSDXL && Boolean(refinerModel);
-
-  const denoiseNode = graph.nodes[denoiseNodeId];
-  assert(denoiseNode?.type === 'denoise_latents', `Missing denoise node or incorrect type: ${denoiseNode?.type}`);
-
-  const { denoisingStrength } = initialImageLayer;
-  denoiseNode.denoising_start = useRefinerStartEnd
-    ? Math.min(refinerStart, 1 - denoisingStrength)
-    : 1 - denoisingStrength;
-  denoiseNode.denoising_end = useRefinerStartEnd ? refinerStart : 1;
-
-  // We conditionally hook the image in depending on if a resize is needed
-  const i2lNode: ImageToLatentsInvocation = {
-    type: 'i2l',
-    id: IMAGE_TO_LATENTS,
-    is_intermediate: true,
-    use_cache: true,
-    fp32: vaePrecision === 'fp32',
-  };
-
-  graph.nodes[i2lNode.id] = i2lNode;
-  graph.edges.push({
-    source: {
-      node_id: IMAGE_TO_LATENTS,
-      field: 'latents',
-    },
-    destination: {
-      node_id: denoiseNode.id,
-      field: 'latents',
-    },
-  });
-
-  if (initialImage.width !== width || initialImage.height !== height) {
-    // The init image needs to be resized to the specified width and height before being passed to `IMAGE_TO_LATENTS`
-
-    // Create a resize node, explicitly setting its image
-    const resizeNode: ImageResizeInvocation = {
-      id: RESIZE,
-      type: 'img_resize',
-      image: {
-        image_name: initialImage.name,
-      },
-      is_intermediate: true,
-      width,
-      height,
-    };
-
-    graph.nodes[RESIZE] = resizeNode;
-
-    // The `RESIZE` node then passes its image to `IMAGE_TO_LATENTS`
-    graph.edges.push({
-      source: { node_id: RESIZE, field: 'image' },
-      destination: {
-        node_id: IMAGE_TO_LATENTS,
-        field: 'image',
-      },
-    });
-
-    // The `RESIZE` node also passes its width and height to `NOISE`
-    graph.edges.push({
-      source: { node_id: RESIZE, field: 'width' },
-      destination: {
-        node_id: NOISE,
-        field: 'width',
-      },
-    });
-
-    graph.edges.push({
-      source: { node_id: RESIZE, field: 'height' },
-      destination: {
-        node_id: NOISE,
-        field: 'height',
-      },
-    });
-  } else {
-    // We are not resizing, so we need to set the image on the `IMAGE_TO_LATENTS` node explicitly
-    i2lNode.image = {
-      image_name: initialImage.name,
-    };
-
-    // Pass the image's dimensions to the `NOISE` node
-    graph.edges.push({
-      source: { node_id: IMAGE_TO_LATENTS, field: 'width' },
-      destination: {
-        node_id: NOISE,
-        field: 'width',
-      },
-    });
-    graph.edges.push({
-      source: { node_id: IMAGE_TO_LATENTS, field: 'height' },
-      destination: {
-        node_id: NOISE,
-        field: 'height',
-      },
-    });
-  }
-
-  upsertMetadata(graph, {
-    generation_mode: isSDXL ? 'sdxl_img2img' : 'img2img',
-    strength: denoisingStrength,
-    init_image: initialImage.name,
-  });
-
-  return true;
-};

From e8e764be20aa5eb13ca987be335b97f669c2a55d Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 8 May 2024 17:38:18 +1000
Subject: [PATCH 060/116] feat(ui): revise image viewer

- Viewer only exists on Generation tab
- Viewer defaults to open
- When clicking the Control Layers tab on the left panel, close the viewer (i.e. open the CL editor)
- Do not switch to editor when adding layers (this is handled by clicking the Control Layers tab)
- Do not open viewer when single-clicking images in gallery
- _Do_ open viewer when _double_-clicking images in gallery
- Do not change viewer state when switching between app tabs (this no longer makes sense; the viewer only exists on generation tab)
- Change the button to a drop down menu that states what you are currently doing, e.g. Viewing vs Editing
---
 invokeai/frontend/web/public/locales/en.json  |  11 +-
 .../listeners/galleryImageClicked.ts          |   3 +-
 .../web/src/common/components/IAIDndImage.tsx |   2 +
 .../IAICanvasToolbar/IAICanvasToolbar.tsx     | 177 ++++++++----------
 .../components/ControlLayersToolbar.tsx       |   4 +-
 .../components/ImageGrid/GalleryImage.tsx     |   6 +
 .../components/ImageViewer/EditorButton.tsx   |  39 ----
 .../components/ImageViewer/ImageViewer.tsx    |   4 +-
 .../ImageViewer/ImageViewerWorkflows.tsx      |  45 +++++
 .../components/ImageViewer/ViewerButton.tsx   |  25 ---
 .../ImageViewer/ViewerToggleMenu.tsx          |  67 +++++++
 .../features/gallery/store/gallerySlice.ts    |  10 +-
 .../flow/panels/TopPanel/TopPanel.tsx         |   2 -
 .../src/features/ui/components/InvokeTabs.tsx |   4 +-
 .../components/ParametersPanelTextToImage.tsx |  24 ++-
 .../features/ui/components/tabs/NodesTab.tsx  |  11 ++
 .../ui/components/tabs/TextToImageTab.tsx     |   2 +
 17 files changed, 249 insertions(+), 187 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx
 create mode 100644 invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewerWorkflows.tsx
 delete mode 100644 invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx
 create mode 100644 invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 375f691ab2..cfed635570 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -142,9 +142,11 @@
         "blue": "Blue",
         "alpha": "Alpha",
         "selected": "Selected",
-        "viewer": "Viewer",
         "tab": "Tab",
-        "close": "Close"
+        "viewing": "Viewing",
+        "viewingDesc": "Review images in a large gallery view",
+        "editing": "Editing",
+        "editingDesc": "Edit on the Control Layers canvas"
     },
     "controlnet": {
         "controlAdapter_one": "Control Adapter",
@@ -365,10 +367,7 @@
         "bulkDownloadRequestFailed": "Problem Preparing Download",
         "bulkDownloadFailed": "Download Failed",
         "problemDeletingImages": "Problem Deleting Images",
-        "problemDeletingImagesDesc": "One or more images could not be deleted",
-        "switchTo": "Switch to {{ tab }} (Z)",
-        "openFloatingViewer": "Open Floating Viewer",
-        "closeFloatingViewer": "Close Floating Viewer"
+        "problemDeletingImagesDesc": "One or more images could not be deleted"
     },
     "hotkeys": {
         "searchHotkeys": "Search Hotkeys",
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts
index 6b8c9b4ea3..67c6d076ee 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts
@@ -1,7 +1,7 @@
 import { createAction } from '@reduxjs/toolkit';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors';
-import { isImageViewerOpenChanged, selectionChanged } from 'features/gallery/store/gallerySlice';
+import { selectionChanged } from 'features/gallery/store/gallerySlice';
 import { imagesApi } from 'services/api/endpoints/images';
 import type { ImageDTO } from 'services/api/types';
 import { imagesSelectors } from 'services/api/util';
@@ -62,7 +62,6 @@ export const addGalleryImageClickedListener = (startAppListening: AppStartListen
       } else {
         dispatch(selectionChanged([imageDTO]));
       }
-      dispatch(isImageViewerOpenChanged(true));
     },
   });
 };
diff --git a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
index 01107c21b4..2712334e1e 100644
--- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
@@ -70,6 +70,7 @@ const IAIDndImage = (props: IAIDndImageProps) => {
     onMouseOver,
     onMouseOut,
     dataTestId,
+    ...rest
   } = props;
 
   const [isHovered, setIsHovered] = useState(false);
@@ -138,6 +139,7 @@ const IAIDndImage = (props: IAIDndImageProps) => {
           minH={minSize ? minSize : undefined}
           userSelect="none"
           cursor={isDragDisabled || !imageDTO ? 'default' : 'pointer'}
+          {...rest}
         >
           {imageDTO && (
             <Flex
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
index 15d38b9f76..9b45bb3860 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
@@ -22,7 +22,6 @@ import {
 } from 'features/canvas/store/canvasSlice';
 import type { CanvasLayer } from 'features/canvas/store/canvasTypes';
 import { LAYER_NAMES_DICT } from 'features/canvas/store/canvasTypes';
-import { ViewerButton } from 'features/gallery/components/ImageViewer/ViewerButton';
 import { memo, useCallback, useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
@@ -221,106 +220,96 @@ const IAICanvasToolbar = () => {
 
   return (
     <Flex w="full" gap={2} alignItems="center">
-      <Flex flex={1} justifyContent="center">
-        <Flex gap={2} marginInlineEnd="auto" />
-      </Flex>
-      <Flex flex={1} gap={2} justifyContent="center">
-        <Tooltip label={`${t('unifiedCanvas.layer')} (Q)`}>
-          <FormControl isDisabled={isStaging} w="5rem">
-            <Combobox value={value} options={LAYER_NAMES_DICT} onChange={handleChangeLayer} />
-          </FormControl>
-        </Tooltip>
+      <Tooltip label={`${t('unifiedCanvas.layer')} (Q)`}>
+        <FormControl isDisabled={isStaging} w="5rem">
+          <Combobox value={value} options={LAYER_NAMES_DICT} onChange={handleChangeLayer} />
+        </FormControl>
+      </Tooltip>
 
-        <IAICanvasMaskOptions />
-        <IAICanvasToolChooserOptions />
+      <IAICanvasMaskOptions />
+      <IAICanvasToolChooserOptions />
 
-        <ButtonGroup>
-          <IconButton
-            aria-label={`${t('unifiedCanvas.move')} (V)`}
-            tooltip={`${t('unifiedCanvas.move')} (V)`}
-            icon={<PiHandGrabbingBold />}
-            isChecked={tool === 'move' || isStaging}
-            onClick={handleSelectMoveTool}
-          />
-          <IconButton
-            aria-label={`${shouldShowBoundingBox ? t('unifiedCanvas.hideBoundingBox') : t('unifiedCanvas.showBoundingBox')} (Shift + H)`}
-            tooltip={`${shouldShowBoundingBox ? t('unifiedCanvas.hideBoundingBox') : t('unifiedCanvas.showBoundingBox')} (Shift + H)`}
-            icon={shouldShowBoundingBox ? <PiEyeBold /> : <PiEyeSlashBold />}
-            onClick={handleSetShouldShowBoundingBox}
-            isDisabled={isStaging}
-          />
-          <IconButton
-            aria-label={`${t('unifiedCanvas.resetView')} (R)`}
-            tooltip={`${t('unifiedCanvas.resetView')} (R)`}
-            icon={<PiCrosshairSimpleBold />}
-            onClick={handleClickResetCanvasView}
-          />
-        </ButtonGroup>
+      <ButtonGroup>
+        <IconButton
+          aria-label={`${t('unifiedCanvas.move')} (V)`}
+          tooltip={`${t('unifiedCanvas.move')} (V)`}
+          icon={<PiHandGrabbingBold />}
+          isChecked={tool === 'move' || isStaging}
+          onClick={handleSelectMoveTool}
+        />
+        <IconButton
+          aria-label={`${shouldShowBoundingBox ? t('unifiedCanvas.hideBoundingBox') : t('unifiedCanvas.showBoundingBox')} (Shift + H)`}
+          tooltip={`${shouldShowBoundingBox ? t('unifiedCanvas.hideBoundingBox') : t('unifiedCanvas.showBoundingBox')} (Shift + H)`}
+          icon={shouldShowBoundingBox ? <PiEyeBold /> : <PiEyeSlashBold />}
+          onClick={handleSetShouldShowBoundingBox}
+          isDisabled={isStaging}
+        />
+        <IconButton
+          aria-label={`${t('unifiedCanvas.resetView')} (R)`}
+          tooltip={`${t('unifiedCanvas.resetView')} (R)`}
+          icon={<PiCrosshairSimpleBold />}
+          onClick={handleClickResetCanvasView}
+        />
+      </ButtonGroup>
 
-        <ButtonGroup>
+      <ButtonGroup>
+        <IconButton
+          aria-label={`${t('unifiedCanvas.mergeVisible')} (Shift+M)`}
+          tooltip={`${t('unifiedCanvas.mergeVisible')} (Shift+M)`}
+          icon={<PiStackBold />}
+          onClick={handleMergeVisible}
+          isDisabled={isStaging}
+        />
+        <IconButton
+          aria-label={`${t('unifiedCanvas.saveToGallery')} (Shift+S)`}
+          tooltip={`${t('unifiedCanvas.saveToGallery')} (Shift+S)`}
+          icon={<PiFloppyDiskBold />}
+          onClick={handleSaveToGallery}
+          isDisabled={isStaging}
+        />
+        {isClipboardAPIAvailable && (
           <IconButton
-            aria-label={`${t('unifiedCanvas.mergeVisible')} (Shift+M)`}
-            tooltip={`${t('unifiedCanvas.mergeVisible')} (Shift+M)`}
-            icon={<PiStackBold />}
-            onClick={handleMergeVisible}
+            aria-label={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
+            tooltip={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
+            icon={<PiCopyBold />}
+            onClick={handleCopyImageToClipboard}
             isDisabled={isStaging}
           />
-          <IconButton
-            aria-label={`${t('unifiedCanvas.saveToGallery')} (Shift+S)`}
-            tooltip={`${t('unifiedCanvas.saveToGallery')} (Shift+S)`}
-            icon={<PiFloppyDiskBold />}
-            onClick={handleSaveToGallery}
-            isDisabled={isStaging}
-          />
-          {isClipboardAPIAvailable && (
-            <IconButton
-              aria-label={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
-              tooltip={`${t('unifiedCanvas.copyToClipboard')} (Cmd/Ctrl+C)`}
-              icon={<PiCopyBold />}
-              onClick={handleCopyImageToClipboard}
-              isDisabled={isStaging}
-            />
-          )}
-          <IconButton
-            aria-label={`${t('unifiedCanvas.downloadAsImage')} (Shift+D)`}
-            tooltip={`${t('unifiedCanvas.downloadAsImage')} (Shift+D)`}
-            icon={<PiDownloadSimpleBold />}
-            onClick={handleDownloadAsImage}
-            isDisabled={isStaging}
-          />
-        </ButtonGroup>
-        <ButtonGroup>
-          <IAICanvasUndoButton />
-          <IAICanvasRedoButton />
-        </ButtonGroup>
+        )}
+        <IconButton
+          aria-label={`${t('unifiedCanvas.downloadAsImage')} (Shift+D)`}
+          tooltip={`${t('unifiedCanvas.downloadAsImage')} (Shift+D)`}
+          icon={<PiDownloadSimpleBold />}
+          onClick={handleDownloadAsImage}
+          isDisabled={isStaging}
+        />
+      </ButtonGroup>
+      <ButtonGroup>
+        <IAICanvasUndoButton />
+        <IAICanvasRedoButton />
+      </ButtonGroup>
 
-        <ButtonGroup>
-          <IconButton
-            aria-label={`${t('common.upload')}`}
-            tooltip={`${t('common.upload')}`}
-            icon={<PiUploadSimpleBold />}
-            isDisabled={isStaging}
-            {...getUploadButtonProps()}
-          />
-          <input {...getUploadInputProps()} />
-          <IconButton
-            aria-label={`${t('unifiedCanvas.clearCanvas')}`}
-            tooltip={`${t('unifiedCanvas.clearCanvas')}`}
-            icon={<PiTrashSimpleBold />}
-            onClick={handleResetCanvas}
-            colorScheme="error"
-            isDisabled={isStaging}
-          />
-        </ButtonGroup>
-        <ButtonGroup>
-          <IAICanvasSettingsButtonPopover />
-        </ButtonGroup>
-      </Flex>
-      <Flex flex={1} justifyContent="center">
-        <Flex gap={2} marginInlineStart="auto">
-          <ViewerButton />
-        </Flex>
-      </Flex>
+      <ButtonGroup>
+        <IconButton
+          aria-label={`${t('common.upload')}`}
+          tooltip={`${t('common.upload')}`}
+          icon={<PiUploadSimpleBold />}
+          isDisabled={isStaging}
+          {...getUploadButtonProps()}
+        />
+        <input {...getUploadInputProps()} />
+        <IconButton
+          aria-label={`${t('unifiedCanvas.clearCanvas')}`}
+          tooltip={`${t('unifiedCanvas.clearCanvas')}`}
+          icon={<PiTrashSimpleBold />}
+          onClick={handleResetCanvas}
+          colorScheme="error"
+          isDisabled={isStaging}
+        />
+      </ButtonGroup>
+      <ButtonGroup>
+        <IAICanvasSettingsButtonPopover />
+      </ButtonGroup>
     </Flex>
   );
 };
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
index b78910700d..b087d8dc70 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
@@ -4,7 +4,7 @@ import { BrushSize } from 'features/controlLayers/components/BrushSize';
 import ControlLayersSettingsPopover from 'features/controlLayers/components/ControlLayersSettingsPopover';
 import { ToolChooser } from 'features/controlLayers/components/ToolChooser';
 import { UndoRedoButtonGroup } from 'features/controlLayers/components/UndoRedoButtonGroup';
-import { ViewerButton } from 'features/gallery/components/ImageViewer/ViewerButton';
+import { ViewerToggleMenu } from 'features/gallery/components/ImageViewer/ViewerToggleMenu';
 import { memo } from 'react';
 
 export const ControlLayersToolbar = memo(() => {
@@ -21,7 +21,7 @@ export const ControlLayersToolbar = memo(() => {
       </Flex>
       <Flex flex={1} justifyContent="center">
         <Flex gap={2} marginInlineStart="auto">
-          <ViewerButton />
+          <ViewerToggleMenu />
         </Flex>
       </Flex>
     </Flex>
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
index 2788b1095d..2c53599ba3 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
@@ -11,6 +11,7 @@ import type { GallerySelectionDraggableData, ImageDraggableData, TypesafeDraggab
 import { getGalleryImageDataTestId } from 'features/gallery/components/ImageGrid/getGalleryImageDataTestId';
 import { useMultiselect } from 'features/gallery/hooks/useMultiselect';
 import { useScrollIntoView } from 'features/gallery/hooks/useScrollIntoView';
+import { isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
 import type { MouseEvent } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -102,6 +103,10 @@ const GalleryImage = (props: HoverableImageProps) => {
     setIsHovered(true);
   }, []);
 
+  const onDoubleClick = useCallback(() => {
+    dispatch(isImageViewerOpenChanged(true));
+  }, [dispatch]);
+
   const handleMouseOut = useCallback(() => {
     setIsHovered(false);
   }, []);
@@ -143,6 +148,7 @@ const GalleryImage = (props: HoverableImageProps) => {
       >
         <IAIDndImage
           onClick={handleClick}
+          onDoubleClick={onDoubleClick}
           imageDTO={imageDTO}
           draggableData={draggableData}
           isSelected={isSelected}
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx
deleted file mode 100644
index cc2aa8c543..0000000000
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Button } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
-import type { InvokeTabName } from 'features/ui/store/tabMap';
-import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiArrowsDownUpBold } from 'react-icons/pi';
-
-import { useImageViewer } from './useImageViewer';
-
-const TAB_NAME_TO_TKEY_SHORT: Record<InvokeTabName, string> = {
-  generation: 'controlLayers.controlLayers',
-  canvas: 'ui.tabs.canvas',
-  workflows: 'ui.tabs.workflows',
-  models: 'ui.tabs.models',
-  queue: 'ui.tabs.queue',
-};
-
-export const EditorButton = () => {
-  const { t } = useTranslation();
-  const { onClose } = useImageViewer();
-  const activeTabName = useAppSelector(activeTabNameSelector);
-  const tooltip = useMemo(
-    () => t('gallery.switchTo', { tab: t(TAB_NAME_TO_TKEY_SHORT[activeTabName]) }),
-    [t, activeTabName]
-  );
-
-  return (
-    <Button
-      aria-label={tooltip}
-      tooltip={tooltip}
-      onClick={onClose}
-      variant="outline"
-      leftIcon={<PiArrowsDownUpBold />}
-    >
-      {t(TAB_NAME_TO_TKEY_SHORT[activeTabName])}
-    </Button>
-  );
-};
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
index dcd4d4c304..7064e553dc 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
@@ -10,7 +10,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 
 import CurrentImageButtons from './CurrentImageButtons';
 import CurrentImagePreview from './CurrentImagePreview';
-import { EditorButton } from './EditorButton';
+import { ViewerToggleMenu } from './ViewerToggleMenu';
 
 const VIEWER_ENABLED_TABS: InvokeTabName[] = ['canvas', 'generation', 'workflows'];
 
@@ -60,7 +60,7 @@ export const ImageViewer = memo(() => {
         </Flex>
         <Flex flex={1} justifyContent="center">
           <Flex gap={2} marginInlineStart="auto">
-            <EditorButton />
+            <ViewerToggleMenu />
           </Flex>
         </Flex>
       </Flex>
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewerWorkflows.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewerWorkflows.tsx
new file mode 100644
index 0000000000..fe09f11be6
--- /dev/null
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewerWorkflows.tsx
@@ -0,0 +1,45 @@
+import { Flex } from '@invoke-ai/ui-library';
+import { ToggleMetadataViewerButton } from 'features/gallery/components/ImageViewer/ToggleMetadataViewerButton';
+import { ToggleProgressButton } from 'features/gallery/components/ImageViewer/ToggleProgressButton';
+import { memo } from 'react';
+
+import CurrentImageButtons from './CurrentImageButtons';
+import CurrentImagePreview from './CurrentImagePreview';
+
+export const ImageViewerWorkflows = memo(() => {
+  return (
+    <Flex
+      layerStyle="first"
+      borderRadius="base"
+      position="absolute"
+      flexDirection="column"
+      top={0}
+      right={0}
+      bottom={0}
+      left={0}
+      p={2}
+      rowGap={4}
+      alignItems="center"
+      justifyContent="center"
+      zIndex={10} // reactflow puts its minimap at 5, so we need to be above that
+    >
+      <Flex w="full" gap={2}>
+        <Flex flex={1} justifyContent="center">
+          <Flex gap={2} marginInlineEnd="auto">
+            <ToggleProgressButton />
+            <ToggleMetadataViewerButton />
+          </Flex>
+        </Flex>
+        <Flex flex={1} gap={2} justifyContent="center">
+          <CurrentImageButtons />
+        </Flex>
+        <Flex flex={1} justifyContent="center">
+          <Flex gap={2} marginInlineStart="auto" />
+        </Flex>
+      </Flex>
+      <CurrentImagePreview />
+    </Flex>
+  );
+});
+
+ImageViewerWorkflows.displayName = 'ImageViewerWorkflows';
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx
deleted file mode 100644
index edceb5099c..0000000000
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Button } from '@invoke-ai/ui-library';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiArrowsDownUpBold } from 'react-icons/pi';
-
-import { useImageViewer } from './useImageViewer';
-
-export const ViewerButton = () => {
-  const { t } = useTranslation();
-  const { onOpen } = useImageViewer();
-  const tooltip = useMemo(() => t('gallery.switchTo', { tab: t('common.viewer') }), [t]);
-
-  return (
-    <Button
-      aria-label={tooltip}
-      tooltip={tooltip}
-      onClick={onOpen}
-      variant="outline"
-      pointerEvents="auto"
-      leftIcon={<PiArrowsDownUpBold />}
-    >
-      {t('common.viewer')}
-    </Button>
-  );
-};
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
new file mode 100644
index 0000000000..c1277d142f
--- /dev/null
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
@@ -0,0 +1,67 @@
+import {
+  Button,
+  Flex,
+  Icon,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Text,
+} from '@invoke-ai/ui-library';
+import { useTranslation } from 'react-i18next';
+import { PiCaretDownBold, PiCheckBold, PiEyeBold, PiPencilBold } from 'react-icons/pi';
+
+import { useImageViewer } from './useImageViewer';
+
+export const ViewerToggleMenu = () => {
+  const { t } = useTranslation();
+  const { isOpen, onClose, onOpen } = useImageViewer();
+
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button variant="outline">
+          <Flex gap={3} w="full" alignItems="center">
+            {isOpen ? <Icon as={PiEyeBold} /> : <Icon as={PiPencilBold} />}
+            <Text fontSize="md">{isOpen ? t('common.viewing') : t('common.editing')}</Text>
+            <Icon as={PiCaretDownBold} />
+          </Flex>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent p={2}>
+        <PopoverArrow />
+        <PopoverBody>
+          <Flex flexDir="column">
+            <Button onClick={onOpen} variant="ghost" h="auto" w="auto" p={2}>
+              <Flex gap={2} w="full">
+                <Icon as={PiCheckBold} visibility={isOpen ? 'visible' : 'hidden'} />
+                <Flex flexDir="column" gap={2} alignItems="flex-start">
+                  <Text fontWeight="semibold" color="base.100">
+                    {t('common.viewing')}
+                  </Text>
+                  <Text fontWeight="normal" color="base.300">
+                    {t('common.viewingDesc')}
+                  </Text>
+                </Flex>
+              </Flex>
+            </Button>
+            <Button onClick={onClose} variant="ghost" h="auto" w="auto" p={2}>
+              <Flex gap={2} w="full">
+                <Icon as={PiCheckBold} visibility={isOpen ? 'hidden' : 'visible'} />
+                <Flex flexDir="column" gap={2} alignItems="flex-start">
+                  <Text fontWeight="semibold" color="base.100">
+                    {t('common.editing')}
+                  </Text>
+                  <Text fontWeight="normal" color="base.300">
+                    {t('common.editingDesc')}
+                  </Text>
+                </Flex>
+              </Flex>
+            </Button>
+          </Flex>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
diff --git a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
index 744dc09f3f..af19017486 100644
--- a/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
+++ b/invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
@@ -1,8 +1,6 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice, isAnyOf } from '@reduxjs/toolkit';
 import type { PersistConfig, RootState } from 'app/store/store';
-import { rgLayerAdded } from 'features/controlLayers/store/controlLayersSlice';
-import { setActiveTab } from 'features/ui/store/uiSlice';
 import { uniqBy } from 'lodash-es';
 import { boardsApi } from 'services/api/endpoints/boards';
 import { imagesApi } from 'services/api/endpoints/images';
@@ -23,7 +21,7 @@ const initialGalleryState: GalleryState = {
   boardSearchText: '',
   limit: INITIAL_IMAGE_LIMIT,
   offset: 0,
-  isImageViewerOpen: false,
+  isImageViewerOpen: true,
 };
 
 export const gallerySlice = createSlice({
@@ -83,12 +81,6 @@ export const gallerySlice = createSlice({
     },
   },
   extraReducers: (builder) => {
-    builder.addCase(setActiveTab, (state) => {
-      state.isImageViewerOpen = false;
-    });
-    builder.addCase(rgLayerAdded, (state) => {
-      state.isImageViewerOpen = false;
-    });
     builder.addMatcher(isAnyBoardDeleted, (state, action) => {
       const deletedBoardId = action.meta.arg.originalArgs;
       if (deletedBoardId === state.selectedBoardId) {
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx
index 2a08fb840e..93856a21c4 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx
@@ -1,6 +1,5 @@
 import { Flex, Spacer } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { ViewerButton } from 'features/gallery/components/ImageViewer/ViewerButton';
 import AddNodeButton from 'features/nodes/components/flow/panels/TopPanel/AddNodeButton';
 import ClearFlowButton from 'features/nodes/components/flow/panels/TopPanel/ClearFlowButton';
 import SaveWorkflowButton from 'features/nodes/components/flow/panels/TopPanel/SaveWorkflowButton';
@@ -23,7 +22,6 @@ const TopCenterPanel = () => {
       <ClearFlowButton />
       <SaveWorkflowButton />
       <WorkflowLibraryMenu />
-      <ViewerButton />
     </Flex>
   );
 };
diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
index 42df03872c..1968c64161 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@@ -4,7 +4,6 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { $customNavComponent } from 'app/store/nanostores/customNavComponent';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent';
-import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
 import NodeEditorPanelGroup from 'features/nodes/components/sidePanel/NodeEditorPanelGroup';
 import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent';
 import SettingsMenu from 'features/system/components/SettingsModal/SettingsMenu';
@@ -255,9 +254,8 @@ const InvokeTabs = () => {
           </>
         )}
         <Panel id="main-panel" order={1} minSize={20}>
-          <TabPanels w="full" h="full" position="relative">
+          <TabPanels w="full" h="full">
             {tabPanels}
-            <ImageViewer />
           </TabPanels>
         </Panel>
         {shouldShowGalleryPanel && (
diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
index a7a401cde4..698be530f9 100644
--- a/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
@@ -1,8 +1,9 @@
 import type { ChakraProps } from '@invoke-ai/ui-library';
 import { Box, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import { ControlLayersPanelContent } from 'features/controlLayers/components/ControlLayersPanelContent';
+import { isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
 import { Prompts } from 'features/parameters/components/Prompts/Prompts';
 import QueueControls from 'features/queue/components/QueueControls';
 import { SDXLPrompts } from 'features/sdxl/components/SDXLPrompts/SDXLPrompts';
@@ -15,7 +16,7 @@ import { RefinerSettingsAccordion } from 'features/settingsAccordions/components
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties } from 'react';
-import { memo, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const overlayScrollbarsStyles: CSSProperties = {
@@ -37,6 +38,7 @@ const selectedStyles: ChakraProps['sx'] = {
 
 const ParametersPanelTextToImage = () => {
   const { t } = useTranslation();
+  const dispatch = useAppDispatch();
   const activeTabName = useAppSelector(activeTabNameSelector);
   const controlLayersCount = useAppSelector((s) => s.controlLayers.present.layers.length);
   const controlLayersTitle = useMemo(() => {
@@ -46,6 +48,14 @@ const ParametersPanelTextToImage = () => {
     return `${t('controlLayers.controlLayers')} (${controlLayersCount})`;
   }, [controlLayersCount, t]);
   const isSDXL = useAppSelector((s) => s.generation.model?.base === 'sdxl');
+  const onChangeTabs = useCallback(
+    (i: number) => {
+      if (i === 1) {
+        dispatch(isImageViewerOpenChanged(false));
+      }
+    },
+    [dispatch]
+  );
 
   return (
     <Flex w="full" h="full" flexDir="column" gap={2}>
@@ -55,7 +65,15 @@ const ParametersPanelTextToImage = () => {
           <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
             <Flex gap={2} flexDirection="column" h="full" w="full">
               {isSDXL ? <SDXLPrompts /> : <Prompts />}
-              <Tabs variant="enclosed" display="flex" flexDir="column" w="full" h="full" gap={2}>
+              <Tabs
+                variant="enclosed"
+                display="flex"
+                flexDir="column"
+                w="full"
+                h="full"
+                gap={2}
+                onChange={onChangeTabs}
+              >
                 <TabList gap={2} fontSize="sm" borderColor="base.800">
                   <Tab sx={baseStyles} _selected={selectedStyles}>
                     {t('common.settingsLabel')}
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/NodesTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/NodesTab.tsx
index 2ee21bfadf..b4f473ae03 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/NodesTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/NodesTab.tsx
@@ -1,9 +1,20 @@
 import { Box } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { ImageViewerWorkflows } from 'features/gallery/components/ImageViewer/ImageViewerWorkflows';
 import NodeEditor from 'features/nodes/components/NodeEditor';
 import { memo } from 'react';
 import { ReactFlowProvider } from 'reactflow';
 
 const NodesTab = () => {
+  const mode = useAppSelector((s) => s.workflow.mode);
+  if (mode === 'view') {
+    return (
+      <Box layerStyle="first" position="relative" w="full" h="full" p={2} borderRadius="base">
+        <ImageViewerWorkflows />
+      </Box>
+    );
+  }
+
   return (
     <Box layerStyle="first" position="relative" w="full" h="full" p={2} borderRadius="base">
       <ReactFlowProvider>
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx
index 74845a9ca9..1c1c9c24a4 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx
@@ -1,11 +1,13 @@
 import { Box } from '@invoke-ai/ui-library';
 import { ControlLayersEditor } from 'features/controlLayers/components/ControlLayersEditor';
+import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
 import { memo } from 'react';
 
 const TextToImageTab = () => {
   return (
     <Box layerStyle="first" position="relative" w="full" h="full" p={2} borderRadius="base">
       <ControlLayersEditor />
+      <ImageViewer />
     </Box>
   );
 };

From 6c1fd584d29b5aefe45a4859214b8306d3640227 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 8 May 2024 19:06:04 +1000
Subject: [PATCH 061/116] feat(ui): pre-CL control adapter metadata recall

---
 .../controlLayers/store/controlLayersSlice.ts |   7 +-
 .../controlLayers/util/controlAdapters.ts     |   6 +-
 .../ImageMetadataActions.tsx                  |   4 +-
 .../src/features/metadata/util/handlers.ts    |   2 +-
 .../web/src/features/metadata/util/parsers.ts | 310 ++++++++++++++++--
 5 files changed, 300 insertions(+), 29 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
index 27b7e4c3fd..fb890f7d45 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
@@ -662,7 +662,7 @@ export const controlLayersSlice = createSlice({
           }
         }
       },
-      prepare: (imageDTO: ImageDTO | null) => ({ payload: { layerId: 'initial_image_layer', imageDTO } }),
+      prepare: (imageDTO: ImageDTO | null) => ({ payload: { layerId: INITIAL_IMAGE_LAYER_ID, imageDTO } }),
     },
     iiLayerRecalled: (state, action: PayloadAction<InitialImageLayer>) => {
       deselectAllLayers(state);
@@ -914,6 +914,7 @@ export const RG_LAYER_NAME = 'regional_guidance_layer';
 export const RG_LAYER_LINE_NAME = 'regional_guidance_layer.line';
 export const RG_LAYER_OBJECT_GROUP_NAME = 'regional_guidance_layer.object_group';
 export const RG_LAYER_RECT_NAME = 'regional_guidance_layer.rect';
+export const INITIAL_IMAGE_LAYER_ID = 'singleton_initial_image_layer';
 export const INITIAL_IMAGE_LAYER_NAME = 'initial_image_layer';
 export const INITIAL_IMAGE_LAYER_IMAGE_NAME = 'initial_image_layer.image';
 export const LAYER_BBOX_NAME = 'layer.bbox';
@@ -925,10 +926,10 @@ const getRGLayerLineId = (layerId: string, lineId: string) => `${layerId}.line_$
 const getRGLayerRectId = (layerId: string, lineId: string) => `${layerId}.rect_${lineId}`;
 export const getRGLayerObjectGroupId = (layerId: string, groupId: string) => `${layerId}.objectGroup_${groupId}`;
 export const getLayerBboxId = (layerId: string) => `${layerId}.bbox`;
-const getCALayerId = (layerId: string) => `control_adapter_layer_${layerId}`;
+export const getCALayerId = (layerId: string) => `control_adapter_layer_${layerId}`;
 export const getCALayerImageId = (layerId: string, imageName: string) => `${layerId}.image_${imageName}`;
 export const getIILayerImageId = (layerId: string, imageName: string) => `${layerId}.image_${imageName}`;
-const getIPALayerId = (layerId: string) => `ip_adapter_layer_${layerId}`;
+export const getIPALayerId = (layerId: string) => `ip_adapter_layer_${layerId}`;
 
 export const controlLayersPersistConfig: PersistConfig<ControlLayersState> = {
   name: controlLayersSlice.name,
diff --git a/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts b/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
index 070ca64b32..589c61b855 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
@@ -513,7 +513,7 @@ export const CA_PROCESSOR_DATA: CAProcessorsData = {
   },
 };
 
-const initialControlNetV2: Omit<ControlNetConfigV2, 'id'> = {
+export const initialControlNetV2: Omit<ControlNetConfigV2, 'id'> = {
   type: 'controlnet',
   model: null,
   weight: 1,
@@ -525,7 +525,7 @@ const initialControlNetV2: Omit<ControlNetConfigV2, 'id'> = {
   processorConfig: CA_PROCESSOR_DATA.canny_image_processor.buildDefaults(),
 };
 
-const initialT2IAdapterV2: Omit<T2IAdapterConfigV2, 'id'> = {
+export const initialT2IAdapterV2: Omit<T2IAdapterConfigV2, 'id'> = {
   type: 't2i_adapter',
   model: null,
   weight: 1,
@@ -536,7 +536,7 @@ const initialT2IAdapterV2: Omit<T2IAdapterConfigV2, 'id'> = {
   processorConfig: CA_PROCESSOR_DATA.canny_image_processor.buildDefaults(),
 };
 
-const initialIPAdapterV2: Omit<IPAdapterConfigV2, 'id'> = {
+export const initialIPAdapterV2: Omit<IPAdapterConfigV2, 'id'> = {
   type: 'ip_adapter',
   image: null,
   model: null,
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
index f8425182dd..a192ff4fbb 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
@@ -37,7 +37,7 @@ const ImageMetadataActions = (props: Props) => {
       <MetadataItem metadata={metadata} handlers={handlers.scheduler} />
       <MetadataItem metadata={metadata} handlers={handlers.cfgScale} />
       <MetadataItem metadata={metadata} handlers={handlers.cfgRescaleMultiplier} />
-      <MetadataItem metadata={metadata} handlers={handlers.strength} />
+      {activeTabName !== 'generation' && <MetadataItem metadata={metadata} handlers={handlers.strength} />}
       <MetadataItem metadata={metadata} handlers={handlers.hrfEnabled} />
       <MetadataItem metadata={metadata} handlers={handlers.hrfMethod} />
       <MetadataItem metadata={metadata} handlers={handlers.hrfStrength} />
@@ -49,7 +49,7 @@ const ImageMetadataActions = (props: Props) => {
       <MetadataItem metadata={metadata} handlers={handlers.refinerStart} />
       <MetadataItem metadata={metadata} handlers={handlers.refinerSteps} />
       <MetadataLoRAs metadata={metadata} />
-      <MetadataLayers metadata={metadata} />
+      {activeTabName === 'generation' && <MetadataLayers metadata={metadata} />}
       {activeTabName !== 'generation' && <MetadataControlNets metadata={metadata} />}
       {activeTabName !== 'generation' && <MetadataT2IAdapters metadata={metadata} />}
       {activeTabName !== 'generation' && <MetadataIPAdapters metadata={metadata} />}
diff --git a/invokeai/frontend/web/src/features/metadata/util/handlers.ts b/invokeai/frontend/web/src/features/metadata/util/handlers.ts
index bf5fa2eaec..b0d0e22688 100644
--- a/invokeai/frontend/web/src/features/metadata/util/handlers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/handlers.ts
@@ -429,7 +429,7 @@ export const parseAndRecallImageDimensions = async (metadata: unknown) => {
 };
 
 // These handlers should be omitted when recalling to control layers
-const TO_CONTROL_LAYERS_SKIP_KEYS: (keyof typeof handlers)[] = ['controlNets', 'ipAdapters', 't2iAdapters'];
+const TO_CONTROL_LAYERS_SKIP_KEYS: (keyof typeof handlers)[] = ['controlNets', 'ipAdapters', 't2iAdapters', 'strength'];
 // These handlers should be omitted when recalling to the rest of the app
 const NOT_TO_CONTROL_LAYERS_SKIP_KEYS: (keyof typeof handlers)[] = ['layers'];
 
diff --git a/invokeai/frontend/web/src/features/metadata/util/parsers.ts b/invokeai/frontend/web/src/features/metadata/util/parsers.ts
index 213a4666fe..1848152d2b 100644
--- a/invokeai/frontend/web/src/features/metadata/util/parsers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/parsers.ts
@@ -1,12 +1,20 @@
-import { getStore } from 'app/store/nanostores/store';
 import {
   initialControlNet,
   initialIPAdapter,
   initialT2IAdapter,
 } from 'features/controlAdapters/util/buildControlAdapter';
 import { buildControlAdapterProcessor } from 'features/controlAdapters/util/buildControlAdapterProcessor';
-import type { Layer } from 'features/controlLayers/store/types';
+import { getCALayerId, getIPALayerId, INITIAL_IMAGE_LAYER_ID } from 'features/controlLayers/store/controlLayersSlice';
+import type { ControlAdapterLayer, InitialImageLayer, IPAdapterLayer, Layer } from 'features/controlLayers/store/types';
 import { zLayer } from 'features/controlLayers/store/types';
+import {
+  CA_PROCESSOR_DATA,
+  imageDTOToImageWithDims,
+  initialControlNetV2,
+  initialIPAdapterV2,
+  initialT2IAdapterV2,
+  isProcessorTypeV2,
+} from 'features/controlLayers/util/controlAdapters';
 import type { LoRA } from 'features/lora/store/loraSlice';
 import { defaultLoRAConfig } from 'features/lora/store/loraSlice';
 import type {
@@ -60,8 +68,7 @@ import {
   isParameterWidth,
 } from 'features/parameters/types/parameterSchemas';
 import { get, isArray, isString } from 'lodash-es';
-import { imagesApi } from 'services/api/endpoints/images';
-import type { ImageDTO } from 'services/api/types';
+import { getImageDTO } from 'services/api/endpoints/images';
 import {
   isControlNetModelConfig,
   isIPAdapterModelConfig,
@@ -71,6 +78,7 @@ import {
   isT2IAdapterModelConfig,
   isVAEModelConfig,
 } from 'services/api/types';
+import { assert } from 'tsafe';
 import { v4 as uuidv4 } from 'uuid';
 
 export const MetadataParsePendingToken = Symbol('pending');
@@ -140,14 +148,6 @@ const parseCFGRescaleMultiplier: MetadataParseFunc<ParameterCFGRescaleMultiplier
 const parseScheduler: MetadataParseFunc<ParameterScheduler> = (metadata) =>
   getProperty(metadata, 'scheduler', isParameterScheduler);
 
-const parseInitialImage: MetadataParseFunc<ImageDTO> = async (metadata) => {
-  const imageName = await getProperty(metadata, 'init_image', isString);
-  const imageDTORequest = getStore().dispatch(imagesApi.endpoints.getImageDTO.initiate(imageName));
-  const imageDTO = await imageDTORequest.unwrap();
-  imageDTORequest.unsubscribe();
-  return imageDTO;
-};
-
 const parseWidth: MetadataParseFunc<ParameterWidth> = (metadata) => getProperty(metadata, 'width', isParameterWidth);
 
 const parseHeight: MetadataParseFunc<ParameterHeight> = (metadata) =>
@@ -300,7 +300,7 @@ const parseControlNet: MetadataParseFunc<ControlNetConfigMetadata> = async (meta
 
 const parseAllControlNets: MetadataParseFunc<ControlNetConfigMetadata[]> = async (metadata) => {
   try {
-    const controlNetsRaw = await getProperty(metadata, 'controlnets', isArray || undefined);
+    const controlNetsRaw = await getProperty(metadata, 'controlnets', isArray);
     const parseResults = await Promise.allSettled(controlNetsRaw.map((cn) => parseControlNet(cn)));
     const controlNets = parseResults
       .filter((result): result is PromiseFulfilledResult<ControlNetConfigMetadata> => result.status === 'fulfilled')
@@ -434,18 +434,286 @@ const parseAllIPAdapters: MetadataParseFunc<IPAdapterConfigMetadata[]> = async (
 const parseLayer: MetadataParseFunc<Layer> = async (metadataItem) => zLayer.parseAsync(metadataItem);
 
 const parseLayers: MetadataParseFunc<Layer[]> = async (metadata) => {
+  // We need to support recalling pre-Control Layers metadata into Control Layers. A separate set of parsers handles
+  // taking pre-CL metadata and parsing it into layers. It doesn't always map 1-to-1, so this is best-effort. For
+  // example, CL Control Adapters don't support resize mode, so we simply omit that property.
+
   try {
-    const control_layers = await getProperty(metadata, 'control_layers');
-    const layersRaw = await getProperty(control_layers, 'layers', isArray);
-    const parseResults = await Promise.allSettled(layersRaw.map(parseLayer));
-    const layers = parseResults
-      .filter((result): result is PromiseFulfilledResult<Layer> => result.status === 'fulfilled')
-      .map((result) => result.value);
+    const layers: Layer[] = [];
+
+    try {
+      const control_layers = await getProperty(metadata, 'control_layers');
+      const controlLayersRaw = await getProperty(control_layers, 'layers', isArray);
+      const controlLayersParseResults = await Promise.allSettled(controlLayersRaw.map(parseLayer));
+      const controlLayers = controlLayersParseResults
+        .filter((result): result is PromiseFulfilledResult<Layer> => result.status === 'fulfilled')
+        .map((result) => result.value);
+      layers.push(...controlLayers);
+    } catch {
+      // no-op
+    }
+
+    try {
+      const controlNetsRaw = await getProperty(metadata, 'controlnets', isArray);
+      console.log('controlNetsRaw', controlNetsRaw);
+      const controlNetsParseResults = await Promise.allSettled(
+        controlNetsRaw.map(async (cn) => await parseControlNetToControlAdapterLayer(cn))
+      );
+      console.log('controlNetsParseResults', controlNetsParseResults);
+      const controlNetsAsLayers = controlNetsParseResults
+        .filter((result): result is PromiseFulfilledResult<ControlAdapterLayer> => result.status === 'fulfilled')
+        .map((result) => result.value);
+      layers.push(...controlNetsAsLayers);
+    } catch {
+      // no-op
+    }
+
+    try {
+      const t2iAdaptersRaw = await getProperty(metadata, 't2iAdapters', isArray);
+      console.log('t2iAdaptersRaw', t2iAdaptersRaw);
+      const t2iAdaptersParseResults = await Promise.allSettled(
+        t2iAdaptersRaw.map(async (cn) => await parseT2IAdapterToControlAdapterLayer(cn))
+      );
+      console.log('t2iAdaptersParseResults', t2iAdaptersParseResults);
+      const t2iAdaptersAsLayers = t2iAdaptersParseResults
+        .filter((result): result is PromiseFulfilledResult<ControlAdapterLayer> => result.status === 'fulfilled')
+        .map((result) => result.value);
+      layers.push(...t2iAdaptersAsLayers);
+    } catch {
+      // no-op
+    }
+
+    try {
+      const ipAdaptersRaw = await getProperty(metadata, 'ipAdapters', isArray);
+      console.log('ipAdaptersRaw', ipAdaptersRaw);
+      const ipAdaptersParseResults = await Promise.allSettled(
+        ipAdaptersRaw.map(async (cn) => await parseIPAdapterToIPAdapterLayer(cn))
+      );
+      console.log('ipAdaptersParseResults', ipAdaptersParseResults);
+      const ipAdaptersAsLayers = ipAdaptersParseResults
+        .filter((result): result is PromiseFulfilledResult<IPAdapterLayer> => result.status === 'fulfilled')
+        .map((result) => result.value);
+      layers.push(...ipAdaptersAsLayers);
+    } catch {
+      // no-op
+    }
+
+    try {
+      const initialImageLayer = await parseInitialImageToInitialImageLayer(metadata);
+      layers.push(initialImageLayer);
+    } catch {
+      // no-op
+    }
+
     return layers;
   } catch {
     return [];
   }
 };
+
+const parseInitialImageToInitialImageLayer: MetadataParseFunc<InitialImageLayer> = async (metadata) => {
+  const denoisingStrength = await getProperty(metadata, 'strength', isParameterStrength);
+  const imageName = await getProperty(metadata, 'init_image', isString);
+  const imageDTO = await getImageDTO(imageName);
+  assert(imageDTO, 'ImageDTO is null');
+  const layer: InitialImageLayer = {
+    id: INITIAL_IMAGE_LAYER_ID,
+    type: 'initial_image_layer',
+    bbox: null,
+    bboxNeedsUpdate: true,
+    x: 0,
+    y: 0,
+    isEnabled: true,
+    opacity: 1,
+    image: imageDTOToImageWithDims(imageDTO),
+    isSelected: true,
+    denoisingStrength,
+  };
+  return layer;
+};
+
+const parseControlNetToControlAdapterLayer: MetadataParseFunc<ControlAdapterLayer> = async (metadataItem) => {
+  const control_model = await getProperty(metadataItem, 'control_model');
+  const key = await getModelKey(control_model, 'controlnet');
+  const controlNetModel = await fetchModelConfigWithTypeGuard(key, isControlNetModelConfig);
+  const image = zControlField.shape.image
+    .nullish()
+    .catch(null)
+    .parse(await getProperty(metadataItem, 'image'));
+  const processedImage = zControlField.shape.image
+    .nullish()
+    .catch(null)
+    .parse(await getProperty(metadataItem, 'processed_image'));
+  const control_weight = zControlField.shape.control_weight
+    .nullish()
+    .catch(null)
+    .parse(await getProperty(metadataItem, 'control_weight'));
+  const begin_step_percent = zControlField.shape.begin_step_percent
+    .nullish()
+    .catch(null)
+    .parse(await getProperty(metadataItem, 'begin_step_percent'));
+  const end_step_percent = zControlField.shape.end_step_percent
+    .nullish()
+    .catch(null)
+    .parse(await getProperty(metadataItem, 'end_step_percent'));
+  const control_mode = zControlField.shape.control_mode
+    .nullish()
+    .catch(null)
+    .parse(await getProperty(metadataItem, 'control_mode'));
+
+  const defaultPreprocessor = controlNetModel.default_settings?.preprocessor;
+  const processorConfig = isProcessorTypeV2(defaultPreprocessor)
+    ? CA_PROCESSOR_DATA[defaultPreprocessor].buildDefaults()
+    : null;
+  const beginEndStepPct: [number, number] = [
+    begin_step_percent ?? initialControlNetV2.beginEndStepPct[0],
+    end_step_percent ?? initialControlNetV2.beginEndStepPct[1],
+  ];
+  const imageDTO = image ? await getImageDTO(image.image_name) : null;
+  const processedImageDTO = processedImage ? await getImageDTO(processedImage.image_name) : null;
+
+  const layer: ControlAdapterLayer = {
+    id: getCALayerId(uuidv4()),
+    bbox: null,
+    bboxNeedsUpdate: true,
+    isEnabled: true,
+    isFilterEnabled: true,
+    isSelected: true,
+    opacity: 1,
+    type: 'control_adapter_layer',
+    x: 0,
+    y: 0,
+    controlAdapter: {
+      id: uuidv4(),
+      type: 'controlnet',
+      model: zModelIdentifierField.parse(controlNetModel),
+      weight: typeof control_weight === 'number' ? control_weight : initialControlNetV2.weight,
+      beginEndStepPct,
+      controlMode: control_mode ?? initialControlNetV2.controlMode,
+      image: imageDTO ? imageDTOToImageWithDims(imageDTO) : null,
+      processedImage: processedImageDTO ? imageDTOToImageWithDims(processedImageDTO) : null,
+      processorConfig,
+      isProcessingImage: false,
+    },
+  };
+
+  return layer;
+};
+
+const parseT2IAdapterToControlAdapterLayer: MetadataParseFunc<ControlAdapterLayer> = async (metadataItem) => {
+  const t2i_adapter_model = await getProperty(metadataItem, 't2i_adapter_model');
+  const key = await getModelKey(t2i_adapter_model, 't2i_adapter');
+  const t2iAdapterModel = await fetchModelConfigWithTypeGuard(key, isT2IAdapterModelConfig);
+
+  const image = zT2IAdapterField.shape.image
+    .nullish()
+    .catch(null)
+    .parse(await getProperty(metadataItem, 'image'));
+  const processedImage = zT2IAdapterField.shape.image
+    .nullish()
+    .catch(null)
+    .parse(await getProperty(metadataItem, 'processed_image'));
+  const weight = zT2IAdapterField.shape.weight
+    .nullish()
+    .catch(null)
+    .parse(await getProperty(metadataItem, 'weight'));
+  const begin_step_percent = zT2IAdapterField.shape.begin_step_percent
+    .nullish()
+    .catch(null)
+    .parse(await getProperty(metadataItem, 'begin_step_percent'));
+  const end_step_percent = zT2IAdapterField.shape.end_step_percent
+    .nullish()
+    .catch(null)
+    .parse(await getProperty(metadataItem, 'end_step_percent'));
+
+  const defaultPreprocessor = t2iAdapterModel.default_settings?.preprocessor;
+  const processorConfig = isProcessorTypeV2(defaultPreprocessor)
+    ? CA_PROCESSOR_DATA[defaultPreprocessor].buildDefaults()
+    : null;
+  const beginEndStepPct: [number, number] = [
+    begin_step_percent ?? initialT2IAdapterV2.beginEndStepPct[0],
+    end_step_percent ?? initialT2IAdapterV2.beginEndStepPct[1],
+  ];
+  const imageDTO = image ? await getImageDTO(image.image_name) : null;
+  const processedImageDTO = processedImage ? await getImageDTO(processedImage.image_name) : null;
+
+  const layer: ControlAdapterLayer = {
+    id: getCALayerId(uuidv4()),
+    bbox: null,
+    bboxNeedsUpdate: true,
+    isEnabled: true,
+    isFilterEnabled: true,
+    isSelected: true,
+    opacity: 1,
+    type: 'control_adapter_layer',
+    x: 0,
+    y: 0,
+    controlAdapter: {
+      id: uuidv4(),
+      type: 't2i_adapter',
+      model: zModelIdentifierField.parse(t2iAdapterModel),
+      weight: typeof weight === 'number' ? weight : initialT2IAdapterV2.weight,
+      beginEndStepPct,
+      image: imageDTO ? imageDTOToImageWithDims(imageDTO) : null,
+      processedImage: processedImageDTO ? imageDTOToImageWithDims(processedImageDTO) : null,
+      processorConfig,
+      isProcessingImage: false,
+    },
+  };
+
+  return layer;
+};
+
+const parseIPAdapterToIPAdapterLayer: MetadataParseFunc<IPAdapterLayer> = async (metadataItem) => {
+  const ip_adapter_model = await getProperty(metadataItem, 'ip_adapter_model');
+  const key = await getModelKey(ip_adapter_model, 'ip_adapter');
+  const ipAdapterModel = await fetchModelConfigWithTypeGuard(key, isIPAdapterModelConfig);
+
+  const image = zIPAdapterField.shape.image
+    .nullish()
+    .catch(null)
+    .parse(await getProperty(metadataItem, 'image'));
+  const weight = zIPAdapterField.shape.weight
+    .nullish()
+    .catch(null)
+    .parse(await getProperty(metadataItem, 'weight'));
+  const method = zIPAdapterField.shape.method
+    .nullish()
+    .catch(null)
+    .parse(await getProperty(metadataItem, 'method'));
+  const begin_step_percent = zIPAdapterField.shape.begin_step_percent
+    .nullish()
+    .catch(null)
+    .parse(await getProperty(metadataItem, 'begin_step_percent'));
+  const end_step_percent = zIPAdapterField.shape.end_step_percent
+    .nullish()
+    .catch(null)
+    .parse(await getProperty(metadataItem, 'end_step_percent'));
+
+  const beginEndStepPct: [number, number] = [
+    begin_step_percent ?? initialIPAdapterV2.beginEndStepPct[0],
+    end_step_percent ?? initialIPAdapterV2.beginEndStepPct[1],
+  ];
+  const imageDTO = image ? await getImageDTO(image.image_name) : null;
+
+  const layer: IPAdapterLayer = {
+    id: getIPALayerId(uuidv4()),
+    isEnabled: true,
+    type: 'ip_adapter_layer',
+    ipAdapter: {
+      id: uuidv4(),
+      type: 'ip_adapter',
+      model: zModelIdentifierField.parse(ipAdapterModel),
+      weight: typeof weight === 'number' ? weight : initialIPAdapterV2.weight,
+      beginEndStepPct,
+      image: imageDTO ? imageDTOToImageWithDims(imageDTO) : null,
+      clipVisionModel: initialIPAdapterV2.clipVisionModel, // TODO: This needs to be added to the zIPAdapterField...
+      method: method ?? initialIPAdapterV2.method,
+    },
+  };
+
+  return layer;
+};
 //#endregion
 
 export const parsers = {
@@ -459,7 +727,6 @@ export const parsers = {
   cfgScale: parseCFGScale,
   cfgRescaleMultiplier: parseCFGRescaleMultiplier,
   scheduler: parseScheduler,
-  initialImage: parseInitialImage,
   width: parseWidth,
   height: parseHeight,
   steps: parseSteps,
@@ -484,6 +751,9 @@ export const parsers = {
   t2iAdapters: parseAllT2IAdapters,
   ipAdapter: parseIPAdapter,
   ipAdapters: parseAllIPAdapters,
+  controlNetToControlLayer: parseControlNetToControlAdapterLayer,
+  t2iAdapterToControlAdapterLayer: parseT2IAdapterToControlAdapterLayer,
+  ipAdapterToIPAdapterLayer: parseIPAdapterToIPAdapterLayer,
   layer: parseLayer,
   layers: parseLayers,
 } as const;

From d8557d573b8b79aa481891225e1b44b3f8599283 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 8 May 2024 19:15:37 +1000
Subject: [PATCH 062/116] Revert "feat(ui): extend zod with a `is` typeguard`
 method"

This reverts commit 0f45933791fc9ea66dac8eda404c4ffef8e049d0.
---
 invokeai/frontend/web/src/extend-zod.ts       | 8 --------
 invokeai/frontend/web/src/main.tsx            | 2 --
 invokeai/frontend/web/src/zod-extensions.d.ts | 8 --------
 3 files changed, 18 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/extend-zod.ts
 delete mode 100644 invokeai/frontend/web/src/zod-extensions.d.ts

diff --git a/invokeai/frontend/web/src/extend-zod.ts b/invokeai/frontend/web/src/extend-zod.ts
deleted file mode 100644
index b1c155062d..0000000000
--- a/invokeai/frontend/web/src/extend-zod.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { assert } from 'tsafe';
-import { z } from 'zod';
-
-assert(!Object.hasOwn(z.ZodType.prototype, 'is'));
-
-z.ZodType.prototype.is = function (val: unknown): val is z.infer<typeof this> {
-  return this.safeParse(val).success;
-};
diff --git a/invokeai/frontend/web/src/main.tsx b/invokeai/frontend/web/src/main.tsx
index 129d1bc9e5..acf9491778 100644
--- a/invokeai/frontend/web/src/main.tsx
+++ b/invokeai/frontend/web/src/main.tsx
@@ -1,5 +1,3 @@
-import 'extend-zod';
-
 import ReactDOM from 'react-dom/client';
 
 import InvokeAIUI from './app/components/InvokeAIUI';
diff --git a/invokeai/frontend/web/src/zod-extensions.d.ts b/invokeai/frontend/web/src/zod-extensions.d.ts
deleted file mode 100644
index 0abab07a19..0000000000
--- a/invokeai/frontend/web/src/zod-extensions.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import 'zod';
-
-declare module 'zod' {
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  export interface ZodType<Output = any> {
-    is(val: unknown): val is Output;
-  }
-}

From d20695260d2600c47d883ffeb96437f000d12a30 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 8 May 2024 19:37:45 +1000
Subject: [PATCH 063/116] feat(ui): open viewer on enqueue from generation tab

---
 .../listeners/enqueueRequestedLinear.ts               | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts
index 557220c449..a3f8f34249 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts
@@ -1,5 +1,6 @@
 import { enqueueRequested } from 'app/store/actions';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
 import { buildGenerationTabGraph } from 'features/nodes/util/graph/buildGenerationTabGraph';
 import { buildGenerationTabSDXLGraph } from 'features/nodes/util/graph/buildGenerationTabSDXLGraph';
 import { prepareLinearUIBatch } from 'features/nodes/util/graph/buildLinearBatchConfig';
@@ -11,6 +12,7 @@ export const addEnqueueRequestedLinear = (startAppListening: AppStartListening)
       enqueueRequested.match(action) && action.payload.tabName === 'generation',
     effect: async (action, { getState, dispatch }) => {
       const state = getState();
+      const { shouldShowProgressInViewer } = state.ui;
       const model = state.generation.model;
       const { prepend } = action.payload;
 
@@ -29,7 +31,14 @@ export const addEnqueueRequestedLinear = (startAppListening: AppStartListening)
           fixedCacheKey: 'enqueueBatch',
         })
       );
-      req.reset();
+      try {
+        req.unwrap();
+        if (shouldShowProgressInViewer) {
+          dispatch(isImageViewerOpenChanged(true));
+        }
+      } finally {
+        req.reset();
+      }
     },
   });
 };

From 5ca794b94f3ee58ed8592c6e18d7e30e9e097b64 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 8 May 2024 19:41:39 +1000
Subject: [PATCH 064/116] feat(ui): show progress toggle on control layers
 toolbar

---
 .../controlLayers/components/ControlLayersToolbar.tsx        | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
index b087d8dc70..8cc3aa93fe 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersToolbar.tsx
@@ -4,6 +4,7 @@ import { BrushSize } from 'features/controlLayers/components/BrushSize';
 import ControlLayersSettingsPopover from 'features/controlLayers/components/ControlLayersSettingsPopover';
 import { ToolChooser } from 'features/controlLayers/components/ToolChooser';
 import { UndoRedoButtonGroup } from 'features/controlLayers/components/UndoRedoButtonGroup';
+import { ToggleProgressButton } from 'features/gallery/components/ImageViewer/ToggleProgressButton';
 import { ViewerToggleMenu } from 'features/gallery/components/ImageViewer/ViewerToggleMenu';
 import { memo } from 'react';
 
@@ -11,7 +12,9 @@ export const ControlLayersToolbar = memo(() => {
   return (
     <Flex w="full" gap={2}>
       <Flex flex={1} justifyContent="center">
-        <Flex gap={2} marginInlineEnd="auto" />
+        <Flex gap={2} marginInlineEnd="auto">
+          <ToggleProgressButton />
+        </Flex>
       </Flex>
       <Flex flex={1} gap={2} justifyContent="center">
         <BrushSize />

From 6c768bfe7ed6e55e2fab4a04aa7437d91c4bc77d Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 8 May 2024 19:42:03 +1000
Subject: [PATCH 065/116] fix(ui): viewer toggle prevents progress toggle
 interaction

---
 .../gallery/components/ImageViewer/ViewerToggleMenu.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
index c1277d142f..dd4268b208 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
@@ -19,7 +19,7 @@ export const ViewerToggleMenu = () => {
   const { isOpen, onClose, onOpen } = useImageViewer();
 
   return (
-    <Popover>
+    <Popover isLazy>
       <PopoverTrigger>
         <Button variant="outline">
           <Flex gap={3} w="full" alignItems="center">

From 58205792377c55ebe11d6d560d3fc8a7a7449034 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Wed, 8 May 2024 15:31:14 -0400
Subject: [PATCH 066/116] switch to generation tab when someone sends to
 img2img

---
 .../components/ImageContextMenu/SingleSelectionMenuItems.tsx    | 1 +
 .../gallery/components/ImageViewer/CurrentImageButtons.tsx      | 2 ++
 .../web/src/features/parameters/hooks/usePreselectedImage.ts    | 1 +
 3 files changed, 4 insertions(+)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
index 7bfb4050fb..a25f6d8c0e 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
@@ -73,6 +73,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
   const handleSendToImageToImage = useCallback(() => {
     dispatch(sentImageToImg2Img());
     dispatch(iiLayerAdded(imageDTO));
+    dispatch(setActiveTab('generation'));
   }, [dispatch, imageDTO]);
 
   const handleSendToCanvas = useCallback(() => {
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx
index f93f48e51b..7241501967 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx
@@ -30,6 +30,7 @@ import {
   PiRulerBold,
 } from 'react-icons/pi';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
+import { setActiveTab } from '../../../ui/store/uiSlice';
 
 const selectShouldDisableToolbarButtons = createSelector(
   selectSystemSlice,
@@ -84,6 +85,7 @@ const CurrentImageButtons = () => {
     }
     dispatch(sentImageToImg2Img());
     dispatch(iiLayerAdded(imageDTO));
+    dispatch(setActiveTab('generation'));
   }, [dispatch, imageDTO]);
 
   useHotkeys('shift+i', handleSendToImageToImage, [imageDTO]);
diff --git a/invokeai/frontend/web/src/features/parameters/hooks/usePreselectedImage.ts b/invokeai/frontend/web/src/features/parameters/hooks/usePreselectedImage.ts
index 20d771d75d..5ddecbd8bc 100644
--- a/invokeai/frontend/web/src/features/parameters/hooks/usePreselectedImage.ts
+++ b/invokeai/frontend/web/src/features/parameters/hooks/usePreselectedImage.ts
@@ -38,6 +38,7 @@ export const usePreselectedImage = (selectedImage?: {
   const handleSendToImg2Img = useCallback(() => {
     if (selectedImageDto) {
       dispatch(iiLayerAdded(selectedImageDto));
+      dispatch(setActiveTab("generation"))
     }
   }, [dispatch, selectedImageDto]);
 

From 03c24ca9cbf14c0e3f2f2891a443e0118338729b Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Wed, 8 May 2024 15:47:27 -0400
Subject: [PATCH 067/116] lint fix

---
 .../gallery/components/ImageViewer/CurrentImageButtons.tsx      | 2 +-
 .../web/src/features/parameters/hooks/usePreselectedImage.ts    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx
index 7241501967..ada9c35d28 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx
@@ -16,6 +16,7 @@ import ParamUpscalePopover from 'features/parameters/components/Upscale/ParamUps
 import { useIsQueueMutationInProgress } from 'features/queue/hooks/useIsQueueMutationInProgress';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { selectSystemSlice } from 'features/system/store/systemSlice';
+import { setActiveTab } from 'features/ui/store/uiSlice';
 import { useGetAndLoadEmbeddedWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadEmbeddedWorkflow';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -30,7 +31,6 @@ import {
   PiRulerBold,
 } from 'react-icons/pi';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
-import { setActiveTab } from '../../../ui/store/uiSlice';
 
 const selectShouldDisableToolbarButtons = createSelector(
   selectSystemSlice,
diff --git a/invokeai/frontend/web/src/features/parameters/hooks/usePreselectedImage.ts b/invokeai/frontend/web/src/features/parameters/hooks/usePreselectedImage.ts
index 5ddecbd8bc..d892906fcd 100644
--- a/invokeai/frontend/web/src/features/parameters/hooks/usePreselectedImage.ts
+++ b/invokeai/frontend/web/src/features/parameters/hooks/usePreselectedImage.ts
@@ -38,7 +38,7 @@ export const usePreselectedImage = (selectedImage?: {
   const handleSendToImg2Img = useCallback(() => {
     if (selectedImageDto) {
       dispatch(iiLayerAdded(selectedImageDto));
-      dispatch(setActiveTab("generation"))
+      dispatch(setActiveTab('generation'));
     }
   }, [dispatch, selectedImageDto]);
 

From 722a91aedb3405d9aa3ce81f10bf845864393402 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 06:42:01 +1000
Subject: [PATCH 068/116] fix(ui): canvas toolbar centering

---
 .../canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
index 9b45bb3860..686577b4a7 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
@@ -219,7 +219,7 @@ const IAICanvasToolbar = () => {
   const value = useMemo(() => LAYER_NAMES_DICT.filter((o) => o.value === layer)[0], [layer]);
 
   return (
-    <Flex w="full" gap={2} alignItems="center">
+    <Flex alignItems="center" gap={2} flexWrap="wrap">
       <Tooltip label={`${t('unifiedCanvas.layer')} (Q)`}>
         <FormControl isDisabled={isStaging} w="5rem">
           <Combobox value={value} options={LAYER_NAMES_DICT} onChange={handleChangeLayer} />

From 1aa7cd57c2b057a887f1c8ef13b325f92317e1bd Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 06:50:39 +1000
Subject: [PATCH 069/116] feat(ui): add invert brush scroll checkbox to control
 layers settings

---
 .../ControlLayersSettingsPopover.tsx          | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersSettingsPopover.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersSettingsPopover.tsx
index 89032b7c76..1f3307bdf1 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersSettingsPopover.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersSettingsPopover.tsx
@@ -1,12 +1,30 @@
-import { Flex, IconButton, Popover, PopoverBody, PopoverContent, PopoverTrigger } from '@invoke-ai/ui-library';
+import {
+  Checkbox,
+  Flex,
+  FormControl,
+  FormLabel,
+  IconButton,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+} from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { setShouldInvertBrushSizeScrollDirection } from 'features/canvas/store/canvasSlice';
 import { GlobalMaskLayerOpacity } from 'features/controlLayers/components/GlobalMaskLayerOpacity';
-import { memo } from 'react';
+import type { ChangeEvent } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RiSettings4Fill } from 'react-icons/ri';
 
 const ControlLayersSettingsPopover = () => {
   const { t } = useTranslation();
-
+  const dispatch = useAppDispatch();
+  const shouldInvertBrushSizeScrollDirection = useAppSelector((s) => s.canvas.shouldInvertBrushSizeScrollDirection);
+  const handleChangeShouldInvertBrushSizeScrollDirection = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => dispatch(setShouldInvertBrushSizeScrollDirection(e.target.checked)),
+    [dispatch]
+  );
   return (
     <Popover isLazy>
       <PopoverTrigger>
@@ -16,6 +34,13 @@ const ControlLayersSettingsPopover = () => {
         <PopoverBody>
           <Flex direction="column" gap={2}>
             <GlobalMaskLayerOpacity />
+            <FormControl w="full">
+              <FormLabel flexGrow={1}>{t('unifiedCanvas.invertBrushSizeScrollDirection')}</FormLabel>
+              <Checkbox
+                isChecked={shouldInvertBrushSizeScrollDirection}
+                onChange={handleChangeShouldInvertBrushSizeScrollDirection}
+              />
+            </FormControl>
           </Flex>
         </PopoverBody>
       </PopoverContent>

From fc7f4849354e81f5b92048f09d7d239841d6ba9d Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 06:57:13 +1000
Subject: [PATCH 070/116] feat(ui): add `data-testid`s to control layers
 components:

- Add Layer Menu Button: `control-layers-add-layer-menu-button`
- Delete All Layers Button: `control-layers-delete-all-layers-button`
- CL Layer List: `control-layers-layer-list`
- CL Canvas: `control-layers-canvas`
- Toggle Metadata Button: `toggle-show-metadata-button`
- Toggle Progress Button: `toggle-show-progress-button`
- Toggle Viewer Menu Button: `toggle-viewer-menu-button`
- Settings Tab Button: `generation-tab-settings-tab-button`
- Control Layers Tab Button: `generation-tab-control-layers-tab-button`
---
 .../features/controlLayers/components/AddLayerButton.tsx | 7 ++++++-
 .../components/ControlLayersPanelContent.tsx             | 2 +-
 .../controlLayers/components/DeleteAllLayersButton.tsx   | 1 +
 .../features/controlLayers/components/StageComponent.tsx | 9 ++++++++-
 .../ImageViewer/ToggleMetadataViewerButton.tsx           | 1 +
 .../components/ImageViewer/ToggleProgressButton.tsx      | 1 +
 .../gallery/components/ImageViewer/ViewerToggleMenu.tsx  | 2 +-
 .../ui/components/ParametersPanelTextToImage.tsx         | 8 ++++++--
 8 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx
index 3102e4afa8..c7a49da8c7 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx
@@ -18,7 +18,12 @@ export const AddLayerButton = memo(() => {
 
   return (
     <Menu>
-      <MenuButton as={Button} leftIcon={<PiPlusBold />} variant="ghost">
+      <MenuButton
+        as={Button}
+        leftIcon={<PiPlusBold />}
+        variant="ghost"
+        data-testid="control-layers-add-layer-menu-button"
+      >
         {t('controlLayers.addLayer')}
       </MenuButton>
       <MenuList>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx
index 1dd79d0220..d3ddc07139 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx
@@ -32,7 +32,7 @@ export const ControlLayersPanelContent = memo(() => {
       </Flex>
       {layerIdTypePairs.length > 0 && (
         <ScrollableContent>
-          <Flex flexDir="column" gap={2}>
+          <Flex flexDir="column" gap={2} data-testid="control-layers-layer-list">
             {layerIdTypePairs.map(({ id, type }) => (
               <LayerWrapper key={id} id={id} type={type} />
             ))}
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/DeleteAllLayersButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/DeleteAllLayersButton.tsx
index dad102b470..00487fcc43 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/DeleteAllLayersButton.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/DeleteAllLayersButton.tsx
@@ -20,6 +20,7 @@ export const DeleteAllLayersButton = memo(() => {
       variant="ghost"
       colorScheme="error"
       isDisabled={isDisabled}
+      data-testid="control-layers-delete-all-layers-button"
     >
       {t('controlLayers.deleteAll')}
     </Button>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
index d0d693a5f2..16bf4aa121 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
@@ -233,7 +233,14 @@ export const StageComponent = memo(({ asPreview = false }: Props) => {
   return (
     <Flex overflow="hidden" w="full" h="full">
       <Flex ref={wrapperRef} w="full" h="full" alignItems="center" justifyContent="center">
-        <Flex ref={containerRef} tabIndex={-1} bg="base.850" borderRadius="base" overflow="hidden" />
+        <Flex
+          ref={containerRef}
+          tabIndex={-1}
+          bg="base.850"
+          borderRadius="base"
+          overflow="hidden"
+          data-testid="control-layers-canvas"
+        />
       </Flex>
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx
index a298ebda56..4bf55116db 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx
@@ -35,6 +35,7 @@ export const ToggleMetadataViewerButton = memo(() => {
       isDisabled={!imageDTO}
       variant="outline"
       colorScheme={shouldShowImageDetails ? 'invokeBlue' : 'base'}
+      data-testid="toggle-show-metadata-button"
     />
   );
 });
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleProgressButton.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleProgressButton.tsx
index 994a8bf10e..ee698130fb 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleProgressButton.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleProgressButton.tsx
@@ -22,6 +22,7 @@ export const ToggleProgressButton = memo(() => {
       onClick={onClick}
       variant="outline"
       colorScheme={shouldShowProgressInViewer ? 'invokeBlue' : 'base'}
+      data-testid="toggle-show-progress-button"
     />
   );
 });
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
index dd4268b208..3552c28a5b 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
@@ -21,7 +21,7 @@ export const ViewerToggleMenu = () => {
   return (
     <Popover isLazy>
       <PopoverTrigger>
-        <Button variant="outline">
+        <Button variant="outline" data-testid="toggle-viewer-menu-button">
           <Flex gap={3} w="full" alignItems="center">
             {isOpen ? <Icon as={PiEyeBold} /> : <Icon as={PiPencilBold} />}
             <Text fontSize="md">{isOpen ? t('common.viewing') : t('common.editing')}</Text>
diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
index 698be530f9..b78d5dce9a 100644
--- a/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
@@ -75,10 +75,14 @@ const ParametersPanelTextToImage = () => {
                 onChange={onChangeTabs}
               >
                 <TabList gap={2} fontSize="sm" borderColor="base.800">
-                  <Tab sx={baseStyles} _selected={selectedStyles}>
+                  <Tab sx={baseStyles} _selected={selectedStyles} data-testid="generation-tab-settings-tab-button">
                     {t('common.settingsLabel')}
                   </Tab>
-                  <Tab sx={baseStyles} _selected={selectedStyles}>
+                  <Tab
+                    sx={baseStyles}
+                    _selected={selectedStyles}
+                    data-testid="generation-tab-control-layers-tab-button"
+                  >
                     {controlLayersTitle}
                   </Tab>
                 </TabList>

From cec8840038ba895953a70f615a944635ad861bfe Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 08:13:08 +1000
Subject: [PATCH 071/116] fix(ui): handle disabled RG layers

Was missing a check for `layer.isEnabled`.
---
 .../nodes/util/graph/addControlLayersToGraph.ts    | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
index 6f249fd522..607cda786d 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
@@ -679,29 +679,23 @@ const isValidIPAdapter = (ipa: IPAdapterConfigV2, base: BaseModelType): boolean
 };
 
 const isValidLayer = (layer: Layer, base: BaseModelType) => {
+  if (!layer.isEnabled) {
+    return false;
+  }
   if (isControlAdapterLayer(layer)) {
-    if (!layer.isEnabled) {
-      return false;
-    }
     return isValidControlAdapter(layer.controlAdapter, base);
   }
   if (isIPAdapterLayer(layer)) {
-    if (!layer.isEnabled) {
-      return false;
-    }
     return isValidIPAdapter(layer.ipAdapter, base);
   }
   if (isInitialImageLayer(layer)) {
-    if (!layer.isEnabled) {
-      return false;
-    }
     if (!layer.image) {
       return false;
     }
     return true;
   }
   if (isRegionalGuidanceLayer(layer)) {
-    const hasTextPrompt = Boolean(layer.positivePrompt || layer.negativePrompt);
+    const hasTextPrompt = Boolean(layer.positivePrompt) || Boolean(layer.negativePrompt);
     const hasIPAdapter = layer.ipAdapters.filter((ipa) => isValidIPAdapter(ipa, base)).length > 0;
     return hasTextPrompt || hasIPAdapter;
   }

From 44280ed472df508d1d148be586ea76d40c84bd58 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 08:26:50 +1000
Subject: [PATCH 072/116] fix(ui): layer recall uses fresh ids

When layer metadata is stored, the layer IDs are included. When recalling the metadata, we need to assign fresh IDs, else we can end up with multiple layers with the same ID, which of course causes all sorts of issues.
---
 .../controlLayers/store/controlLayersSlice.ts         |  2 +-
 .../web/src/features/metadata/util/recallers.ts       | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
index fb890f7d45..39186945c1 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
@@ -921,7 +921,7 @@ export const LAYER_BBOX_NAME = 'layer.bbox';
 export const COMPOSITING_RECT_NAME = 'compositing-rect';
 
 // Getters for non-singleton layer and object IDs
-const getRGLayerId = (layerId: string) => `${RG_LAYER_NAME}_${layerId}`;
+export const getRGLayerId = (layerId: string) => `${RG_LAYER_NAME}_${layerId}`;
 const getRGLayerLineId = (layerId: string, lineId: string) => `${layerId}.line_${lineId}`;
 const getRGLayerRectId = (layerId: string, lineId: string) => `${layerId}.rect_${lineId}`;
 export const getRGLayerObjectGroupId = (layerId: string, groupId: string) => `${layerId}.objectGroup_${groupId}`;
diff --git a/invokeai/frontend/web/src/features/metadata/util/recallers.ts b/invokeai/frontend/web/src/features/metadata/util/recallers.ts
index 673e2187f2..5a17fd4b5d 100644
--- a/invokeai/frontend/web/src/features/metadata/util/recallers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/recallers.ts
@@ -9,6 +9,9 @@ import {
 import {
   allLayersDeleted,
   caLayerRecalled,
+  getCALayerId,
+  getIPALayerId,
+  getRGLayerId,
   heightChanged,
   iiLayerRecalled,
   ipaLayerRecalled,
@@ -72,6 +75,7 @@ import {
   setRefinerSteps,
 } from 'features/sdxl/store/sdxlSlice';
 import { getImageDTO } from 'services/api/endpoints/images';
+import { v4 as uuidv4 } from 'uuid';
 
 const recallPositivePrompt: MetadataRecallFunc<ParameterPositivePrompt> = (positivePrompt) => {
   getStore().dispatch(positivePromptChanged(positivePrompt));
@@ -243,6 +247,7 @@ const recallIPAdapters: MetadataRecallFunc<IPAdapterConfigMetadata[]> = (ipAdapt
 const recallLayer: MetadataRecallFunc<Layer> = async (layer) => {
   const { dispatch } = getStore();
   // We need to check for the existence of all images and models when recalling. If they do not exist, SMITE THEM!
+  // Also, we need fresh IDs for all objects when recalling, to prevent multiple layers with the same ID.
   if (layer.type === 'control_adapter_layer') {
     const clone = deepClone(layer);
     if (clone.controlAdapter.image) {
@@ -264,6 +269,8 @@ const recallLayer: MetadataRecallFunc<Layer> = async (layer) => {
         clone.controlAdapter.model = null;
       }
     }
+    clone.id = getCALayerId(uuidv4());
+    clone.controlAdapter.id = uuidv4();
     dispatch(caLayerRecalled(clone));
     return;
   }
@@ -282,6 +289,8 @@ const recallLayer: MetadataRecallFunc<Layer> = async (layer) => {
         clone.ipAdapter.model = null;
       }
     }
+    clone.id = getIPALayerId(uuidv4());
+    clone.ipAdapter.id = uuidv4();
     dispatch(ipaLayerRecalled(clone));
     return;
   }
@@ -305,7 +314,9 @@ const recallLayer: MetadataRecallFunc<Layer> = async (layer) => {
           ipAdapter.model = null;
         }
       }
+      ipAdapter.id = uuidv4();
     }
+    clone.id = getRGLayerId(uuidv4());
     dispatch(rgLayerRecalled(clone));
     return;
   }

From adebe639e3fc1a9ba70ace40808491f6df2b5a5e Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 10:08:36 +1000
Subject: [PATCH 073/116] tidy(ui): remove errant console.logs

---
 .../listeners/controlAdapterPreprocessor.ts                 | 1 -
 invokeai/frontend/web/src/features/metadata/util/parsers.ts | 6 ------
 .../features/nodes/util/graph/buildGenerationTabGraph.ts    | 1 -
 3 files changed, 8 deletions(-)

diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlAdapterPreprocessor.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlAdapterPreprocessor.ts
index 92c3e7afa7..57a7cccf6c 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlAdapterPreprocessor.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlAdapterPreprocessor.ts
@@ -132,7 +132,6 @@ export const addControlAdapterPreprocessor = (startAppListening: AppStartListeni
           dispatch(caLayerIsProcessingImageChanged({ layerId, isProcessingImage: false }));
         }
       } catch (error) {
-        console.log(error);
         log.error({ enqueueBatchArg: parseify(enqueueBatchArg) }, t('queue.graphFailedToQueue'));
         dispatch(caLayerIsProcessingImageChanged({ layerId, isProcessingImage: false }));
 
diff --git a/invokeai/frontend/web/src/features/metadata/util/parsers.ts b/invokeai/frontend/web/src/features/metadata/util/parsers.ts
index 1848152d2b..eb53031578 100644
--- a/invokeai/frontend/web/src/features/metadata/util/parsers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/parsers.ts
@@ -455,11 +455,9 @@ const parseLayers: MetadataParseFunc<Layer[]> = async (metadata) => {
 
     try {
       const controlNetsRaw = await getProperty(metadata, 'controlnets', isArray);
-      console.log('controlNetsRaw', controlNetsRaw);
       const controlNetsParseResults = await Promise.allSettled(
         controlNetsRaw.map(async (cn) => await parseControlNetToControlAdapterLayer(cn))
       );
-      console.log('controlNetsParseResults', controlNetsParseResults);
       const controlNetsAsLayers = controlNetsParseResults
         .filter((result): result is PromiseFulfilledResult<ControlAdapterLayer> => result.status === 'fulfilled')
         .map((result) => result.value);
@@ -470,11 +468,9 @@ const parseLayers: MetadataParseFunc<Layer[]> = async (metadata) => {
 
     try {
       const t2iAdaptersRaw = await getProperty(metadata, 't2iAdapters', isArray);
-      console.log('t2iAdaptersRaw', t2iAdaptersRaw);
       const t2iAdaptersParseResults = await Promise.allSettled(
         t2iAdaptersRaw.map(async (cn) => await parseT2IAdapterToControlAdapterLayer(cn))
       );
-      console.log('t2iAdaptersParseResults', t2iAdaptersParseResults);
       const t2iAdaptersAsLayers = t2iAdaptersParseResults
         .filter((result): result is PromiseFulfilledResult<ControlAdapterLayer> => result.status === 'fulfilled')
         .map((result) => result.value);
@@ -485,11 +481,9 @@ const parseLayers: MetadataParseFunc<Layer[]> = async (metadata) => {
 
     try {
       const ipAdaptersRaw = await getProperty(metadata, 'ipAdapters', isArray);
-      console.log('ipAdaptersRaw', ipAdaptersRaw);
       const ipAdaptersParseResults = await Promise.allSettled(
         ipAdaptersRaw.map(async (cn) => await parseIPAdapterToIPAdapterLayer(cn))
       );
-      console.log('ipAdaptersParseResults', ipAdaptersParseResults);
       const ipAdaptersAsLayers = ipAdaptersParseResults
         .filter((result): result is PromiseFulfilledResult<IPAdapterLayer> => result.status === 'fulfilled')
         .map((result) => result.value);
diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/buildGenerationTabGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/buildGenerationTabGraph.ts
index a1ee581736..2a6946708f 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildGenerationTabGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildGenerationTabGraph.ts
@@ -249,7 +249,6 @@ export const buildGenerationTabGraph = async (state: RootState): Promise<NonNull
   const shouldUseHRF = !addedLayers.some((l) => isInitialImageLayer(l) || isRegionalGuidanceLayer(l));
   // High resolution fix.
   if (state.hrf.hrfEnabled && shouldUseHRF) {
-    console.log('HRFING');
     addHrfToGraph(state, graph);
   }
 

From 32f4c1f966a96b3fb59ddf3d19625260a2e9d187 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 10:10:01 +1000
Subject: [PATCH 074/116] fix(ui): memoize mouse event handlers

This prevents resetting the stage event handlers on every frame. Whoops!
---
 .../src/features/controlLayers/hooks/mouseEventHooks.ts    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts
index fa49fdb473..514e8c35ff 100644
--- a/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/hooks/mouseEventHooks.ts
@@ -224,5 +224,10 @@ export const useMouseEvents = () => {
     [selectedLayerType, tool, shouldInvertBrushSizeScrollDirection, dispatch, brushSize]
   );
 
-  return { onMouseDown, onMouseUp, onMouseMove, onMouseLeave, onMouseWheel };
+  const handlers = useMemo(
+    () => ({ onMouseDown, onMouseUp, onMouseMove, onMouseLeave, onMouseWheel }),
+    [onMouseDown, onMouseUp, onMouseMove, onMouseLeave, onMouseWheel]
+  );
+
+  return handlers;
 };

From f631aea4ee93b9b0c8c2e31ee3f3b2bb46c54e2a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 10:32:51 +1000
Subject: [PATCH 075/116] fix(ui): skip RG layers with no mask

These do not need to be added to the graph or metadata, as they are no-ops on the backend.
---
 .../src/features/nodes/util/graph/addControlLayersToGraph.ts  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
index 607cda786d..a541d3948f 100644
--- a/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
@@ -695,6 +695,10 @@ const isValidLayer = (layer: Layer, base: BaseModelType) => {
     return true;
   }
   if (isRegionalGuidanceLayer(layer)) {
+    if (layer.maskObjects.length === 0) {
+      // Layer has no mask, meaning any guidance would be applied to an empty region.
+      return false;
+    }
     const hasTextPrompt = Boolean(layer.positivePrompt) || Boolean(layer.negativePrompt);
     const hasIPAdapter = layer.ipAdapters.filter((ipa) => isValidIPAdapter(ipa, base)).length > 0;
     return hasTextPrompt || hasIPAdapter;

From fc000214a56e34265336f58705892861818bbb42 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 10:52:02 +1000
Subject: [PATCH 076/116] feat(ui): check for transparency and clear masks if
 no pixel data

Mask vector data includes additive (brush, rect) shapes and subtractive (eraser) shapes. A different composite operation is used to draw a shape, depending on whether it is additive or subtractive.

This means that a mask may have vector objects, but once rendered, is _visually_ empty (fully transparent). The only way determine if a mask is visually empty is to render it and check every pixel.

When we generate and save layer metadata, these fully erased masks are still used. Generating with an empty mask is a no-op in the backend, so we want to avoid this and not pollute graphs/metadata.

Previously, we did that pixel-based when calculating the bbox, which we only did when using the move tool, and only for the selected layer.

This change introduces a simpler function to check if a mask is transparent, and if so, deletes all its objects to reset it. This allows us skip these no-op layers entirely.

This check is debounced to 300 ms, trailing edge only.
---
 .../components/StageComponent.tsx             |  15 ++-
 .../src/features/controlLayers/util/bbox.ts   | 101 ++++++++++++++----
 .../features/controlLayers/util/renderers.ts  |  23 +++-
 3 files changed, 114 insertions(+), 25 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
index 16bf4aa121..23a1a3482f 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
@@ -130,11 +130,11 @@ const useStageRenderer = (
   }, [stage, state.size.width, state.size.height, wrapper]);
 
   useLayoutEffect(() => {
-    log.trace('Rendering tool preview');
     if (asPreview) {
       // Preview should not display tool
       return;
     }
+    log.trace('Rendering tool preview');
     renderers.renderToolPreview(
       stage,
       tool,
@@ -182,11 +182,20 @@ const useStageRenderer = (
   }, [stage, asPreview, state.layers, tool, onBboxChanged, renderers]);
 
   useLayoutEffect(() => {
-    log.trace('Rendering background');
+    if (asPreview) {
+      // Preview should not check for transparency
+      return;
+    }
+    log.trace('Checking for transparency');
+    debouncedRenderers.checkForTransparency(stage, state.layers, onBboxChanged);
+  }, [stage, asPreview, state.layers, onBboxChanged]);
+
+  useLayoutEffect(() => {
     if (asPreview) {
       // The preview should not have a background
       return;
     }
+    log.trace('Rendering background');
     renderers.renderBackground(stage, state.size.width, state.size.height);
   }, [stage, asPreview, state.size.width, state.size.height, renderers]);
 
@@ -196,11 +205,11 @@ const useStageRenderer = (
   }, [stage, layerIds, renderers]);
 
   useLayoutEffect(() => {
-    log.trace('Rendering no layers message');
     if (asPreview) {
       // The preview should not display the no layers message
       return;
     }
+    log.trace('Rendering no layers message');
     renderers.renderNoLayersMessage(stage, layerCount, state.size.width, state.size.height);
   }, [stage, layerCount, renderers, asPreview, state.size.width, state.size.height]);
 
diff --git a/invokeai/frontend/web/src/features/controlLayers/util/bbox.ts b/invokeai/frontend/web/src/features/controlLayers/util/bbox.ts
index 72aefe1eb4..684d199ed4 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/bbox.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/bbox.ts
@@ -2,7 +2,6 @@ import openBase64ImageInTab from 'common/util/openBase64ImageInTab';
 import { imageDataToDataURL } from 'features/canvas/util/blobToDataURL';
 import { RG_LAYER_OBJECT_GROUP_NAME } from 'features/controlLayers/store/controlLayersSlice';
 import Konva from 'konva';
-import type { Layer as KonvaLayerType } from 'konva/lib/Layer';
 import type { IRect } from 'konva/lib/types';
 import { assert } from 'tsafe';
 
@@ -54,34 +53,49 @@ const getImageDataBbox = (imageData: ImageData): Extents | null => {
 };
 
 /**
- * Get the bounding box of a regional prompt konva layer. This function has special handling for regional prompt layers.
- * @param layer The konva layer to get the bounding box of.
- * @param preview Whether to open a new tab displaying the rendered layer, which is used to calculate the bbox.
+ * Check if an image is fully transparent.
+ * @param imageData The ImageData object to check for transparency.
+ * @returns Whether the image is fully transparent.
  */
-export const getLayerBboxPixels = (layer: KonvaLayerType, preview: boolean = false): IRect | null => {
-  // To calculate the layer's bounding box, we must first export it to a pixel array, then do some math.
-  //
-  // Though it is relatively fast, we can't use Konva's `getClientRect`. It programmatically determines the rect
-  // by calculating the extents of individual shapes from their "vector" shape data.
-  //
-  // This doesn't work when some shapes are drawn with composite operations that "erase" pixels, like eraser lines.
-  // These shapes' extents are still calculated as if they were solid, leading to a bounding box that is too large.
+const getIsFullyTransparent = (imageData: ImageData) => {
+  if (!imageData.height || !imageData.width || imageData.data.length === 0) {
+    return true;
+  }
+  const data = imageData.data;
+  const len = data.length / 4;
+  for (let i = 0; i < len; i++) {
+    if (data[i * 4 + 3] ?? 0 > 0) {
+      return false;
+    }
+  }
+  return true;
+};
+
+/**
+ * Clones a regional guidance konva layer onto an offscreen stage/canvas. This allows the pixel data for a given layer
+ * to be captured, manipulated or analyzed without interference from other layers.
+ * @param layer The konva layer to clone.
+ * @returns The cloned stage and layer.
+ */
+const getIsolatedRGLayerClone = (layer: Konva.Layer): { stageClone: Konva.Stage; layerClone: Konva.Layer } => {
   const stage = layer.getStage();
 
-  // Construct and offscreen canvas on which we will do the bbox calculations.
+  // Construct an offscreen canvas with the same dimensions as the layer's stage.
   const offscreenStageContainer = document.createElement('div');
-  const offscreenStage = new Konva.Stage({
+  const stageClone = new Konva.Stage({
     container: offscreenStageContainer,
+    x: stage.x(),
+    y: stage.y(),
     width: stage.width(),
     height: stage.height(),
   });
 
   // Clone the layer and filter out unwanted children.
   const layerClone = layer.clone();
-  offscreenStage.add(layerClone);
+  stageClone.add(layerClone);
 
   for (const child of layerClone.getChildren()) {
-    if (child.name() === RG_LAYER_OBJECT_GROUP_NAME) {
+    if (child.name() === RG_LAYER_OBJECT_GROUP_NAME && child.hasChildren()) {
       // We need to cache the group to ensure it composites out eraser strokes correctly
       child.opacity(1);
       child.cache();
@@ -91,11 +105,31 @@ export const getLayerBboxPixels = (layer: KonvaLayerType, preview: boolean = fal
     }
   }
 
+  return { stageClone, layerClone };
+};
+
+/**
+ * Get the bounding box of a regional prompt konva layer. This function has special handling for regional prompt layers.
+ * @param layer The konva layer to get the bounding box of.
+ * @param preview Whether to open a new tab displaying the rendered layer, which is used to calculate the bbox.
+ */
+export const getLayerBboxPixels = (layer: Konva.Layer, preview: boolean = false): IRect | null => {
+  // To calculate the layer's bounding box, we must first export it to a pixel array, then do some math.
+  //
+  // Though it is relatively fast, we can't use Konva's `getClientRect`. It programmatically determines the rect
+  // by calculating the extents of individual shapes from their "vector" shape data.
+  //
+  // This doesn't work when some shapes are drawn with composite operations that "erase" pixels, like eraser lines.
+  // These shapes' extents are still calculated as if they were solid, leading to a bounding box that is too large.
+  const { stageClone, layerClone } = getIsolatedRGLayerClone(layer);
+
   // Get a worst-case rect using the relatively fast `getClientRect`.
   const layerRect = layerClone.getClientRect();
-
+  if (layerRect.width === 0 || layerRect.height === 0) {
+    return null;
+  }
   // Capture the image data with the above rect.
-  const layerImageData = offscreenStage
+  const layerImageData = stageClone
     .toCanvas(layerRect)
     .getContext('2d')
     ?.getImageData(0, 0, layerRect.width, layerRect.height);
@@ -114,8 +148,8 @@ export const getLayerBboxPixels = (layer: KonvaLayerType, preview: boolean = fal
 
   // Correct the bounding box to be relative to the layer's position.
   const correctedLayerBbox = {
-    x: layerBbox.minX - Math.floor(stage.x()) + layerRect.x - Math.floor(layer.x()),
-    y: layerBbox.minY - Math.floor(stage.y()) + layerRect.y - Math.floor(layer.y()),
+    x: layerBbox.minX - Math.floor(stageClone.x()) + layerRect.x - Math.floor(layer.x()),
+    y: layerBbox.minY - Math.floor(stageClone.y()) + layerRect.y - Math.floor(layer.y()),
     width: layerBbox.maxX - layerBbox.minX,
     height: layerBbox.maxY - layerBbox.minY,
   };
@@ -123,7 +157,13 @@ export const getLayerBboxPixels = (layer: KonvaLayerType, preview: boolean = fal
   return correctedLayerBbox;
 };
 
-export const getLayerBboxFast = (layer: KonvaLayerType): IRect => {
+/**
+ * Get the bounding box of a konva layer. This function is faster than `getLayerBboxPixels` but less accurate. It
+ * should only be used when there are no eraser strokes or shapes in the layer.
+ * @param layer The konva layer to get the bounding box of.
+ * @returns The bounding box of the layer.
+ */
+export const getLayerBboxFast = (layer: Konva.Layer): IRect => {
   const bbox = layer.getClientRect(GET_CLIENT_RECT_CONFIG);
   return {
     x: Math.floor(bbox.x),
@@ -132,3 +172,22 @@ export const getLayerBboxFast = (layer: KonvaLayerType): IRect => {
     height: Math.floor(bbox.height),
   };
 };
+
+export const getIsLayerTransparent = (layer: Konva.Layer): boolean => {
+  const { stageClone, layerClone } = getIsolatedRGLayerClone(layer);
+
+  // Get a worst-case rect using the relatively fast `getClientRect`.
+  const layerRect = layerClone.getClientRect();
+  if (layerRect.width === 0 || layerRect.height === 0) {
+    return true;
+  }
+
+  // Capture the image data with the above rect.
+  const layerImageData = stageClone
+    .toCanvas(layerRect)
+    .getContext('2d')
+    ?.getImageData(0, 0, layerRect.width, layerRect.height);
+  assert(layerImageData, "Unable to get layer's image data");
+
+  return getIsFullyTransparent(layerImageData);
+};
diff --git a/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts b/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
index 559d82aa5c..3d25fc3e98 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
@@ -40,7 +40,7 @@ import type {
   VectorMaskLine,
   VectorMaskRect,
 } from 'features/controlLayers/store/types';
-import { getLayerBboxFast, getLayerBboxPixels } from 'features/controlLayers/util/bbox';
+import { getIsLayerTransparent, getLayerBboxFast, getLayerBboxPixels } from 'features/controlLayers/util/bbox';
 import { t } from 'i18next';
 import Konva from 'konva';
 import type { IRect, Vector2d } from 'konva/lib/types';
@@ -890,6 +890,25 @@ const renderNoLayersMessage = (stage: Konva.Stage, layerCount: number, width: nu
   }
 };
 
+const checkForTransparency = (
+  stage: Konva.Stage,
+  reduxLayers: Layer[],
+  onBboxChanged: (layerId: string, bbox: IRect | null) => void
+) => {
+  for (const reduxLayer of reduxLayers.filter(isRegionalGuidanceLayer)) {
+    if (!reduxLayer.needsPixelBbox) {
+      continue;
+    }
+    const konvaLayer = stage.findOne<Konva.Layer>(`#${reduxLayer.id}`);
+    if (!konvaLayer) {
+      continue;
+    }
+    if (getIsLayerTransparent(konvaLayer)) {
+      onBboxChanged(reduxLayer.id, null);
+    }
+  }
+};
+
 export const renderers = {
   renderToolPreview,
   renderLayers,
@@ -897,6 +916,7 @@ export const renderers = {
   renderBackground,
   renderNoLayersMessage,
   arrangeLayers,
+  checkForTransparency,
 };
 
 const DEBOUNCE_MS = 300;
@@ -908,6 +928,7 @@ export const debouncedRenderers = {
   renderBackground: debounce(renderBackground, DEBOUNCE_MS),
   renderNoLayersMessage: debounce(renderNoLayersMessage, DEBOUNCE_MS),
   arrangeLayers: debounce(arrangeLayers, DEBOUNCE_MS),
+  checkForTransparency: debounce(checkForTransparency, DEBOUNCE_MS),
 };
 
 /**

From 1533429e54c918fb63ce76909e7367244356b300 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 11:54:21 +1000
Subject: [PATCH 077/116] feat(ui): optimized empty mask logic

Turns out, it's more efficient to just use the bbox logic for empty mask calculations. We already track if if the bbox needs updating, so this calculation does minimal work.

The dedicated calculation wasn't able to use the bbox tracking so it ran far more often than the bbox calculation.

Removed the "fast" bbox calculation logic, bc the new logic means we are continually updating the bbox in the background - not only when the user switches to the move tool and/or selects a layer.

The bbox calculation logic is split out from the bbox rendering logic to support this.

Result - better perf overall, with the empty mask handling retained.
---
 .../components/StageComponent.tsx             |   6 +-
 .../controlLayers/store/controlLayersSlice.ts |  36 ++----
 .../src/features/controlLayers/store/types.ts |   5 -
 .../src/features/controlLayers/util/bbox.ts   |  38 ------
 .../features/controlLayers/util/renderers.ts  | 119 +++++++++---------
 5 files changed, 69 insertions(+), 135 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
index 23a1a3482f..08956e73dc 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
@@ -178,7 +178,7 @@ const useStageRenderer = (
       // Preview should not display bboxes
       return;
     }
-    renderers.renderBbox(stage, state.layers, tool, onBboxChanged);
+    renderers.renderBboxes(stage, state.layers, tool);
   }, [stage, asPreview, state.layers, tool, onBboxChanged, renderers]);
 
   useLayoutEffect(() => {
@@ -186,8 +186,8 @@ const useStageRenderer = (
       // Preview should not check for transparency
       return;
     }
-    log.trace('Checking for transparency');
-    debouncedRenderers.checkForTransparency(stage, state.layers, onBboxChanged);
+    log.trace('Updating bboxes');
+    debouncedRenderers.updateBboxes(stage, state.layers, onBboxChanged);
   }, [stage, asPreview, state.layers, onBboxChanged]);
 
   useLayoutEffect(() => {
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
index 39186945c1..b191296ec0 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
@@ -137,13 +137,11 @@ export const controlLayersSlice = createSlice({
   reducers: {
     //#region Any Layer Type
     layerSelected: (state, action: PayloadAction<string>) => {
-      for (const layer of state.layers.filter(isRenderableLayer)) {
-        if (layer.id === action.payload) {
-          layer.isSelected = true;
-          state.selectedLayerId = action.payload;
-        } else {
-          layer.isSelected = false;
-        }
+      deselectAllLayers(state);
+      const layer = state.layers.find((l) => l.id === action.payload);
+      if (isRenderableLayer(layer)) {
+        layer.isSelected = true;
+        state.selectedLayerId = layer.id;
       }
     },
     layerVisibilityToggled: (state, action: PayloadAction<string>) => {
@@ -173,7 +171,6 @@ export const controlLayersSlice = createSlice({
           // The layer was fully erased, empty its objects to prevent accumulation of invisible objects
           layer.maskObjects = [];
           layer.uploadedMaskImage = null;
-          layer.needsPixelBbox = false;
         }
       }
     },
@@ -184,7 +181,6 @@ export const controlLayersSlice = createSlice({
         layer.maskObjects = [];
         layer.bbox = null;
         layer.isEnabled = true;
-        layer.needsPixelBbox = false;
         layer.bboxNeedsUpdate = false;
         layer.uploadedMaskImage = null;
       }
@@ -236,6 +232,7 @@ export const controlLayersSlice = createSlice({
         action: PayloadAction<{ layerId: string; controlAdapter: ControlNetConfigV2 | T2IAdapterConfigV2 }>
       ) => {
         const { layerId, controlAdapter } = action.payload;
+        deselectAllLayers(state);
         const layer: ControlAdapterLayer = {
           id: getCALayerId(layerId),
           type: 'control_adapter_layer',
@@ -251,11 +248,6 @@ export const controlLayersSlice = createSlice({
         };
         state.layers.push(layer);
         state.selectedLayerId = layer.id;
-        for (const layer of state.layers.filter(isRenderableLayer)) {
-          if (layer.id !== layerId) {
-            layer.isSelected = false;
-          }
-        }
       },
       prepare: (controlAdapter: ControlNetConfigV2 | T2IAdapterConfigV2) => ({
         payload: { layerId: uuidv4(), controlAdapter },
@@ -439,6 +431,7 @@ export const controlLayersSlice = createSlice({
     rgLayerAdded: {
       reducer: (state, action: PayloadAction<{ layerId: string }>) => {
         const { layerId } = action.payload;
+        deselectAllLayers(state);
         const layer: RegionalGuidanceLayer = {
           id: getRGLayerId(layerId),
           type: 'regional_guidance_layer',
@@ -450,7 +443,6 @@ export const controlLayersSlice = createSlice({
           x: 0,
           y: 0,
           autoNegative: 'invert',
-          needsPixelBbox: false,
           positivePrompt: '',
           negativePrompt: null,
           ipAdapters: [],
@@ -459,11 +451,6 @@ export const controlLayersSlice = createSlice({
         };
         state.layers.push(layer);
         state.selectedLayerId = layer.id;
-        for (const layer of state.layers.filter(isRenderableLayer)) {
-          if (layer.id !== layerId) {
-            layer.isSelected = false;
-          }
-        }
       },
       prepare: () => ({ payload: { layerId: uuidv4() } }),
     },
@@ -511,9 +498,6 @@ export const controlLayersSlice = createSlice({
         });
         layer.bboxNeedsUpdate = true;
         layer.uploadedMaskImage = null;
-        if (!layer.needsPixelBbox && tool === 'eraser') {
-          layer.needsPixelBbox = true;
-        }
       },
       prepare: (payload: { layerId: string; points: [number, number, number, number]; tool: DrawingTool }) => ({
         payload: { ...payload, lineUuid: uuidv4() },
@@ -638,6 +622,7 @@ export const controlLayersSlice = createSlice({
     //#region Initial Image Layer
     iiLayerAdded: {
       reducer: (state, action: PayloadAction<{ layerId: string; imageDTO: ImageDTO | null }>) => {
+        deselectAllLayers(state);
         const { layerId, imageDTO } = action.payload;
         // Highlander! There can be only one!
         state.layers = state.layers.filter((l) => (isInitialImageLayer(l) ? false : true));
@@ -656,11 +641,6 @@ export const controlLayersSlice = createSlice({
         };
         state.layers.push(layer);
         state.selectedLayerId = layer.id;
-        for (const layer of state.layers.filter(isRenderableLayer)) {
-          if (layer.id !== layerId) {
-            layer.isSelected = false;
-          }
-        }
       },
       prepare: (imageDTO: ImageDTO | null) => ({ payload: { layerId: INITIAL_IMAGE_LAYER_ID, imageDTO } }),
     },
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/types.ts b/invokeai/frontend/web/src/features/controlLayers/store/types.ts
index cd9db6e962..037034c33c 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/types.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/types.ts
@@ -92,11 +92,6 @@ const zRegionalGuidanceLayer = zRenderableLayerBase.extend({
   ipAdapters: z.array(zIPAdapterConfigV2),
   previewColor: zRgbColor,
   autoNegative: zAutoNegative,
-  needsPixelBbox: z
-    .boolean()
-    .describe(
-      'Whether the layer needs the slower pixel-based bbox calculation. Set to true when an there is an eraser object.'
-    ),
   uploadedMaskImage: zImageWithDims.nullable(),
 });
 export type RegionalGuidanceLayer = z.infer<typeof zRegionalGuidanceLayer>;
diff --git a/invokeai/frontend/web/src/features/controlLayers/util/bbox.ts b/invokeai/frontend/web/src/features/controlLayers/util/bbox.ts
index 684d199ed4..3b037863c9 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/bbox.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/bbox.ts
@@ -52,25 +52,6 @@ const getImageDataBbox = (imageData: ImageData): Extents | null => {
   return isEmpty ? null : { minX, minY, maxX, maxY };
 };
 
-/**
- * Check if an image is fully transparent.
- * @param imageData The ImageData object to check for transparency.
- * @returns Whether the image is fully transparent.
- */
-const getIsFullyTransparent = (imageData: ImageData) => {
-  if (!imageData.height || !imageData.width || imageData.data.length === 0) {
-    return true;
-  }
-  const data = imageData.data;
-  const len = data.length / 4;
-  for (let i = 0; i < len; i++) {
-    if (data[i * 4 + 3] ?? 0 > 0) {
-      return false;
-    }
-  }
-  return true;
-};
-
 /**
  * Clones a regional guidance konva layer onto an offscreen stage/canvas. This allows the pixel data for a given layer
  * to be captured, manipulated or analyzed without interference from other layers.
@@ -172,22 +153,3 @@ export const getLayerBboxFast = (layer: Konva.Layer): IRect => {
     height: Math.floor(bbox.height),
   };
 };
-
-export const getIsLayerTransparent = (layer: Konva.Layer): boolean => {
-  const { stageClone, layerClone } = getIsolatedRGLayerClone(layer);
-
-  // Get a worst-case rect using the relatively fast `getClientRect`.
-  const layerRect = layerClone.getClientRect();
-  if (layerRect.width === 0 || layerRect.height === 0) {
-    return true;
-  }
-
-  // Capture the image data with the above rect.
-  const layerImageData = stageClone
-    .toCanvas(layerRect)
-    .getContext('2d')
-    ?.getImageData(0, 0, layerRect.width, layerRect.height);
-  assert(layerImageData, "Unable to get layer's image data");
-
-  return getIsFullyTransparent(layerImageData);
-};
diff --git a/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts b/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
index 3d25fc3e98..f4931a7f9e 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
@@ -40,7 +40,7 @@ import type {
   VectorMaskLine,
   VectorMaskRect,
 } from 'features/controlLayers/store/types';
-import { getIsLayerTransparent, getLayerBboxFast, getLayerBboxPixels } from 'features/controlLayers/util/bbox';
+import { getLayerBboxFast, getLayerBboxPixels } from 'features/controlLayers/util/bbox';
 import { t } from 'i18next';
 import Konva from 'konva';
 import type { IRect, Vector2d } from 'konva/lib/types';
@@ -437,8 +437,8 @@ const renderRegionalGuidanceLayer = (
     konvaObjectGroup.opacity(1);
 
     compositingRect.setAttrs({
-      // The rect should be the size of the layer - use the fast method bc it's OK if the rect is larger
-      ...getLayerBboxFast(konvaLayer),
+      // The rect should be the size of the layer - use the fast method if we don't have a pixel-perfect bbox already
+      ...(!reduxLayer.bboxNeedsUpdate && reduxLayer.bbox ? reduxLayer.bbox : getLayerBboxFast(konvaLayer)),
       fill: rgbColor,
       opacity: globalMaskLayerOpacity,
       // Draw this rect only where there are non-transparent pixels under it (e.g. the mask shapes)
@@ -716,6 +716,7 @@ const createBboxRect = (reduxLayer: Layer, konvaLayer: Konva.Layer) => {
     id: getLayerBboxId(reduxLayer.id),
     name: LAYER_BBOX_NAME,
     strokeWidth: 1,
+    visible: false,
   });
   konvaLayer.add(rect);
   return rect;
@@ -725,18 +726,10 @@ const createBboxRect = (reduxLayer: Layer, konvaLayer: Konva.Layer) => {
  * Renders the bounding boxes for the layers.
  * @param stage The konva stage to render on
  * @param reduxLayers An array of all redux layers to draw bboxes for
- * @param selectedLayerId The selected layer's id
  * @param tool The current tool
- * @param onBboxChanged Callback for when the bbox is changed
- * @param onBboxMouseDown Callback for when the bbox is clicked
  * @returns
  */
-const renderBbox = (
-  stage: Konva.Stage,
-  reduxLayers: Layer[],
-  tool: Tool,
-  onBboxChanged: (layerId: string, bbox: IRect | null) => void
-) => {
+const renderBboxes = (stage: Konva.Stage, reduxLayers: Layer[], tool: Tool) => {
   // Hide all bboxes so they don't interfere with getClientRect
   for (const bboxRect of stage.find<Konva.Rect>(`.${LAYER_BBOX_NAME}`)) {
     bboxRect.visible(false);
@@ -747,36 +740,59 @@ const renderBbox = (
     return;
   }
 
-  for (const reduxLayer of reduxLayers) {
-    if (reduxLayer.type === 'regional_guidance_layer') {
-      const konvaLayer = stage.findOne<Konva.Layer>(`#${reduxLayer.id}`);
-      assert(konvaLayer, `Layer ${reduxLayer.id} not found in stage`);
+  for (const reduxLayer of reduxLayers.filter(isRegionalGuidanceLayer)) {
+    if (!reduxLayer.bbox) {
+      continue;
+    }
+    const konvaLayer = stage.findOne<Konva.Layer>(`#${reduxLayer.id}`);
+    assert(konvaLayer, `Layer ${reduxLayer.id} not found in stage`);
 
-      let bbox = reduxLayer.bbox;
+    const bboxRect = konvaLayer.findOne<Konva.Rect>(`.${LAYER_BBOX_NAME}`) ?? createBboxRect(reduxLayer, konvaLayer);
 
-      // We only need to recalculate the bbox if the layer has changed and it has objects
-      if (reduxLayer.bboxNeedsUpdate && reduxLayer.maskObjects.length) {
-        // We only need to use the pixel-perfect bounding box if the layer has eraser strokes
-        bbox = reduxLayer.needsPixelBbox ? getLayerBboxPixels(konvaLayer) : getLayerBboxFast(konvaLayer);
-        // Update the layer's bbox in the redux store
-        onBboxChanged(reduxLayer.id, bbox);
+    bboxRect.setAttrs({
+      visible: !reduxLayer.bboxNeedsUpdate,
+      listening: reduxLayer.isSelected,
+      x: reduxLayer.bbox.x,
+      y: reduxLayer.bbox.y,
+      width: reduxLayer.bbox.width,
+      height: reduxLayer.bbox.height,
+      stroke: reduxLayer.isSelected ? BBOX_SELECTED_STROKE : '',
+    });
+  }
+};
+
+/**
+ * Calculates the bbox of each regional guidance layer. Only calculates if the mask has changed.
+ * @param stage The konva stage to render on.
+ * @param reduxLayers An array of redux layers to calculate bboxes for
+ * @param onBboxChanged Callback for when the bounding box changes
+ */
+const updateBboxes = (
+  stage: Konva.Stage,
+  reduxLayers: Layer[],
+  onBboxChanged: (layerId: string, bbox: IRect | null) => void
+) => {
+  for (const rgLayer of reduxLayers.filter(isRegionalGuidanceLayer)) {
+    const konvaLayer = stage.findOne<Konva.Layer>(`#${rgLayer.id}`);
+    assert(konvaLayer, `Layer ${rgLayer.id} not found in stage`);
+    // We only need to recalculate the bbox if the layer has changed
+    if (rgLayer.bboxNeedsUpdate) {
+      const bboxRect = konvaLayer.findOne<Konva.Rect>(`.${LAYER_BBOX_NAME}`) ?? createBboxRect(rgLayer, konvaLayer);
+
+      // Hide the bbox while we calculate the new bbox, else the bbox will be included in the calculation
+      const visible = bboxRect.visible();
+      bboxRect.visible(false);
+
+      if (rgLayer.maskObjects.length === 0) {
+        // No objects - no bbox to calculate
+        onBboxChanged(rgLayer.id, null);
+      } else {
+        // Calculate the bbox by rendering the layer and checking its pixels
+        onBboxChanged(rgLayer.id, getLayerBboxPixels(konvaLayer));
       }
 
-      if (!bbox) {
-        continue;
-      }
-
-      const rect = konvaLayer.findOne<Konva.Rect>(`.${LAYER_BBOX_NAME}`) ?? createBboxRect(reduxLayer, konvaLayer);
-
-      rect.setAttrs({
-        visible: true,
-        listening: reduxLayer.isSelected,
-        x: bbox.x,
-        y: bbox.y,
-        width: bbox.width,
-        height: bbox.height,
-        stroke: reduxLayer.isSelected ? BBOX_SELECTED_STROKE : '',
-      });
+      // Restore the visibility of the bbox
+      bboxRect.visible(visible);
     }
   }
 };
@@ -890,33 +906,14 @@ const renderNoLayersMessage = (stage: Konva.Stage, layerCount: number, width: nu
   }
 };
 
-const checkForTransparency = (
-  stage: Konva.Stage,
-  reduxLayers: Layer[],
-  onBboxChanged: (layerId: string, bbox: IRect | null) => void
-) => {
-  for (const reduxLayer of reduxLayers.filter(isRegionalGuidanceLayer)) {
-    if (!reduxLayer.needsPixelBbox) {
-      continue;
-    }
-    const konvaLayer = stage.findOne<Konva.Layer>(`#${reduxLayer.id}`);
-    if (!konvaLayer) {
-      continue;
-    }
-    if (getIsLayerTransparent(konvaLayer)) {
-      onBboxChanged(reduxLayer.id, null);
-    }
-  }
-};
-
 export const renderers = {
   renderToolPreview,
   renderLayers,
-  renderBbox,
+  renderBboxes,
   renderBackground,
   renderNoLayersMessage,
   arrangeLayers,
-  checkForTransparency,
+  updateBboxes,
 };
 
 const DEBOUNCE_MS = 300;
@@ -924,11 +921,11 @@ const DEBOUNCE_MS = 300;
 export const debouncedRenderers = {
   renderToolPreview: debounce(renderToolPreview, DEBOUNCE_MS),
   renderLayers: debounce(renderLayers, DEBOUNCE_MS),
-  renderBbox: debounce(renderBbox, DEBOUNCE_MS),
+  renderBboxes: debounce(renderBboxes, DEBOUNCE_MS),
   renderBackground: debounce(renderBackground, DEBOUNCE_MS),
   renderNoLayersMessage: debounce(renderNoLayersMessage, DEBOUNCE_MS),
   arrangeLayers: debounce(arrangeLayers, DEBOUNCE_MS),
-  checkForTransparency: debounce(checkForTransparency, DEBOUNCE_MS),
+  updateBboxes: debounce(updateBboxes, DEBOUNCE_MS),
 };
 
 /**

From 8b51298ba110a477b4eccf7ea2d2ae80099197aa Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 11:57:57 +1000
Subject: [PATCH 078/116] feat(ui): negative prompt boxes are italicized

---
 .../controlLayers/components/RGLayer/RGLayerNegativePrompt.tsx   | 1 +
 .../features/parameters/components/Core/ParamNegativePrompt.tsx  | 1 +
 .../sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx | 1 +
 3 files changed, 3 insertions(+)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerNegativePrompt.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerNegativePrompt.tsx
index ba02aa9242..34a50064d9 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerNegativePrompt.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerNegativePrompt.tsx
@@ -45,6 +45,7 @@ export const RGLayerNegativePrompt = memo(({ layerId }: Props) => {
           variant="darkFilled"
           paddingRight={30}
           fontSize="sm"
+          fontStyle="oblique 10deg"
         />
         <PromptOverlayButtonWrapper>
           <RGLayerPromptDeleteButton layerId={layerId} polarity="negative" />
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
index 5702cf8bd7..25b5b36c9a 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
@@ -39,6 +39,7 @@ export const ParamNegativePrompt = memo(() => {
           fontSize="sm"
           variant="darkFilled"
           paddingRight={30}
+          fontStyle="oblique 10deg"
         />
         <PromptOverlayButtonWrapper>
           <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
index bba9e0b32d..afaf94ff22 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
@@ -42,6 +42,7 @@ export const ParamSDXLNegativeStylePrompt = memo(() => {
           fontSize="sm"
           variant="darkFilled"
           paddingRight={30}
+          fontStyle="oblique 10deg"
         />
         <PromptOverlayButtonWrapper>
           <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />

From 4740cd4f646ef0556bd6a7027a6d175c56c82205 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 12:03:31 +1000
Subject: [PATCH 079/116] feat(ui): add "global" to global prompt placeholders

---
 invokeai/frontend/web/public/locales/en.json                    | 2 ++
 .../features/parameters/components/Core/ParamNegativePrompt.tsx | 2 +-
 .../features/parameters/components/Core/ParamPositivePrompt.tsx | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index cfed635570..b36fe0e26c 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -938,10 +938,12 @@
         },
         "maskBlur": "Mask Blur",
         "negativePromptPlaceholder": "Negative Prompt",
+        "globalNegativePromptPlaceholder": "Global Negative Prompt",
         "noiseThreshold": "Noise Threshold",
         "patchmatchDownScaleSize": "Downscale",
         "perlinNoise": "Perlin Noise",
         "positivePromptPlaceholder": "Positive Prompt",
+        "globalPositivePromptPlaceholder": "Global Positive Prompt",
         "iterations": "Iterations",
         "iterationsWithCount_one": "{{count}} Iteration",
         "iterationsWithCount_other": "{{count}} Iterations",
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
index 25b5b36c9a..3f128f5742 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
@@ -33,7 +33,7 @@ export const ParamNegativePrompt = memo(() => {
           name="negativePrompt"
           ref={textareaRef}
           value={prompt}
-          placeholder={t('parameters.negativePromptPlaceholder')}
+          placeholder={t('parameters.globalNegativePromptPlaceholder')}
           onChange={onChange}
           onKeyDown={onKeyDown}
           fontSize="sm"
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
index 0b2890875e..ebe64ea7dd 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
@@ -49,7 +49,7 @@ export const ParamPositivePrompt = memo(() => {
           name="prompt"
           ref={textareaRef}
           value={prompt}
-          placeholder={t('parameters.positivePromptPlaceholder')}
+          placeholder={t('parameters.globalPositivePromptPlaceholder')}
           onChange={onChange}
           minH={28}
           onKeyDown={onKeyDown}

From b18066649720c2260343f139d5152f7e31bc340a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 12:05:17 +1000
Subject: [PATCH 080/116] feat(ui): disable spellcheck on prompt boxes

These are almost guaranteed to have non-english words - disable the spellcheck to prevent red squigglies.
---
 .../controlLayers/components/RGLayer/RGLayerNegativePrompt.tsx   | 1 +
 .../controlLayers/components/RGLayer/RGLayerPositivePrompt.tsx   | 1 +
 .../features/parameters/components/Core/ParamNegativePrompt.tsx  | 1 +
 .../features/parameters/components/Core/ParamPositivePrompt.tsx  | 1 +
 .../sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx | 1 +
 .../sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx | 1 +
 6 files changed, 6 insertions(+)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerNegativePrompt.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerNegativePrompt.tsx
index 34a50064d9..356861a2b3 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerNegativePrompt.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerNegativePrompt.tsx
@@ -46,6 +46,7 @@ export const RGLayerNegativePrompt = memo(({ layerId }: Props) => {
           paddingRight={30}
           fontSize="sm"
           fontStyle="oblique 10deg"
+          spellCheck={false}
         />
         <PromptOverlayButtonWrapper>
           <RGLayerPromptDeleteButton layerId={layerId} polarity="negative" />
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerPositivePrompt.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerPositivePrompt.tsx
index 6f85ea077c..56d3953e25 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerPositivePrompt.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerPositivePrompt.tsx
@@ -45,6 +45,7 @@ export const RGLayerPositivePrompt = memo(({ layerId }: Props) => {
           variant="darkFilled"
           paddingRight={30}
           minH={28}
+          spellCheck={false}
         />
         <PromptOverlayButtonWrapper>
           <RGLayerPromptDeleteButton layerId={layerId} polarity="positive" />
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
index 3f128f5742..b81d57f24c 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
@@ -40,6 +40,7 @@ export const ParamNegativePrompt = memo(() => {
           variant="darkFilled"
           paddingRight={30}
           fontStyle="oblique 10deg"
+          spellCheck={false}
         />
         <PromptOverlayButtonWrapper>
           <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
index ebe64ea7dd..9e00bea079 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
@@ -55,6 +55,7 @@ export const ParamPositivePrompt = memo(() => {
           onKeyDown={onKeyDown}
           variant="darkFilled"
           paddingRight={30}
+          spellCheck={false}
         />
         <PromptOverlayButtonWrapper>
           <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
index afaf94ff22..f7150905b7 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
@@ -43,6 +43,7 @@ export const ParamSDXLNegativeStylePrompt = memo(() => {
           variant="darkFilled"
           paddingRight={30}
           fontStyle="oblique 10deg"
+          spellCheck={false}
         />
         <PromptOverlayButtonWrapper>
           <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx
index 3828136c74..b16730db45 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLPositiveStylePrompt.tsx
@@ -39,6 +39,7 @@ export const ParamSDXLPositiveStylePrompt = memo(() => {
           fontSize="sm"
           variant="darkFilled"
           paddingRight={30}
+          spellCheck={false}
         />
         <PromptOverlayButtonWrapper>
           <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />

From 2f9a064d48e1816275514728c505fb0b25eba1fd Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 12:46:22 +1000
Subject: [PATCH 081/116] feat(ui): ip adapter layers are selectable

This is largely an internal change, and it should have been this way from the start - less tip-toeing around layer types. The user-facing change is when you click an IP Adapter layer, it is highlighted. That's it.
---
 .../components/CALayer/CALayer.tsx            |  1 -
 .../components/IPALayer/IPALayer.tsx          | 11 ++++--
 .../controlLayers/store/controlLayersSlice.ts | 35 +++++++------------
 .../src/features/controlLayers/store/types.ts |  4 +--
 .../features/controlLayers/util/renderers.ts  |  1 +
 .../web/src/features/metadata/util/parsers.ts |  3 +-
 6 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CALayer/CALayer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CALayer/CALayer.tsx
index 984331a050..36509ec1d3 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/CALayer/CALayer.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CALayer/CALayer.tsx
@@ -19,7 +19,6 @@ export const CALayer = memo(({ layerId }: Props) => {
   const dispatch = useAppDispatch();
   const isSelected = useAppSelector((s) => selectCALayerOrThrow(s.controlLayers.present, layerId).isSelected);
   const onClick = useCallback(() => {
-    // Must be capture so that the layer is selected before deleting/resetting/etc
     dispatch(layerSelected(layerId));
   }, [dispatch, layerId]);
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPALayer/IPALayer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPALayer/IPALayer.tsx
index 02a161608d..2077700104 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPALayer/IPALayer.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPALayer/IPALayer.tsx
@@ -1,19 +1,26 @@
 import { Flex, Spacer, useDisclosure } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { IPALayerIPAdapterWrapper } from 'features/controlLayers/components/IPALayer/IPALayerIPAdapterWrapper';
 import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton';
 import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle';
 import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle';
 import { LayerWrapper } from 'features/controlLayers/components/LayerCommon/LayerWrapper';
-import { memo } from 'react';
+import { layerSelected, selectIPALayerOrThrow } from 'features/controlLayers/store/controlLayersSlice';
+import { memo, useCallback } from 'react';
 
 type Props = {
   layerId: string;
 };
 
 export const IPALayer = memo(({ layerId }: Props) => {
+  const dispatch = useAppDispatch();
+  const isSelected = useAppSelector((s) => selectIPALayerOrThrow(s.controlLayers.present, layerId).isSelected);
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
+  const onClick = useCallback(() => {
+    dispatch(layerSelected(layerId));
+  }, [dispatch, layerId]);
   return (
-    <LayerWrapper borderColor="base.800">
+    <LayerWrapper onClick={onClick} borderColor={isSelected ? 'base.400' : 'base.800'}>
       <Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}>
         <LayerVisibilityToggle layerId={layerId} />
         <LayerTitle type="ip_adapter_layer" />
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
index b191296ec0..425599561a 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
@@ -124,11 +124,11 @@ const getVectorMaskPreviewColor = (state: ControlLayersState): RgbColor => {
   const lastColor = rgLayers[rgLayers.length - 1]?.previewColor;
   return LayerColors.next(lastColor);
 };
-const deselectAllLayers = (state: ControlLayersState) => {
-  for (const layer of state.layers.filter(isRenderableLayer)) {
-    layer.isSelected = false;
+const exclusivelySelectLayer = (state: ControlLayersState, layerId: string) => {
+  for (const layer of state.layers) {
+    layer.isSelected = layer.id === layerId;
   }
-  state.selectedLayerId = null;
+  state.selectedLayerId = layerId;
 };
 
 export const controlLayersSlice = createSlice({
@@ -137,12 +137,7 @@ export const controlLayersSlice = createSlice({
   reducers: {
     //#region Any Layer Type
     layerSelected: (state, action: PayloadAction<string>) => {
-      deselectAllLayers(state);
-      const layer = state.layers.find((l) => l.id === action.payload);
-      if (isRenderableLayer(layer)) {
-        layer.isSelected = true;
-        state.selectedLayerId = layer.id;
-      }
+      exclusivelySelectLayer(state, action.payload);
     },
     layerVisibilityToggled: (state, action: PayloadAction<string>) => {
       const layer = state.layers.find((l) => l.id === action.payload);
@@ -232,7 +227,6 @@ export const controlLayersSlice = createSlice({
         action: PayloadAction<{ layerId: string; controlAdapter: ControlNetConfigV2 | T2IAdapterConfigV2 }>
       ) => {
         const { layerId, controlAdapter } = action.payload;
-        deselectAllLayers(state);
         const layer: ControlAdapterLayer = {
           id: getCALayerId(layerId),
           type: 'control_adapter_layer',
@@ -247,16 +241,15 @@ export const controlLayersSlice = createSlice({
           controlAdapter,
         };
         state.layers.push(layer);
-        state.selectedLayerId = layer.id;
+        exclusivelySelectLayer(state, layer.id);
       },
       prepare: (controlAdapter: ControlNetConfigV2 | T2IAdapterConfigV2) => ({
         payload: { layerId: uuidv4(), controlAdapter },
       }),
     },
     caLayerRecalled: (state, action: PayloadAction<ControlAdapterLayer>) => {
-      deselectAllLayers(state);
       state.layers.push({ ...action.payload, isSelected: true });
-      state.selectedLayerId = action.payload.id;
+      exclusivelySelectLayer(state, action.payload.id);
     },
     caLayerImageChanged: (state, action: PayloadAction<{ layerId: string; imageDTO: ImageDTO | null }>) => {
       const { layerId, imageDTO } = action.payload;
@@ -359,9 +352,11 @@ export const controlLayersSlice = createSlice({
           id: getIPALayerId(layerId),
           type: 'ip_adapter_layer',
           isEnabled: true,
+          isSelected: true,
           ipAdapter,
         };
         state.layers.push(layer);
+        exclusivelySelectLayer(state, layer.id);
       },
       prepare: (ipAdapter: IPAdapterConfigV2) => ({ payload: { layerId: uuidv4(), ipAdapter } }),
     },
@@ -431,7 +426,6 @@ export const controlLayersSlice = createSlice({
     rgLayerAdded: {
       reducer: (state, action: PayloadAction<{ layerId: string }>) => {
         const { layerId } = action.payload;
-        deselectAllLayers(state);
         const layer: RegionalGuidanceLayer = {
           id: getRGLayerId(layerId),
           type: 'regional_guidance_layer',
@@ -450,14 +444,13 @@ export const controlLayersSlice = createSlice({
           uploadedMaskImage: null,
         };
         state.layers.push(layer);
-        state.selectedLayerId = layer.id;
+        exclusivelySelectLayer(state, layer.id);
       },
       prepare: () => ({ payload: { layerId: uuidv4() } }),
     },
     rgLayerRecalled: (state, action: PayloadAction<RegionalGuidanceLayer>) => {
-      deselectAllLayers(state);
       state.layers.push({ ...action.payload, isSelected: true });
-      state.selectedLayerId = action.payload.id;
+      exclusivelySelectLayer(state, action.payload.id);
     },
     rgLayerPositivePromptChanged: (state, action: PayloadAction<{ layerId: string; prompt: string | null }>) => {
       const { layerId, prompt } = action.payload;
@@ -622,7 +615,6 @@ export const controlLayersSlice = createSlice({
     //#region Initial Image Layer
     iiLayerAdded: {
       reducer: (state, action: PayloadAction<{ layerId: string; imageDTO: ImageDTO | null }>) => {
-        deselectAllLayers(state);
         const { layerId, imageDTO } = action.payload;
         // Highlander! There can be only one!
         state.layers = state.layers.filter((l) => (isInitialImageLayer(l) ? false : true));
@@ -640,15 +632,14 @@ export const controlLayersSlice = createSlice({
           denoisingStrength: 0.75,
         };
         state.layers.push(layer);
-        state.selectedLayerId = layer.id;
+        exclusivelySelectLayer(state, layer.id);
       },
       prepare: (imageDTO: ImageDTO | null) => ({ payload: { layerId: INITIAL_IMAGE_LAYER_ID, imageDTO } }),
     },
     iiLayerRecalled: (state, action: PayloadAction<InitialImageLayer>) => {
-      deselectAllLayers(state);
       state.layers = state.layers.filter((l) => (isInitialImageLayer(l) ? false : true));
       state.layers.push({ ...action.payload, isSelected: true });
-      state.selectedLayerId = action.payload.id;
+      exclusivelySelectLayer(state, action.payload.id);
     },
     iiLayerImageChanged: (state, action: PayloadAction<{ layerId: string; imageDTO: ImageDTO | null }>) => {
       const { layerId, imageDTO } = action.payload;
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/types.ts b/invokeai/frontend/web/src/features/controlLayers/store/types.ts
index 037034c33c..2d29b349cb 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/types.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/types.ts
@@ -48,7 +48,8 @@ export type VectorMaskRect = z.infer<typeof zVectorMaskRect>;
 
 const zLayerBase = z.object({
   id: z.string(),
-  isEnabled: z.boolean(),
+  isEnabled: z.boolean().default(true),
+  isSelected: z.boolean().default(true),
 });
 
 const zRect = z.object({
@@ -62,7 +63,6 @@ const zRenderableLayerBase = zLayerBase.extend({
   y: z.number(),
   bbox: zRect.nullable(),
   bboxNeedsUpdate: z.boolean(),
-  isSelected: z.boolean(),
 });
 
 const zControlAdapterLayer = zRenderableLayerBase.extend({
diff --git a/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts b/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
index f4931a7f9e..b74fef80c5 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
@@ -702,6 +702,7 @@ const renderLayers = (
     if (isInitialImageLayer(reduxLayer)) {
       renderInitialImageLayer(stage, reduxLayer);
     }
+    // IP Adapter layers are not rendered
   }
 };
 
diff --git a/invokeai/frontend/web/src/features/metadata/util/parsers.ts b/invokeai/frontend/web/src/features/metadata/util/parsers.ts
index eb53031578..ac42142ea2 100644
--- a/invokeai/frontend/web/src/features/metadata/util/parsers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/parsers.ts
@@ -692,8 +692,9 @@ const parseIPAdapterToIPAdapterLayer: MetadataParseFunc<IPAdapterLayer> = async
 
   const layer: IPAdapterLayer = {
     id: getIPALayerId(uuidv4()),
-    isEnabled: true,
     type: 'ip_adapter_layer',
+    isEnabled: true,
+    isSelected: true,
     ipAdapter: {
       id: uuidv4(),
       type: 'ip_adapter',

From 029ee903517403d438ff53b40f1bf6c261bea971 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 14:12:39 +1000
Subject: [PATCH 082/116] docs(ui): add comment & TODO for konva bug

---
 .../web/src/features/controlLayers/util/renderers.ts        | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts b/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
index b74fef80c5..a652c6753b 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
@@ -483,6 +483,9 @@ const updateInitialImageLayerImageAttrs = (
   konvaImage: Konva.Image,
   reduxLayer: InitialImageLayer
 ) => {
+  // Konva erroneously reports NaN for width and height when the stage is hidden. This causes errors when caching,
+  // but it doesn't seem to break anything.
+  // TODO(psyche): Investigate and report upstream.
   const newWidth = stage.width() / stage.scaleX();
   const newHeight = stage.height() / stage.scaleY();
   if (
@@ -618,6 +621,9 @@ const updateControlNetLayerImageAttrs = (
   reduxLayer: ControlAdapterLayer
 ) => {
   let needsCache = false;
+  // Konva erroneously reports NaN for width and height when the stage is hidden. This causes errors when caching,
+  // but it doesn't seem to break anything.
+  // TODO(psyche): Investigate and report upstream.
   const newWidth = stage.width() / stage.scaleX();
   const newHeight = stage.height() / stage.scaleY();
   const hasFilter = konvaImage.filters() !== null && konvaImage.filters().length > 0;

From 1b777bb9725bb3d94da888e9e6afcc7780988536 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 20:23:48 +1000
Subject: [PATCH 083/116] Revert "feat(ui): negative prompt boxes are
 italicized"

This reverts commit 49c47043797640a0a9b4899ce2c422846613cace.
---
 .../controlLayers/components/RGLayer/RGLayerNegativePrompt.tsx   | 1 -
 .../features/parameters/components/Core/ParamNegativePrompt.tsx  | 1 -
 .../sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx | 1 -
 3 files changed, 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerNegativePrompt.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerNegativePrompt.tsx
index 356861a2b3..ce02811ebf 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerNegativePrompt.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerNegativePrompt.tsx
@@ -45,7 +45,6 @@ export const RGLayerNegativePrompt = memo(({ layerId }: Props) => {
           variant="darkFilled"
           paddingRight={30}
           fontSize="sm"
-          fontStyle="oblique 10deg"
           spellCheck={false}
         />
         <PromptOverlayButtonWrapper>
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
index b81d57f24c..4dfbbd1f7f 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
@@ -39,7 +39,6 @@ export const ParamNegativePrompt = memo(() => {
           fontSize="sm"
           variant="darkFilled"
           paddingRight={30}
-          fontStyle="oblique 10deg"
           spellCheck={false}
         />
         <PromptOverlayButtonWrapper>
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
index f7150905b7..afc116a903 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/ParamSDXLNegativeStylePrompt.tsx
@@ -42,7 +42,6 @@ export const ParamSDXLNegativeStylePrompt = memo(() => {
           fontSize="sm"
           variant="darkFilled"
           paddingRight={30}
-          fontStyle="oblique 10deg"
           spellCheck={false}
         />
         <PromptOverlayButtonWrapper>

From 0848cb8ebdea3394ce6f1dcafd7bf27b6bc78cd8 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 20:18:01 +1000
Subject: [PATCH 084/116] Update invokeai_version.py

---
 invokeai/version/invokeai_version.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/version/invokeai_version.py b/invokeai/version/invokeai_version.py
index b6bcb5a14c..0fd7811c0d 100644
--- a/invokeai/version/invokeai_version.py
+++ b/invokeai/version/invokeai_version.py
@@ -1 +1 @@
-__version__ = "4.2.0b2"
+__version__ = "4.2.0"

From 63e62c572007fe62c50a7b52b3947fc218727875 Mon Sep 17 00:00:00 2001
From: gogurtenjoyer <36354352+gogurtenjoyer@users.noreply.github.com>
Date: Thu, 9 May 2024 10:43:00 -0400
Subject: [PATCH 085/116] Update INSTALL_REQUIREMENTS.md - 'linux only' under
 AMD for SDXL.

Moved 'Linux only.' back from under NVIDIA to under AMD for the SDXL hardware requirements.
---
 docs/installation/INSTALL_REQUIREMENTS.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/installation/INSTALL_REQUIREMENTS.md b/docs/installation/INSTALL_REQUIREMENTS.md
index 31f60b86eb..2279e7efb8 100644
--- a/docs/installation/INSTALL_REQUIREMENTS.md
+++ b/docs/installation/INSTALL_REQUIREMENTS.md
@@ -37,13 +37,13 @@ Invoke runs best with a dedicated GPU, but will fall back to running on CPU, alb
     === "Nvidia"
 
         ```
-        Any GPU with at least 8GB VRAM. Linux only.
+        Any GPU with at least 8GB VRAM.
         ```
 
     === "AMD"
 
         ```
-        Any GPU with at least 16GB VRAM.
+        Any GPU with at least 16GB VRAM. Linux only.
         ```
 
     === "Mac"

From e6793be4655ca279c7bbced336735f4f2d7a001b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 10 May 2024 06:42:53 +1000
Subject: [PATCH 086/116] fix(ui): disable listening on CA and II layers

Closes #6331
---
 .../frontend/web/src/features/controlLayers/util/renderers.ts   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts b/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
index a652c6753b..25ac30387b 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
@@ -464,6 +464,7 @@ const createInitialImageLayer = (stage: Konva.Stage, reduxLayer: InitialImageLay
     id: reduxLayer.id,
     name: INITIAL_IMAGE_LAYER_NAME,
     imageSmoothingEnabled: true,
+    listening: false,
   });
   stage.add(konvaLayer);
   return konvaLayer;
@@ -567,6 +568,7 @@ const createControlNetLayer = (stage: Konva.Stage, reduxLayer: ControlAdapterLay
     id: reduxLayer.id,
     name: CA_LAYER_NAME,
     imageSmoothingEnabled: true,
+    listening: false,
   });
   stage.add(konvaLayer);
   return konvaLayer;

From 5dd73fe53e7ba475719c629975fb25aa7e1a4d8b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 10 May 2024 07:25:17 +1000
Subject: [PATCH 087/116] fix(ui): jank in depthanything model size select

---
 .../processors/DepthAnythingProcessor.tsx              | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/DepthAnythingProcessor.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/DepthAnythingProcessor.tsx
index 00993789b1..b5da990b6f 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/DepthAnythingProcessor.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/processors/DepthAnythingProcessor.tsx
@@ -2,14 +2,13 @@ import type { ComboboxOnChange } from '@invoke-ai/ui-library';
 import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import type { ProcessorComponentProps } from 'features/controlLayers/components/ControlAndIPAdapter/processors/types';
 import type { DepthAnythingModelSize, DepthAnythingProcessorConfig } from 'features/controlLayers/util/controlAdapters';
-import { CA_PROCESSOR_DATA, isDepthAnythingModelSize } from 'features/controlLayers/util/controlAdapters';
+import { isDepthAnythingModelSize } from 'features/controlLayers/util/controlAdapters';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import ProcessorWrapper from './ProcessorWrapper';
 
 type Props = ProcessorComponentProps<DepthAnythingProcessorConfig>;
-const DEFAULTS = CA_PROCESSOR_DATA['depth_anything_image_processor'].buildDefaults();
 
 export const DepthAnythingProcessor = memo(({ onChange, config }: Props) => {
   const { t } = useTranslation();
@@ -38,12 +37,7 @@ export const DepthAnythingProcessor = memo(({ onChange, config }: Props) => {
     <ProcessorWrapper>
       <FormControl>
         <FormLabel m={0}>{t('controlnet.modelSize')}</FormLabel>
-        <Combobox
-          value={value}
-          defaultInputValue={DEFAULTS.model_size}
-          options={options}
-          onChange={handleModelSizeChange}
-        />
+        <Combobox value={value} options={options} onChange={handleModelSizeChange} isSearchable={false} />
       </FormControl>
     </ProcessorWrapper>
   );

From 6c9fb617dca1f128c3bc3161ad96556c79cd94ca Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Fri, 10 May 2024 20:18:54 +0530
Subject: [PATCH 088/116] fix: fix seamless

---
 invokeai/backend/stable_diffusion/seamless.py | 94 ++++++-------------
 1 file changed, 29 insertions(+), 65 deletions(-)

diff --git a/invokeai/backend/stable_diffusion/seamless.py b/invokeai/backend/stable_diffusion/seamless.py
index 2e22c19d0e..a004a4a9d1 100644
--- a/invokeai/backend/stable_diffusion/seamless.py
+++ b/invokeai/backend/stable_diffusion/seamless.py
@@ -1,89 +1,53 @@
 from __future__ import annotations
 
 from contextlib import contextmanager
-from typing import Callable, List, Union
+from typing import Callable, List, Optional, Tuple, Union
 
+import torch
 import torch.nn as nn
 from diffusers.models.autoencoders.autoencoder_kl import AutoencoderKL
 from diffusers.models.autoencoders.autoencoder_tiny import AutoencoderTiny
+from diffusers.models.lora import LoRACompatibleConv
 from diffusers.models.unets.unet_2d_condition import UNet2DConditionModel
 
 
-def _conv_forward_asymmetric(self, input, weight, bias):
-    """
-    Patch for Conv2d._conv_forward that supports asymmetric padding
-    """
-    working = nn.functional.pad(input, self.asymmetric_padding["x"], mode=self.asymmetric_padding_mode["x"])
-    working = nn.functional.pad(working, self.asymmetric_padding["y"], mode=self.asymmetric_padding_mode["y"])
-    return nn.functional.conv2d(
-        working,
-        weight,
-        bias,
-        self.stride,
-        nn.modules.utils._pair(0),
-        self.dilation,
-        self.groups,
-    )
-
-
 @contextmanager
 def set_seamless(model: Union[UNet2DConditionModel, AutoencoderKL, AutoencoderTiny], seamless_axes: List[str]):
     if not seamless_axes:
         yield
         return
 
-    # Callable: (input: Tensor, weight: Tensor, bias: Optional[Tensor]) -> Tensor
-    to_restore: list[tuple[nn.Conv2d | nn.ConvTranspose2d, Callable]] = []
+    # override conv_forward
+    # https://github.com/huggingface/diffusers/issues/556#issuecomment-1993287019
+    def _conv_forward_asymmetric(self, input: torch.Tensor, weight: torch.Tensor, bias: Optional[torch.Tensor] = None):
+        self.paddingX = (self._reversed_padding_repeated_twice[0], self._reversed_padding_repeated_twice[1], 0, 0)
+        self.paddingY = (0, 0, self._reversed_padding_repeated_twice[2], self._reversed_padding_repeated_twice[3])
+        working = torch.nn.functional.pad(input, self.paddingX, mode=x_mode)
+        working = torch.nn.functional.pad(working, self.paddingY, mode=y_mode)
+        return torch.nn.functional.conv2d(
+            working, weight, bias, self.stride, torch.nn.modules.utils._pair(0), self.dilation, self.groups
+        )
+
+    original_layers: List[Tuple[nn.Conv2d | nn.ConvTranspose2d, Callable]] = []
+
     try:
-        # Hard coded to skip down block layers, allowing for seamless tiling at the expense of prompt adherence
-        skipped_layers = 1
-        for m_name, m in model.named_modules():
-            if not isinstance(m, (nn.Conv2d, nn.ConvTranspose2d)):
-                continue
+        x_mode = "circular" if "x" in seamless_axes else "constant"
+        y_mode = "circular" if "y" in seamless_axes else "constant"
 
-            if isinstance(model, UNet2DConditionModel) and m_name.startswith("down_blocks.") and ".resnets." in m_name:
-                # down_blocks.1.resnets.1.conv1
-                _, block_num, _, resnet_num, submodule_name = m_name.split(".")
-                block_num = int(block_num)
-                resnet_num = int(resnet_num)
+        conv_layers: List[torch.nn.Conv2d] = []
 
-                if block_num >= len(model.down_blocks) - skipped_layers:
-                    continue
+        for module in model.modules():
+            if isinstance(module, torch.nn.Conv2d):
+                conv_layers.append(module)
 
-                # Skip the second resnet (could be configurable)
-                if resnet_num > 0:
-                    continue
-
-                # Skip Conv2d layers (could be configurable)
-                if submodule_name == "conv2":
-                    continue
-
-            m.asymmetric_padding_mode = {}
-            m.asymmetric_padding = {}
-            m.asymmetric_padding_mode["x"] = "circular" if ("x" in seamless_axes) else "constant"
-            m.asymmetric_padding["x"] = (
-                m._reversed_padding_repeated_twice[0],
-                m._reversed_padding_repeated_twice[1],
-                0,
-                0,
-            )
-            m.asymmetric_padding_mode["y"] = "circular" if ("y" in seamless_axes) else "constant"
-            m.asymmetric_padding["y"] = (
-                0,
-                0,
-                m._reversed_padding_repeated_twice[2],
-                m._reversed_padding_repeated_twice[3],
-            )
-
-            to_restore.append((m, m._conv_forward))
-            m._conv_forward = _conv_forward_asymmetric.__get__(m, nn.Conv2d)
+        for layer in conv_layers:
+            if isinstance(layer, LoRACompatibleConv) and layer.lora_layer is None:
+                layer.lora_layer = lambda *x: 0
+            original_layers.append((layer, layer._conv_forward))
+            layer._conv_forward = _conv_forward_asymmetric.__get__(layer, torch.nn.Conv2d)
 
         yield
 
     finally:
-        for module, orig_conv_forward in to_restore:
-            module._conv_forward = orig_conv_forward
-            if hasattr(module, "asymmetric_padding_mode"):
-                del module.asymmetric_padding_mode
-            if hasattr(module, "asymmetric_padding"):
-                del module.asymmetric_padding
+        for layer, orig_conv_forward in original_layers:
+            layer._conv_forward = orig_conv_forward

From da61396b1ccf4250c45bfa49924473e49eb317d3 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Fri, 10 May 2024 21:26:52 +0530
Subject: [PATCH 089/116] cleanup: seamless unused older code cleanup

---
 invokeai/app/invocations/latent.py            |  7 ---
 invokeai/backend/image_util/__init__.py       |  1 -
 invokeai/backend/image_util/seamless.py       | 52 -------------------
 invokeai/backend/stable_diffusion/seamless.py |  4 +-
 4 files changed, 1 insertion(+), 63 deletions(-)
 delete mode 100644 invokeai/backend/image_util/seamless.py

diff --git a/invokeai/app/invocations/latent.py b/invokeai/app/invocations/latent.py
index 3d1439f7db..b3ac3973bf 100644
--- a/invokeai/app/invocations/latent.py
+++ b/invokeai/app/invocations/latent.py
@@ -586,13 +586,6 @@ class DenoiseLatentsInvocation(BaseInvocation):
         unet: UNet2DConditionModel,
         scheduler: Scheduler,
     ) -> StableDiffusionGeneratorPipeline:
-        # TODO:
-        # configure_model_padding(
-        #    unet,
-        #    self.seamless,
-        #    self.seamless_axes,
-        # )
-
         class FakeVae:
             class FakeVaeConfig:
                 def __init__(self) -> None:
diff --git a/invokeai/backend/image_util/__init__.py b/invokeai/backend/image_util/__init__.py
index dec2a92150..f45af9feb4 100644
--- a/invokeai/backend/image_util/__init__.py
+++ b/invokeai/backend/image_util/__init__.py
@@ -4,5 +4,4 @@ Initialization file for invokeai.backend.image_util methods.
 
 from .infill_methods.patchmatch import PatchMatch  # noqa: F401
 from .pngwriter import PngWriter, PromptFormatter, retrieve_metadata, write_metadata  # noqa: F401
-from .seamless import configure_model_padding  # noqa: F401
 from .util import InitImageResizer, make_grid  # noqa: F401
diff --git a/invokeai/backend/image_util/seamless.py b/invokeai/backend/image_util/seamless.py
deleted file mode 100644
index 8a2580bfcc..0000000000
--- a/invokeai/backend/image_util/seamless.py
+++ /dev/null
@@ -1,52 +0,0 @@
-import torch.nn as nn
-
-
-def _conv_forward_asymmetric(self, input, weight, bias):
-    """
-    Patch for Conv2d._conv_forward that supports asymmetric padding
-    """
-    working = nn.functional.pad(input, self.asymmetric_padding["x"], mode=self.asymmetric_padding_mode["x"])
-    working = nn.functional.pad(working, self.asymmetric_padding["y"], mode=self.asymmetric_padding_mode["y"])
-    return nn.functional.conv2d(
-        working,
-        weight,
-        bias,
-        self.stride,
-        nn.modules.utils._pair(0),
-        self.dilation,
-        self.groups,
-    )
-
-
-def configure_model_padding(model, seamless, seamless_axes):
-    """
-    Modifies the 2D convolution layers to use a circular padding mode based on
-    the `seamless` and `seamless_axes` options.
-    """
-    # TODO: get an explicit interface for this in diffusers: https://github.com/huggingface/diffusers/issues/556
-    for m in model.modules():
-        if isinstance(m, (nn.Conv2d, nn.ConvTranspose2d)):
-            if seamless:
-                m.asymmetric_padding_mode = {}
-                m.asymmetric_padding = {}
-                m.asymmetric_padding_mode["x"] = "circular" if ("x" in seamless_axes) else "constant"
-                m.asymmetric_padding["x"] = (
-                    m._reversed_padding_repeated_twice[0],
-                    m._reversed_padding_repeated_twice[1],
-                    0,
-                    0,
-                )
-                m.asymmetric_padding_mode["y"] = "circular" if ("y" in seamless_axes) else "constant"
-                m.asymmetric_padding["y"] = (
-                    0,
-                    0,
-                    m._reversed_padding_repeated_twice[2],
-                    m._reversed_padding_repeated_twice[3],
-                )
-                m._conv_forward = _conv_forward_asymmetric.__get__(m, nn.Conv2d)
-            else:
-                m._conv_forward = nn.Conv2d._conv_forward.__get__(m, nn.Conv2d)
-                if hasattr(m, "asymmetric_padding_mode"):
-                    del m.asymmetric_padding_mode
-                if hasattr(m, "asymmetric_padding"):
-                    del m.asymmetric_padding
diff --git a/invokeai/backend/stable_diffusion/seamless.py b/invokeai/backend/stable_diffusion/seamless.py
index a004a4a9d1..23ed978c6d 100644
--- a/invokeai/backend/stable_diffusion/seamless.py
+++ b/invokeai/backend/stable_diffusion/seamless.py
@@ -1,5 +1,3 @@
-from __future__ import annotations
-
 from contextlib import contextmanager
 from typing import Callable, List, Optional, Tuple, Union
 
@@ -28,7 +26,7 @@ def set_seamless(model: Union[UNet2DConditionModel, AutoencoderKL, AutoencoderTi
             working, weight, bias, self.stride, torch.nn.modules.utils._pair(0), self.dilation, self.groups
         )
 
-    original_layers: List[Tuple[nn.Conv2d | nn.ConvTranspose2d, Callable]] = []
+    original_layers: List[Tuple[nn.Conv2d, Callable]] = []
 
     try:
         x_mode = "circular" if "x" in seamless_axes else "constant"

From 2656f13a4a4d08a2891483d51e75b57650a2e34b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 10 May 2024 09:52:00 +1000
Subject: [PATCH 090/116] fix(ui): CA processor cancellation

When a control adapter processor config is changed, if we were already processing an image, that batch is immediately canceled. This prevents the processed image from getting stuck in a weird state if you change or reset the processor at the right (err, wrong?) moment.

- Update internal state for control adapters to track processor batches, instead of just having a flag indicating if the image is processing. Add a slice migration to not break the user's existing app state.
- Update preprocessor listener with more sophisticated logic to handle canceling the batch and resetting the processed image when the config changes or is reset.
- Fixed error handling that erroneously showed "failed to queue graph" errors when an active listener instance is canceled, need to check the abort signal.
---
 .../listeners/controlAdapterPreprocessor.ts   | 169 ++++++++++--------
 .../ControlAdapterImagePreview.tsx            |   4 +-
 .../controlLayers/store/controlLayersSlice.ts |  25 ++-
 .../src/features/controlLayers/store/types.ts |   2 +-
 .../controlLayers/util/controlAdapters.ts     |   6 +-
 .../web/src/features/metadata/util/parsers.ts |   4 +-
 6 files changed, 119 insertions(+), 91 deletions(-)

diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlAdapterPreprocessor.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlAdapterPreprocessor.ts
index 57a7cccf6c..a1f7ebcca1 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlAdapterPreprocessor.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/controlAdapterPreprocessor.ts
@@ -1,13 +1,14 @@
 import { isAnyOf } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import type { AppDispatch } from 'app/store/store';
 import { parseify } from 'common/util/serialize';
 import {
   caLayerImageChanged,
-  caLayerIsProcessingImageChanged,
   caLayerModelChanged,
   caLayerProcessedImageChanged,
   caLayerProcessorConfigChanged,
+  caLayerProcessorPendingBatchIdChanged,
   caLayerRecalled,
   isControlAdapterLayer,
 } from 'features/controlLayers/store/controlLayersSlice';
@@ -15,47 +16,39 @@ import { CA_PROCESSOR_DATA } from 'features/controlLayers/util/controlAdapters';
 import { isImageOutput } from 'features/nodes/types/common';
 import { addToast } from 'features/system/store/systemSlice';
 import { t } from 'i18next';
-import { isEqual } from 'lodash-es';
-import { imagesApi } from 'services/api/endpoints/images';
+import { getImageDTO } from 'services/api/endpoints/images';
 import { queueApi } from 'services/api/endpoints/queue';
-import type { BatchConfig, ImageDTO } from 'services/api/types';
+import type { BatchConfig } from 'services/api/types';
 import { socketInvocationComplete } from 'services/events/actions';
+import { assert } from 'tsafe';
 
 const matcher = isAnyOf(caLayerImageChanged, caLayerProcessorConfigChanged, caLayerModelChanged, caLayerRecalled);
 
 const DEBOUNCE_MS = 300;
 const log = logger('session');
 
+/**
+ * Simple helper to cancel a batch and reset the pending batch ID
+ */
+const cancelProcessorBatch = async (dispatch: AppDispatch, layerId: string, batchId: string) => {
+  const req = dispatch(queueApi.endpoints.cancelByBatchIds.initiate({ batch_ids: [batchId] }));
+  log.trace({ batchId }, 'Cancelling existing preprocessor batch');
+  try {
+    await req.unwrap();
+  } catch {
+    // no-op
+  } finally {
+    req.reset();
+    // Always reset the pending batch ID - the cancel req could fail if the batch doesn't exist
+    dispatch(caLayerProcessorPendingBatchIdChanged({ layerId, batchId: null }));
+  }
+};
+
 export const addControlAdapterPreprocessor = (startAppListening: AppStartListening) => {
   startAppListening({
     matcher,
-    effect: async (action, { dispatch, getState, getOriginalState, cancelActiveListeners, delay, take }) => {
+    effect: async (action, { dispatch, getState, cancelActiveListeners, delay, take, signal }) => {
       const layerId = caLayerRecalled.match(action) ? action.payload.id : action.payload.layerId;
-      const precheckLayerOriginal = getOriginalState()
-        .controlLayers.present.layers.filter(isControlAdapterLayer)
-        .find((l) => l.id === layerId);
-      const precheckLayer = getState()
-        .controlLayers.present.layers.filter(isControlAdapterLayer)
-        .find((l) => l.id === layerId);
-
-      // Conditions to bail
-      const layerDoesNotExist = !precheckLayer;
-      const layerHasNoImage = !precheckLayer?.controlAdapter.image;
-      const layerHasNoProcessorConfig = !precheckLayer?.controlAdapter.processorConfig;
-      const layerIsAlreadyProcessingImage = precheckLayer?.controlAdapter.isProcessingImage;
-      const areImageAndProcessorUnchanged =
-        isEqual(precheckLayer?.controlAdapter.image, precheckLayerOriginal?.controlAdapter.image) &&
-        isEqual(precheckLayer?.controlAdapter.processorConfig, precheckLayerOriginal?.controlAdapter.processorConfig);
-
-      if (
-        layerDoesNotExist ||
-        layerHasNoImage ||
-        layerHasNoProcessorConfig ||
-        areImageAndProcessorUnchanged ||
-        layerIsAlreadyProcessingImage
-      ) {
-        return;
-      }
 
       // Cancel any in-progress instances of this listener
       cancelActiveListeners();
@@ -63,19 +56,31 @@ export const addControlAdapterPreprocessor = (startAppListening: AppStartListeni
 
       // Delay before starting actual work
       await delay(DEBOUNCE_MS);
-      dispatch(caLayerIsProcessingImageChanged({ layerId, isProcessingImage: true }));
 
       // Double-check that we are still eligible for processing
       const state = getState();
       const layer = state.controlLayers.present.layers.filter(isControlAdapterLayer).find((l) => l.id === layerId);
-      const image = layer?.controlAdapter.image;
-      const config = layer?.controlAdapter.processorConfig;
 
       // If we have no image or there is no processor config, bail
-      if (!layer || !image || !config) {
+      if (!layer) {
         return;
       }
 
+      const image = layer.controlAdapter.image;
+      const config = layer.controlAdapter.processorConfig;
+
+      if (!image || !config) {
+        // The user has reset the image or config, so we should clear the processed image
+        dispatch(caLayerProcessedImageChanged({ layerId, imageDTO: null }));
+      }
+
+      // At this point, the user has stopped fiddling with the processor settings and there is a processor selected.
+
+      // If there is a pending processor batch, cancel it.
+      if (layer.controlAdapter.processorPendingBatchId) {
+        cancelProcessorBatch(dispatch, layerId, layer.controlAdapter.processorPendingBatchId);
+      }
+
       // @ts-expect-error: TS isn't able to narrow the typing of buildNode and `config` will error...
       const processorNode = CA_PROCESSOR_DATA[config.type].buildNode(image, config);
       const enqueueBatchArg: BatchConfig = {
@@ -83,7 +88,11 @@ export const addControlAdapterPreprocessor = (startAppListening: AppStartListeni
         batch: {
           graph: {
             nodes: {
-              [processorNode.id]: { ...processorNode, is_intermediate: true },
+              [processorNode.id]: {
+                ...processorNode,
+                // Control images are always intermediate - do not save to gallery
+                is_intermediate: true,
+              },
             },
             edges: [],
           },
@@ -91,16 +100,21 @@ export const addControlAdapterPreprocessor = (startAppListening: AppStartListeni
         },
       };
 
+      // Kick off the processor batch
+      const req = dispatch(
+        queueApi.endpoints.enqueueBatch.initiate(enqueueBatchArg, {
+          fixedCacheKey: 'enqueueBatch',
+        })
+      );
+
       try {
-        const req = dispatch(
-          queueApi.endpoints.enqueueBatch.initiate(enqueueBatchArg, {
-            fixedCacheKey: 'enqueueBatch',
-          })
-        );
         const enqueueResult = await req.unwrap();
-        req.reset();
+        // TODO(psyche): Update the pydantic models, pretty sure we will _always_ have a batch_id here, but the model says it's optional
+        assert(enqueueResult.batch.batch_id, 'Batch ID not returned from queue');
+        dispatch(caLayerProcessorPendingBatchIdChanged({ layerId, batchId: enqueueResult.batch.batch_id }));
         log.debug({ enqueueResult: parseify(enqueueResult) }, t('queue.graphQueued'));
 
+        // Wait for the processor node to complete
         const [invocationCompleteAction] = await take(
           (action): action is ReturnType<typeof socketInvocationComplete> =>
             socketInvocationComplete.match(action) &&
@@ -109,47 +123,52 @@ export const addControlAdapterPreprocessor = (startAppListening: AppStartListeni
         );
 
         // We still have to check the output type
-        if (isImageOutput(invocationCompleteAction.payload.data.result)) {
-          const { image_name } = invocationCompleteAction.payload.data.result.image;
+        assert(
+          isImageOutput(invocationCompleteAction.payload.data.result),
+          `Processor did not return an image output, got: ${invocationCompleteAction.payload.data.result}`
+        );
+        const { image_name } = invocationCompleteAction.payload.data.result.image;
 
-          // Wait for the ImageDTO to be received
-          const [{ payload }] = await take(
-            (action) =>
-              imagesApi.endpoints.getImageDTO.matchFulfilled(action) && action.payload.image_name === image_name
-          );
+        const imageDTO = await getImageDTO(image_name);
+        assert(imageDTO, "Failed to fetch processor output's image DTO");
 
-          const imageDTO = payload as ImageDTO;
-
-          log.debug({ layerId, imageDTO }, 'ControlNet image processed');
-
-          // Update the processed image in the store
-          dispatch(
-            caLayerProcessedImageChanged({
-              layerId,
-              imageDTO,
-            })
-          );
-          dispatch(caLayerIsProcessingImageChanged({ layerId, isProcessingImage: false }));
-        }
+        // Whew! We made it. Update the layer with the processed image
+        log.debug({ layerId, imageDTO }, 'ControlNet image processed');
+        dispatch(caLayerProcessedImageChanged({ layerId, imageDTO }));
+        dispatch(caLayerProcessorPendingBatchIdChanged({ layerId, batchId: null }));
       } catch (error) {
-        log.error({ enqueueBatchArg: parseify(enqueueBatchArg) }, t('queue.graphFailedToQueue'));
-        dispatch(caLayerIsProcessingImageChanged({ layerId, isProcessingImage: false }));
+        if (signal.aborted) {
+          // The listener was canceled - we need to cancel the pending processor batch, if there is one (could have changed by now).
+          const pendingBatchId = getState()
+            .controlLayers.present.layers.filter(isControlAdapterLayer)
+            .find((l) => l.id === layerId)?.controlAdapter.processorPendingBatchId;
+          if (pendingBatchId) {
+            cancelProcessorBatch(dispatch, layerId, pendingBatchId);
+          }
+          log.trace('Control Adapter preprocessor cancelled');
+        } else {
+          // Some other error condition...
+          console.log(error);
+          log.error({ enqueueBatchArg: parseify(enqueueBatchArg) }, t('queue.graphFailedToQueue'));
 
-        if (error instanceof Object) {
-          if ('data' in error && 'status' in error) {
-            if (error.status === 403) {
-              dispatch(caLayerImageChanged({ layerId, imageDTO: null }));
-              return;
+          if (error instanceof Object) {
+            if ('data' in error && 'status' in error) {
+              if (error.status === 403) {
+                dispatch(caLayerImageChanged({ layerId, imageDTO: null }));
+                return;
+              }
             }
           }
-        }
 
-        dispatch(
-          addToast({
-            title: t('queue.graphFailedToQueue'),
-            status: 'error',
-          })
-        );
+          dispatch(
+            addToast({
+              title: t('queue.graphFailedToQueue'),
+              status: 'error',
+            })
+          );
+        }
+      } finally {
+        req.reset();
       }
     },
   });
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterImagePreview.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterImagePreview.tsx
index c1da425186..4d93eb12ec 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterImagePreview.tsx
@@ -124,7 +124,7 @@ export const ControlAdapterImagePreview = memo(
       controlImage &&
       processedControlImage &&
       !isMouseOverImage &&
-      !controlAdapter.isProcessingImage &&
+      !controlAdapter.processorPendingBatchId &&
       controlAdapter.processorConfig !== null;
 
     useEffect(() => {
@@ -190,7 +190,7 @@ export const ControlAdapterImagePreview = memo(
           />
         </>
 
-        {controlAdapter.isProcessingImage && (
+        {controlAdapter.processorPendingBatchId !== null && (
           <Flex
             position="absolute"
             top={0}
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
index 425599561a..32e29918ae 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
@@ -27,7 +27,7 @@ import { modelChanged } from 'features/parameters/store/generationSlice';
 import type { ParameterAutoNegative } from 'features/parameters/types/parameterSchemas';
 import { getIsSizeOptimal, getOptimalDimension } from 'features/parameters/util/optimalDimension';
 import type { IRect, Vector2d } from 'konva/lib/types';
-import { isEqual, partition } from 'lodash-es';
+import { isEqual, partition, unset } from 'lodash-es';
 import { atom } from 'nanostores';
 import type { RgbColor } from 'react-colorful';
 import type { UndoableOptions } from 'redux-undo';
@@ -49,7 +49,7 @@ import type {
 } from './types';
 
 export const initialControlLayersState: ControlLayersState = {
-  _version: 2,
+  _version: 3,
   selectedLayerId: null,
   brushSize: 100,
   layers: [],
@@ -334,13 +334,13 @@ export const controlLayersSlice = createSlice({
       const layer = selectCALayerOrThrow(state, layerId);
       layer.opacity = opacity;
     },
-    caLayerIsProcessingImageChanged: (
+    caLayerProcessorPendingBatchIdChanged: (
       state,
-      action: PayloadAction<{ layerId: string; isProcessingImage: boolean }>
+      action: PayloadAction<{ layerId: string; batchId: string | null }>
     ) => {
-      const { layerId, isProcessingImage } = action.payload;
+      const { layerId, batchId } = action.payload;
       const layer = selectCALayerOrThrow(state, layerId);
-      layer.controlAdapter.isProcessingImage = isProcessingImage;
+      layer.controlAdapter.processorPendingBatchId = batchId;
     },
     //#endregion
 
@@ -800,7 +800,7 @@ export const {
   caLayerProcessorConfigChanged,
   caLayerIsFilterEnabledChanged,
   caLayerOpacityChanged,
-  caLayerIsProcessingImageChanged,
+  caLayerProcessorPendingBatchIdChanged,
   // IPA Layers
   ipaLayerAdded,
   ipaLayerRecalled,
@@ -857,7 +857,16 @@ export const selectControlLayersSlice = (state: RootState) => state.controlLayer
 const migrateControlLayersState = (state: any): any => {
   if (state._version === 1) {
     // Reset state for users on v1 (e.g. beta users), some changes could cause
-    return deepClone(initialControlLayersState);
+    state = deepClone(initialControlLayersState);
+  }
+  if (state._version === 2) {
+    // The CA `isProcessingImage` flag was replaced with a `processorPendingBatchId` property, fix up CA layers
+    for (const layer of (state as ControlLayersState).layers) {
+      if (layer.type === 'control_adapter_layer') {
+        layer.controlAdapter.processorPendingBatchId = null;
+        unset(layer.controlAdapter, 'isProcessingImage');
+      }
+    }
   }
   return state;
 };
diff --git a/invokeai/frontend/web/src/features/controlLayers/store/types.ts b/invokeai/frontend/web/src/features/controlLayers/store/types.ts
index 2d29b349cb..771e5060e1 100644
--- a/invokeai/frontend/web/src/features/controlLayers/store/types.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/store/types.ts
@@ -113,7 +113,7 @@ export const zLayer = z.discriminatedUnion('type', [
 export type Layer = z.infer<typeof zLayer>;
 
 export type ControlLayersState = {
-  _version: 2;
+  _version: 3;
   selectedLayerId: string | null;
   layers: Layer[];
   brushSize: number;
diff --git a/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts b/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
index 589c61b855..41f1cf438f 100644
--- a/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/util/controlAdapters.ts
@@ -198,8 +198,8 @@ const zControlAdapterBase = z.object({
   weight: z.number().gte(0).lte(1),
   image: zImageWithDims.nullable(),
   processedImage: zImageWithDims.nullable(),
-  isProcessingImage: z.boolean(),
   processorConfig: zProcessorConfig.nullable(),
+  processorPendingBatchId: z.string().nullable().default(null),
   beginEndStepPct: zBeginEndStepPct,
 });
 
@@ -521,8 +521,8 @@ export const initialControlNetV2: Omit<ControlNetConfigV2, 'id'> = {
   controlMode: 'balanced',
   image: null,
   processedImage: null,
-  isProcessingImage: false,
   processorConfig: CA_PROCESSOR_DATA.canny_image_processor.buildDefaults(),
+  processorPendingBatchId: null,
 };
 
 export const initialT2IAdapterV2: Omit<T2IAdapterConfigV2, 'id'> = {
@@ -532,8 +532,8 @@ export const initialT2IAdapterV2: Omit<T2IAdapterConfigV2, 'id'> = {
   beginEndStepPct: [0, 1],
   image: null,
   processedImage: null,
-  isProcessingImage: false,
   processorConfig: CA_PROCESSOR_DATA.canny_image_processor.buildDefaults(),
+  processorPendingBatchId: null,
 };
 
 export const initialIPAdapterV2: Omit<IPAdapterConfigV2, 'id'> = {
diff --git a/invokeai/frontend/web/src/features/metadata/util/parsers.ts b/invokeai/frontend/web/src/features/metadata/util/parsers.ts
index ac42142ea2..0757d2e8db 100644
--- a/invokeai/frontend/web/src/features/metadata/util/parsers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/parsers.ts
@@ -587,7 +587,7 @@ const parseControlNetToControlAdapterLayer: MetadataParseFunc<ControlAdapterLaye
       image: imageDTO ? imageDTOToImageWithDims(imageDTO) : null,
       processedImage: processedImageDTO ? imageDTOToImageWithDims(processedImageDTO) : null,
       processorConfig,
-      isProcessingImage: false,
+      processorPendingBatchId: null,
     },
   };
 
@@ -651,7 +651,7 @@ const parseT2IAdapterToControlAdapterLayer: MetadataParseFunc<ControlAdapterLaye
       image: imageDTO ? imageDTOToImageWithDims(imageDTO) : null,
       processedImage: processedImageDTO ? imageDTOToImageWithDims(processedImageDTO) : null,
       processorConfig,
-      isProcessingImage: false,
+      processorPendingBatchId: null,
     },
   };
 

From d9ce9c62acd0cea26656133369b9606d87ca5130 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 10 May 2024 16:35:04 +1000
Subject: [PATCH 091/116] feat(ui): disable invoke button when t2i adapter used
 w/ image dims that are not multiples of 64

---
 invokeai/frontend/web/public/locales/en.json                  | 3 ++-
 invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index b36fe0e26c..5006c257ca 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -934,7 +934,8 @@
             "noModelSelected": "No model selected",
             "noPrompts": "No prompts generated",
             "noNodesInGraph": "No nodes in graph",
-            "systemDisconnected": "System disconnected"
+            "systemDisconnected": "System disconnected",
+            "t2iAdapterMismatchedDimensions": "T2I Adapters require image dimensions to be multiples of 64"
         },
         "maskBlur": "Mask Blur",
         "negativePromptPlaceholder": "Negative Prompt",
diff --git a/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts b/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts
index 2aac5b8e72..09ffd445de 100644
--- a/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts
+++ b/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts
@@ -29,6 +29,7 @@ const selector = createMemoizedSelector(
   ],
   (controlAdapters, generation, system, nodes, dynamicPrompts, controlLayers, activeTabName) => {
     const { model } = generation;
+    const { size } = controlLayers.present;
     const { positivePrompt } = controlLayers.present;
 
     const { isConnected } = system;
@@ -143,6 +144,9 @@ const selector = createMemoizedSelector(
                 })
               );
             }
+            if (ca.type === 't2i_adapter' && (size.width % 64 !== 0 || size.height % 64 !== 0)) {
+              reasons.push(i18n.t('parameters.invoke.t2iAdapterMismatchedDimensions'));
+            }
           });
       } else {
         // Handling for all other tabs

From 19f5a9c3a91e2c93889742f62915615da91dcd5e Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 10 May 2024 18:08:11 +1000
Subject: [PATCH 092/116] feat(ui): better invoke button checks

- Improved/more thorough checking before invoking for control layers
- Improved styling for the tooltip
---
 invokeai/frontend/web/public/locales/en.json  |  14 +-
 .../src/common/hooks/useIsReadyToEnqueue.ts   | 169 ++++++++++--------
 .../components/InvokeQueueBackButton.tsx      |  39 ++--
 .../queue/components/QueueButtonTooltip.tsx   |  26 ++-
 .../queue/components/QueueFrontButton.tsx     |  19 +-
 .../FloatingParametersPanelButtons.tsx        |  21 +--
 6 files changed, 173 insertions(+), 115 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 5006c257ca..ed94dd09f4 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -935,7 +935,19 @@
             "noPrompts": "No prompts generated",
             "noNodesInGraph": "No nodes in graph",
             "systemDisconnected": "System disconnected",
-            "t2iAdapterMismatchedDimensions": "T2I Adapters require image dimensions to be multiples of 64"
+            "layer": {
+                "initialImageNoImageSelected": "no initial image selected",
+                "controlAdapterNoModelSelected": "no Control Adapter model selected",
+                "controlAdapterIncompatibleBaseModel": "incompatible Control Adapter base model",
+                "controlAdapterNoImageSelected": "no Control Adapter image selected",
+                "controlAdapterImageNotProcessed": "Control Adapter image not processed",
+                "t2iAdapterIncompatibleDimensions": "T2I Adapter requires image dimension to be multiples of 64",
+                "ipAdapterNoModelSelected": "no IP adapter selected",
+                "ipAdapterIncompatibleBaseModel": "incompatible IP Adapter base model",
+                "ipAdapterNoImageSelected": "no IP Adapter image selected",
+                "rgNoPromptsOrIPAdapters": "no text prompts or IP Adapters",
+                "rgNoRegion": "no region selected"
+            }
         },
         "maskBlur": "Mask Blur",
         "negativePromptPlaceholder": "Negative Prompt",
diff --git a/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts b/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts
index 09ffd445de..3c863d0c93 100644
--- a/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts
+++ b/invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts
@@ -6,6 +6,7 @@ import {
 } from 'features/controlAdapters/store/controlAdaptersSlice';
 import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
 import { selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
+import type { Layer } from 'features/controlLayers/store/types';
 import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import { getShouldProcessPrompt } from 'features/dynamicPrompts/util/getShouldProcessPrompt';
 import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
@@ -14,9 +15,16 @@ import { selectGenerationSlice } from 'features/parameters/store/generationSlice
 import { selectSystemSlice } from 'features/system/store/systemSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import i18n from 'i18next';
-import { forEach } from 'lodash-es';
+import { forEach, upperFirst } from 'lodash-es';
 import { getConnectedEdges } from 'reactflow';
 
+const LAYER_TYPE_TO_TKEY: Record<Layer['type'], string> = {
+  initial_image_layer: 'controlLayers.globalInitialImage',
+  control_adapter_layer: 'controlLayers.globalControlAdapter',
+  ip_adapter_layer: 'controlLayers.globalIPAdapter',
+  regional_guidance_layer: 'controlLayers.regionalGuidance',
+};
+
 const selector = createMemoizedSelector(
   [
     selectControlAdaptersSlice,
@@ -34,17 +42,17 @@ const selector = createMemoizedSelector(
 
     const { isConnected } = system;
 
-    const reasons: string[] = [];
+    const reasons: { prefix?: string; content: string }[] = [];
 
     // Cannot generate if not connected
     if (!isConnected) {
-      reasons.push(i18n.t('parameters.invoke.systemDisconnected'));
+      reasons.push({ content: i18n.t('parameters.invoke.systemDisconnected') });
     }
 
     if (activeTabName === 'workflows') {
       if (nodes.shouldValidateGraph) {
         if (!nodes.nodes.length) {
-          reasons.push(i18n.t('parameters.invoke.noNodesInGraph'));
+          reasons.push({ content: i18n.t('parameters.invoke.noNodesInGraph') });
         }
 
         nodes.nodes.forEach((node) => {
@@ -56,7 +64,7 @@ const selector = createMemoizedSelector(
 
           if (!nodeTemplate) {
             // Node type not found
-            reasons.push(i18n.t('parameters.invoke.missingNodeTemplate'));
+            reasons.push({ content: i18n.t('parameters.invoke.missingNodeTemplate') });
             return;
           }
 
@@ -69,17 +77,17 @@ const selector = createMemoizedSelector(
             );
 
             if (!fieldTemplate) {
-              reasons.push(i18n.t('parameters.invoke.missingFieldTemplate'));
+              reasons.push({ content: i18n.t('parameters.invoke.missingFieldTemplate') });
               return;
             }
 
             if (fieldTemplate.required && field.value === undefined && !hasConnection) {
-              reasons.push(
-                i18n.t('parameters.invoke.missingInputForField', {
+              reasons.push({
+                content: i18n.t('parameters.invoke.missingInputForField', {
                   nodeLabel: node.data.label || nodeTemplate.title,
                   fieldLabel: field.label || fieldTemplate.title,
-                })
-              );
+                }),
+              });
               return;
             }
           });
@@ -87,65 +95,94 @@ const selector = createMemoizedSelector(
       }
     } else {
       if (dynamicPrompts.prompts.length === 0 && getShouldProcessPrompt(positivePrompt)) {
-        reasons.push(i18n.t('parameters.invoke.noPrompts'));
+        reasons.push({ content: i18n.t('parameters.invoke.noPrompts') });
       }
 
       if (!model) {
-        reasons.push(i18n.t('parameters.invoke.noModelSelected'));
+        reasons.push({ content: i18n.t('parameters.invoke.noModelSelected') });
       }
 
       if (activeTabName === 'generation') {
         // Handling for generation tab
         controlLayers.present.layers
           .filter((l) => l.isEnabled)
-          .flatMap((l) => {
+          .forEach((l, i) => {
+            const layerLiteral = i18n.t('controlLayers.layers_one');
+            const layerNumber = i + 1;
+            const layerType = i18n.t(LAYER_TYPE_TO_TKEY[l.type]);
+            const prefix = `${layerLiteral} #${layerNumber} (${layerType})`;
+            const problems: string[] = [];
             if (l.type === 'control_adapter_layer') {
-              return l.controlAdapter;
-            } else if (l.type === 'ip_adapter_layer') {
-              return l.ipAdapter;
-            } else if (l.type === 'regional_guidance_layer') {
-              return l.ipAdapters;
+              // Must have model
+              if (!l.controlAdapter.model) {
+                problems.push(i18n.t('parameters.invoke.layer.controlAdapterNoModelSelected'));
+              }
+              // Model base must match
+              if (l.controlAdapter.model?.base !== model?.base) {
+                problems.push(i18n.t('parameters.invoke.layer.controlAdapterIncompatibleBaseModel'));
+              }
+              // Must have a control image OR, if it has a processor, it must have a processed image
+              if (!l.controlAdapter.image) {
+                problems.push(i18n.t('parameters.invoke.layer.controlAdapterNoImageSelected'));
+              } else if (l.controlAdapter.processorConfig && !l.controlAdapter.processedImage) {
+                problems.push(i18n.t('parameters.invoke.layer.controlAdapterImageNotProcessed'));
+              }
+              // T2I Adapters require images have dimensions that are multiples of 64
+              if (l.controlAdapter.type === 't2i_adapter' && (size.width % 64 !== 0 || size.height % 64 !== 0)) {
+                problems.push(i18n.t('parameters.invoke.layer.t2iAdapterIncompatibleDimensions'));
+              }
             }
-            return [];
-          })
-          .forEach((ca, i) => {
-            const hasNoModel = !ca.model;
-            const mismatchedModelBase = ca.model?.base !== model?.base;
-            const hasNoImage = !ca.image;
-            const imageNotProcessed =
-              (ca.type === 'controlnet' || ca.type === 't2i_adapter') && !ca.processedImage && ca.processorConfig;
 
-            if (hasNoModel) {
-              reasons.push(
-                i18n.t('parameters.invoke.noModelForControlAdapter', {
-                  number: i + 1,
-                })
-              );
+            if (l.type === 'ip_adapter_layer') {
+              // Must have model
+              if (!l.ipAdapter.model) {
+                problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoModelSelected'));
+              }
+              // Model base must match
+              if (l.ipAdapter.model?.base !== model?.base) {
+                problems.push(i18n.t('parameters.invoke.layer.ipAdapterIncompatibleBaseModel'));
+              }
+              // Must have an image
+              if (!l.ipAdapter.image) {
+                problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoImageSelected'));
+              }
             }
-            if (mismatchedModelBase) {
-              // This should never happen, just a sanity check
-              reasons.push(
-                i18n.t('parameters.invoke.incompatibleBaseModelForControlAdapter', {
-                  number: i + 1,
-                })
-              );
+
+            if (l.type === 'initial_image_layer') {
+              // Must have an image
+              if (!l.image) {
+                problems.push(i18n.t('parameters.invoke.layer.initialImageNoImageSelected'));
+              }
             }
-            if (hasNoImage) {
-              reasons.push(
-                i18n.t('parameters.invoke.noControlImageForControlAdapter', {
-                  number: i + 1,
-                })
-              );
+
+            if (l.type === 'regional_guidance_layer') {
+              // Must have a region
+              if (l.maskObjects.length === 0) {
+                problems.push(i18n.t('parameters.invoke.layer.rgNoRegion'));
+              }
+              // Must have at least 1 prompt or IP Adapter
+              if (l.positivePrompt === null && l.negativePrompt === null && l.ipAdapters.length === 0) {
+                problems.push(i18n.t('parameters.invoke.layer.rgNoPromptsOrIPAdapters'));
+              }
+              l.ipAdapters.forEach((ipAdapter) => {
+                // Must have model
+                if (!ipAdapter.model) {
+                  problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoModelSelected'));
+                }
+                // Model base must match
+                if (ipAdapter.model?.base !== model?.base) {
+                  problems.push(i18n.t('parameters.invoke.layer.ipAdapterIncompatibleBaseModel'));
+                }
+                // Must have an image
+                if (!ipAdapter.image) {
+                  problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoImageSelected'));
+                }
+              });
             }
-            if (imageNotProcessed) {
-              reasons.push(
-                i18n.t('parameters.invoke.imageNotProcessedForControlAdapter', {
-                  number: i + 1,
-                })
-              );
-            }
-            if (ca.type === 't2i_adapter' && (size.width % 64 !== 0 || size.height % 64 !== 0)) {
-              reasons.push(i18n.t('parameters.invoke.t2iAdapterMismatchedDimensions'));
+
+            if (problems.length) {
+              const content = upperFirst(problems.join(', '));
+              reasons.push({ prefix, content });
             }
           });
       } else {
@@ -158,29 +195,19 @@ const selector = createMemoizedSelector(
             }
 
             if (!ca.model) {
-              reasons.push(
-                i18n.t('parameters.invoke.noModelForControlAdapter', {
-                  number: i + 1,
-                })
-              );
+              reasons.push({ content: i18n.t('parameters.invoke.noModelForControlAdapter', { number: i + 1 }) });
             } else if (ca.model.base !== model?.base) {
               // This should never happen, just a sanity check
-              reasons.push(
-                i18n.t('parameters.invoke.incompatibleBaseModelForControlAdapter', {
-                  number: i + 1,
-                })
-              );
+              reasons.push({
+                content: i18n.t('parameters.invoke.incompatibleBaseModelForControlAdapter', { number: i + 1 }),
+              });
             }
 
             if (
               !ca.controlImage ||
               (isControlNetOrT2IAdapter(ca) && !ca.processedControlImage && ca.processorType !== 'none')
             ) {
-              reasons.push(
-                i18n.t('parameters.invoke.noControlImageForControlAdapter', {
-                  number: i + 1,
-                })
-              );
+              reasons.push({ content: i18n.t('parameters.invoke.noControlImageForControlAdapter', { number: i + 1 }) });
             }
           });
       }
@@ -191,6 +218,6 @@ const selector = createMemoizedSelector(
 );
 
 export const useIsReadyToEnqueue = () => {
-  const { isReady, reasons } = useAppSelector(selector);
-  return { isReady, reasons };
+  const value = useAppSelector(selector);
+  return value;
 };
diff --git a/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx b/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx
index 314616da59..52dc5e24af 100644
--- a/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx
@@ -16,25 +16,26 @@ export const InvokeQueueBackButton = memo(() => {
   return (
     <Flex pos="relative" flexGrow={1} minW="240px">
       <QueueIterationsNumberInput />
-      <Button
-        onClick={queueBack}
-        isLoading={isLoading || isLoadingDynamicPrompts}
-        loadingText={invoke}
-        isDisabled={isDisabled}
-        rightIcon={<RiSparkling2Fill />}
-        tooltip={<QueueButtonTooltip />}
-        variant="solid"
-        zIndex={1}
-        colorScheme="invokeYellow"
-        size="lg"
-        w="calc(100% - 60px)"
-        flexShrink={0}
-        justifyContent="space-between"
-        spinnerPlacement="end"
-      >
-        <span>{invoke}</span>
-        <Spacer />
-      </Button>
+      <QueueButtonTooltip>
+        <Button
+          onClick={queueBack}
+          isLoading={isLoading || isLoadingDynamicPrompts}
+          loadingText={invoke}
+          isDisabled={isDisabled}
+          rightIcon={<RiSparkling2Fill />}
+          variant="solid"
+          zIndex={1}
+          colorScheme="invokeYellow"
+          size="lg"
+          w="calc(100% - 60px)"
+          flexShrink={0}
+          justifyContent="space-between"
+          spinnerPlacement="end"
+        >
+          <span>{invoke}</span>
+          <Spacer />
+        </Button>
+      </QueueButtonTooltip>
     </Flex>
   );
 });
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx b/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
index f63e96c45f..c865f3a60f 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
@@ -1,10 +1,11 @@
-import { Divider, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library';
+import { Divider, Flex, ListItem, Text, Tooltip, UnorderedList } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useIsReadyToEnqueue } from 'common/hooks/useIsReadyToEnqueue';
 import { selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
 import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import { getShouldProcessPrompt } from 'features/dynamicPrompts/util/getShouldProcessPrompt';
+import type { PropsWithChildren } from 'react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useEnqueueBatchMutation } from 'services/api/endpoints/queue';
@@ -21,7 +22,15 @@ type Props = {
   prepend?: boolean;
 };
 
-export const QueueButtonTooltip = memo(({ prepend = false }: Props) => {
+export const QueueButtonTooltip = (props: PropsWithChildren<Props>) => {
+  return (
+    <Tooltip label={<TooltipContent prepend={props.prepend} />} maxW={512}>
+      {props.children}
+    </Tooltip>
+  );
+};
+
+const TooltipContent = memo(({ prepend = false }: Props) => {
   const { t } = useTranslation();
   const { isReady, reasons } = useIsReadyToEnqueue();
   const isLoadingDynamicPrompts = useAppSelector((s) => s.dynamicPrompts.isLoading);
@@ -64,8 +73,15 @@ export const QueueButtonTooltip = memo(({ prepend = false }: Props) => {
           <Divider opacity={0.2} borderColor="base.900" />
           <UnorderedList>
             {reasons.map((reason, i) => (
-              <ListItem key={`${reason}.${i}`}>
-                <Text>{reason}</Text>
+              <ListItem key={`${reason.content}.${i}`}>
+                <span>
+                  {reason.prefix && (
+                    <Text as="span" fontWeight="semibold">
+                      {reason.prefix}:{' '}
+                    </Text>
+                  )}
+                  <Text as="span">{reason.content}</Text>
+                </span>
               </ListItem>
             ))}
           </UnorderedList>
@@ -82,4 +98,4 @@ export const QueueButtonTooltip = memo(({ prepend = false }: Props) => {
   );
 });
 
-QueueButtonTooltip.displayName = 'QueueButtonTooltip';
+TooltipContent.displayName = 'QueueButtonTooltipContent';
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueFrontButton.tsx b/invokeai/frontend/web/src/features/queue/components/QueueFrontButton.tsx
index 07ad0f5b3c..eb0e72950f 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueFrontButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueFrontButton.tsx
@@ -10,15 +10,16 @@ const QueueFrontButton = () => {
   const { t } = useTranslation();
   const { queueFront, isLoading, isDisabled } = useQueueFront();
   return (
-    <IconButton
-      aria-label={t('queue.queueFront')}
-      isDisabled={isDisabled}
-      isLoading={isLoading}
-      onClick={queueFront}
-      tooltip={<QueueButtonTooltip prepend />}
-      icon={<AiFillThunderbolt />}
-      size="lg"
-    />
+    <QueueButtonTooltip prepend>
+      <IconButton
+        aria-label={t('queue.queueFront')}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+        onClick={queueFront}
+        icon={<AiFillThunderbolt />}
+        size="lg"
+      />
+    </QueueButtonTooltip>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
index 32611b2354..5a8273b7fc 100644
--- a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
@@ -63,16 +63,17 @@ const FloatingSidePanelButtons = (props: Props) => {
             sx={floatingButtonStyles}
             icon={<PiSlidersHorizontalBold size="16px" />}
           />
-          <IconButton
-            aria-label={t('queue.queueBack')}
-            onClick={queueBack}
-            isLoading={isLoading}
-            isDisabled={isDisabled}
-            icon={queueButtonIcon}
-            colorScheme="invokeYellow"
-            tooltip={<QueueButtonTooltip />}
-            sx={floatingButtonStyles}
-          />
+          <QueueButtonTooltip>
+            <IconButton
+              aria-label={t('queue.queueBack')}
+              onClick={queueBack}
+              isLoading={isLoading}
+              isDisabled={isDisabled}
+              icon={queueButtonIcon}
+              colorScheme="invokeYellow"
+              sx={floatingButtonStyles}
+            />
+          </QueueButtonTooltip>
           <CancelCurrentQueueItemIconButton sx={floatingButtonStyles} />
         </ButtonGroup>
         <ClearAllQueueIconButton sx={floatingButtonStyles} onOpen={disclosure.onOpen} />

From 6ff1c7d54182995fd7c005ba0ceea6804640a292 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 10 May 2024 18:23:37 +1000
Subject: [PATCH 093/116] feat(ui): add group by base & type to
 useGroupedModelCombobox hook

This allows comboboxes for models to have more granular groupings. For example, Control Adapter models can be grouped by base model & model type.

Before:
- `SD-1`
- `SDXL`

After:
- `SD-1 / ControlNet`
- `SD-1 / T2I Adapter`
- `SDXL / ControlNet`
- `SDXL / T2I Adapter`
---
 .../web/src/common/hooks/useGroupedModelCombobox.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts b/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts
index 55887eb3be..5b57fcd2bb 100644
--- a/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts
+++ b/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts
@@ -13,6 +13,7 @@ type UseGroupedModelComboboxArg<T extends AnyModelConfig> = {
   onChange: (value: T | null) => void;
   getIsDisabled?: (model: T) => boolean;
   isLoading?: boolean;
+  groupByType?: boolean;
 };
 
 type UseGroupedModelComboboxReturn = {
@@ -23,17 +24,21 @@ type UseGroupedModelComboboxReturn = {
   noOptionsMessage: () => string;
 };
 
+const groupByBaseFunc = <T extends AnyModelConfig>(model: T) => model.base.toUpperCase();
+const groupByBaseAndTypeFunc = <T extends AnyModelConfig>(model: T) =>
+  `${model.base.toUpperCase()} / ${model.type.replaceAll('_', ' ').toUpperCase()}`;
+
 export const useGroupedModelCombobox = <T extends AnyModelConfig>(
   arg: UseGroupedModelComboboxArg<T>
 ): UseGroupedModelComboboxReturn => {
   const { t } = useTranslation();
   const base_model = useAppSelector((s) => s.generation.model?.base ?? 'sdxl');
-  const { modelConfigs, selectedModel, getIsDisabled, onChange, isLoading } = arg;
+  const { modelConfigs, selectedModel, getIsDisabled, onChange, isLoading, groupByType = false } = arg;
   const options = useMemo<GroupBase<ComboboxOption>[]>(() => {
     if (!modelConfigs) {
       return [];
     }
-    const groupedModels = groupBy(modelConfigs, 'base');
+    const groupedModels = groupBy(modelConfigs, groupByType ? groupByBaseAndTypeFunc : groupByBaseFunc);
     const _options = reduce(
       groupedModels,
       (acc, val, label) => {
@@ -49,9 +54,9 @@ export const useGroupedModelCombobox = <T extends AnyModelConfig>(
       },
       [] as GroupBase<ComboboxOption>[]
     );
-    _options.sort((a) => (a.label === base_model ? -1 : 1));
+    _options.sort((a) => (a.label?.split('/')[0]?.toLowerCase().includes(base_model) ? -1 : 1));
     return _options;
-  }, [getIsDisabled, modelConfigs, base_model]);
+  }, [modelConfigs, groupByType, getIsDisabled, base_model]);
 
   const value = useMemo(
     () =>

From 8dd0bfb06840c8406be24e2e05a970fa10331740 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 10 May 2024 18:23:56 +1000
Subject: [PATCH 094/116] feat(ui): use new model type grouping for control
 adapters in control layers

---
 .../ControlAndIPAdapter/ControlAdapterModelCombobox.tsx          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterModelCombobox.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterModelCombobox.tsx
index a4b1d6b744..535f3067a4 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterModelCombobox.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterModelCombobox.tsx
@@ -42,6 +42,7 @@ export const ControlAdapterModelCombobox = memo(({ modelKey, onChange: onChangeM
     selectedModel,
     getIsDisabled,
     isLoading,
+    groupByType: true,
   });
 
   return (

From 4ea8416c68d67b562d96418c331e51d577afb6ef Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 13 May 2024 07:44:33 +1000
Subject: [PATCH 095/116] fix(ui): use pluralization for invoke button tooltip

---
 invokeai/frontend/web/public/locales/en.json    | 11 +++++++----
 .../queue/components/QueueButtonTooltip.tsx     | 17 +++++++++--------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index ed94dd09f4..7aa4b03b8c 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -261,7 +261,6 @@
         "queue": "Queue",
         "queueFront": "Add to Front of Queue",
         "queueBack": "Add to Queue",
-        "queueCountPrediction": "{{promptsCount}} prompts \u00d7 {{iterations}} iterations -> {{count}} generations",
         "queueEmpty": "Queue Empty",
         "enqueueing": "Queueing Batch",
         "resume": "Resume",
@@ -314,7 +313,13 @@
         "batchFailedToQueue": "Failed to Queue Batch",
         "graphQueued": "Graph queued",
         "graphFailedToQueue": "Failed to queue graph",
-        "openQueue": "Open Queue"
+        "openQueue": "Open Queue",
+        "prompts_one": "Prompt",
+        "prompts_other": "Prompts",
+        "iterations_one": "Iteration",
+        "iterations_other": "Iterations",
+        "generations_one": "Generation",
+        "generations_other": "Generations"
     },
     "invocationCache": {
         "invocationCache": "Invocation Cache",
@@ -958,8 +963,6 @@
         "positivePromptPlaceholder": "Positive Prompt",
         "globalPositivePromptPlaceholder": "Global Positive Prompt",
         "iterations": "Iterations",
-        "iterationsWithCount_one": "{{count}} Iteration",
-        "iterationsWithCount_other": "{{count}} Iterations",
         "scale": "Scale",
         "scaleBeforeProcessing": "Scale Before Processing",
         "scaledHeight": "Scaled H",
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx b/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
index c865f3a60f..498414d377 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueButtonTooltip.tsx
@@ -35,12 +35,19 @@ const TooltipContent = memo(({ prepend = false }: Props) => {
   const { isReady, reasons } = useIsReadyToEnqueue();
   const isLoadingDynamicPrompts = useAppSelector((s) => s.dynamicPrompts.isLoading);
   const promptsCount = useAppSelector(selectPromptsCount);
-  const iterations = useAppSelector((s) => s.generation.iterations);
+  const iterationsCount = useAppSelector((s) => s.generation.iterations);
   const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
   const autoAddBoardName = useBoardName(autoAddBoardId);
   const [_, { isLoading }] = useEnqueueBatchMutation({
     fixedCacheKey: 'enqueueBatch',
   });
+  const queueCountPredictionLabel = useMemo(() => {
+    const generationCount = Math.min(promptsCount * iterationsCount, 10000);
+    const prompts = t('queue.prompts', { count: promptsCount });
+    const iterations = t('queue.iterations', { count: iterationsCount });
+    const generations = t('queue.generations', { count: generationCount });
+    return `${promptsCount} ${prompts} \u00d7 ${iterationsCount} ${iterations} -> ${generationCount} ${generations}`.toLowerCase();
+  }, [iterationsCount, promptsCount, t]);
 
   const label = useMemo(() => {
     if (isLoading) {
@@ -61,13 +68,7 @@ const TooltipContent = memo(({ prepend = false }: Props) => {
   return (
     <Flex flexDir="column" gap={1}>
       <Text fontWeight="semibold">{label}</Text>
-      <Text>
-        {t('queue.queueCountPrediction', {
-          promptsCount,
-          iterations,
-          count: Math.min(promptsCount * iterations, 10000),
-        })}
-      </Text>
+      <Text>{queueCountPredictionLabel}</Text>
       {reasons.length > 0 && (
         <>
           <Divider opacity={0.2} borderColor="base.900" />

From 124d49f35e68731860c961c60b4fb2219e1acabe Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 13 May 2024 07:33:58 +1000
Subject: [PATCH 096/116] fix(ui): use translations for canvas layer select

---
 .../components/IAICanvasToolbar/IAICanvasToolbar.tsx | 12 +++++++++---
 .../web/src/features/canvas/store/canvasTypes.ts     |  5 -----
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
index 686577b4a7..5ed5ffe573 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
@@ -21,7 +21,6 @@ import {
   setShouldShowBoundingBox,
 } from 'features/canvas/store/canvasSlice';
 import type { CanvasLayer } from 'features/canvas/store/canvasTypes';
-import { LAYER_NAMES_DICT } from 'features/canvas/store/canvasTypes';
 import { memo, useCallback, useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
@@ -216,13 +215,20 @@ const IAICanvasToolbar = () => {
     [dispatch, isMaskEnabled]
   );
 
-  const value = useMemo(() => LAYER_NAMES_DICT.filter((o) => o.value === layer)[0], [layer]);
+  const layerOptions = useMemo<{ label: string; value: CanvasLayer }[]>(
+    () => [
+      { label: t('unifiedCanvas.base'), value: 'base' },
+      { label: t('unifiedCanvas.mask'), value: 'mask' },
+    ],
+    [t]
+  );
+  const layerValue = useMemo(() => layerOptions.filter((o) => o.value === layer)[0] ?? null, [layer, layerOptions]);
 
   return (
     <Flex alignItems="center" gap={2} flexWrap="wrap">
       <Tooltip label={`${t('unifiedCanvas.layer')} (Q)`}>
         <FormControl isDisabled={isStaging} w="5rem">
-          <Combobox value={value} options={LAYER_NAMES_DICT} onChange={handleChangeLayer} />
+          <Combobox value={layerValue} options={layerOptions} onChange={handleChangeLayer} />
         </FormControl>
       </Tooltip>
 
diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts b/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts
index 2d30e18760..c41c6f329f 100644
--- a/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts
+++ b/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts
@@ -5,11 +5,6 @@ import { z } from 'zod';
 
 export type CanvasLayer = 'base' | 'mask';
 
-export const LAYER_NAMES_DICT: { label: string; value: CanvasLayer }[] = [
-  { label: 'Base', value: 'base' },
-  { label: 'Mask', value: 'mask' },
-];
-
 const zBoundingBoxScaleMethod = z.enum(['none', 'auto', 'manual']);
 export type BoundingBoxScaleMethod = z.infer<typeof zBoundingBoxScaleMethod>;
 export const isBoundingBoxScaleMethod = (v: unknown): v is BoundingBoxScaleMethod =>

From 9cdb801c1c77ef2bca33c4ba5a167586031299e2 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 10 May 2024 10:42:34 +1000
Subject: [PATCH 097/116] fix(api): add cover image to update model response

Fixes a bug where the image _appears_ to be reset when editing a model.

See: https://old.reddit.com/r/StableDiffusion/comments/1cnx40d/invoke_42_control_layers_regional_guidance_w_text/l3asdej/
---
 invokeai/app/api/routers/model_manager.py | 24 +++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/invokeai/app/api/routers/model_manager.py b/invokeai/app/api/routers/model_manager.py
index 7bb0f23dc8..2571c50507 100644
--- a/invokeai/app/api/routers/model_manager.py
+++ b/invokeai/app/api/routers/model_manager.py
@@ -6,7 +6,7 @@ import pathlib
 import shutil
 import traceback
 from copy import deepcopy
-from typing import Any, Dict, List, Optional
+from typing import Any, Dict, List, Optional, Type
 
 from fastapi import Body, Path, Query, Response, UploadFile
 from fastapi.responses import FileResponse
@@ -52,6 +52,13 @@ class ModelsList(BaseModel):
     model_config = ConfigDict(use_enum_values=True)
 
 
+def add_cover_image_to_model_config(config: AnyModelConfig, dependencies: Type[ApiDependencies]) -> AnyModelConfig:
+    """Add a cover image URL to a model configuration."""
+    cover_image = dependencies.invoker.services.model_images.get_url(config.key)
+    config.cover_image = cover_image
+    return config
+
+
 ##############################################################################
 # These are example inputs and outputs that are used in places where Swagger
 # is unable to generate a correct example.
@@ -118,8 +125,7 @@ async def list_model_records(
             record_store.search_by_attr(model_type=model_type, model_name=model_name, model_format=model_format)
         )
     for model in found_models:
-        cover_image = ApiDependencies.invoker.services.model_images.get_url(model.key)
-        model.cover_image = cover_image
+        model = add_cover_image_to_model_config(model, ApiDependencies)
     return ModelsList(models=found_models)
 
 
@@ -160,12 +166,9 @@ async def get_model_record(
     key: str = Path(description="Key of the model record to fetch."),
 ) -> AnyModelConfig:
     """Get a model record"""
-    record_store = ApiDependencies.invoker.services.model_manager.store
     try:
-        config: AnyModelConfig = record_store.get_model(key)
-        cover_image = ApiDependencies.invoker.services.model_images.get_url(key)
-        config.cover_image = cover_image
-        return config
+        config = ApiDependencies.invoker.services.model_manager.store.get_model(key)
+        return add_cover_image_to_model_config(config, ApiDependencies)
     except UnknownModelException as e:
         raise HTTPException(status_code=404, detail=str(e))
 
@@ -294,14 +297,15 @@ async def update_model_record(
     installer = ApiDependencies.invoker.services.model_manager.install
     try:
         record_store.update_model(key, changes=changes)
-        model_response: AnyModelConfig = installer.sync_model_path(key)
+        config = installer.sync_model_path(key)
+        config = add_cover_image_to_model_config(config, ApiDependencies)
         logger.info(f"Updated model: {key}")
     except UnknownModelException as e:
         raise HTTPException(status_code=404, detail=str(e))
     except ValueError as e:
         logger.error(str(e))
         raise HTTPException(status_code=409, detail=str(e))
-    return model_response
+    return config
 
 
 @model_manager_router.get(

From 818d37f30469bc81fec634ce11fcd5eee6e12570 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 10 May 2024 11:17:35 +1000
Subject: [PATCH 098/116] fix(api): retain cover image when converting model to
 diffusers

We need to retrieve and re-save the image, because a conversion to diffusers creates a new model record, with a new key.

See: https://old.reddit.com/r/StableDiffusion/comments/1cnx40d/invoke_42_control_layers_regional_guidance_w_text/l3bv152/
---
 invokeai/app/api/routers/model_manager.py | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/invokeai/app/api/routers/model_manager.py b/invokeai/app/api/routers/model_manager.py
index 2571c50507..1ba3e30e07 100644
--- a/invokeai/app/api/routers/model_manager.py
+++ b/invokeai/app/api/routers/model_manager.py
@@ -16,6 +16,7 @@ from pydantic import AnyHttpUrl, BaseModel, ConfigDict, Field
 from starlette.exceptions import HTTPException
 from typing_extensions import Annotated
 
+from invokeai.app.services.model_images.model_images_common import ModelImageFileNotFoundException
 from invokeai.app.services.model_install import ModelInstallJob
 from invokeai.app.services.model_records import (
     DuplicateModelException,
@@ -652,6 +653,14 @@ async def convert_model(
         logger.error(str(e))
         raise HTTPException(status_code=409, detail=str(e))
 
+    # Update the model image if the model had one
+    try:
+        model_image = ApiDependencies.invoker.services.model_images.get(key)
+        ApiDependencies.invoker.services.model_images.save(model_image, new_key)
+        ApiDependencies.invoker.services.model_images.delete(key)
+    except ModelImageFileNotFoundException:
+        pass
+
     # delete the original safetensors file
     installer.delete(key)
 
@@ -659,7 +668,8 @@ async def convert_model(
     shutil.rmtree(cache_path)
 
     # return the config record for the new diffusers directory
-    new_config: AnyModelConfig = store.get_model(new_key)
+    new_config = store.get_model(new_key)
+    new_config = add_cover_image_to_model_config(new_config, ApiDependencies)
     return new_config
 
 

From eb166baafe761189d7fee8414056ebe912841505 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 13 May 2024 11:39:39 +1000
Subject: [PATCH 099/116] fix(ui): invoke button shows loading while queueing

Make the Invoke button show a loading spinner while queueing.

The queue mutations need to be awaited else the `isLoading` state doesn't work as expected. I feel like I should understand why, but I don't...
---
 .../listenerMiddleware/listeners/enqueueRequestedLinear.ts  | 2 +-
 .../listenerMiddleware/listeners/enqueueRequestedNodes.ts   | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts
index a3f8f34249..2d267b92b2 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts
@@ -32,7 +32,7 @@ export const addEnqueueRequestedLinear = (startAppListening: AppStartListening)
         })
       );
       try {
-        req.unwrap();
+        await req.unwrap();
         if (shouldShowProgressInViewer) {
           dispatch(isImageViewerOpenChanged(true));
         }
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedNodes.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedNodes.ts
index 8d39daaef8..12741c52f5 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedNodes.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedNodes.ts
@@ -39,7 +39,11 @@ export const addEnqueueRequestedNodes = (startAppListening: AppStartListening) =
           fixedCacheKey: 'enqueueBatch',
         })
       );
-      req.reset();
+      try {
+        await req.unwrap();
+      } finally {
+        req.reset();
+      }
     },
   });
 };

From b118a2565cbf937314930511cf58435da2f7f5a9 Mon Sep 17 00:00:00 2001
From: Riccardo Giovanetti <riccardo.giovanetti@gmail.com>
Date: Mon, 13 May 2024 22:40:25 +0200
Subject: [PATCH 100/116] translationBot(ui): update translation (Italian)

Currently translated at 96.0% (1138 of 1185 strings)

translationBot(ui): update translation (Italian)

Currently translated at 98.4% (1156 of 1174 strings)

translationBot(ui): update translation (Italian)

Currently translated at 98.3% (1155 of 1174 strings)

translationBot(ui): update translation (Italian)

Currently translated at 98.4% (1129 of 1147 strings)

Co-authored-by: Riccardo Giovanetti <riccardo.giovanetti@gmail.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/it/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/it.json | 54 +++++++++++++++++---
 1 file changed, 48 insertions(+), 6 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/it.json b/invokeai/frontend/web/public/locales/it.json
index 491b31907b..363052e86a 100644
--- a/invokeai/frontend/web/public/locales/it.json
+++ b/invokeai/frontend/web/public/locales/it.json
@@ -74,7 +74,12 @@
         "file": "File",
         "toResolve": "Da risolvere",
         "add": "Aggiungi",
-        "loglevel": "Livello di log"
+        "loglevel": "Livello di log",
+        "beta": "Beta",
+        "positivePrompt": "Prompt positivo",
+        "negativePrompt": "Prompt negativo",
+        "selected": "Selezionato",
+        "viewer": "Vista principale"
     },
     "gallery": {
         "galleryImageSize": "Dimensione dell'immagine",
@@ -534,7 +539,8 @@
         "infillMosaicMinColor": "Colore minimo",
         "infillMosaicMaxColor": "Colore massimo",
         "infillMosaicTileHeight": "Altezza piastrella",
-        "infillColorValue": "Colore di riempimento"
+        "infillColorValue": "Colore di riempimento",
+        "globalSettings": "Impostazioni globali"
     },
     "settings": {
         "models": "Modelli",
@@ -795,7 +801,7 @@
         "float": "In virgola mobile",
         "currentImageDescription": "Visualizza l'immagine corrente nell'editor dei nodi",
         "fieldTypesMustMatch": "I tipi di campo devono corrispondere",
-        "edge": "Bordo",
+        "edge": "Collegamento",
         "currentImage": "Immagine corrente",
         "integer": "Numero Intero",
         "inputMayOnlyHaveOneConnection": "L'ingresso può avere solo una connessione",
@@ -845,7 +851,9 @@
         "resetToDefaultValue": "Ripristina il valore predefinito",
         "noFieldsViewMode": "Questo flusso di lavoro non ha campi selezionati da visualizzare. Visualizza il flusso di lavoro completo per configurare i valori.",
         "edit": "Modifica",
-        "graph": "Grafico"
+        "graph": "Grafico",
+        "showEdgeLabelsHelp": "Mostra etichette sui collegamenti, che indicano i nodi collegati",
+        "showEdgeLabels": "Mostra le etichette del collegamento"
     },
     "boards": {
         "autoAddBoard": "Aggiungi automaticamente bacheca",
@@ -922,7 +930,7 @@
         "colorMapTileSize": "Dimensione piastrella",
         "mediapipeFaceDescription": "Rilevamento dei volti tramite Mediapipe",
         "hedDescription": "Rilevamento dei bordi nidificati olisticamente",
-        "setControlImageDimensions": "Imposta le dimensioni dell'immagine di controllo su L/A",
+        "setControlImageDimensions": "Copia le dimensioni in L/A (ottimizza per il modello)",
         "maxFaces": "Numero massimo di volti",
         "addT2IAdapter": "Aggiungi $t(common.t2iAdapter)",
         "addControlNet": "Aggiungi $t(common.controlNet)",
@@ -951,7 +959,13 @@
         "mediapipeFace": "Mediapipe Volto",
         "ip_adapter": "$t(controlnet.controlAdapter_one) #{{number}} ($t(common.ipAdapter))",
         "t2i_adapter": "$t(controlnet.controlAdapter_one) #{{number}} ($t(common.t2iAdapter))",
-        "selectCLIPVisionModel": "Seleziona un modello CLIP Vision"
+        "selectCLIPVisionModel": "Seleziona un modello CLIP Vision",
+        "ipAdapterMethod": "Metodo",
+        "full": "Completo",
+        "composition": "Solo la composizione",
+        "style": "Solo lo stile",
+        "beginEndStepPercentShort": "Inizio/Fine %",
+        "setControlImageDimensionsForce": "Copia le dimensioni in L/A (ignora il modello)"
     },
     "queue": {
         "queueFront": "Aggiungi all'inizio della coda",
@@ -1394,6 +1408,12 @@
             "paragraphs": [
                 "La dimensione del bordo del passaggio di coerenza."
             ]
+        },
+        "ipAdapterMethod": {
+            "heading": "Metodo",
+            "paragraphs": [
+                "Metodo con cui applicare l'adattatore IP corrente."
+            ]
         }
     },
     "sdxl": {
@@ -1522,5 +1542,27 @@
         "compatibleEmbeddings": "Incorporamenti compatibili",
         "addPromptTrigger": "Aggiungi Trigger nel prompt",
         "noMatchingTriggers": "Nessun Trigger corrispondente"
+    },
+    "regionalPrompts": {
+        "moveForward": "Sposta avanti",
+        "globalMaskOpacity": "Opacità globale maschera",
+        "autoNegative": "Auto Negativo",
+        "toggleVisibility": "Attiva/disattiva la visibilità del livello",
+        "deletePrompt": "Elimina il prompt",
+        "resetRegion": "Reimposta l'area",
+        "debugLayers": "Debug livelli",
+        "maskPreviewColor": "Colore anteprima maschera",
+        "addPositivePrompt": "Aggiungi $t(common.positivePrompt)",
+        "deleteAll": "Cancella tutto",
+        "addLayer": "Aggiungi livello",
+        "moveToFront": "Sposta in primo piano",
+        "moveToBack": "Sposta in fondo",
+        "moveBackward": "Sposta dietro",
+        "brushSize": "Dimensione del pennello",
+        "regionalControl": "Controllo Regionale (ALPHA)",
+        "enableRegionalPrompts": "Abilita $t(regionalPrompts.regionalPrompts)",
+        "rectangle": "Rettangolo",
+        "addIPAdapter": "Aggiungi $t(common.ipAdapter)",
+        "addNegativePrompt": "Aggiungi $t(common.negativePrompt)"
     }
 }

From 1de704160ead5a7032f7dc6b6896620d3db3fa50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=B0=D1=81=D1=8F=D0=BD=D0=B0=D1=82=D0=BE=D1=80?=
 <ilabulanov339@gmail.com>
Date: Mon, 13 May 2024 22:40:25 +0200
Subject: [PATCH 101/116] translationBot(ui): update translation (Russian)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Currently translated at 97.3% (1154 of 1185 strings)

translationBot(ui): update translation (Russian)

Currently translated at 100.0% (1174 of 1174 strings)

translationBot(ui): update translation (Russian)

Currently translated at 100.0% (1173 of 1173 strings)

translationBot(ui): update translation (Russian)

Currently translated at 100.0% (1166 of 1166 strings)

translationBot(ui): update translation (Russian)

Currently translated at 100.0% (1165 of 1165 strings)

translationBot(ui): update translation (Russian)

Currently translated at 100.0% (1149 of 1149 strings)

translationBot(ui): update translation (Russian)

Currently translated at 100.0% (1147 of 1147 strings)

Co-authored-by: Васянатор <ilabulanov339@gmail.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/ru/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/ru.json | 71 +++++++++++++++++---
 1 file changed, 63 insertions(+), 8 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/ru.json b/invokeai/frontend/web/public/locales/ru.json
index f254b7faa5..8c14381932 100644
--- a/invokeai/frontend/web/public/locales/ru.json
+++ b/invokeai/frontend/web/public/locales/ru.json
@@ -76,7 +76,12 @@
         "localSystem": "Локальная система",
         "aboutDesc": "Используя Invoke для работы? Проверьте это:",
         "add": "Добавить",
-        "loglevel": "Уровень логов"
+        "loglevel": "Уровень логов",
+        "beta": "Бета",
+        "selected": "Выбрано",
+        "viewer": "Просмотрщик",
+        "positivePrompt": "Позитивный запрос",
+        "negativePrompt": "Негативный запрос"
     },
     "gallery": {
         "galleryImageSize": "Размер изображений",
@@ -87,8 +92,8 @@
         "deleteImagePermanent": "Удаленные изображения невозможно восстановить.",
         "deleteImageBin": "Удаленные изображения будут отправлены в корзину вашей операционной системы.",
         "deleteImage_one": "Удалить изображение",
-        "deleteImage_few": "",
-        "deleteImage_many": "",
+        "deleteImage_few": "Удалить {{count}} изображения",
+        "deleteImage_many": "Удалить {{count}} изображений",
         "assets": "Ресурсы",
         "autoAssignBoardOnClick": "Авто-назначение доски по клику",
         "deleteSelection": "Удалить выделенное",
@@ -541,7 +546,8 @@
         "infillMosaicTileHeight": "Высота плиток",
         "infillMosaicMinColor": "Мин цвет",
         "infillMosaicMaxColor": "Макс цвет",
-        "infillColorValue": "Цвет заливки"
+        "infillColorValue": "Цвет заливки",
+        "globalSettings": "Глобальные настройки"
     },
     "settings": {
         "models": "Модели",
@@ -706,7 +712,9 @@
         "coherenceModeBoxBlur": "коробчатое размытие",
         "discardCurrent": "Отбросить текущее",
         "invertBrushSizeScrollDirection": "Инвертировать прокрутку для размера кисти",
-        "initialFitImageSize": "Подогнать размер изображения при перебросе"
+        "initialFitImageSize": "Подогнать размер изображения при перебросе",
+        "hideBoundingBox": "Скрыть ограничительную рамку",
+        "showBoundingBox": "Показать ограничительную рамку"
     },
     "accessibility": {
         "uploadImage": "Загрузить изображение",
@@ -849,7 +857,10 @@
         "editMode": "Открыть в редакторе узлов",
         "resetToDefaultValue": "Сбросить к стандартному значкнию",
         "edit": "Редактировать",
-        "noFieldsViewMode": "В этом рабочем процессе нет выбранных полей для отображения. Просмотрите полный рабочий процесс для настройки значений."
+        "noFieldsViewMode": "В этом рабочем процессе нет выбранных полей для отображения. Просмотрите полный рабочий процесс для настройки значений.",
+        "graph": "График",
+        "showEdgeLabels": "Показать метки на ребрах",
+        "showEdgeLabelsHelp": "Показать метки на ребрах, указывающие на соединенные узлы"
     },
     "controlnet": {
         "amult": "a_mult",
@@ -933,7 +944,17 @@
         "small": "Маленький",
         "body": "Тело",
         "hands": "Руки",
-        "selectCLIPVisionModel": "Выбрать модель CLIP Vision"
+        "selectCLIPVisionModel": "Выбрать модель CLIP Vision",
+        "ipAdapterMethod": "Метод",
+        "full": "Всё",
+        "mlsd": "M-LSD",
+        "h": "H",
+        "style": "Только стиль",
+        "dwOpenpose": "DW Openpose",
+        "pidi": "PIDI",
+        "composition": "Только композиция",
+        "hed": "HED",
+        "beginEndStepPercentShort": "Начало/конец %"
     },
     "boards": {
         "autoAddBoard": "Авто добавление Доски",
@@ -1312,6 +1333,12 @@
             "paragraphs": [
                 "Плавно укладывайте изображение вдоль вертикальной оси."
             ]
+        },
+        "ipAdapterMethod": {
+            "heading": "Метод",
+            "paragraphs": [
+                "Метод, с помощью которого применяется текущий IP-адаптер."
+            ]
         }
     },
     "metadata": {
@@ -1475,7 +1502,11 @@
         "projectWorkflows": "Рабочие процессы проекта",
         "defaultWorkflows": "Стандартные рабочие процессы",
         "name": "Имя",
-        "noRecentWorkflows": "Нет последних рабочих процессов"
+        "noRecentWorkflows": "Нет последних рабочих процессов",
+        "loadWorkflow": "Рабочий процесс $t(common.load)",
+        "convertGraph": "Конвертировать график",
+        "loadFromGraph": "Загрузка рабочего процесса из графика",
+        "autoLayout": "Автоматическое расположение"
     },
     "hrf": {
         "enableHrf": "Включить исправление высокого разрешения",
@@ -1528,5 +1559,29 @@
         "addPromptTrigger": "Добавить триггер запроса",
         "compatibleEmbeddings": "Совместимые встраивания",
         "noMatchingTriggers": "Нет соответствующих триггеров"
+    },
+    "regionalPrompts": {
+        "deleteAll": "Удалить все",
+        "addLayer": "Добавить слой",
+        "moveToFront": "На передний план",
+        "moveBackward": "Назад",
+        "enableRegionalPrompts": "Включить $t(regionalPrompts.regionalPrompts)",
+        "debugLayers": "Слои отладки",
+        "moveToBack": "На задний план",
+        "moveForward": "Вперёд",
+        "brushSize": "Размер кисти",
+        "regionalPrompts": "Региональные запросы (Бета)",
+        "layerOpacity": "Непрозрачность слоя",
+        "autoNegative": "Автонегатив",
+        "toggleVisibility": "Переключение видимости слоя",
+        "resetRegion": "Сбросить регион",
+        "rectangle": "Прямоугольник",
+        "globalMaskOpacity": "Прозрачность глобальной маски",
+        "deletePrompt": "Удалить запрос",
+        "maskPreviewColor": "Цвет предпросмотра маски",
+        "addPositivePrompt": "Добавить $t(common.positivePrompt)",
+        "addNegativePrompt": "Добавить $t(common.negativePrompt)",
+        "addIPAdapter": "Добавить $t(common.ipAdapter)",
+        "regionalControl": "Региональный контроль (АЛЬФА)"
     }
 }

From 63d7461510089339f84065ceda859d45ec93ced5 Mon Sep 17 00:00:00 2001
From: Alexander Eichhorn <pfannkuchensack@einfach-doof.de>
Date: Mon, 13 May 2024 22:40:26 +0200
Subject: [PATCH 102/116] translationBot(ui): update translation (German)

Currently translated at 71.9% (839 of 1166 strings)

Co-authored-by: Alexander Eichhorn <pfannkuchensack@einfach-doof.de>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/de/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/de.json | 22 ++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/de.json b/invokeai/frontend/web/public/locales/de.json
index 0a104c083b..15b99d6f3d 100644
--- a/invokeai/frontend/web/public/locales/de.json
+++ b/invokeai/frontend/web/public/locales/de.json
@@ -76,7 +76,10 @@
         "aboutHeading": "Nutzen Sie Ihre kreative Energie",
         "toResolve": "Lösen",
         "add": "Hinzufügen",
-        "loglevel": "Protokoll Stufe"
+        "loglevel": "Protokoll Stufe",
+        "selected": "Ausgewählt",
+        "viewer": "Betrachter",
+        "beta": "Beta"
     },
     "gallery": {
         "galleryImageSize": "Bildgröße",
@@ -86,7 +89,7 @@
         "noImagesInGallery": "Keine Bilder in der Galerie",
         "loading": "Lade",
         "deleteImage_one": "Lösche Bild",
-        "deleteImage_other": "",
+        "deleteImage_other": "Lösche {{count}} Bilder",
         "copy": "Kopieren",
         "download": "Runterladen",
         "setCurrentImage": "Setze aktuelle Bild",
@@ -397,7 +400,14 @@
         "cancel": "Stornieren",
         "defaultSettingsSaved": "Standardeinstellungen gespeichert",
         "addModels": "Model hinzufügen",
-        "deleteModelImage": "Lösche Model Bild"
+        "deleteModelImage": "Lösche Model Bild",
+        "hfTokenInvalidErrorMessage": "Falscher oder fehlender HuggingFace Schlüssel.",
+        "huggingFaceRepoID": "HuggingFace Repo ID",
+        "hfToken": "HuggingFace Schlüssel",
+        "hfTokenInvalid": "Falscher oder fehlender HF Schlüssel",
+        "huggingFacePlaceholder": "besitzer/model-name",
+        "hfTokenSaved": "HF Schlüssel gespeichert",
+        "hfTokenUnableToVerify": "Konnte den HF Schlüssel nicht validieren"
     },
     "parameters": {
         "images": "Bilder",
@@ -686,7 +696,11 @@
         "hands": "Hände",
         "dwOpenpose": "DW Openpose",
         "dwOpenposeDescription": "Posenschätzung mit DW Openpose",
-        "selectCLIPVisionModel": "Wähle ein CLIP Vision Model aus"
+        "selectCLIPVisionModel": "Wähle ein CLIP Vision Model aus",
+        "ipAdapterMethod": "Methode",
+        "composition": "Nur Komposition",
+        "full": "Voll",
+        "style": "Nur Style"
     },
     "queue": {
         "status": "Status",

From f7834d7d59fb5b0cd263c018268f56209f9785e4 Mon Sep 17 00:00:00 2001
From: Hosted Weblate <hosted@weblate.org>
Date: Mon, 13 May 2024 22:40:26 +0200
Subject: [PATCH 103/116] translationBot(ui): update translation files

Updated by "Cleanup translation files" hook in Weblate.

translationBot(ui): update translation files

Updated by "Cleanup translation files" hook in Weblate.

translationBot(ui): update translation files

Updated by "Cleanup translation files" hook in Weblate.

Co-authored-by: Hosted Weblate <hosted@weblate.org>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/it.json | 22 ------------------
 invokeai/frontend/web/public/locales/ru.json | 24 --------------------
 2 files changed, 46 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/it.json b/invokeai/frontend/web/public/locales/it.json
index 363052e86a..b47ad876a0 100644
--- a/invokeai/frontend/web/public/locales/it.json
+++ b/invokeai/frontend/web/public/locales/it.json
@@ -1542,27 +1542,5 @@
         "compatibleEmbeddings": "Incorporamenti compatibili",
         "addPromptTrigger": "Aggiungi Trigger nel prompt",
         "noMatchingTriggers": "Nessun Trigger corrispondente"
-    },
-    "regionalPrompts": {
-        "moveForward": "Sposta avanti",
-        "globalMaskOpacity": "Opacità globale maschera",
-        "autoNegative": "Auto Negativo",
-        "toggleVisibility": "Attiva/disattiva la visibilità del livello",
-        "deletePrompt": "Elimina il prompt",
-        "resetRegion": "Reimposta l'area",
-        "debugLayers": "Debug livelli",
-        "maskPreviewColor": "Colore anteprima maschera",
-        "addPositivePrompt": "Aggiungi $t(common.positivePrompt)",
-        "deleteAll": "Cancella tutto",
-        "addLayer": "Aggiungi livello",
-        "moveToFront": "Sposta in primo piano",
-        "moveToBack": "Sposta in fondo",
-        "moveBackward": "Sposta dietro",
-        "brushSize": "Dimensione del pennello",
-        "regionalControl": "Controllo Regionale (ALPHA)",
-        "enableRegionalPrompts": "Abilita $t(regionalPrompts.regionalPrompts)",
-        "rectangle": "Rettangolo",
-        "addIPAdapter": "Aggiungi $t(common.ipAdapter)",
-        "addNegativePrompt": "Aggiungi $t(common.negativePrompt)"
     }
 }
diff --git a/invokeai/frontend/web/public/locales/ru.json b/invokeai/frontend/web/public/locales/ru.json
index 8c14381932..c886266e27 100644
--- a/invokeai/frontend/web/public/locales/ru.json
+++ b/invokeai/frontend/web/public/locales/ru.json
@@ -1559,29 +1559,5 @@
         "addPromptTrigger": "Добавить триггер запроса",
         "compatibleEmbeddings": "Совместимые встраивания",
         "noMatchingTriggers": "Нет соответствующих триггеров"
-    },
-    "regionalPrompts": {
-        "deleteAll": "Удалить все",
-        "addLayer": "Добавить слой",
-        "moveToFront": "На передний план",
-        "moveBackward": "Назад",
-        "enableRegionalPrompts": "Включить $t(regionalPrompts.regionalPrompts)",
-        "debugLayers": "Слои отладки",
-        "moveToBack": "На задний план",
-        "moveForward": "Вперёд",
-        "brushSize": "Размер кисти",
-        "regionalPrompts": "Региональные запросы (Бета)",
-        "layerOpacity": "Непрозрачность слоя",
-        "autoNegative": "Автонегатив",
-        "toggleVisibility": "Переключение видимости слоя",
-        "resetRegion": "Сбросить регион",
-        "rectangle": "Прямоугольник",
-        "globalMaskOpacity": "Прозрачность глобальной маски",
-        "deletePrompt": "Удалить запрос",
-        "maskPreviewColor": "Цвет предпросмотра маски",
-        "addPositivePrompt": "Добавить $t(common.positivePrompt)",
-        "addNegativePrompt": "Добавить $t(common.negativePrompt)",
-        "addIPAdapter": "Добавить $t(common.ipAdapter)",
-        "regionalControl": "Региональный контроль (АЛЬФА)"
     }
 }

From fa832a8ac6820a6431ebfe7a1059b5f07c44735b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=B0=D1=81=D1=8F=D0=BD=D0=B0=D1=82=D0=BE=D1=80?=
 <ilabulanov339@gmail.com>
Date: Mon, 13 May 2024 22:40:26 +0200
Subject: [PATCH 104/116] translationBot(ui): update translation (Russian)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Currently translated at 100.0% (1209 of 1209 strings)

translationBot(ui): update translation (Russian)

Currently translated at 100.0% (1209 of 1209 strings)

translationBot(ui): update translation (Russian)

Currently translated at 100.0% (1188 of 1188 strings)

translationBot(ui): update translation (Russian)

Currently translated at 100.0% (1185 of 1185 strings)

Co-authored-by: Васянатор <ilabulanov339@gmail.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/ru/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/ru.json | 76 ++++++++++++++++++--
 1 file changed, 70 insertions(+), 6 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/ru.json b/invokeai/frontend/web/public/locales/ru.json
index c886266e27..c764fdfec0 100644
--- a/invokeai/frontend/web/public/locales/ru.json
+++ b/invokeai/frontend/web/public/locales/ru.json
@@ -81,7 +81,10 @@
         "selected": "Выбрано",
         "viewer": "Просмотрщик",
         "positivePrompt": "Позитивный запрос",
-        "negativePrompt": "Негативный запрос"
+        "negativePrompt": "Негативный запрос",
+        "editor": "Редактор",
+        "goTo": "Перейти к",
+        "tab": "Вкладка"
     },
     "gallery": {
         "galleryImageSize": "Размер изображений",
@@ -118,7 +121,8 @@
         "bulkDownloadRequested": "Подготовка к скачиванию",
         "bulkDownloadRequestedDesc": "Ваш запрос на скачивание готовится. Это может занять несколько минут.",
         "bulkDownloadRequestFailed": "Возникла проблема при подготовке скачивания",
-        "alwaysShowImageSizeBadge": "Всегда показывать значок размера изображения"
+        "alwaysShowImageSizeBadge": "Всегда показывать значок размера изображения",
+        "switchTo": "Переключится на {{ tab }} (Z)"
     },
     "hotkeys": {
         "keyboardShortcuts": "Горячие клавиши",
@@ -341,6 +345,14 @@
         "remixImage": {
             "desc": "Используйте все параметры, кроме сида из текущего изображения",
             "title": "Ремикс изображения"
+        },
+        "backToEditor": {
+            "title": "Вернуться к редактору",
+            "desc": "Закрывает просмотрщик изображений и показывает окно редактора (только на вкладке \"Текст в изображение\")"
+        },
+        "openImageViewer": {
+            "title": "Открыть просмотрщик изображений",
+            "desc": "Открывает просмотрщик изображений (только на вкладке \"Текст в изображение\")"
         }
     },
     "modelManager": {
@@ -517,7 +529,8 @@
             "missingNodeTemplate": "Отсутствует шаблон узла",
             "missingFieldTemplate": "Отсутствует шаблон поля",
             "addingImagesTo": "Добавление изображений в",
-            "invoke": "Создать"
+            "invoke": "Создать",
+            "imageNotProcessedForControlAdapter": "Изображение адаптера контроля №{{number}} не обрабатывается"
         },
         "isAllowedToUpscale": {
             "useX2Model": "Изображение слишком велико для увеличения с помощью модели x4. Используйте модель x2",
@@ -928,8 +941,8 @@
         "lineartAnime": "Контурный рисунок в стиле аниме",
         "mediapipeFaceDescription": "Обнаружение лиц с помощью Mediapipe",
         "hedDescription": "Целостное обнаружение границ",
-        "setControlImageDimensions": "Установите размеры контрольного изображения на Ш/В",
-        "scribble": "каракули",
+        "setControlImageDimensions": "Скопируйте размер в Ш/В (оптимизируйте для модели)",
+        "scribble": "Штрихи",
         "maxFaces": "Макс Лица",
         "mlsdDescription": "Минималистичный детектор отрезков линии",
         "resizeSimple": "Изменить размер (простой)",
@@ -954,7 +967,8 @@
         "pidi": "PIDI",
         "composition": "Только композиция",
         "hed": "HED",
-        "beginEndStepPercentShort": "Начало/конец %"
+        "beginEndStepPercentShort": "Начало/конец %",
+        "setControlImageDimensionsForce": "Скопируйте размер в Ш/В (игнорируйте модель)"
     },
     "boards": {
         "autoAddBoard": "Авто добавление Доски",
@@ -1559,5 +1573,55 @@
         "addPromptTrigger": "Добавить триггер запроса",
         "compatibleEmbeddings": "Совместимые встраивания",
         "noMatchingTriggers": "Нет соответствующих триггеров"
+    },
+    "controlLayers": {
+        "moveToBack": "На задний план",
+        "moveForward": "Переместить вперёд",
+        "moveBackward": "Переместить назад",
+        "brushSize": "Размер кисти",
+        "controlLayers": "Слои управления",
+        "globalMaskOpacity": "Глобальная непрозрачность маски",
+        "autoNegative": "Авто негатив",
+        "deletePrompt": "Удалить запрос",
+        "resetRegion": "Сбросить регион",
+        "debugLayers": "Слои отладки",
+        "rectangle": "Прямоугольник",
+        "maskPreviewColor": "Цвет предпросмотра маски",
+        "addNegativePrompt": "Добавить $t(common.negativePrompt)",
+        "regionalGuidance": "Региональная точность",
+        "controlNetLayer": "$t(common.controlNet) $t(unifiedCanvas.layer)",
+        "ipAdapterLayer": "$t(common.ipAdapter) $t(unifiedCanvas.layer)",
+        "opacity": "Непрозрачность",
+        "globalControlAdapter": "Глобальный $t(controlnet.controlAdapter_one)",
+        "globalControlAdapterLayer": "Глобальный $t(controlnet.controlAdapter_one) $t(unifiedCanvas.layer)",
+        "globalIPAdapter": "Глобальный $t(common.ipAdapter)",
+        "globalIPAdapterLayer": "Глобальный $t(common.ipAdapter) $t(unifiedCanvas.layer)",
+        "opacityFilter": "Фильтр непрозрачности",
+        "deleteAll": "Удалить всё",
+        "addLayer": "Добавить слой",
+        "moveToFront": "На передний план",
+        "toggleVisibility": "Переключить видимость слоя",
+        "addPositivePrompt": "Добавить $t(common.positivePrompt)",
+        "addIPAdapter": "Добавить $t(common.ipAdapter)",
+        "regionalGuidanceLayer": "$t(controlLayers.regionalGuidance) $t(unifiedCanvas.layer)",
+        "resetProcessor": "Сброс процессора по умолчанию",
+        "clearProcessor": "Чистый процессор",
+        "globalInitialImage": "Глобальное исходное изображение",
+        "globalInitialImageLayer": "$t(controlLayers.globalInitialImage) $t(unifiedCanvas.layer)",
+        "noLayersAdded": "Без слоев"
+    },
+    "ui": {
+        "tabs": {
+            "generation": "Генерация",
+            "canvas": "Холст",
+            "workflowsTab": "$t(ui.tabs.workflows) $t(common.tab)",
+            "models": "Модели",
+            "generationTab": "$t(ui.tabs.generation) $t(common.tab)",
+            "workflows": "Рабочие процессы",
+            "canvasTab": "$t(ui.tabs.canvas) $t(common.tab)",
+            "queueTab": "$t(ui.tabs.queue) $t(common.tab)",
+            "modelsTab": "$t(ui.tabs.models) $t(common.tab)",
+            "queue": "Очередь"
+        }
     }
 }

From 60e77e4ed6ba152266720ddc394d7ba172e17cda Mon Sep 17 00:00:00 2001
From: flower_elf <miaoju2005@gmail.com>
Date: Mon, 13 May 2024 22:40:26 +0200
Subject: [PATCH 105/116] translationBot(ui): update translation (Chinese
 (Simplified))

Currently translated at 77.8% (922 of 1185 strings)

Co-authored-by: flower_elf <miaoju2005@gmail.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/zh_Hans/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/zh_CN.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/public/locales/zh_CN.json b/invokeai/frontend/web/public/locales/zh_CN.json
index 8aff73d2a1..3b0cd4f81b 100644
--- a/invokeai/frontend/web/public/locales/zh_CN.json
+++ b/invokeai/frontend/web/public/locales/zh_CN.json
@@ -66,7 +66,7 @@
         "saveAs": "保存为",
         "ai": "ai",
         "or": "或",
-        "aboutDesc": "使用 Invoke 工作？查看：",
+        "aboutDesc": "使用 Invoke 工作？来看看：",
         "add": "添加",
         "loglevel": "日志级别",
         "copy": "复制",

From 15c9a3a4b6cc62f4570f542118250da182aa39cb Mon Sep 17 00:00:00 2001
From: Riccardo Giovanetti <riccardo.giovanetti@gmail.com>
Date: Mon, 13 May 2024 22:40:26 +0200
Subject: [PATCH 106/116] translationBot(ui): update translation (Italian)

Currently translated at 98.3% (1189 of 1209 strings)

translationBot(ui): update translation (Italian)

Currently translated at 98.3% (1189 of 1209 strings)

Co-authored-by: Riccardo Giovanetti <riccardo.giovanetti@gmail.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/it/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/it.json | 65 +++++++++++++++++++-
 1 file changed, 62 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/it.json b/invokeai/frontend/web/public/locales/it.json
index b47ad876a0..9cf0250a82 100644
--- a/invokeai/frontend/web/public/locales/it.json
+++ b/invokeai/frontend/web/public/locales/it.json
@@ -79,7 +79,10 @@
         "positivePrompt": "Prompt positivo",
         "negativePrompt": "Prompt negativo",
         "selected": "Selezionato",
-        "viewer": "Vista principale"
+        "viewer": "Visualizzatore",
+        "goTo": "Vai a",
+        "editor": "Editor",
+        "tab": "Scheda"
     },
     "gallery": {
         "galleryImageSize": "Dimensione dell'immagine",
@@ -116,7 +119,8 @@
         "bulkDownloadRequestedDesc": "La tua richiesta di download è in preparazione. L'operazione potrebbe richiedere alcuni istanti.",
         "bulkDownloadRequestFailed": "Problema durante la preparazione del download",
         "bulkDownloadFailed": "Scaricamento fallito",
-        "alwaysShowImageSizeBadge": "Mostra sempre le dimensioni dell'immagine"
+        "alwaysShowImageSizeBadge": "Mostra sempre le dimensioni dell'immagine",
+        "switchTo": "Passa a {{ tab }} (Z)"
     },
     "hotkeys": {
         "keyboardShortcuts": "Tasti di scelta rapida",
@@ -339,6 +343,10 @@
         "remixImage": {
             "desc": "Utilizza tutti i parametri tranne il seme dell'immagine corrente",
             "title": "Remixa l'immagine"
+        },
+        "backToEditor": {
+            "desc": "Chiude il Visualizzatore immagini e mostra la vista Editor corrente",
+            "title": "Torna all'editor corrente"
         }
     },
     "modelManager": {
@@ -513,7 +521,8 @@
             "incompatibleBaseModelForControlAdapter": "Il modello dell'adattatore di controllo #{{number}} non è compatibile con il modello principale.",
             "missingNodeTemplate": "Modello di nodo mancante",
             "missingInputForField": "{{nodeLabel}} -> {{fieldLabel}} ingresso mancante",
-            "missingFieldTemplate": "Modello di campo mancante"
+            "missingFieldTemplate": "Modello di campo mancante",
+            "imageNotProcessedForControlAdapter": "L'immagine dell'adattatore di controllo #{{number}} non è stata elaborata"
         },
         "useCpuNoise": "Usa la CPU per generare rumore",
         "iterations": "Iterazioni",
@@ -1542,5 +1551,55 @@
         "compatibleEmbeddings": "Incorporamenti compatibili",
         "addPromptTrigger": "Aggiungi Trigger nel prompt",
         "noMatchingTriggers": "Nessun Trigger corrispondente"
+    },
+    "controlLayers": {
+        "opacityFilter": "Filtro opacità",
+        "deleteAll": "Cancella tutto",
+        "addLayer": "Aggiungi Livello",
+        "moveToFront": "Sposta in primo piano",
+        "moveToBack": "Sposta in fondo",
+        "moveForward": "Sposta in avanti",
+        "moveBackward": "Sposta indietro",
+        "brushSize": "Dimensioni del pennello",
+        "globalMaskOpacity": "Opacità globale della maschera",
+        "autoNegative": "Auto Negativo",
+        "toggleVisibility": "Attiva/disattiva la visibilità dei livelli",
+        "deletePrompt": "Cancella il prompt",
+        "debugLayers": "Debug dei Livelli",
+        "rectangle": "Rettangolo",
+        "maskPreviewColor": "Colore anteprima maschera",
+        "addPositivePrompt": "Aggiungi $t(common.positivePrompt)",
+        "addNegativePrompt": "Aggiungi $t(common.negativePrompt)",
+        "addIPAdapter": "Aggiungi $t(common.ipAdapter)",
+        "regionalGuidance": "Guida regionale",
+        "regionalGuidanceLayer": "$t(controlLayers.regionalGuidance) $t(unifiedCanvas.layer)",
+        "controlNetLayer": "$t(common.controlNet) $t(unifiedCanvas.layer)",
+        "ipAdapterLayer": "$t(common.ipAdapter) $t(unifiedCanvas.layer)",
+        "opacity": "Opacità",
+        "globalControlAdapter": "$t(controlnet.controlAdapter_one) Globale",
+        "globalControlAdapterLayer": "$t(controlnet.controlAdapter_one) $t(unifiedCanvas.layer) Globale",
+        "globalIPAdapter": "$t(common.ipAdapter) Globale",
+        "globalIPAdapterLayer": "$t(common.ipAdapter) $t(unifiedCanvas.layer) Globale",
+        "globalInitialImage": "Immagine iniziale globale",
+        "globalInitialImageLayer": "$t(controlLayers.globalInitialImage) $t(unifiedCanvas.layer)",
+        "clearProcessor": "Cancella processore",
+        "resetProcessor": "Ripristina il processore alle impostazioni predefinite",
+        "noLayersAdded": "Nessun livello aggiunto",
+        "resetRegion": "Reimposta la regione",
+        "controlLayers": "Livelli di controllo"
+    },
+    "ui": {
+        "tabs": {
+            "generation": "Generazione",
+            "generationTab": "$t(ui.tabs.generation) $t(common.tab)",
+            "canvas": "Tela",
+            "canvasTab": "$t(ui.tabs.canvas) $t(common.tab)",
+            "workflows": "Flussi di lavoro",
+            "workflowsTab": "$t(ui.tabs.workflows) $t(common.tab)",
+            "models": "Modelli",
+            "modelsTab": "$t(ui.tabs.models) $t(common.tab)",
+            "queue": "Coda",
+            "queueTab": "$t(ui.tabs.queue) $t(common.tab)"
+        }
     }
 }

From 3b495659b0aa37c3baa954775eb4c25779eba1d6 Mon Sep 17 00:00:00 2001
From: Hosted Weblate <hosted@weblate.org>
Date: Mon, 13 May 2024 22:40:27 +0200
Subject: [PATCH 107/116] translationBot(ui): update translation files

Updated by "Cleanup translation files" hook in Weblate.

Co-authored-by: Hosted Weblate <hosted@weblate.org>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/it.json | 4 ----
 invokeai/frontend/web/public/locales/ru.json | 8 --------
 2 files changed, 12 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/it.json b/invokeai/frontend/web/public/locales/it.json
index 9cf0250a82..76c7047b44 100644
--- a/invokeai/frontend/web/public/locales/it.json
+++ b/invokeai/frontend/web/public/locales/it.json
@@ -343,10 +343,6 @@
         "remixImage": {
             "desc": "Utilizza tutti i parametri tranne il seme dell'immagine corrente",
             "title": "Remixa l'immagine"
-        },
-        "backToEditor": {
-            "desc": "Chiude il Visualizzatore immagini e mostra la vista Editor corrente",
-            "title": "Torna all'editor corrente"
         }
     },
     "modelManager": {
diff --git a/invokeai/frontend/web/public/locales/ru.json b/invokeai/frontend/web/public/locales/ru.json
index c764fdfec0..7cc876391a 100644
--- a/invokeai/frontend/web/public/locales/ru.json
+++ b/invokeai/frontend/web/public/locales/ru.json
@@ -345,14 +345,6 @@
         "remixImage": {
             "desc": "Используйте все параметры, кроме сида из текущего изображения",
             "title": "Ремикс изображения"
-        },
-        "backToEditor": {
-            "title": "Вернуться к редактору",
-            "desc": "Закрывает просмотрщик изображений и показывает окно редактора (только на вкладке \"Текст в изображение\")"
-        },
-        "openImageViewer": {
-            "title": "Открыть просмотрщик изображений",
-            "desc": "Открывает просмотрщик изображений (только на вкладке \"Текст в изображение\")"
         }
     },
     "modelManager": {

From 11d88dae7faa6eccb82f0d7519e6deed86612ad0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=B0=D1=81=D1=8F=D0=BD=D0=B0=D1=82=D0=BE=D1=80?=
 <ilabulanov339@gmail.com>
Date: Mon, 13 May 2024 22:40:27 +0200
Subject: [PATCH 108/116] translationBot(ui): update translation (Russian)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Currently translated at 100.0% (1210 of 1210 strings)

Co-authored-by: Васянатор <ilabulanov339@gmail.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/ru/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/ru.json | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/ru.json b/invokeai/frontend/web/public/locales/ru.json
index 7cc876391a..a7f05e2a7a 100644
--- a/invokeai/frontend/web/public/locales/ru.json
+++ b/invokeai/frontend/web/public/locales/ru.json
@@ -84,7 +84,8 @@
         "negativePrompt": "Негативный запрос",
         "editor": "Редактор",
         "goTo": "Перейти к",
-        "tab": "Вкладка"
+        "tab": "Вкладка",
+        "close": "Закрыть"
     },
     "gallery": {
         "galleryImageSize": "Размер изображений",
@@ -122,7 +123,9 @@
         "bulkDownloadRequestedDesc": "Ваш запрос на скачивание готовится. Это может занять несколько минут.",
         "bulkDownloadRequestFailed": "Возникла проблема при подготовке скачивания",
         "alwaysShowImageSizeBadge": "Всегда показывать значок размера изображения",
-        "switchTo": "Переключится на {{ tab }} (Z)"
+        "switchTo": "Переключится на {{ tab }} (Z)",
+        "openFloatingViewer": "Открыть плавающий просмотрщик",
+        "closeFloatingViewer": "Закрыть плавающий просмотрщик"
     },
     "hotkeys": {
         "keyboardShortcuts": "Горячие клавиши",
@@ -345,6 +348,10 @@
         "remixImage": {
             "desc": "Используйте все параметры, кроме сида из текущего изображения",
             "title": "Ремикс изображения"
+        },
+        "toggleViewer": {
+            "title": "Переключить просмотр изображений",
+            "desc": "Переключение между средством просмотра изображений и рабочей областью для текущей вкладки."
         }
     },
     "modelManager": {

From c5fd08125dc85af268082f17f4c7576f8b097991 Mon Sep 17 00:00:00 2001
From: Riccardo Giovanetti <riccardo.giovanetti@gmail.com>
Date: Mon, 13 May 2024 22:40:27 +0200
Subject: [PATCH 109/116] translationBot(ui): update translation (Italian)

Currently translated at 98.5% (1192 of 1210 strings)

Co-authored-by: Riccardo Giovanetti <riccardo.giovanetti@gmail.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/it/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/it.json | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/it.json b/invokeai/frontend/web/public/locales/it.json
index 76c7047b44..15a69e7549 100644
--- a/invokeai/frontend/web/public/locales/it.json
+++ b/invokeai/frontend/web/public/locales/it.json
@@ -82,7 +82,8 @@
         "viewer": "Visualizzatore",
         "goTo": "Vai a",
         "editor": "Editor",
-        "tab": "Scheda"
+        "tab": "Scheda",
+        "close": "Chiudi"
     },
     "gallery": {
         "galleryImageSize": "Dimensione dell'immagine",
@@ -120,7 +121,9 @@
         "bulkDownloadRequestFailed": "Problema durante la preparazione del download",
         "bulkDownloadFailed": "Scaricamento fallito",
         "alwaysShowImageSizeBadge": "Mostra sempre le dimensioni dell'immagine",
-        "switchTo": "Passa a {{ tab }} (Z)"
+        "switchTo": "Passa a {{ tab }} (Z)",
+        "openFloatingViewer": "Apri il visualizzatore mobile",
+        "closeFloatingViewer": "Chiudi il visualizzatore mobile"
     },
     "hotkeys": {
         "keyboardShortcuts": "Tasti di scelta rapida",
@@ -343,6 +346,10 @@
         "remixImage": {
             "desc": "Utilizza tutti i parametri tranne il seme dell'immagine corrente",
             "title": "Remixa l'immagine"
+        },
+        "toggleViewer": {
+            "title": "Attiva/disattiva il visualizzatore di immagini",
+            "desc": "Passa dal Visualizzatore immagini all'area di lavoro per la scheda corrente."
         }
     },
     "modelManager": {

From 92658413846187a9754838dbe24b3ed50158e961 Mon Sep 17 00:00:00 2001
From: Hosted Weblate <hosted@weblate.org>
Date: Mon, 13 May 2024 22:40:27 +0200
Subject: [PATCH 110/116] translationBot(ui): update translation files

Updated by "Cleanup translation files" hook in Weblate.

translationBot(ui): update translation files

Updated by "Cleanup translation files" hook in Weblate.

Co-authored-by: Hosted Weblate <hosted@weblate.org>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/de.json    |  2 --
 invokeai/frontend/web/public/locales/it.json    | 15 ++-------------
 invokeai/frontend/web/public/locales/ja.json    |  1 -
 invokeai/frontend/web/public/locales/ko.json    |  1 -
 invokeai/frontend/web/public/locales/nl.json    |  3 ---
 invokeai/frontend/web/public/locales/ru.json    | 15 ++-------------
 invokeai/frontend/web/public/locales/zh_CN.json |  2 --
 7 files changed, 4 insertions(+), 35 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/de.json b/invokeai/frontend/web/public/locales/de.json
index 15b99d6f3d..1db283aabd 100644
--- a/invokeai/frontend/web/public/locales/de.json
+++ b/invokeai/frontend/web/public/locales/de.json
@@ -78,7 +78,6 @@
         "add": "Hinzufügen",
         "loglevel": "Protokoll Stufe",
         "selected": "Ausgewählt",
-        "viewer": "Betrachter",
         "beta": "Beta"
     },
     "gallery": {
@@ -731,7 +730,6 @@
         "resume": "Wieder aufnehmen",
         "item": "Auftrag",
         "notReady": "Warteschlange noch nicht bereit",
-        "queueCountPrediction": "{{promptsCount}} Prompts × {{iterations}} Iterationen -> {{count}} Generationen",
         "clearQueueAlertDialog": "\"Die Warteschlange leeren\" stoppt den aktuellen Prozess und leert die Warteschlange komplett.",
         "completedIn": "Fertig in",
         "cancelBatchSucceeded": "Stapel abgebrochen",
diff --git a/invokeai/frontend/web/public/locales/it.json b/invokeai/frontend/web/public/locales/it.json
index 15a69e7549..d6fd6c7d04 100644
--- a/invokeai/frontend/web/public/locales/it.json
+++ b/invokeai/frontend/web/public/locales/it.json
@@ -79,11 +79,9 @@
         "positivePrompt": "Prompt positivo",
         "negativePrompt": "Prompt negativo",
         "selected": "Selezionato",
-        "viewer": "Visualizzatore",
         "goTo": "Vai a",
         "editor": "Editor",
-        "tab": "Scheda",
-        "close": "Chiudi"
+        "tab": "Scheda"
     },
     "gallery": {
         "galleryImageSize": "Dimensione dell'immagine",
@@ -120,10 +118,7 @@
         "bulkDownloadRequestedDesc": "La tua richiesta di download è in preparazione. L'operazione potrebbe richiedere alcuni istanti.",
         "bulkDownloadRequestFailed": "Problema durante la preparazione del download",
         "bulkDownloadFailed": "Scaricamento fallito",
-        "alwaysShowImageSizeBadge": "Mostra sempre le dimensioni dell'immagine",
-        "switchTo": "Passa a {{ tab }} (Z)",
-        "openFloatingViewer": "Apri il visualizzatore mobile",
-        "closeFloatingViewer": "Chiudi il visualizzatore mobile"
+        "alwaysShowImageSizeBadge": "Mostra sempre le dimensioni dell'immagine"
     },
     "hotkeys": {
         "keyboardShortcuts": "Tasti di scelta rapida",
@@ -529,9 +524,6 @@
         },
         "useCpuNoise": "Usa la CPU per generare rumore",
         "iterations": "Iterazioni",
-        "iterationsWithCount_one": "{{count}} Iterazione",
-        "iterationsWithCount_many": "{{count}} Iterazioni",
-        "iterationsWithCount_other": "{{count}} Iterazioni",
         "isAllowedToUpscale": {
             "useX2Model": "L'immagine è troppo grande per l'ampliamento con il modello x4, utilizza il modello x2",
             "tooLarge": "L'immagine è troppo grande per l'ampliamento, seleziona un'immagine più piccola"
@@ -982,7 +974,6 @@
     "queue": {
         "queueFront": "Aggiungi all'inizio della coda",
         "queueBack": "Aggiungi alla coda",
-        "queueCountPrediction": "{{promptsCount}} prompt × {{iterations}} iterazioni -> {{count}} generazioni",
         "queue": "Coda",
         "status": "Stato",
         "pruneSucceeded": "Rimossi {{item_count}} elementi completati dalla coda",
@@ -1576,8 +1567,6 @@
         "addIPAdapter": "Aggiungi $t(common.ipAdapter)",
         "regionalGuidance": "Guida regionale",
         "regionalGuidanceLayer": "$t(controlLayers.regionalGuidance) $t(unifiedCanvas.layer)",
-        "controlNetLayer": "$t(common.controlNet) $t(unifiedCanvas.layer)",
-        "ipAdapterLayer": "$t(common.ipAdapter) $t(unifiedCanvas.layer)",
         "opacity": "Opacità",
         "globalControlAdapter": "$t(controlnet.controlAdapter_one) Globale",
         "globalControlAdapterLayer": "$t(controlnet.controlAdapter_one) $t(unifiedCanvas.layer) Globale",
diff --git a/invokeai/frontend/web/public/locales/ja.json b/invokeai/frontend/web/public/locales/ja.json
index 264593153a..e953944c44 100644
--- a/invokeai/frontend/web/public/locales/ja.json
+++ b/invokeai/frontend/web/public/locales/ja.json
@@ -570,7 +570,6 @@
         "pauseSucceeded": "処理が一時停止されました",
         "queueFront": "キューの先頭へ追加",
         "queueBack": "キューに追加",
-        "queueCountPrediction": "{{promptsCount}} プロンプト × {{iterations}} イテレーション -> {{count}} 枚生成",
         "pause": "一時停止",
         "queue": "キュー",
         "pauseTooltip": "処理を一時停止",
diff --git a/invokeai/frontend/web/public/locales/ko.json b/invokeai/frontend/web/public/locales/ko.json
index 1c02d86105..db9cd0ca67 100644
--- a/invokeai/frontend/web/public/locales/ko.json
+++ b/invokeai/frontend/web/public/locales/ko.json
@@ -505,7 +505,6 @@
         "completed": "완성된",
         "queueBack": "Queue에 추가",
         "cancelFailed": "항목 취소 중 발생한 문제",
-        "queueCountPrediction": "Queue에 {{predicted}} 추가",
         "batchQueued": "Batch Queued",
         "pauseFailed": "프로세서 중지 중 발생한 문제",
         "clearFailed": "Queue 제거 중 발생한 문제",
diff --git a/invokeai/frontend/web/public/locales/nl.json b/invokeai/frontend/web/public/locales/nl.json
index 29ceb3227b..76377bd215 100644
--- a/invokeai/frontend/web/public/locales/nl.json
+++ b/invokeai/frontend/web/public/locales/nl.json
@@ -383,8 +383,6 @@
         "useCpuNoise": "Gebruik CPU-ruis",
         "imageActions": "Afbeeldingshandeling",
         "iterations": "Iteraties",
-        "iterationsWithCount_one": "{{count}} iteratie",
-        "iterationsWithCount_other": "{{count}} iteraties",
         "coherenceMode": "Modus"
     },
     "settings": {
@@ -940,7 +938,6 @@
         "completed": "Voltooid",
         "queueBack": "Voeg toe aan wachtrij",
         "cancelFailed": "Fout bij annuleren onderdeel",
-        "queueCountPrediction": "Voeg {{predicted}} toe aan wachtrij",
         "batchQueued": "Reeks in wachtrij geplaatst",
         "pauseFailed": "Fout bij onderbreken verwerker",
         "clearFailed": "Fout bij wissen van wachtrij",
diff --git a/invokeai/frontend/web/public/locales/ru.json b/invokeai/frontend/web/public/locales/ru.json
index a7f05e2a7a..44864e6624 100644
--- a/invokeai/frontend/web/public/locales/ru.json
+++ b/invokeai/frontend/web/public/locales/ru.json
@@ -79,13 +79,11 @@
         "loglevel": "Уровень логов",
         "beta": "Бета",
         "selected": "Выбрано",
-        "viewer": "Просмотрщик",
         "positivePrompt": "Позитивный запрос",
         "negativePrompt": "Негативный запрос",
         "editor": "Редактор",
         "goTo": "Перейти к",
-        "tab": "Вкладка",
-        "close": "Закрыть"
+        "tab": "Вкладка"
     },
     "gallery": {
         "galleryImageSize": "Размер изображений",
@@ -122,10 +120,7 @@
         "bulkDownloadRequested": "Подготовка к скачиванию",
         "bulkDownloadRequestedDesc": "Ваш запрос на скачивание готовится. Это может занять несколько минут.",
         "bulkDownloadRequestFailed": "Возникла проблема при подготовке скачивания",
-        "alwaysShowImageSizeBadge": "Всегда показывать значок размера изображения",
-        "switchTo": "Переключится на {{ tab }} (Z)",
-        "openFloatingViewer": "Открыть плавающий просмотрщик",
-        "closeFloatingViewer": "Закрыть плавающий просмотрщик"
+        "alwaysShowImageSizeBadge": "Всегда показывать значок размера изображения"
     },
     "hotkeys": {
         "keyboardShortcuts": "Горячие клавиши",
@@ -540,9 +535,6 @@
         "useCpuNoise": "Использовать шум CPU",
         "imageActions": "Действия с изображениями",
         "iterations": "Кол-во",
-        "iterationsWithCount_one": "{{count}} Интеграция",
-        "iterationsWithCount_few": "{{count}} Итерации",
-        "iterationsWithCount_many": "{{count}} Итераций",
         "useSize": "Использовать размер",
         "coherenceMode": "Режим",
         "aspect": "Соотношение",
@@ -1399,7 +1391,6 @@
         "completed": "Выполнено",
         "queueBack": "Добавить в очередь",
         "cancelFailed": "Проблема с отменой элемента",
-        "queueCountPrediction": "{{promptsCount}} запросов × {{iterations}} изображений -> {{count}} генераций",
         "batchQueued": "Пакетная очередь",
         "pauseFailed": "Проблема с приостановкой рендеринга",
         "clearFailed": "Проблема с очисткой очереди",
@@ -1588,8 +1579,6 @@
         "maskPreviewColor": "Цвет предпросмотра маски",
         "addNegativePrompt": "Добавить $t(common.negativePrompt)",
         "regionalGuidance": "Региональная точность",
-        "controlNetLayer": "$t(common.controlNet) $t(unifiedCanvas.layer)",
-        "ipAdapterLayer": "$t(common.ipAdapter) $t(unifiedCanvas.layer)",
         "opacity": "Непрозрачность",
         "globalControlAdapter": "Глобальный $t(controlnet.controlAdapter_one)",
         "globalControlAdapterLayer": "Глобальный $t(controlnet.controlAdapter_one) $t(unifiedCanvas.layer)",
diff --git a/invokeai/frontend/web/public/locales/zh_CN.json b/invokeai/frontend/web/public/locales/zh_CN.json
index 3b0cd4f81b..45bab5c6da 100644
--- a/invokeai/frontend/web/public/locales/zh_CN.json
+++ b/invokeai/frontend/web/public/locales/zh_CN.json
@@ -445,7 +445,6 @@
             "useX2Model": "图像太大，无法使用 x4 模型，使用 x2 模型作为替代",
             "tooLarge": "图像太大无法进行放大，请选择更小的图像"
         },
-        "iterationsWithCount_other": "{{count}} 次迭代生成",
         "cfgRescaleMultiplier": "CFG 重缩放倍数",
         "useSize": "使用尺寸",
         "setToOptimalSize": "优化模型大小",
@@ -853,7 +852,6 @@
         "pruneSucceeded": "从队列修剪 {{item_count}} 个已完成的项目",
         "notReady": "无法排队",
         "batchFailedToQueue": "批次加入队列失败",
-        "queueCountPrediction": "{{promptsCount}} 提示词 × {{iterations}} 迭代次数 -> {{count}} 次生成",
         "batchQueued": "加入队列的批次",
         "front": "前",
         "pruneTooltip": "修剪 {{item_count}} 个已完成的项目",

From ab1817477491be83958642218f60d12defb60206 Mon Sep 17 00:00:00 2001
From: gallegonovato <fran-carro@hotmail.es>
Date: Mon, 13 May 2024 22:40:27 +0200
Subject: [PATCH 111/116] translationBot(ui): update translation (Spanish)

Currently translated at 31.3% (379 of 1208 strings)

Co-authored-by: gallegonovato <fran-carro@hotmail.es>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/es/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/es.json | 90 +++++++++++++++++++-
 1 file changed, 88 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/es.json b/invokeai/frontend/web/public/locales/es.json
index 6b410cd0bf..dbdda8e209 100644
--- a/invokeai/frontend/web/public/locales/es.json
+++ b/invokeai/frontend/web/public/locales/es.json
@@ -25,7 +25,24 @@
         "areYouSure": "¿Estas seguro?",
         "batch": "Administrador de lotes",
         "modelManager": "Administrador de modelos",
-        "communityLabel": "Comunidad"
+        "communityLabel": "Comunidad",
+        "direction": "Dirección",
+        "ai": "Ia",
+        "add": "Añadir",
+        "auto": "Automático",
+        "copyError": "Error $t(gallery.copy)",
+        "details": "Detalles",
+        "or": "o",
+        "checkpoint": "Punto de control",
+        "controlNet": "ControlNet",
+        "aboutHeading": "Sea dueño de su poder creativo",
+        "advanced": "Avanzado",
+        "data": "Fecha",
+        "delete": "Borrar",
+        "copy": "Copiar",
+        "beta": "Beta",
+        "on": "En",
+        "aboutDesc": "¿Utilizas Invoke para trabajar? Mira aquí:"
     },
     "gallery": {
         "galleryImageSize": "Tamaño de la imagen",
@@ -443,7 +460,13 @@
         "previousImage": "Imagen anterior",
         "nextImage": "Siguiente imagen",
         "showOptionsPanel": "Mostrar el panel lateral",
-        "menu": "Menú"
+        "menu": "Menú",
+        "showGalleryPanel": "Mostrar panel de galería",
+        "loadMore": "Cargar más",
+        "about": "Acerca de",
+        "createIssue": "Crear un problema",
+        "resetUI": "Interfaz de usuario $t(accessibility.reset)",
+        "mode": "Modo"
     },
     "nodes": {
         "zoomInNodes": "Acercar",
@@ -456,5 +479,68 @@
         "reloadNodeTemplates": "Recargar las plantillas de nodos",
         "loadWorkflow": "Cargar el flujo de trabajo",
         "downloadWorkflow": "Descargar el flujo de trabajo en un archivo JSON"
+    },
+    "boards": {
+        "autoAddBoard": "Agregar panel automáticamente",
+        "changeBoard": "Cambiar el panel",
+        "clearSearch": "Borrar la búsqueda",
+        "deleteBoard": "Borrar el panel",
+        "selectBoard": "Seleccionar un panel",
+        "uncategorized": "Sin categoría",
+        "cancel": "Cancelar",
+        "addBoard": "Agregar un panel",
+        "movingImagesToBoard_one": "Moviendo {{count}} imagen al panel:",
+        "movingImagesToBoard_many": "Moviendo {{count}} imágenes al panel:",
+        "movingImagesToBoard_other": "Moviendo {{count}} imágenes al panel:",
+        "bottomMessage": "Al eliminar este panel y las imágenes que contiene, se restablecerán las funciones que los estén utilizando actualmente.",
+        "deleteBoardAndImages": "Borrar el panel y las imágenes",
+        "loading": "Cargando...",
+        "deletedBoardsCannotbeRestored": "Los paneles eliminados no se pueden restaurar",
+        "move": "Mover",
+        "menuItemAutoAdd": "Agregar automáticamente a este panel",
+        "searchBoard": "Buscando paneles…",
+        "topMessage": "Este panel contiene imágenes utilizadas en las siguientes funciones:",
+        "downloadBoard": "Descargar panel",
+        "deleteBoardOnly": "Borrar solo el panel",
+        "myBoard": "Mi panel",
+        "noMatching": "No hay paneles que coincidan"
+    },
+    "accordions": {
+        "compositing": {
+            "title": "Composición",
+            "infillTab": "Relleno"
+        },
+        "generation": {
+            "title": "Generación"
+        },
+        "image": {
+            "title": "Imagen"
+        },
+        "control": {
+            "title": "Control"
+        },
+        "advanced": {
+            "options": "$t(accordions.advanced.title) opciones",
+            "title": "Avanzado"
+        }
+    },
+    "ui": {
+        "tabs": {
+            "generationTab": "$t(ui.tabs.generation) $t(common.tab)",
+            "canvas": "Lienzo",
+            "generation": "Generación",
+            "queue": "Cola",
+            "queueTab": "$t(ui.tabs.queue) $t(common.tab)",
+            "workflows": "Flujos de trabajo",
+            "models": "Modelos",
+            "modelsTab": "$t(ui.tabs.models) $t(common.tab)",
+            "canvasTab": "$t(ui.tabs.canvas) $t(common.tab)",
+            "workflowsTab": "$t(ui.tabs.workflows) $t(common.tab)"
+        }
+    },
+    "controlLayers": {
+        "layers_one": "Capa",
+        "layers_many": "Capas",
+        "layers_other": "Capas"
     }
 }

From e375d9f7879c55afd936f541507ce57877e767a7 Mon Sep 17 00:00:00 2001
From: Riccardo Giovanetti <riccardo.giovanetti@gmail.com>
Date: Mon, 13 May 2024 22:40:28 +0200
Subject: [PATCH 112/116] translationBot(ui): update translation (Italian)

Currently translated at 98.5% (1192 of 1210 strings)

translationBot(ui): update translation (Italian)

Currently translated at 98.5% (1192 of 1210 strings)

translationBot(ui): update translation (Italian)

Currently translated at 98.5% (1192 of 1210 strings)

translationBot(ui): update translation (Italian)

Currently translated at 98.5% (1192 of 1210 strings)

Co-authored-by: Riccardo Giovanetti <riccardo.giovanetti@gmail.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/it/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/it.json | 45 ++++++++++++--------
 1 file changed, 27 insertions(+), 18 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/it.json b/invokeai/frontend/web/public/locales/it.json
index d6fd6c7d04..f365b43e10 100644
--- a/invokeai/frontend/web/public/locales/it.json
+++ b/invokeai/frontend/web/public/locales/it.json
@@ -5,7 +5,7 @@
         "reportBugLabel": "Segnala un errore",
         "settingsLabel": "Impostazioni",
         "img2img": "Immagine a Immagine",
-        "unifiedCanvas": "Tela unificata",
+        "unifiedCanvas": "Tela",
         "nodes": "Flussi di lavoro",
         "upload": "Caricamento",
         "load": "Carica",
@@ -81,7 +81,11 @@
         "selected": "Selezionato",
         "goTo": "Vai a",
         "editor": "Editor",
-        "tab": "Scheda"
+        "tab": "Scheda",
+        "viewing": "Visualizza",
+        "viewingDesc": "Rivedi le immagini in un'ampia vista della galleria",
+        "editing": "Modifica",
+        "editingDesc": "Modifica nell'area Livelli di controllo"
     },
     "gallery": {
         "galleryImageSize": "Dimensione dell'immagine",
@@ -187,8 +191,8 @@
             "desc": "Mostra le informazioni sui metadati dell'immagine corrente"
         },
         "sendToImageToImage": {
-            "title": "Invia a Immagine a Immagine",
-            "desc": "Invia l'immagine corrente a da Immagine a Immagine"
+            "title": "Invia a Generazione da immagine",
+            "desc": "Invia l'immagine corrente a Generazione da immagine"
         },
         "deleteImage": {
             "title": "Elimina immagine",
@@ -482,8 +486,8 @@
         "scaledHeight": "Altezza ridimensionata",
         "infillMethod": "Metodo di riempimento",
         "tileSize": "Dimensione piastrella",
-        "sendToImg2Img": "Invia a Immagine a Immagine",
-        "sendToUnifiedCanvas": "Invia a Tela Unificata",
+        "sendToImg2Img": "Invia a Generazione da immagine",
+        "sendToUnifiedCanvas": "Invia alla Tela",
         "downloadImage": "Scarica l'immagine",
         "usePrompt": "Usa Prompt",
         "useSeed": "Usa Seme",
@@ -544,7 +548,9 @@
         "infillMosaicMaxColor": "Colore massimo",
         "infillMosaicTileHeight": "Altezza piastrella",
         "infillColorValue": "Colore di riempimento",
-        "globalSettings": "Impostazioni globali"
+        "globalSettings": "Impostazioni globali",
+        "globalPositivePromptPlaceholder": "Prompt positivo globale",
+        "globalNegativePromptPlaceholder": "Prompt negativo globale"
     },
     "settings": {
         "models": "Modelli",
@@ -569,7 +575,7 @@
         "intermediatesCleared_one": "Cancellata {{count}} immagine intermedia",
         "intermediatesCleared_many": "Cancellate {{count}} immagini intermedie",
         "intermediatesCleared_other": "Cancellate {{count}} immagini intermedie",
-        "clearIntermediatesDesc1": "La cancellazione delle immagini intermedie ripristinerà lo stato di Tela Unificata e ControlNet.",
+        "clearIntermediatesDesc1": "La cancellazione delle immagini intermedie ripristinerà lo stato della Tela e degli Adattatori di Controllo.",
         "intermediatesClearedFailed": "Problema con la cancellazione delle immagini intermedie",
         "clearIntermediatesWithCount_one": "Cancella {{count}} immagine intermedia",
         "clearIntermediatesWithCount_many": "Cancella {{count}} immagini intermedie",
@@ -585,8 +591,8 @@
         "imageCopied": "Immagine copiata",
         "imageNotLoadedDesc": "Impossibile trovare l'immagine",
         "canvasMerged": "Tela unita",
-        "sentToImageToImage": "Inviato a Immagine a Immagine",
-        "sentToUnifiedCanvas": "Inviato a Tela Unificata",
+        "sentToImageToImage": "Inviato a Generazione da immagine",
+        "sentToUnifiedCanvas": "Inviato alla Tela",
         "parametersNotSet": "Parametri non impostati",
         "metadataLoadFailed": "Impossibile caricare i metadati",
         "serverError": "Errore del Server",
@@ -1010,7 +1016,7 @@
         "cancelBatchSucceeded": "Lotto annullato",
         "clearTooltip": "Annulla e cancella tutti gli elementi",
         "current": "Attuale",
-        "pauseTooltip": "Sospende l'elaborazione",
+        "pauseTooltip": "Sospendi l'elaborazione",
         "failed": "Falliti",
         "cancelItem": "Annulla l'elemento",
         "next": "Prossimo",
@@ -1552,7 +1558,7 @@
         "addLayer": "Aggiungi Livello",
         "moveToFront": "Sposta in primo piano",
         "moveToBack": "Sposta in fondo",
-        "moveForward": "Sposta in avanti",
+        "moveForward": "Sposta avanti",
         "moveBackward": "Sposta indietro",
         "brushSize": "Dimensioni del pennello",
         "globalMaskOpacity": "Opacità globale della maschera",
@@ -1566,19 +1572,22 @@
         "addNegativePrompt": "Aggiungi $t(common.negativePrompt)",
         "addIPAdapter": "Aggiungi $t(common.ipAdapter)",
         "regionalGuidance": "Guida regionale",
-        "regionalGuidanceLayer": "$t(controlLayers.regionalGuidance) $t(unifiedCanvas.layer)",
+        "regionalGuidanceLayer": "$t(unifiedCanvas.layer) $t(controlLayers.regionalGuidance)",
         "opacity": "Opacità",
         "globalControlAdapter": "$t(controlnet.controlAdapter_one) Globale",
-        "globalControlAdapterLayer": "$t(controlnet.controlAdapter_one) $t(unifiedCanvas.layer) Globale",
+        "globalControlAdapterLayer": "$t(controlnet.controlAdapter_one) - $t(unifiedCanvas.layer) Globale",
         "globalIPAdapter": "$t(common.ipAdapter) Globale",
-        "globalIPAdapterLayer": "$t(common.ipAdapter) $t(unifiedCanvas.layer) Globale",
-        "globalInitialImage": "Immagine iniziale globale",
-        "globalInitialImageLayer": "$t(controlLayers.globalInitialImage) $t(unifiedCanvas.layer)",
+        "globalIPAdapterLayer": "$t(common.ipAdapter) - $t(unifiedCanvas.layer) Globale",
+        "globalInitialImage": "Immagine iniziale",
+        "globalInitialImageLayer": "$t(controlLayers.globalInitialImage) - $t(unifiedCanvas.layer) Globale",
         "clearProcessor": "Cancella processore",
         "resetProcessor": "Ripristina il processore alle impostazioni predefinite",
         "noLayersAdded": "Nessun livello aggiunto",
         "resetRegion": "Reimposta la regione",
-        "controlLayers": "Livelli di controllo"
+        "controlLayers": "Livelli di controllo",
+        "layers_one": "Livello",
+        "layers_many": "Livelli",
+        "layers_other": "Livelli"
     },
     "ui": {
         "tabs": {

From eef6fcf28699b84e5d7109415aa2b53eb9fa5f7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=B0=D1=81=D1=8F=D0=BD=D0=B0=D1=82=D0=BE=D1=80?=
 <ilabulanov339@gmail.com>
Date: Mon, 13 May 2024 22:40:28 +0200
Subject: [PATCH 113/116] translationBot(ui): update translation (Russian)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Currently translated at 100.0% (1210 of 1210 strings)

Co-authored-by: Васянатор <ilabulanov339@gmail.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/ru/
Translation: InvokeAI/Web UI
---
 invokeai/frontend/web/public/locales/ru.json | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/ru.json b/invokeai/frontend/web/public/locales/ru.json
index 44864e6624..7fa1b73e7a 100644
--- a/invokeai/frontend/web/public/locales/ru.json
+++ b/invokeai/frontend/web/public/locales/ru.json
@@ -83,7 +83,11 @@
         "negativePrompt": "Негативный запрос",
         "editor": "Редактор",
         "goTo": "Перейти к",
-        "tab": "Вкладка"
+        "tab": "Вкладка",
+        "viewing": "Просмотр",
+        "editing": "Редактирование",
+        "viewingDesc": "Просмотр изображений в режиме большой галереи",
+        "editingDesc": "Редактировать на холсте слоёв управления"
     },
     "gallery": {
         "galleryImageSize": "Размер изображений",
@@ -551,7 +555,9 @@
         "infillMosaicMinColor": "Мин цвет",
         "infillMosaicMaxColor": "Макс цвет",
         "infillColorValue": "Цвет заливки",
-        "globalSettings": "Глобальные настройки"
+        "globalSettings": "Глобальные настройки",
+        "globalNegativePromptPlaceholder": "Глобальный негативный запрос",
+        "globalPositivePromptPlaceholder": "Глобальный запрос"
     },
     "settings": {
         "models": "Модели",
@@ -1596,7 +1602,10 @@
         "clearProcessor": "Чистый процессор",
         "globalInitialImage": "Глобальное исходное изображение",
         "globalInitialImageLayer": "$t(controlLayers.globalInitialImage) $t(unifiedCanvas.layer)",
-        "noLayersAdded": "Без слоев"
+        "noLayersAdded": "Без слоев",
+        "layers_one": "Слой",
+        "layers_few": "Слоя",
+        "layers_many": "Слоев"
     },
     "ui": {
         "tabs": {

From 9c819f0fd8e6b6760ea8a773e9495787573a94bd Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 23 Apr 2024 22:38:02 +1000
Subject: [PATCH 114/116] fix(nodes): fix nsfw checker model download

---
 invokeai/app/api/routers/app_info.py          |  5 +-
 invokeai/backend/image_util/safety_checker.py | 48 ++++++++++++++-----
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/invokeai/app/api/routers/app_info.py b/invokeai/app/api/routers/app_info.py
index 21286ac2b0..c3bc98a038 100644
--- a/invokeai/app/api/routers/app_info.py
+++ b/invokeai/app/api/routers/app_info.py
@@ -13,7 +13,6 @@ from pydantic import BaseModel, Field
 from invokeai.app.invocations.upscale import ESRGAN_MODELS
 from invokeai.app.services.invocation_cache.invocation_cache_common import InvocationCacheStatus
 from invokeai.backend.image_util.infill_methods.patchmatch import PatchMatch
-from invokeai.backend.image_util.safety_checker import SafetyChecker
 from invokeai.backend.util.logging import logging
 from invokeai.version import __version__
 
@@ -109,9 +108,7 @@ async def get_config() -> AppConfig:
         upscaling_models.append(str(Path(model).stem))
     upscaler = Upscaler(upscaling_method="esrgan", upscaling_models=upscaling_models)
 
-    nsfw_methods = []
-    if SafetyChecker.safety_checker_available():
-        nsfw_methods.append("nsfw_checker")
+    nsfw_methods = ["nsfw_checker"]
 
     watermarking_methods = ["invisible_watermark"]
 
diff --git a/invokeai/backend/image_util/safety_checker.py b/invokeai/backend/image_util/safety_checker.py
index 60dcd93fcc..4e0bfe56e5 100644
--- a/invokeai/backend/image_util/safety_checker.py
+++ b/invokeai/backend/image_util/safety_checker.py
@@ -8,7 +8,7 @@ from pathlib import Path
 
 import numpy as np
 from diffusers.pipelines.stable_diffusion.safety_checker import StableDiffusionSafetyChecker
-from PIL import Image
+from PIL import Image, ImageFilter
 from transformers import AutoFeatureExtractor
 
 import invokeai.backend.util.logging as logger
@@ -16,6 +16,7 @@ from invokeai.app.services.config.config_default import get_config
 from invokeai.backend.util.devices import TorchDevice
 from invokeai.backend.util.silence_warnings import SilenceWarnings
 
+repo_id = "CompVis/stable-diffusion-safety-checker"
 CHECKER_PATH = "core/convert/stable-diffusion-safety-checker"
 
 
@@ -24,30 +25,30 @@ class SafetyChecker:
     Wrapper around SafetyChecker model.
     """
 
-    safety_checker = None
     feature_extractor = None
-    tried_load: bool = False
+    safety_checker = None
 
     @classmethod
     def _load_safety_checker(cls):
-        if cls.tried_load:
+        if cls.safety_checker is not None and cls.feature_extractor is not None:
             return
 
         try:
-            cls.safety_checker = StableDiffusionSafetyChecker.from_pretrained(get_config().models_path / CHECKER_PATH)
-            cls.feature_extractor = AutoFeatureExtractor.from_pretrained(get_config().models_path / CHECKER_PATH)
+            model_path = get_config().models_path / CHECKER_PATH
+            if model_path.exists():
+                cls.feature_extractor = AutoFeatureExtractor.from_pretrained(model_path)
+                cls.safety_checker = StableDiffusionSafetyChecker.from_pretrained(model_path)
+            else:
+                model_path.mkdir(parents=True, exist_ok=True)
+                cls.feature_extractor = AutoFeatureExtractor.from_pretrained(repo_id)
+                cls.feature_extractor.save_pretrained(model_path, safe_serialization=True)
+                cls.safety_checker = StableDiffusionSafetyChecker.from_pretrained(repo_id)
+                cls.safety_checker.save_pretrained(model_path, safe_serialization=True)
         except Exception as e:
             logger.warning(f"Could not load NSFW checker: {str(e)}")
-        cls.tried_load = True
-
-    @classmethod
-    def safety_checker_available(cls) -> bool:
-        return Path(get_config().models_path, CHECKER_PATH).exists()
 
     @classmethod
     def has_nsfw_concept(cls, image: Image.Image) -> bool:
-        if not cls.safety_checker_available() and cls.tried_load:
-            return False
         cls._load_safety_checker()
         if cls.safety_checker is None or cls.feature_extractor is None:
             return False
@@ -60,3 +61,24 @@ class SafetyChecker:
         with SilenceWarnings():
             checked_image, has_nsfw_concept = cls.safety_checker(images=x_image, clip_input=features.pixel_values)
         return has_nsfw_concept[0]
+
+    @classmethod
+    def blur_if_nsfw(cls, image: Image.Image) -> Image.Image:
+        if cls.has_nsfw_concept(image):
+            logger.info("A potentially NSFW image has been detected. Image will be blurred.")
+            blurry_image = image.filter(filter=ImageFilter.GaussianBlur(radius=32))
+            caution = cls._get_caution_img()
+            # Center the caution image on the blurred image
+            x = (blurry_image.width - caution.width) // 2
+            y = (blurry_image.height - caution.height) // 2
+            blurry_image.paste(caution, (x, y), caution)
+            image = blurry_image
+
+        return image
+
+    @classmethod
+    def _get_caution_img(cls) -> Image.Image:
+        import invokeai.app.assets.images as image_assets
+
+        caution = Image.open(Path(image_assets.__path__[0]) / "caution.png")
+        return caution.resize((caution.width // 2, caution.height // 2))

From 93da75209c6519ac260e05dfe76933d7c3ebaf23 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 13 May 2024 18:33:25 +1000
Subject: [PATCH 115/116] feat(nodes): use new `blur_if_nsfw` method

---
 invokeai/app/invocations/image.py             | 16 ++--------------
 invokeai/backend/image_util/safety_checker.py |  2 +-
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/invokeai/app/invocations/image.py b/invokeai/app/invocations/image.py
index 05ffc0d67b..65e7ce5e06 100644
--- a/invokeai/app/invocations/image.py
+++ b/invokeai/app/invocations/image.py
@@ -1,6 +1,5 @@
 # Copyright (c) 2022 Kyle Schouviller (https://github.com/kyle0654)
 
-from pathlib import Path
 from typing import Literal, Optional
 
 import cv2
@@ -504,7 +503,7 @@ class ImageInverseLerpInvocation(BaseInvocation, WithMetadata, WithBoard):
     title="Blur NSFW Image",
     tags=["image", "nsfw"],
     category="image",
-    version="1.2.2",
+    version="1.2.3",
 )
 class ImageNSFWBlurInvocation(BaseInvocation, WithMetadata, WithBoard):
     """Add blur to NSFW-flagged images"""
@@ -516,23 +515,12 @@ class ImageNSFWBlurInvocation(BaseInvocation, WithMetadata, WithBoard):
 
         logger = context.logger
         logger.debug("Running NSFW checker")
-        if SafetyChecker.has_nsfw_concept(image):
-            logger.info("A potentially NSFW image has been detected. Image will be blurred.")
-            blurry_image = image.filter(filter=ImageFilter.GaussianBlur(radius=32))
-            caution = self._get_caution_img()
-            blurry_image.paste(caution, (0, 0), caution)
-            image = blurry_image
+        image = SafetyChecker.blur_if_nsfw(image)
 
         image_dto = context.images.save(image=image)
 
         return ImageOutput.build(image_dto)
 
-    def _get_caution_img(self) -> Image.Image:
-        import invokeai.app.assets.images as image_assets
-
-        caution = Image.open(Path(image_assets.__path__[0]) / "caution.png")
-        return caution.resize((caution.width // 2, caution.height // 2))
-
 
 @invocation(
     "img_watermark",
diff --git a/invokeai/backend/image_util/safety_checker.py b/invokeai/backend/image_util/safety_checker.py
index 4e0bfe56e5..ab09a29619 100644
--- a/invokeai/backend/image_util/safety_checker.py
+++ b/invokeai/backend/image_util/safety_checker.py
@@ -65,7 +65,7 @@ class SafetyChecker:
     @classmethod
     def blur_if_nsfw(cls, image: Image.Image) -> Image.Image:
         if cls.has_nsfw_concept(image):
-            logger.info("A potentially NSFW image has been detected. Image will be blurred.")
+            logger.warning("A potentially NSFW image has been detected. Image will be blurred.")
             blurry_image = image.filter(filter=ImageFilter.GaussianBlur(radius=32))
             caution = cls._get_caution_img()
             # Center the caution image on the blurred image

From 2a9cea66897e3f8098ca4967a457e4265ddcf854 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 14 May 2024 07:37:02 +1000
Subject: [PATCH 116/116] Update invokeai_version.py

Bump to v4.2.1
---
 invokeai/version/invokeai_version.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/version/invokeai_version.py b/invokeai/version/invokeai_version.py
index 0fd7811c0d..aef46acb47 100644
--- a/invokeai/version/invokeai_version.py
+++ b/invokeai/version/invokeai_version.py
@@ -1 +1 @@
-__version__ = "4.2.0"
+__version__ = "4.2.1"