Only kick off on merges to main

.github/pr_labels.yml

@@ -1,59 +0,0 @@
-Root:
-- changed-files:
-  - any-glob-to-any-file: '*'
-
-PythonDeps:
-- changed-files:
-  - any-glob-to-any-file: 'pyproject.toml'
-
-Python:
-- changed-files:
-  - all-globs-to-any-file: 
-    - 'invokeai/**'
-    - '!invokeai/frontend/web/**'
-
-PythonTests:
-- changed-files:
-  - any-glob-to-any-file: 'tests/**'
-
-CICD:
-- changed-files:
-  - any-glob-to-any-file: .github/**
-
-Docker:
-- changed-files:
-  - any-glob-to-any-file: docker/**
-
-Installer:
-- changed-files:
-  - any-glob-to-any-file: installer/**
-
-Documentation:
-- changed-files:
-  - any-glob-to-any-file: docs/**
-
-Invocations:
-- changed-files:
-  - any-glob-to-any-file: 'invokeai/app/invocations/**'
-
-Backend:
-- changed-files:
-  - any-glob-to-any-file: 'invokeai/backend/**'
-
-Api:
-- changed-files:
-  - any-glob-to-any-file: 'invokeai/app/api/**'
-
-Services:
-- changed-files:
-  - any-glob-to-any-file: 'invokeai/app/services/**'
-
-FrontendDeps:
-- changed-files:
-  - any-glob-to-any-file:
-    - '**/*/package.json'
-    - '**/*/pnpm-lock.yaml'
-
-Frontend:
-- changed-files:
-  - any-glob-to-any-file: 'invokeai/frontend/web/**'

.github/workflows/change-monitor.yml

@@ -0,0 +1,29 @@
+name: Trigger Target Workflow
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  trigger:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Trigger Workflow in Another Repository
+        run: |
+          # Set the required variables
+          repo_owner="invoke-ai" 
+          repo_name="Invoke"  
+          event_type="invokeai-pr-merge" 
+          service=${{ github.event.inputs.target_service }}"
+          version="${{ github.event.inputs.target_version }}"
+  
+          curl -L \
+            -X POST \
+            -H "Accept: application/vnd.github+json" \
+            -H "Authorization: Bearer ${{ secrets.PAT }}" \
+            -H "X-GitHub-Api-Version: 2022-11-28" \
+            https://api.github.com/repos/$repo_owner/$repo_name/dispatches \
+            -d "{\"event_type\": \"$event_type\", \"client_payload\": {\"service\": \"$service\", \"version\": \"$version\", \"unit\": false, \"integration\": true}}"

.github/workflows/label-pr.yml

@@ -1,16 +0,0 @@
-name: "Pull Request Labeler"
-on:
-- pull_request_target
-
-jobs:
-  labeler:
-    permissions:
-      contents: read
-      pull-requests: write
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - uses: actions/labeler@v5
-        with:
-          configuration-path: .github/pr_labels.yml

docs/contributing/contribution_guides/contributingToFrontend.md

@@ -0,0 +1,76 @@
+# Contributing to the Frontend
+
+# InvokeAI Web UI
+
+- [InvokeAI Web UI](https://github.com/invoke-ai/InvokeAI/tree/main/invokeai/frontend/web/docs#invokeai-web-ui)
+    - [Stack](https://github.com/invoke-ai/InvokeAI/tree/main/invokeai/frontend/web/docs#stack)
+    - [Contributing](https://github.com/invoke-ai/InvokeAI/tree/main/invokeai/frontend/web/docs#contributing)
+        - [Dev Environment](https://github.com/invoke-ai/InvokeAI/tree/main/invokeai/frontend/web/docs#dev-environment)
+        - [Production builds](https://github.com/invoke-ai/InvokeAI/tree/main/invokeai/frontend/web/docs#production-builds)
+
+The UI is a fairly straightforward Typescript React app, with the Unified Canvas being more complex.
+
+Code is located in `invokeai/frontend/web/` for review.
+
+## Stack
+
+State management is Redux via [Redux Toolkit](https://github.com/reduxjs/redux-toolkit). We lean heavily on RTK:
+
+- `createAsyncThunk` for HTTP requests
+- `createEntityAdapter` for fetching images and models
+- `createListenerMiddleware` for workflows
+
+The API client and associated types are generated from the OpenAPI schema. See API_CLIENT.md.
+
+Communication with server is a mix of HTTP and [socket.io](https://github.com/socketio/socket.io-client) (with a simple socket.io redux middleware to help).
+
+[Chakra-UI](https://github.com/chakra-ui/chakra-ui) & [Mantine](https://github.com/mantinedev/mantine) for components and styling.
+
+[Konva](https://github.com/konvajs/react-konva) for the canvas, but we are pushing the limits of what is feasible with it (and HTML canvas in general). We plan to rebuild it with [PixiJS](https://github.com/pixijs/pixijs) to take advantage of WebGL's improved raster handling.
+
+[Vite](https://vitejs.dev/) for bundling.
+
+Localisation is via [i18next](https://github.com/i18next/react-i18next), but translation happens on our [Weblate](https://hosted.weblate.org/engage/invokeai/) project. Only the English source strings should be changed on this repo.
+
+## Contributing
+
+Thanks for your interest in contributing to the InvokeAI Web UI!
+
+We encourage you to ping @psychedelicious and @blessedcoolant on [Discord](https://discord.gg/ZmtBAhwWhy) if you want to contribute, just to touch base and ensure your work doesn't conflict with anything else going on. The project is very active.
+
+### Dev Environment
+
+**Setup** 
+
+1. Install [node](https://nodejs.org/en/download/). You can confirm node is installed with:
+```bash
+node --version
+```
+
+2. Install [pnpm](https://pnpm.io/) and confirm it is installed by running this:
+```bash
+npm install --global pnpm
+pnpm --version
+```
+
+From `invokeai/frontend/web/` run `pnpm install` to get everything set up.
+
+Start everything in dev mode:
+1. Ensure your virtual environment is running
+2. Start the dev server: `pnpm dev`
+3. Start the InvokeAI Nodes backend: `python scripts/invokeai-web.py # run from the repo root`
+4. Point your browser to the dev server address e.g. [http://localhost:5173/](http://localhost:5173/)
+
+### VSCode Remote Dev
+
+We've noticed an intermittent issue with the VSCode Remote Dev port forwarding. If you use this feature of VSCode, you may intermittently click the Invoke button and then get nothing until the request times out. Suggest disabling the IDE's port forwarding feature and doing it manually via SSH:
+
+`ssh -L 9090:localhost:9090 -L 5173:localhost:5173 user@host`
+
+### Production builds
+
+For a number of technical and logistical reasons, we need to commit UI build artefacts to the repo.
+
+If you submit a PR, there is a good chance we will ask you to include a separate commit with a build of the app.
+
+To build for production, run `pnpm build`.

docs/contributing/contribution_guides/development.md

@@ -12,7 +12,7 @@ To get started, take a look at our [new contributors checklist](newContributorCh
 Once you're setup, for more information, you can review the documentation specific to your area of interest:
 
 * #### [InvokeAI Architecure](../ARCHITECTURE.md)
-* #### [Frontend Documentation](https://github.com/invoke-ai/InvokeAI/tree/main/invokeai/frontend/web)
+* #### [Frontend Documentation](./contributingToFrontend.md)
 * #### [Node Documentation](../INVOCATIONS.md)
 * #### [Local Development](../LOCAL_DEVELOPMENT.md)
 

docs/nodes/communityNodes.md

@@ -25,6 +25,7 @@ To use a community workflow, download the the `.json` node graph file and load i
     + [GPT2RandomPromptMaker](#gpt2randompromptmaker)
     + [Grid to Gif](#grid-to-gif)
     + [Halftone](#halftone)
+    + [Ideal Size](#ideal-size)
     + [Image and Mask Composition Pack](#image-and-mask-composition-pack)
     + [Image Dominant Color](#image-dominant-color)
     + [Image to Character Art Image Nodes](#image-to-character-art-image-nodes)
@@ -195,6 +196,13 @@ CMYK Halftone Output:
 
 <img src="https://github.com/invoke-ai/InvokeAI/assets/34005131/c59c578f-db8e-4d66-8c66-2851752d75ea" width="300" />
 
+--------------------------------
+### Ideal Size
+
+**Description:** This node calculates an ideal image size for a first pass of a multi-pass upscaling. The aim is to avoid duplication that results from choosing a size larger than the model is capable of.
+
+**Node Link:** https://github.com/JPPhoto/ideal-size-node
+
 --------------------------------
 ### Image and Mask Composition Pack
 

docs/nodes/defaultNodes.md

@@ -36,7 +36,6 @@ their descriptions.
 | Integer Math                                                  | Perform basic math operations on two integers                                                                                                        |
 | Convert Image Mode                                            | Converts an image to a different mode.                                                                                                               |
 | Crop Image                                                    | Crops an image to a specified box. The box can be outside of the image.                                                                              |
-| Ideal Size                                                    | Calculates an ideal image size for latents for a first pass of a multi-pass upscaling to avoid duplication and other artifacts                       |
 | Image Hue Adjustment                                          | Adjusts the Hue of an image.                                                                                                                         |
 | Inverse Lerp Image                                            | Inverse linear interpolation of all pixels of an image                                                                                               |
 | Image Primitive                                               | An image primitive value                                                                                                                             |

invokeai/app/invocations/controlnet_image_processors.py

@@ -30,7 +30,6 @@ from invokeai.app.invocations.primitives import ImageField, ImageOutput
 from invokeai.app.invocations.util import validate_begin_end_step, validate_weights
 from invokeai.app.services.image_records.image_records_common import ImageCategory, ResourceOrigin
 from invokeai.app.shared.fields import FieldDescriptions
-from invokeai.backend.image_util.depth_anything import DepthAnythingDetector
 
 from ...backend.model_management import BaseModelType
 from .baseinvocation import (
@@ -603,33 +602,3 @@ class ColorMapImageProcessorInvocation(ImageProcessorInvocation):
         color_map = cv2.resize(color_map, (width, height), interpolation=cv2.INTER_NEAREST)
         color_map = Image.fromarray(color_map)
         return color_map
-
-
-DEPTH_ANYTHING_MODEL_SIZES = Literal["large", "base", "small"]
-
-
-@invocation(
-    "depth_anything_image_processor",
-    title="Depth Anything Processor",
-    tags=["controlnet", "depth", "depth anything"],
-    category="controlnet",
-    version="1.0.0",
-)
-class DepthAnythingImageProcessorInvocation(ImageProcessorInvocation):
-    """Generates a depth map based on the Depth Anything algorithm"""
-
-    model_size: DEPTH_ANYTHING_MODEL_SIZES = InputField(
-        default="small", description="The size of the depth model to use"
-    )
-    resolution: int = InputField(default=512, ge=64, multiple_of=64, description=FieldDescriptions.image_res)
-    offload: bool = InputField(default=False)
-
-    def run_processor(self, image):
-        depth_anything_detector = DepthAnythingDetector()
-        depth_anything_detector.load_model(model_size=self.model_size)
-
-        if image.mode == "RGBA":
-            image = image.convert("RGB")
-
-        processed_image = depth_anything_detector(image=image, resolution=self.resolution, offload=self.offload)
-        return processed_image

invokeai/app/invocations/latent.py

@@ -1,6 +1,5 @@
 # Copyright (c) 2023 Kyle Schouviller (https://github.com/kyle0654)
 
-import math
 from contextlib import ExitStack
 from functools import singledispatchmethod
 from typing import List, Literal, Optional, Union
@@ -1229,57 +1228,3 @@ class CropLatentsCoreInvocation(BaseInvocation):
         context.services.latents.save(name, cropped_latents)
 
         return build_latents_output(latents_name=name, latents=cropped_latents)
-
-
-@invocation_output("ideal_size_output")
-class IdealSizeOutput(BaseInvocationOutput):
-    """Base class for invocations that output an image"""
-
-    width: int = OutputField(description="The ideal width of the image (in pixels)")
-    height: int = OutputField(description="The ideal height of the image (in pixels)")
-
-
-@invocation(
-    "ideal_size",
-    title="Ideal Size",
-    tags=["latents", "math", "ideal_size"],
-    version="1.0.2",
-)
-class IdealSizeInvocation(BaseInvocation):
-    """Calculates the ideal size for generation to avoid duplication"""
-
-    width: int = InputField(default=1024, description="Final image width")
-    height: int = InputField(default=576, description="Final image height")
-    unet: UNetField = InputField(default=None, description=FieldDescriptions.unet)
-    multiplier: float = InputField(
-        default=1.0,
-        description="Amount to multiply the model's dimensions by when calculating the ideal size (may result in initial generation artifacts if too large)",
-    )
-
-    def trim_to_multiple_of(self, *args, multiple_of=LATENT_SCALE_FACTOR):
-        return tuple((x - x % multiple_of) for x in args)
-
-    def invoke(self, context: InvocationContext) -> IdealSizeOutput:
-        aspect = self.width / self.height
-        dimension = 512
-        if self.unet.unet.base_model == BaseModelType.StableDiffusion2:
-            dimension = 768
-        elif self.unet.unet.base_model == BaseModelType.StableDiffusionXL:
-            dimension = 1024
-        dimension = dimension * self.multiplier
-        min_dimension = math.floor(dimension * 0.5)
-        model_area = dimension * dimension  # hardcoded for now since all models are trained on square images
-
-        if aspect > 1.0:
-            init_height = max(min_dimension, math.sqrt(model_area / aspect))
-            init_width = init_height * aspect
-        else:
-            init_width = max(min_dimension, math.sqrt(model_area * aspect))
-            init_height = init_width / aspect
-
-        scaled_width, scaled_height = self.trim_to_multiple_of(
-            math.floor(init_width),
-            math.floor(init_height),
-        )
-
-        return IdealSizeOutput(width=scaled_width, height=scaled_height)

invokeai/app/services/workflow_records/workflow_records_common.py

@@ -31,7 +31,6 @@ class WorkflowRecordOrderBy(str, Enum, metaclass=MetaEnum):
 class WorkflowCategory(str, Enum, metaclass=MetaEnum):
     User = "user"
     Default = "default"
-    Project = "project"
 
 
 class WorkflowMeta(BaseModel):

invokeai/backend/image_util/depth_anything/__init__.py

@@ -1,109 +0,0 @@
-import pathlib
-from typing import Literal, Union
-
-import cv2
-import numpy as np
-import torch
-import torch.nn.functional as F
-from einops import repeat
-from PIL import Image
-from torchvision.transforms import Compose
-
-from invokeai.app.services.config.config_default import InvokeAIAppConfig
-from invokeai.backend.image_util.depth_anything.model.dpt import DPT_DINOv2
-from invokeai.backend.image_util.depth_anything.utilities.util import NormalizeImage, PrepareForNet, Resize
-from invokeai.backend.util.devices import choose_torch_device
-from invokeai.backend.util.util import download_with_progress_bar
-
-config = InvokeAIAppConfig.get_config()
-
-DEPTH_ANYTHING_MODELS = {
-    "large": {
-        "url": "https://huggingface.co/spaces/LiheYoung/Depth-Anything/resolve/main/checkpoints/depth_anything_vitl14.pth?download=true",
-        "local": "any/annotators/depth_anything/depth_anything_vitl14.pth",
-    },
-    "base": {
-        "url": "https://huggingface.co/spaces/LiheYoung/Depth-Anything/resolve/main/checkpoints/depth_anything_vitb14.pth?download=true",
-        "local": "any/annotators/depth_anything/depth_anything_vitb14.pth",
-    },
-    "small": {
-        "url": "https://huggingface.co/spaces/LiheYoung/Depth-Anything/resolve/main/checkpoints/depth_anything_vits14.pth?download=true",
-        "local": "any/annotators/depth_anything/depth_anything_vits14.pth",
-    },
-}
-
-
-transform = Compose(
-    [
-        Resize(
-            width=518,
-            height=518,
-            resize_target=False,
-            keep_aspect_ratio=True,
-            ensure_multiple_of=14,
-            resize_method="lower_bound",
-            image_interpolation_method=cv2.INTER_CUBIC,
-        ),
-        NormalizeImage(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225]),
-        PrepareForNet(),
-    ]
-)
-
-
-class DepthAnythingDetector:
-    def __init__(self) -> None:
-        self.model = None
-        self.model_size: Union[Literal["large", "base", "small"], None] = None
-
-    def load_model(self, model_size=Literal["large", "base", "small"]):
-        DEPTH_ANYTHING_MODEL_PATH = pathlib.Path(config.models_path / DEPTH_ANYTHING_MODELS[model_size]["local"])
-        if not DEPTH_ANYTHING_MODEL_PATH.exists():
-            download_with_progress_bar(DEPTH_ANYTHING_MODELS[model_size]["url"], DEPTH_ANYTHING_MODEL_PATH)
-
-        if not self.model or model_size != self.model_size:
-            del self.model
-            self.model_size = model_size
-
-            match self.model_size:
-                case "small":
-                    self.model = DPT_DINOv2(encoder="vits", features=64, out_channels=[48, 96, 192, 384])
-                case "base":
-                    self.model = DPT_DINOv2(encoder="vitb", features=128, out_channels=[96, 192, 384, 768])
-                case "large":
-                    self.model = DPT_DINOv2(encoder="vitl", features=256, out_channels=[256, 512, 1024, 1024])
-                case _:
-                    raise TypeError("Not a supported model")
-
-            self.model.load_state_dict(torch.load(DEPTH_ANYTHING_MODEL_PATH.as_posix(), map_location="cpu"))
-            self.model.eval()
-
-        self.model.to(choose_torch_device())
-        return self.model
-
-    def to(self, device):
-        self.model.to(device)
-        return self
-
-    def __call__(self, image, resolution=512, offload=False):
-        image = np.array(image, dtype=np.uint8)
-        image = image[:, :, ::-1] / 255.0
-
-        image_height, image_width = image.shape[:2]
-        image = transform({"image": image})["image"]
-        image = torch.from_numpy(image).unsqueeze(0).to(choose_torch_device())
-
-        with torch.no_grad():
-            depth = self.model(image)
-            depth = F.interpolate(depth[None], (image_height, image_width), mode="bilinear", align_corners=False)[0, 0]
-            depth = (depth - depth.min()) / (depth.max() - depth.min()) * 255.0
-
-        depth_map = repeat(depth, "h w -> h w 3").cpu().numpy().astype(np.uint8)
-        depth_map = Image.fromarray(depth_map)
-
-        new_height = int(image_height * (resolution / image_width))
-        depth_map = depth_map.resize((resolution, new_height))
-
-        if offload:
-            del self.model
-
-        return depth_map

invokeai/backend/image_util/depth_anything/model/blocks.py

@@ -1,145 +0,0 @@
-import torch.nn as nn
-
-
-def _make_scratch(in_shape, out_shape, groups=1, expand=False):
-    scratch = nn.Module()
-
-    out_shape1 = out_shape
-    out_shape2 = out_shape
-    out_shape3 = out_shape
-    if len(in_shape) >= 4:
-        out_shape4 = out_shape
-
-    if expand:
-        out_shape1 = out_shape
-        out_shape2 = out_shape * 2
-        out_shape3 = out_shape * 4
-        if len(in_shape) >= 4:
-            out_shape4 = out_shape * 8
-
-    scratch.layer1_rn = nn.Conv2d(
-        in_shape[0], out_shape1, kernel_size=3, stride=1, padding=1, bias=False, groups=groups
-    )
-    scratch.layer2_rn = nn.Conv2d(
-        in_shape[1], out_shape2, kernel_size=3, stride=1, padding=1, bias=False, groups=groups
-    )
-    scratch.layer3_rn = nn.Conv2d(
-        in_shape[2], out_shape3, kernel_size=3, stride=1, padding=1, bias=False, groups=groups
-    )
-    if len(in_shape) >= 4:
-        scratch.layer4_rn = nn.Conv2d(
-            in_shape[3], out_shape4, kernel_size=3, stride=1, padding=1, bias=False, groups=groups
-        )
-
-    return scratch
-
-
-class ResidualConvUnit(nn.Module):
-    """Residual convolution module."""
-
-    def __init__(self, features, activation, bn):
-        """Init.
-
-        Args:
-            features (int): number of features
-        """
-        super().__init__()
-
-        self.bn = bn
-
-        self.groups = 1
-
-        self.conv1 = nn.Conv2d(features, features, kernel_size=3, stride=1, padding=1, bias=True, groups=self.groups)
-
-        self.conv2 = nn.Conv2d(features, features, kernel_size=3, stride=1, padding=1, bias=True, groups=self.groups)
-
-        if self.bn:
-            self.bn1 = nn.BatchNorm2d(features)
-            self.bn2 = nn.BatchNorm2d(features)
-
-        self.activation = activation
-
-        self.skip_add = nn.quantized.FloatFunctional()
-
-    def forward(self, x):
-        """Forward pass.
-
-        Args:
-            x (tensor): input
-
-        Returns:
-            tensor: output
-        """
-
-        out = self.activation(x)
-        out = self.conv1(out)
-        if self.bn:
-            out = self.bn1(out)
-
-        out = self.activation(out)
-        out = self.conv2(out)
-        if self.bn:
-            out = self.bn2(out)
-
-        if self.groups > 1:
-            out = self.conv_merge(out)
-
-        return self.skip_add.add(out, x)
-
-
-class FeatureFusionBlock(nn.Module):
-    """Feature fusion block."""
-
-    def __init__(self, features, activation, deconv=False, bn=False, expand=False, align_corners=True, size=None):
-        """Init.
-
-        Args:
-            features (int): number of features
-        """
-        super(FeatureFusionBlock, self).__init__()
-
-        self.deconv = deconv
-        self.align_corners = align_corners
-
-        self.groups = 1
-
-        self.expand = expand
-        out_features = features
-        if self.expand:
-            out_features = features // 2
-
-        self.out_conv = nn.Conv2d(features, out_features, kernel_size=1, stride=1, padding=0, bias=True, groups=1)
-
-        self.resConfUnit1 = ResidualConvUnit(features, activation, bn)
-        self.resConfUnit2 = ResidualConvUnit(features, activation, bn)
-
-        self.skip_add = nn.quantized.FloatFunctional()
-
-        self.size = size
-
-    def forward(self, *xs, size=None):
-        """Forward pass.
-
-        Returns:
-            tensor: output
-        """
-        output = xs[0]
-
-        if len(xs) == 2:
-            res = self.resConfUnit1(xs[1])
-            output = self.skip_add.add(output, res)
-
-        output = self.resConfUnit2(output)
-
-        if (size is None) and (self.size is None):
-            modifier = {"scale_factor": 2}
-        elif size is None:
-            modifier = {"size": self.size}
-        else:
-            modifier = {"size": size}
-
-        output = nn.functional.interpolate(output, **modifier, mode="bilinear", align_corners=self.align_corners)
-
-        output = self.out_conv(output)
-
-        return output

invokeai/backend/image_util/depth_anything/model/dpt.py

@@ -1,183 +0,0 @@
-from pathlib import Path
-
-import torch
-import torch.nn as nn
-import torch.nn.functional as F
-
-from .blocks import FeatureFusionBlock, _make_scratch
-
-torchhub_path = Path(__file__).parent.parent / "torchhub"
-
-
-def _make_fusion_block(features, use_bn, size=None):
-    return FeatureFusionBlock(
-        features,
-        nn.ReLU(False),
-        deconv=False,
-        bn=use_bn,
-        expand=False,
-        align_corners=True,
-        size=size,
-    )
-
-
-class DPTHead(nn.Module):
-    def __init__(self, nclass, in_channels, features, out_channels, use_bn=False, use_clstoken=False):
-        super(DPTHead, self).__init__()
-
-        self.nclass = nclass
-        self.use_clstoken = use_clstoken
-
-        self.projects = nn.ModuleList(
-            [
-                nn.Conv2d(
-                    in_channels=in_channels,
-                    out_channels=out_channel,
-                    kernel_size=1,
-                    stride=1,
-                    padding=0,
-                )
-                for out_channel in out_channels
-            ]
-        )
-
-        self.resize_layers = nn.ModuleList(
-            [
-                nn.ConvTranspose2d(
-                    in_channels=out_channels[0], out_channels=out_channels[0], kernel_size=4, stride=4, padding=0
-                ),
-                nn.ConvTranspose2d(
-                    in_channels=out_channels[1], out_channels=out_channels[1], kernel_size=2, stride=2, padding=0
-                ),
-                nn.Identity(),
-                nn.Conv2d(
-                    in_channels=out_channels[3], out_channels=out_channels[3], kernel_size=3, stride=2, padding=1
-                ),
-            ]
-        )
-
-        if use_clstoken:
-            self.readout_projects = nn.ModuleList()
-            for _ in range(len(self.projects)):
-                self.readout_projects.append(nn.Sequential(nn.Linear(2 * in_channels, in_channels), nn.GELU()))
-
-        self.scratch = _make_scratch(
-            out_channels,
-            features,
-            groups=1,
-            expand=False,
-        )
-
-        self.scratch.stem_transpose = None
-
-        self.scratch.refinenet1 = _make_fusion_block(features, use_bn)
-        self.scratch.refinenet2 = _make_fusion_block(features, use_bn)
-        self.scratch.refinenet3 = _make_fusion_block(features, use_bn)
-        self.scratch.refinenet4 = _make_fusion_block(features, use_bn)
-
-        head_features_1 = features
-        head_features_2 = 32
-
-        if nclass > 1:
-            self.scratch.output_conv = nn.Sequential(
-                nn.Conv2d(head_features_1, head_features_1, kernel_size=3, stride=1, padding=1),
-                nn.ReLU(True),
-                nn.Conv2d(head_features_1, nclass, kernel_size=1, stride=1, padding=0),
-            )
-        else:
-            self.scratch.output_conv1 = nn.Conv2d(
-                head_features_1, head_features_1 // 2, kernel_size=3, stride=1, padding=1
-            )
-
-            self.scratch.output_conv2 = nn.Sequential(
-                nn.Conv2d(head_features_1 // 2, head_features_2, kernel_size=3, stride=1, padding=1),
-                nn.ReLU(True),
-                nn.Conv2d(head_features_2, 1, kernel_size=1, stride=1, padding=0),
-                nn.ReLU(True),
-                nn.Identity(),
-            )
-
-    def forward(self, out_features, patch_h, patch_w):
-        out = []
-        for i, x in enumerate(out_features):
-            if self.use_clstoken:
-                x, cls_token = x[0], x[1]
-                readout = cls_token.unsqueeze(1).expand_as(x)
-                x = self.readout_projects[i](torch.cat((x, readout), -1))
-            else:
-                x = x[0]
-
-            x = x.permute(0, 2, 1).reshape((x.shape[0], x.shape[-1], patch_h, patch_w))
-
-            x = self.projects[i](x)
-            x = self.resize_layers[i](x)
-
-            out.append(x)
-
-        layer_1, layer_2, layer_3, layer_4 = out
-
-        layer_1_rn = self.scratch.layer1_rn(layer_1)
-        layer_2_rn = self.scratch.layer2_rn(layer_2)
-        layer_3_rn = self.scratch.layer3_rn(layer_3)
-        layer_4_rn = self.scratch.layer4_rn(layer_4)
-
-        path_4 = self.scratch.refinenet4(layer_4_rn, size=layer_3_rn.shape[2:])
-        path_3 = self.scratch.refinenet3(path_4, layer_3_rn, size=layer_2_rn.shape[2:])
-        path_2 = self.scratch.refinenet2(path_3, layer_2_rn, size=layer_1_rn.shape[2:])
-        path_1 = self.scratch.refinenet1(path_2, layer_1_rn)
-
-        out = self.scratch.output_conv1(path_1)
-        out = F.interpolate(out, (int(patch_h * 14), int(patch_w * 14)), mode="bilinear", align_corners=True)
-        out = self.scratch.output_conv2(out)
-
-        return out
-
-
-class DPT_DINOv2(nn.Module):
-    def __init__(
-        self,
-        features,
-        out_channels,
-        encoder="vitl",
-        use_bn=False,
-        use_clstoken=False,
-    ):
-        super(DPT_DINOv2, self).__init__()
-
-        assert encoder in ["vits", "vitb", "vitl"]
-
-        # # in case the Internet connection is not stable, please load the DINOv2 locally
-        # if use_local:
-        #     self.pretrained = torch.hub.load(
-        #         torchhub_path / "facebookresearch_dinov2_main",
-        #         "dinov2_{:}14".format(encoder),
-        #         source="local",
-        #         pretrained=False,
-        #     )
-        # else:
-        #     self.pretrained = torch.hub.load(
-        #         "facebookresearch/dinov2",
-        #         "dinov2_{:}14".format(encoder),
-        #     )
-
-        self.pretrained = torch.hub.load(
-            "facebookresearch/dinov2",
-            "dinov2_{:}14".format(encoder),
-        )
-
-        dim = self.pretrained.blocks[0].attn.qkv.in_features
-
-        self.depth_head = DPTHead(1, dim, features, out_channels=out_channels, use_bn=use_bn, use_clstoken=use_clstoken)
-
-    def forward(self, x):
-        h, w = x.shape[-2:]
-
-        features = self.pretrained.get_intermediate_layers(x, 4, return_class_token=True)
-
-        patch_h, patch_w = h // 14, w // 14
-
-        depth = self.depth_head(features, patch_h, patch_w)
-        depth = F.interpolate(depth, size=(h, w), mode="bilinear", align_corners=True)
-        depth = F.relu(depth)
-
-        return depth.squeeze(1)

invokeai/backend/image_util/depth_anything/utilities/util.py

@@ -1,227 +0,0 @@
-import math
-
-import cv2
-import numpy as np
-import torch
-import torch.nn.functional as F
-
-
-def apply_min_size(sample, size, image_interpolation_method=cv2.INTER_AREA):
-    """Rezise the sample to ensure the given size. Keeps aspect ratio.
-
-    Args:
-        sample (dict): sample
-        size (tuple): image size
-
-    Returns:
-        tuple: new size
-    """
-    shape = list(sample["disparity"].shape)
-
-    if shape[0] >= size[0] and shape[1] >= size[1]:
-        return sample
-
-    scale = [0, 0]
-    scale[0] = size[0] / shape[0]
-    scale[1] = size[1] / shape[1]
-
-    scale = max(scale)
-
-    shape[0] = math.ceil(scale * shape[0])
-    shape[1] = math.ceil(scale * shape[1])
-
-    # resize
-    sample["image"] = cv2.resize(sample["image"], tuple(shape[::-1]), interpolation=image_interpolation_method)
-
-    sample["disparity"] = cv2.resize(sample["disparity"], tuple(shape[::-1]), interpolation=cv2.INTER_NEAREST)
-    sample["mask"] = cv2.resize(
-        sample["mask"].astype(np.float32),
-        tuple(shape[::-1]),
-        interpolation=cv2.INTER_NEAREST,
-    )
-    sample["mask"] = sample["mask"].astype(bool)
-
-    return tuple(shape)
-
-
-class Resize(object):
-    """Resize sample to given size (width, height)."""
-
-    def __init__(
-        self,
-        width,
-        height,
-        resize_target=True,
-        keep_aspect_ratio=False,
-        ensure_multiple_of=1,
-        resize_method="lower_bound",
-        image_interpolation_method=cv2.INTER_AREA,
-    ):
-        """Init.
-
-        Args:
-            width (int): desired output width
-            height (int): desired output height
-            resize_target (bool, optional):
-                True: Resize the full sample (image, mask, target).
-                False: Resize image only.
-                Defaults to True.
-            keep_aspect_ratio (bool, optional):
-                True: Keep the aspect ratio of the input sample.
-                Output sample might not have the given width and height, and
-                resize behaviour depends on the parameter 'resize_method'.
-                Defaults to False.
-            ensure_multiple_of (int, optional):
-                Output width and height is constrained to be multiple of this parameter.
-                Defaults to 1.
-            resize_method (str, optional):
-                "lower_bound": Output will be at least as large as the given size.
-                "upper_bound": Output will be at max as large as the given size. (Output size might be smaller
-                    than given size.)
-                "minimal": Scale as least as possible.  (Output size might be smaller than given size.)
-                Defaults to "lower_bound".
-        """
-        self.__width = width
-        self.__height = height
-
-        self.__resize_target = resize_target
-        self.__keep_aspect_ratio = keep_aspect_ratio
-        self.__multiple_of = ensure_multiple_of
-        self.__resize_method = resize_method
-        self.__image_interpolation_method = image_interpolation_method
-
-    def constrain_to_multiple_of(self, x, min_val=0, max_val=None):
-        y = (np.round(x / self.__multiple_of) * self.__multiple_of).astype(int)
-
-        if max_val is not None and y > max_val:
-            y = (np.floor(x / self.__multiple_of) * self.__multiple_of).astype(int)
-
-        if y < min_val:
-            y = (np.ceil(x / self.__multiple_of) * self.__multiple_of).astype(int)
-
-        return y
-
-    def get_size(self, width, height):
-        # determine new height and width
-        scale_height = self.__height / height
-        scale_width = self.__width / width
-
-        if self.__keep_aspect_ratio:
-            if self.__resize_method == "lower_bound":
-                # scale such that output size is lower bound
-                if scale_width > scale_height:
-                    # fit width
-                    scale_height = scale_width
-                else:
-                    # fit height
-                    scale_width = scale_height
-            elif self.__resize_method == "upper_bound":
-                # scale such that output size is upper bound
-                if scale_width < scale_height:
-                    # fit width
-                    scale_height = scale_width
-                else:
-                    # fit height
-                    scale_width = scale_height
-            elif self.__resize_method == "minimal":
-                # scale as least as possbile
-                if abs(1 - scale_width) < abs(1 - scale_height):
-                    # fit width
-                    scale_height = scale_width
-                else:
-                    # fit height
-                    scale_width = scale_height
-            else:
-                raise ValueError(f"resize_method {self.__resize_method} not implemented")
-
-        if self.__resize_method == "lower_bound":
-            new_height = self.constrain_to_multiple_of(scale_height * height, min_val=self.__height)
-            new_width = self.constrain_to_multiple_of(scale_width * width, min_val=self.__width)
-        elif self.__resize_method == "upper_bound":
-            new_height = self.constrain_to_multiple_of(scale_height * height, max_val=self.__height)
-            new_width = self.constrain_to_multiple_of(scale_width * width, max_val=self.__width)
-        elif self.__resize_method == "minimal":
-            new_height = self.constrain_to_multiple_of(scale_height * height)
-            new_width = self.constrain_to_multiple_of(scale_width * width)
-        else:
-            raise ValueError(f"resize_method {self.__resize_method} not implemented")
-
-        return (new_width, new_height)
-
-    def __call__(self, sample):
-        width, height = self.get_size(sample["image"].shape[1], sample["image"].shape[0])
-
-        # resize sample
-        sample["image"] = cv2.resize(
-            sample["image"],
-            (width, height),
-            interpolation=self.__image_interpolation_method,
-        )
-
-        if self.__resize_target:
-            if "disparity" in sample:
-                sample["disparity"] = cv2.resize(
-                    sample["disparity"],
-                    (width, height),
-                    interpolation=cv2.INTER_NEAREST,
-                )
-
-            if "depth" in sample:
-                sample["depth"] = cv2.resize(sample["depth"], (width, height), interpolation=cv2.INTER_NEAREST)
-
-            if "semseg_mask" in sample:
-                # sample["semseg_mask"] = cv2.resize(
-                #     sample["semseg_mask"], (width, height), interpolation=cv2.INTER_NEAREST
-                # )
-                sample["semseg_mask"] = F.interpolate(
-                    torch.from_numpy(sample["semseg_mask"]).float()[None, None, ...], (height, width), mode="nearest"
-                ).numpy()[0, 0]
-
-            if "mask" in sample:
-                sample["mask"] = cv2.resize(
-                    sample["mask"].astype(np.float32),
-                    (width, height),
-                    interpolation=cv2.INTER_NEAREST,
-                )
-                # sample["mask"] = sample["mask"].astype(bool)
-
-        # print(sample['image'].shape, sample['depth'].shape)
-        return sample
-
-
-class NormalizeImage(object):
-    """Normlize image by given mean and std."""
-
-    def __init__(self, mean, std):
-        self.__mean = mean
-        self.__std = std
-
-    def __call__(self, sample):
-        sample["image"] = (sample["image"] - self.__mean) / self.__std
-
-        return sample
-
-
-class PrepareForNet(object):
-    """Prepare sample for usage as network input."""
-
-    def __init__(self):
-        pass
-
-    def __call__(self, sample):
-        image = np.transpose(sample["image"], (2, 0, 1))
-        sample["image"] = np.ascontiguousarray(image).astype(np.float32)
-
-        if "mask" in sample:
-            sample["mask"] = sample["mask"].astype(np.float32)
-            sample["mask"] = np.ascontiguousarray(sample["mask"])
-
-        if "depth" in sample:
-            depth = sample["depth"].astype(np.float32)
-            sample["depth"] = np.ascontiguousarray(depth)
-
-        if "semseg_mask" in sample:
-            sample["semseg_mask"] = sample["semseg_mask"].astype(np.float32)
-            sample["semseg_mask"] = np.ascontiguousarray(sample["semseg_mask"])
-
-        return sample

invokeai/frontend/web/.storybook/preview.tsx

@@ -6,6 +6,7 @@ import { Provider } from 'react-redux';
 import ThemeLocaleProvider from '../src/app/components/ThemeLocaleProvider';
 import { $baseUrl } from '../src/app/store/nanostores/baseUrl';
 import { createStore } from '../src/app/store/store';
+import { Container } from '@chakra-ui/react';
 // TODO: Disabled for IDE performance issues with our translation JSON
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore

invokeai/frontend/web/docs/README.md

@@ -1,51 +1,79 @@
-# Invoke UI
+# InvokeAI Web UI
 
 <!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->
 
 <!-- code_chunk_output -->
 
-- [Invoke UI](#invoke-ui)
+- [InvokeAI Web UI](#invokeai-web-ui)
   - [Core Libraries](#core-libraries)
+    - [Redux Toolkit](#redux-toolkit)
+    - [Socket\.IO](#socketio)
+    - [Chakra UI](#chakra-ui)
+    - [KonvaJS](#konvajs)
+    - [Vite](#vite)
+    - [i18next & Weblate](#i18next--weblate)
+    - [openapi-typescript](#openapi-typescript)
+    - [reactflow](#reactflow)
+    - [zod](#zod)
+  - [Client Types Generation](#client-types-generation)
   - [Package Scripts](#package-scripts)
-    - [Client Types Generation](#client-types-generation)
   - [Contributing](#contributing)
-    - [Localization](#localization)
     - [Dev Environment](#dev-environment)
-    - [VSCode Remote Dev](#vscode-remote-dev)
+      - [VSCode Remote Dev](#vscode-remote-dev)
+    - [Production builds](#production-builds)
 
 <!-- /code_chunk_output -->
 
+The UI is a fairly straightforward Typescript React app.
+
 ## Core Libraries
 
-Invoke's UI is made possible by a number of excellent open-source libraries. The most heavily-used are listed below, but there are many others.
+InvokeAI's UI is made possible by a number of excellent open-source libraries. The most heavily-used are listed below, but there are many others.
 
-- [Redux Toolkit]
+### Redux Toolkit
-- [redux-remember]
-- [Socket.IO]
-- [Chakra UI]
-- [KonvaJS]
-- [Vite]
-- [openapi-typescript]
-- [reactflow]
-- [zod]
 
-## Package Scripts
+[Redux Toolkit] is used for state management and fetching/caching:
 
-See `package.json` for all scripts.
+- `RTK-Query` for data fetching and caching
+- `createAsyncThunk` for a couple other HTTP requests
+- `createEntityAdapter` to normalize things like images and models
+- `createListenerMiddleware` for async workflows
 
-Run with `pnpm <script name>`.
+We use [redux-remember] for persistence.
 
-- `dev`: run the frontend in dev mode, enabling hot reloading
+### Socket\.IO
-- `build`: run all checks (madge, eslint, prettier, tsc) and then build the frontend
-- `typegen`: generate types from the OpenAPI schema (see [Client Types Generation])
-- `lint:madge`: check frontend for circular dependencies
-- `lint:eslint`: check frontend for code quality
-- `lint:prettier`: check frontend for code formatting
-- `lint:tsc`: check frontend for type issues
-- `lint`: run all checks concurrently
-- `fix`: run `eslint` and `prettier`, fixing fixable issues
 
-### Client Types Generation
+[Socket.IO] is used for server-to-client events, like generation process and queue state changes.
+
+### Chakra UI
+
+[Chakra UI] is our primary UI library, but we also use a few components from [Mantine v6].
+
+### KonvaJS
+
+[KonvaJS] powers the canvas. In the future, we'd like to explore [PixiJS] or WebGPU.
+
+### Vite
+
+[Vite] is our bundler.
+
+### i18next & Weblate
+
+We use [i18next] for localization, but translation to languages other than English happens on our [Weblate] project. **Only the English source strings should be changed on this repo.**
+
+### openapi-typescript
+
+[openapi-typescript] is used to generate types from the server's OpenAPI schema. See TYPES_CODEGEN.md.
+
+### reactflow
+
+[reactflow] powers the Workflow Editor.
+
+### zod
+
+[zod] schemas are used to model data structures and provide runtime validation.
+
+## Client Types Generation
 
 We use [openapi-typescript] to generate types from the app's OpenAPI schema.
 
@@ -60,18 +88,28 @@ python scripts/invokeai-web.py
 pnpm typegen
 ```
 
+## Package Scripts
+
+See `package.json` for all scripts.
+
+Run with `pnpm <script name>`.
+
+- `dev`: run the frontend in dev mode, enabling hot reloading
+- `build`: run all checks (madge, eslint, prettier, tsc) and then build the frontend
+- `typegen`: generate types from the OpenAPI schema (see [Client Types Generation](#client-types-generation))
+- `lint:madge`: check frontend for circular dependencies
+- `lint:eslint`: check frontend for code quality
+- `lint:prettier`: check frontend for code formatting
+- `lint:tsc`: check frontend for type issues
+- `lint`: run all checks concurrently
+- `fix`: run `eslint` and `prettier`, fixing fixable issues
+
 ## Contributing
 
-Thanks for your interest in contributing to the Invoke Web UI!
+Thanks for your interest in contributing to the InvokeAI Web UI!
 
 We encourage you to ping @psychedelicious and @blessedcoolant on [discord] if you want to contribute, just to touch base and ensure your work doesn't conflict with anything else going on. The project is very active.
 
-### Localization
-
-We use [i18next] for localization, but translation to languages other than English happens on our [Weblate] project.
-
-**Only the English source strings should be changed on this repo.**
-
 ### Dev Environment
 
 Install [node] and [pnpm].
@@ -80,19 +118,23 @@ From `invokeai/frontend/web/` run `pnpm i` to get everything set up.
 
 Start everything in dev mode:
 
-1. From `invokeai/frontend/web/`: `pnpm dev`
+1. Start the dev server: `pnpm dev`
-2. From repo root: `python scripts/invokeai-web.py`
+2. Start the InvokeAI Nodes backend: `python scripts/invokeai-web.py # run from the repo root`
 3. Point your browser to the dev server address e.g. <http://localhost:5173/>
 
-### VSCode Remote Dev
+#### VSCode Remote Dev
 
-We've noticed an intermittent issue with the VSCode Remote Dev port forwarding. If you use this feature of VSCode, you may intermittently click the Invoke button and then get nothing until the request times out.
+We've noticed an intermittent issue with the VSCode Remote Dev port forwarding. If you use this feature of VSCode, you may intermittently click the Invoke button and then get nothing until the request times out. Suggest disabling the IDE's port forwarding feature and doing it manually via SSH:
 
-We suggest disabling the IDE's port forwarding feature and doing it manually via SSH:
+`ssh -L 9090:localhost:9090 -L 5173:localhost:5173 user@host`
 
-```sh
+### Production builds
-ssh -L 9090:localhost:9090 -L 5173:localhost:5173 user@host
+
-```
+For a number of technical and logistical reasons, we need to commit UI build artefacts to the repo.
+
+If you submit a PR, there is a good chance we will ask you to include a separate commit with a build of the app.
+
+To build for production, run `pnpm build`.
 
 [node]: https://nodejs.org/en/download/
 [pnpm]: https://github.com/pnpm/pnpm
@@ -101,11 +143,12 @@ ssh -L 9090:localhost:9090 -L 5173:localhost:5173 user@host
 [redux-remember]: https://github.com/zewish/redux-remember
 [Socket.IO]: https://github.com/socketio/socket.io
 [Chakra UI]: https://github.com/chakra-ui/chakra-ui
+[Mantine v6]: https://v6.mantine.dev/
 [KonvaJS]: https://github.com/konvajs/react-konva
+[PixiJS]: https://github.com/pixijs/pixijs
 [Vite]: https://github.com/vitejs/vite
 [i18next]: https://github.com/i18next/react-i18next
 [Weblate]: https://hosted.weblate.org/engage/invokeai/
 [openapi-typescript]: https://github.com/drwpow/openapi-typescript
 [reactflow]: https://github.com/xyflow/xyflow
 [zod]: https://github.com/colinhacks/zod
-[Client Types Generation]: #client-types-generation

invokeai/frontend/web/docs/WORKFLOWS_DESIGN_IMPLEMENTATION.md

@@ -23,7 +23,7 @@
         - [Primitive Types](#primitive-types)
         - [Complex Types](#complex-types)
         - [Collection Types](#collection-types)
-        - [Collection or Scalar Types](#collection-or-scalar-types)
+        - [Polymorphic Types](#polymorphic-types)
         - [Optional Fields](#optional-fields)
       - [Building Field Input Templates](#building-field-input-templates)
       - [Building Field Output Templates](#building-field-output-templates)

invokeai/frontend/web/package.json

@@ -32,8 +32,8 @@
     "fix": "eslint --fix . && prettier --log-level warn --write .",
     "preinstall": "npx only-allow pnpm",
     "postinstall": "pnpm run theme",
-    "theme": "chakra-cli tokens node_modules/@invoke-ai/ui-library",
+    "theme": "chakra-cli tokens node_modules/@invoke-ai/ui",
-    "theme:watch": "chakra-cli tokens node_modules/@invoke-ai/ui-library --watch",
+    "theme:watch": "chakra-cli tokens node_modules/@invoke-ai/ui --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "unimported": "npx unimported"
@@ -52,12 +52,21 @@
     }
   },
   "dependencies": {
+    "@chakra-ui/anatomy": "^2.2.2",
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/layout": "^2.3.1",
+    "@chakra-ui/portal": "^2.1.0",
+    "@chakra-ui/react": "^2.8.2",
     "@chakra-ui/react-use-size": "^2.1.0",
+    "@chakra-ui/styled-system": "^2.9.2",
+    "@chakra-ui/theme-tools": "^2.1.2",
     "@dagrejs/graphlib": "^2.1.13",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
     "@fontsource-variable/inter": "^5.0.16",
-    "@invoke-ai/ui-library": "0.0.18-1a2150a.0",
+    "@invoke-ai/ui": "0.0.10",
     "@mantine/form": "6.0.21",
     "@nanostores/react": "^0.7.1",
     "@reduxjs/toolkit": "2.0.1",

invokeai/frontend/web/pnpm-lock.yaml

@@ -10,12 +10,30 @@ patchedDependencies:
     path: patches/reselect@5.0.1.patch
 
 dependencies:
+  '@chakra-ui/anatomy':
+    specifier: ^2.2.2
+    version: 2.2.2
+  '@chakra-ui/icons':
+    specifier: ^2.1.1
+    version: 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
+  '@chakra-ui/layout':
+    specifier: ^2.3.1
+    version: 2.3.1(@chakra-ui/system@2.6.2)(react@18.2.0)
+  '@chakra-ui/portal':
+    specifier: ^2.1.0
+    version: 2.1.0(react-dom@18.2.0)(react@18.2.0)
   '@chakra-ui/react':
     specifier: ^2.8.2
     version: 2.8.2(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.48)(framer-motion@10.18.0)(react-dom@18.2.0)(react@18.2.0)
   '@chakra-ui/react-use-size':
     specifier: ^2.1.0
     version: 2.1.0(react@18.2.0)
+  '@chakra-ui/styled-system':
+    specifier: ^2.9.2
+    version: 2.9.2
+  '@chakra-ui/theme-tools':
+    specifier: ^2.1.2
+    version: 2.1.2(@chakra-ui/styled-system@2.9.2)
   '@dagrejs/graphlib':
     specifier: ^2.1.13
     version: 2.1.13
@@ -25,12 +43,18 @@ dependencies:
   '@dnd-kit/utilities':
     specifier: ^3.2.2
     version: 3.2.2(react@18.2.0)
+  '@emotion/react':
+    specifier: ^11.11.3
+    version: 11.11.3(@types/react@18.2.48)(react@18.2.0)
+  '@emotion/styled':
+    specifier: ^11.11.0
+    version: 11.11.0(@emotion/react@11.11.3)(@types/react@18.2.48)(react@18.2.0)
   '@fontsource-variable/inter':
     specifier: ^5.0.16
     version: 5.0.16
-  '@invoke-ai/ui-library':
+  '@invoke-ai/ui':
-    specifier: 0.0.18-1a2150a.0
+    specifier: 0.0.10
-    version: 0.0.18-1a2150a.0(@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.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0)
+    version: 0.0.10(@chakra-ui/anatomy@2.2.2)(@chakra-ui/icons@2.1.1)(@chakra-ui/layout@2.3.1)(@chakra-ui/portal@2.1.0)(@chakra-ui/react@2.8.2)(@chakra-ui/styled-system@2.9.2)(@chakra-ui/theme-tools@2.1.2)(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@fontsource-variable/inter@5.0.16)(@nanostores/react@0.7.1)(chakra-react-select@4.7.6)(framer-motion@10.18.0)(lodash-es@4.17.21)(nanostores@0.9.5)(overlayscrollbars-react@0.5.3)(overlayscrollbars@2.4.6)(react-dom@18.2.0)(react-i18next@14.0.0)(react-select@5.8.0)(react@18.2.0)
   '@mantine/form':
     specifier: 6.0.21
     version: 6.0.21(react@18.2.0)
@@ -332,92 +356,6 @@ packages:
       '@jridgewell/trace-mapping': 0.3.21
     dev: true
 
-  /@ark-ui/anatomy@1.3.0(@internationalized/date@3.5.1):
-    resolution: {integrity: sha512-1yG2MrzUlix6KthjQMCNiHnkXrWwEdFAX6D+HqGJaNu0XvaGul2J+wDNtjsdX+gxiWu1nXXEEOAWlFVYMUf65w==}
-    dependencies:
-      '@zag-js/accordion': 0.32.1
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/avatar': 0.32.1
-      '@zag-js/carousel': 0.32.1
-      '@zag-js/checkbox': 0.32.1
-      '@zag-js/color-picker': 0.32.1
-      '@zag-js/color-utils': 0.32.1
-      '@zag-js/combobox': 0.32.1
-      '@zag-js/date-picker': 0.32.1
-      '@zag-js/date-utils': 0.32.1(@internationalized/date@3.5.1)
-      '@zag-js/dialog': 0.32.1
-      '@zag-js/editable': 0.32.1
-      '@zag-js/file-upload': 0.32.1
-      '@zag-js/hover-card': 0.32.1
-      '@zag-js/menu': 0.32.1
-      '@zag-js/number-input': 0.32.1
-      '@zag-js/pagination': 0.32.1
-      '@zag-js/pin-input': 0.32.1
-      '@zag-js/popover': 0.32.1
-      '@zag-js/presence': 0.32.1
-      '@zag-js/progress': 0.32.1
-      '@zag-js/radio-group': 0.32.1
-      '@zag-js/rating-group': 0.32.1
-      '@zag-js/select': 0.32.1
-      '@zag-js/slider': 0.32.1
-      '@zag-js/splitter': 0.32.1
-      '@zag-js/switch': 0.32.1
-      '@zag-js/tabs': 0.32.1
-      '@zag-js/tags-input': 0.32.1
-      '@zag-js/toast': 0.32.1
-      '@zag-js/toggle-group': 0.32.1
-      '@zag-js/tooltip': 0.32.1
-    transitivePeerDependencies:
-      - '@internationalized/date'
-    dev: false
-
-  /@ark-ui/react@1.3.0(@internationalized/date@3.5.1)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-JHjNoIX50+mUCTaEGMjfGQWGGi31pKsV646jZJlR/1xohpYJigzg8BvO97cTsVk8fwtur+cm11gz3Nf7f5QUnA==}
-    peerDependencies:
-      react: '>=18.0.0'
-      react-dom: '>=18.0.0'
-    dependencies:
-      '@ark-ui/anatomy': 1.3.0(@internationalized/date@3.5.1)
-      '@zag-js/accordion': 0.32.1
-      '@zag-js/avatar': 0.32.1
-      '@zag-js/carousel': 0.32.1
-      '@zag-js/checkbox': 0.32.1
-      '@zag-js/color-picker': 0.32.1
-      '@zag-js/color-utils': 0.32.1
-      '@zag-js/combobox': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/date-picker': 0.32.1
-      '@zag-js/date-utils': 0.32.1(@internationalized/date@3.5.1)
-      '@zag-js/dialog': 0.32.1
-      '@zag-js/editable': 0.32.1
-      '@zag-js/file-upload': 0.32.1
-      '@zag-js/hover-card': 0.32.1
-      '@zag-js/menu': 0.32.1
-      '@zag-js/number-input': 0.32.1
-      '@zag-js/pagination': 0.32.1
-      '@zag-js/pin-input': 0.32.1
-      '@zag-js/popover': 0.32.1
-      '@zag-js/presence': 0.32.1
-      '@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/select': 0.32.1
-      '@zag-js/slider': 0.32.1
-      '@zag-js/splitter': 0.32.1
-      '@zag-js/switch': 0.32.1
-      '@zag-js/tabs': 0.32.1
-      '@zag-js/tags-input': 0.32.1
-      '@zag-js/toast': 0.32.1
-      '@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)
-    transitivePeerDependencies:
-      - '@internationalized/date'
-    dev: false
-
   /@arthurgeron/eslint-plugin-react-usememo@2.2.3:
     resolution: {integrity: sha512-YJG+8hULmhHAxztaANswpa9hWNqEOSvbZcbd6R/JQzyNlEZ49Xh97kqZGuJGZ74rrmULckEO1m3Jh5ctqrGA2A==}
     dependencies:
@@ -2907,7 +2845,7 @@ packages:
     resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
     dependencies:
       '@babel/helper-module-imports': 7.22.15
-      '@babel/runtime': 7.23.8
+      '@babel/runtime': 7.23.6
       '@emotion/hash': 0.9.1
       '@emotion/memoize': 0.8.1
       '@emotion/serialize': 1.1.3
@@ -2966,7 +2904,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.23.8
+      '@babel/runtime': 7.23.6
       '@emotion/babel-plugin': 11.11.0
       '@emotion/cache': 11.11.0
       '@emotion/serialize': 1.1.3
@@ -3002,7 +2940,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.23.8
+      '@babel/runtime': 7.23.6
       '@emotion/babel-plugin': 11.11.0
       '@emotion/is-prop-valid': 1.2.1
       '@emotion/react': 11.11.3(@types/react@18.2.48)(react@18.2.0)
@@ -3691,6 +3629,7 @@ packages:
     resolution: {integrity: sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==}
     dependencies:
       '@floating-ui/utils': 0.2.1
+    dev: true
 
   /@floating-ui/dom@1.5.3:
     resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==}
@@ -3704,6 +3643,7 @@ packages:
     dependencies:
       '@floating-ui/core': 1.5.3
       '@floating-ui/utils': 0.2.1
+    dev: true
 
   /@floating-ui/react-dom@2.0.6(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-IB8aCRFxr8nFkdYZgH+Otd9EVQPJoynxeFRGTB8voPoZMRWo8XjYuCRgpI1btvuKY69XMiLnW+ym7zoBHM90Rw==}
@@ -3722,6 +3662,7 @@ packages:
 
   /@floating-ui/utils@0.2.1:
     resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
+    dev: true
 
   /@fontsource-variable/inter@5.0.16:
     resolution: {integrity: sha512-k+BUNqksTL+AN+o+OV7ILeiE9B5M5X+/jA7LWvCwjbV9ovXTqZyKRhA/x7uYv/ml8WQ0XNLBM7cRFIx4jW0/hg==}
@@ -3747,26 +3688,31 @@ packages:
     resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
     dev: true
 
-  /@internationalized/date@3.5.1:
+  /@invoke-ai/ui@0.0.10(@chakra-ui/anatomy@2.2.2)(@chakra-ui/icons@2.1.1)(@chakra-ui/layout@2.3.1)(@chakra-ui/portal@2.1.0)(@chakra-ui/react@2.8.2)(@chakra-ui/styled-system@2.9.2)(@chakra-ui/theme-tools@2.1.2)(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@fontsource-variable/inter@5.0.16)(@nanostores/react@0.7.1)(chakra-react-select@4.7.6)(framer-motion@10.18.0)(lodash-es@4.17.21)(nanostores@0.9.5)(overlayscrollbars-react@0.5.3)(overlayscrollbars@2.4.6)(react-dom@18.2.0)(react-i18next@14.0.0)(react-select@5.8.0)(react@18.2.0):
-    resolution: {integrity: sha512-LUQIfwU9e+Fmutc/DpRTGXSdgYZLBegi4wygCWDSVmUdLTaMHsQyASDiJtREwanwKuQLq0hY76fCJ9J/9I2xOQ==}
+    resolution: {integrity: sha512-e3cX3g1xap57mkMfjsNznN6V9YS8qUTpSiyjSSr80HEsD3NjXxCoL+Ik6y/Na/KwXgcK00jM6H+xF6ahJFobvw==}
-    dependencies:
-      '@swc/helpers': 0.5.3
-    dev: false
-
-  /@internationalized/number@3.5.0:
-    resolution: {integrity: sha512-ZY1BW8HT9WKYvaubbuqXbbDdHhOUMfE2zHHFJeTppid0S+pc8HtdIxFxaYMsGjCb4UsF+MEJ4n2TfU7iHnUK8w==}
-    dependencies:
-      '@swc/helpers': 0.5.3
-    dev: false
-
-  /@invoke-ai/ui-library@0.0.18-1a2150a.0(@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.16)(@internationalized/date@3.5.1)(@types/react@18.2.48)(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-VIQO2QBxlsrg/eCOHDoMhyLMGLVUIQDZuh/blVDTpBvCxksRqDAt1yS6ggM3NXAiOnS4sa7wDfUo34W3MqH80w==, tarball: https://npm.pkg.github.com/download/@invoke-ai/ui-library/0.0.18-1a2150a.0/fb45c482279ebe318816b37ba4833f6d62e5f71b}
     peerDependencies:
+      '@chakra-ui/anatomy': ^2.2.2
+      '@chakra-ui/icons': ^2.1.1
+      '@chakra-ui/layout': ^2.3.1
+      '@chakra-ui/portal': ^2.1.0
+      '@chakra-ui/react': ^2.8.2
+      '@chakra-ui/styled-system': ^2.9.2
+      '@chakra-ui/theme-tools': ^2.1.2
+      '@emotion/react': ^11.11.3
+      '@emotion/styled': ^11.11.0
       '@fontsource-variable/inter': ^5.0.16
+      '@nanostores/react': ^0.7.1
+      chakra-react-select: ^4.7.6
+      framer-motion: ^10.18.0
+      lodash-es: ^4.17.21
+      nanostores: ^0.9.5
+      overlayscrollbars: ^2.4.6
+      overlayscrollbars-react: ^0.5.3
       react: ^18.2.0
       react-dom: ^18.2.0
+      react-i18next: ^14.0.0
+      react-select: ^5.8.0
     dependencies:
-      '@ark-ui/react': 1.3.0(@internationalized/date@3.5.1)(react-dom@18.2.0)(react@18.2.0)
       '@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)
@@ -3782,24 +3728,12 @@ packages:
       framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0)
       lodash-es: 4.17.21
       nanostores: 0.9.5
-      overlayscrollbars: 2.4.7
+      overlayscrollbars: 2.4.6
-      overlayscrollbars-react: 0.5.4(overlayscrollbars@2.4.7)(react@18.2.0)
+      overlayscrollbars-react: 0.5.3(overlayscrollbars@2.4.6)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      react-i18next: 14.0.1(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0)
+      react-i18next: 14.0.0(i18next@23.7.16)(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.48)(react-dom@18.2.0)(react@18.2.0)
-    transitivePeerDependencies:
-      - '@chakra-ui/form-control'
-      - '@chakra-ui/icon'
-      - '@chakra-ui/media-query'
-      - '@chakra-ui/menu'
-      - '@chakra-ui/spinner'
-      - '@chakra-ui/system'
-      - '@internationalized/date'
-      - '@types/react'
-      - i18next
-      - react-native
     dev: false
 
   /@isaacs/cliui@8.0.2:
@@ -5785,12 +5719,6 @@ packages:
     resolution: {integrity: sha512-9F4ys4C74eSTEUNndnER3VJ15oru2NumfQxS8geE+f3eB5xvfxpWyqE5XlVnxb/R14uoXi6SLbBwwiDSkv+XEw==}
     dev: true
 
-  /@swc/helpers@0.5.3:
-    resolution: {integrity: sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==}
-    dependencies:
-      tslib: 2.6.2
-    dev: false
-
   /@swc/types@0.1.5:
     resolution: {integrity: sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==}
     dev: true
@@ -6751,567 +6679,20 @@ packages:
       tslib: 1.14.1
     dev: true
 
-  /@zag-js/accordion@0.32.1:
-    resolution: {integrity: sha512-16beDVpEhXFQsQRMZLmHFruhGphSprJ5XrRu6+OM2U7aTulo1w3ENUd9uI+mIs4oTVO66lYI4Lp+dFcT2UUIYA==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/anatomy@0.32.1:
-    resolution: {integrity: sha512-bR+tfFfkbxwhBzGGjEQG+RUnbeCjMx7tWJxykGnGdVLwAh0wKTQBEfHEOCOQh5qU8RhKUieqemAdvc7oP3Tp4w==}
-    dev: false
-
-  /@zag-js/aria-hidden@0.32.1:
-    resolution: {integrity: sha512-kznwxvUUHDax8Kd7YNVVCzQcwGARTRaZNOcIkw7MTLE8g/pU+C4pYkwR9iqA7/8imGfjYrZfSsQqZRTb4bkS0g==}
-    dependencies:
-      '@zag-js/dom-query': 0.32.1
-    dev: false
-
-  /@zag-js/auto-resize@0.32.1:
-    resolution: {integrity: sha512-MO6N5gPs2xDKbFgrakn6LDWv1GgN8uhfwpsqchLJX+EaZVvLIz8cXFD+jDv3RjK+5GRWV4mIF+26SXuHRSt9Ug==}
-    dependencies:
-      '@zag-js/dom-query': 0.32.1
-    dev: false
-
-  /@zag-js/avatar@0.32.1:
-    resolution: {integrity: sha512-5P+95pkMX2Na4yljN1etdgYyA+3HPORjWKn0Y3JamkYIAqJwRFO+taEdSm/xcRkuT6aGA3luheUowjt8wZssyA==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/mutation-observer': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/carousel@0.32.1:
-    resolution: {integrity: sha512-S7dUrPtiLr42Fa+S3O18kqKVqSu2yuk67bqGDtppIZSaFOugYHK4feBkZqjKw+eF12NVRRVO2j+A40d3MvxbSA==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/checkbox@0.32.1:
-    resolution: {integrity: sha512-5reRreGyDZ5IlBNd5m1QrYXCehVIl/pmfKMEcAfad5DcgCaHGv5j76eahxbKln/8TEdwz4eWzBrqNtwSkKL5+w==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/form-utils': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-      '@zag-js/visually-hidden': 0.32.1
-    dev: false
-
-  /@zag-js/collection@0.32.1:
-    resolution: {integrity: sha512-dAzcVQ/n+xAYoxWB/65/CQinv66RNVuq5ig0fEYszBqP+HjFnOpeGkIrEvP+bFI38hFEViiGtfr6oGAsVByOVQ==}
-    dev: false
-
-  /@zag-js/color-picker@0.32.1:
-    resolution: {integrity: sha512-ov3FC+c2WBYmEGRXWFVb2jih2Ecejj5JqBjDL9iMLBs2KNY9jnpvtH7WnZbijNY+RMDBj+C/DNI7K2NVaamSIA==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/color-utils': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dismissable': 0.32.1
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/form-utils': 0.32.1
-      '@zag-js/popper': 0.32.1
-      '@zag-js/tabbable': 0.32.1
-      '@zag-js/text-selection': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-      '@zag-js/visually-hidden': 0.32.1
-    dev: false
-
-  /@zag-js/color-utils@0.32.1:
-    resolution: {integrity: sha512-AzupfOD7oD0mE+H9roTzwnLqtw1wYiJGOQKLPAwdwPQdznJUQD6sMOpxR/6RBuITVTm8Bl12Mr4+7s29LVJruw==}
-    dependencies:
-      '@zag-js/numeric-range': 0.32.1
-    dev: false
-
-  /@zag-js/combobox@0.32.1:
-    resolution: {integrity: sha512-skz2C5UxLD5JoYNP4hcPaQJu2cW7vycKqjDNI9ZtygSkZHOHx+JxpYiACBnr1vqzXatIOuDQm/HUuWW9yOT4eA==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/aria-hidden': 0.32.1
-      '@zag-js/collection': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dismissable': 0.32.1
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/mutation-observer': 0.32.1
-      '@zag-js/popper': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/core@0.32.1:
-    resolution: {integrity: sha512-F9F7920/CisoLWALQACIhqbMvemgbv86qBULJ+UEe+a/9XgGwPh9UGn/H/q5EWkNpgEapz2b3pl3ONgKmXsK1A==}
-    dependencies:
-      '@zag-js/store': 0.32.1
-      klona: 2.0.6
-    dev: false
-
-  /@zag-js/date-picker@0.32.1:
-    resolution: {integrity: sha512-n/hYmF+/R4+NuyfPRzCgeuLT6LJihKSuKzK29STPWy3sC/tBBHiqhNv1/4UKbatHUJXdBW2XF+N8Rw08RffcFQ==}
-    dependencies:
-      '@internationalized/date': 3.5.1
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/date-utils': 0.32.1(@internationalized/date@3.5.1)
-      '@zag-js/dismissable': 0.32.1
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/form-utils': 0.32.1
-      '@zag-js/live-region': 0.32.1
-      '@zag-js/popper': 0.32.1
-      '@zag-js/text-selection': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/date-utils@0.32.1(@internationalized/date@3.5.1):
-    resolution: {integrity: sha512-dbBDRSVr5pRUw3rXndyGuSshZiWqQI5JQO4D2KIFGkXzorj6WzoOpcO910Z7AdM/9cCAMpCjUrka8d8o9BpJBg==}
-    peerDependencies:
-      '@internationalized/date': '>=3.0.0'
-    dependencies:
-      '@internationalized/date': 3.5.1
-    dev: false
-
-  /@zag-js/dialog@0.32.1:
-    resolution: {integrity: sha512-czp+qXcdAOM70SrvDo4gBpYZx6gS6HXyrpiptW3+EHa2eiCfc/Z2w+Nu+ZadOTEQGgNWlKlCLW7Ery0i9mMDsw==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/aria-hidden': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dismissable': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/remove-scroll': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-      focus-trap: 7.5.4
-    dev: false
-
-  /@zag-js/dismissable@0.32.1:
-    resolution: {integrity: sha512-UIkG+9Eb5wrus2F2Dy4zqk0pwCV53sdnMYBxk9dpvDzBJHzW+InhVeg3UeKmPL8ELcYlhH/Bap99XCRJvxsXow==}
-    dependencies:
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/interact-outside': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/dom-event@0.32.1:
-    resolution: {integrity: sha512-wN6f5Kkf7C/YFN3wbEG3gUockSebyy1fPNL2BuL4C8PIP8vOD14hnHTzZWg5yYfO+veybIAL38r8I46C+bOVBQ==}
-    dependencies:
-      '@zag-js/text-selection': 0.32.1
-      '@zag-js/types': 0.32.1
-    dev: false
-
   /@zag-js/dom-query@0.16.0:
     resolution: {integrity: sha512-Oqhd6+biWyKnhKwFFuZrrf6lxBz2tX2pRQe6grUnYwO6HJ8BcbqZomy2lpOdr+3itlaUqx+Ywj5E5ZZDr/LBfQ==}
     dev: false
 
-  /@zag-js/dom-query@0.32.1:
-    resolution: {integrity: sha512-u6hrQHQ0/dcUi6xJn8d2Mu1ClN4KZpPqOKrJFSaxadWjSy+x0qp48WY2CBQ6gZ3j8IwR/XjzU9bu9wY5jJfHgA==}
-    dev: false
-
-  /@zag-js/editable@0.32.1:
-    resolution: {integrity: sha512-QEGnfp2P9nWVp9vGNWtszspvQcF3KtBRToZrv5/DT30Mpo/uPDKtqijLs0SnB/W60ELzcIRhK4J9taGoK8O8uw==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/form-utils': 0.32.1
-      '@zag-js/interact-outside': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/element-rect@0.32.1:
-    resolution: {integrity: sha512-tAmxgxU2LsByK8PIs/Cj6cBJ8xZCVXE9RoStxthhuPL7xKYUfZvFGuhHVOHTHd6sDKEqbj6K1ds/TGPuglIh4w==}
-    dev: false
-
   /@zag-js/element-size@0.10.5:
     resolution: {integrity: sha512-uQre5IidULANvVkNOBQ1tfgwTQcGl4hliPSe69Fct1VfYb2Fd0jdAcGzqQgPhfrXFpR62MxLPB7erxJ/ngtL8w==}
     dev: false
 
-  /@zag-js/element-size@0.32.1:
-    resolution: {integrity: sha512-ACklufmJQpah2UqwZUlYFaKi6uWfZBeTghtbfYHcDfzRbg2Hni612v8L1JeS4vAgjeDpcdHQpXXR4AZSpGZgNw==}
-    dev: false
-
-  /@zag-js/file-upload@0.32.1:
-    resolution: {integrity: sha512-cD0NRIDof9Vv2DemmnYe9ZPZxOZ6b8XZl8eq4G0e8+WLYtnRXyEURl8Dw0QJpfdDPQaHnnD4CNxPTQcLgP+9Sg==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/file-utils': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-      '@zag-js/visually-hidden': 0.32.1
-    dev: false
-
-  /@zag-js/file-utils@0.32.1:
-    resolution: {integrity: sha512-0PxTrljW51Lf9OCuYNlZuaLgF0v1NoVRzXa/osZ9HGceQjfo77R5G9u+/TP3u53W2PTxajEZ4eNzTibgpzNXFg==}
-    dev: false
-
   /@zag-js/focus-visible@0.16.0:
     resolution: {integrity: sha512-a7U/HSopvQbrDU4GLerpqiMcHKEkQkNPeDZJWz38cw/6Upunh41GjHetq5TB84hxyCaDzJ6q2nEdNoBQfC0FKA==}
     dependencies:
       '@zag-js/dom-query': 0.16.0
     dev: false
 
-  /@zag-js/form-utils@0.32.1:
-    resolution: {integrity: sha512-OemLBlHCHHm7t8wNcf78FRudRA7FegSgsNEzAjrRTyx+lJztDyHRLaoyI1gCEIg+0Kzl2nMxjOl4MStGsDj8iw==}
-    dependencies:
-      '@zag-js/mutation-observer': 0.32.1
-    dev: false
-
-  /@zag-js/hover-card@0.32.1:
-    resolution: {integrity: sha512-k66YK0z0P4LuK78+jnRoUPxJiM9GA0sbEEz3oPlvcFVXMMwnRTPNIw1OjksfAPI+Nvgg7H6D3A+7HCdRI/oBjw==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dismissable': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/popper': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/interact-outside@0.32.1:
-    resolution: {integrity: sha512-8zHuswfTAgfMCaQnp3N4WStvnL32VyxURafb21+mE4neAF/DaKfJHWnJpeUMG1Qh/eXsrMRBxVoX+nBMhHj9bg==}
-    dependencies:
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/tabbable': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/live-region@0.32.1:
-    resolution: {integrity: sha512-6/9QMLVZbTRh/G6MoJc/auN8r5vjdY9vUgNT680C2LOa2vnRR5/y0DkIpVgttNh1rSenQ/eLEYxp8hQF1rIYNw==}
-    dependencies:
-      '@zag-js/visually-hidden': 0.32.1
-    dev: false
-
-  /@zag-js/menu@0.32.1:
-    resolution: {integrity: sha512-IPsTljVF0N9xTwub1cpGl3GAG5ttAq3h38PdZERREzT3qRgw4v3K/I1TG2vIiDXgJz8UZzUKox6ZYdU7UIAkRA==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dismissable': 0.32.1
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/mutation-observer': 0.32.1
-      '@zag-js/popper': 0.32.1
-      '@zag-js/rect-utils': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/mutation-observer@0.32.1:
-    resolution: {integrity: sha512-/hlObxGnhAaYYVnwRJC227md0M3kSE6mO24vkqVGwq2GglS+u4zbVcBBUuWgHdMML+ZjIQrZuVycCBMfVlHq0g==}
-    dev: false
-
-  /@zag-js/number-input@0.32.1:
-    resolution: {integrity: sha512-atyIOvoMITb4hZtQym7yD6I7grvPW83UeMFO8hCQg3HWwd2zR4+63mouWuyMoWb4QrzVFRVQBaU8OG5xGlknEw==}
-    dependencies:
-      '@internationalized/number': 3.5.0
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/form-utils': 0.32.1
-      '@zag-js/mutation-observer': 0.32.1
-      '@zag-js/number-utils': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/number-utils@0.32.1:
-    resolution: {integrity: sha512-x/nttU31TtFVTqFBM8e3ZH/0MCc+u15WAfk0rT6ESkoZcdb80rTzZVMokCKCUdpi/JdB1vjEeCLSnj+ig8oAIQ==}
-    dev: false
-
-  /@zag-js/numeric-range@0.32.1:
-    resolution: {integrity: sha512-1Qe2URTenlrdsWuArlnQ+v5bBH2mHZD3XsK6jYV+C2lgatVzdcoN4GCSNTiF7w+So6J+NTeLMkVHMGCW1Kzx1g==}
-    dev: false
-
-  /@zag-js/pagination@0.32.1:
-    resolution: {integrity: sha512-lhogzKxJnx5D2Xoni/xm5rkOuy15KWSxqBHVwe8+j5aSNqMy7+aRtEN2F2VQCDVL/v1fdciQvOCA9udm37kZ4w==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/pin-input@0.32.1:
-    resolution: {integrity: sha512-d18cCXKUr7INL0Xm5KyIoiTRSNsPXfIlIEMl2HrAvM3r70wtEag0PmiDNA5NS2tB4LnnX0XowchGB4HsdFS/ng==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/form-utils': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-      '@zag-js/visually-hidden': 0.32.1
-    dev: false
-
-  /@zag-js/popover@0.32.1:
-    resolution: {integrity: sha512-B01if49v3crCjkvtSvIX4CBdT/475nj3DttOObc36s0YOxCEt3UihMITBD5JvIKwEqjZ6oU5t0sLcUYOqQ4f2A==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/aria-hidden': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dismissable': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/popper': 0.32.1
-      '@zag-js/remove-scroll': 0.32.1
-      '@zag-js/tabbable': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-      focus-trap: 7.5.4
-    dev: false
-
-  /@zag-js/popper@0.32.1:
-    resolution: {integrity: sha512-aQgogW1N4VreNACSQhXQoZeXtQQtB//FXUvt1CBnW2DtmZ6YkNnaAfn186Q2lkw2/T0chITRy3eYeviwMmMrqg==}
-    dependencies:
-      '@floating-ui/dom': 1.5.4
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/element-rect': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/presence@0.32.1:
-    resolution: {integrity: sha512-8189QMUf/L1dztAZdurx18ZwPyWlq58Mrd+GdATSaf8JstgrI1ovzVs606inQghWptKHMsH7dUIaV9UkhbSx3Q==}
-    dependencies:
-      '@zag-js/core': 0.32.1
-      '@zag-js/types': 0.32.1
-    dev: false
-
-  /@zag-js/progress@0.32.1:
-    resolution: {integrity: sha512-ClkQvNYnuIpKfAPUceZXY5E2m/3NnIm21cvHe4gAoJ88YdqEHd5rIRoHP63g8ET8Ct/2KkBRkgR+LrQnGQOomA==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/radio-group@0.32.1:
-    resolution: {integrity: sha512-NvdSjwRF38qIh0oM68jERf71uiwV2JFTrGeQEs3EIqONzULwL6jR2p4P1wm3JJNBAkSYBKZMER5cVUUcqM3kjQ==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/element-rect': 0.32.1
-      '@zag-js/form-utils': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-      '@zag-js/visually-hidden': 0.32.1
-    dev: false
-
-  /@zag-js/rating-group@0.32.1:
-    resolution: {integrity: sha512-RBaFRCw7P00bgTrEjUHT3h/OGRO8XmXKkQYqqhm1tsVbeTsT47iwHoc6XnMEiGBonaJDwN/J0oFasw7GNg5sow==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/form-utils': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/react@0.32.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-b1SB7hXXv1K6CmXkcy5Y7mb0YRWkyvulyhK8VW5O5hIAPuGxOTx70psmVeZbmVzhjdORCiro9jKx8Ec0LfolFg==}
-    peerDependencies:
-      react: '>=18.0.0'
-      react-dom: '>=18.0.0'
-    dependencies:
-      '@zag-js/core': 0.32.1
-      '@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)
-    dev: false
-
-  /@zag-js/rect-utils@0.32.1:
-    resolution: {integrity: sha512-cI07kgldjUZP+SLhXeG9VSl47nrENlC96Fs7jWcTfHj62rhdY8WsBJ0tiTztvwar9m1chwxXZwJowHN+nPIgDQ==}
-    dev: false
-
-  /@zag-js/remove-scroll@0.32.1:
-    resolution: {integrity: sha512-LyXt2rNMSKb9MKeJRyKTgpk4R7jdA+9kEQTSG5qyA94jo1og7FVgA1W/E+pNkdxDEk1VplL768VU6y7E/L3DHg==}
-    dependencies:
-      '@zag-js/dom-query': 0.32.1
-    dev: false
-
-  /@zag-js/select@0.32.1:
-    resolution: {integrity: sha512-jSzmTKCN1Fk/ZDDWM8TVGOtwgpYUDgyceegjYT+hW1mmEetu4tQcEvAr0557NOzh8akqLvcVFbg/kMj0IriKAA==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/collection': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dismissable': 0.32.1
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/form-utils': 0.32.1
-      '@zag-js/mutation-observer': 0.32.1
-      '@zag-js/popper': 0.32.1
-      '@zag-js/tabbable': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-      '@zag-js/visually-hidden': 0.32.1
-    dev: false
-
-  /@zag-js/slider@0.32.1:
-    resolution: {integrity: sha512-iZSB3Y8/Maakxem0Ha3rBRa8AyAplhN5K50Bgz+wsv0VEzNNUmK4QgaTWReWd6SfeTRpnC5ftKCcfM2aQrLm6g==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/element-size': 0.32.1
-      '@zag-js/form-utils': 0.32.1
-      '@zag-js/numeric-range': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/splitter@0.32.1:
-    resolution: {integrity: sha512-NdHLUXtQAlnz6QpdPwcqZCqYul7LaVqsp0hgtXR2PN4HbH+VAaDfY76pUk6LBerUcykChGZvtM9U0A5FCo1x4A==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/number-utils': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/store@0.32.1:
-    resolution: {integrity: sha512-hKwzpqAPljw06oOI+eO+Is2udpmY9GsGfmdoqvZVYoK4f5sawpZY9EC/84tbK9QKWUDTbFS+0Ujc254GUThmDA==}
-    dependencies:
-      proxy-compare: 2.5.1
-    dev: false
-
-  /@zag-js/switch@0.32.1:
-    resolution: {integrity: sha512-+5w/AtINA+jpORX1cuUrnyIFXrfjhqV7667EKK/zbPi0Pf1E10+TEihpfFjY6bgms9CSNWZVEb6w2f2C0PNBDA==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/form-utils': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-      '@zag-js/visually-hidden': 0.32.1
-    dev: false
-
-  /@zag-js/tabbable@0.32.1:
-    resolution: {integrity: sha512-fMXtVgBiX7z3Qmdv+McrfihiSkqsDbNX2nn3e63L7jdy9ZpgnR3jG9BwUZvv7hvzkuOAFhhdKgBYYT+fkBavGg==}
-    dependencies:
-      '@zag-js/dom-query': 0.32.1
-    dev: false
-
-  /@zag-js/tabs@0.32.1:
-    resolution: {integrity: sha512-5l8/k2Pw9Kbfsvvx6HWcVqK7Ns7ca+nyPGLSZtZLMp/Zn2q3xSG32C1U3oDaYtQVIQSiEHdnMjw0C2v+CxGDMA==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/element-rect': 0.32.1
-      '@zag-js/tabbable': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/tags-input@0.32.1:
-    resolution: {integrity: sha512-oliLhiMpRNbWFixHF+Oe7hySQBp7NKtL/s8rN5dLT1G1GFRMzuuht/QnmL1h8EoGGpTwaaokMo4zl4uVzHbwyw==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/auto-resize': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/form-utils': 0.32.1
-      '@zag-js/interact-outside': 0.32.1
-      '@zag-js/live-region': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/text-selection@0.32.1:
-    resolution: {integrity: sha512-aK1uswWYF76PFoxGL+3HW/kth9uldFWSW4lOh89NfEcc6Ym7qS5B+P0HKJVM9DuQbihvQX9dyc9PvM7/LJTSRA==}
-    dependencies:
-      '@zag-js/dom-query': 0.32.1
-    dev: false
-
-  /@zag-js/toast@0.32.1:
-    resolution: {integrity: sha512-HrfVzFX7ANS9qOewCr8qOCbgko635bZxYKMv+ojjo4U/TtwkGb43+lVU7/qwZj0z18/OtXBH5YQjFwQZXg5x8g==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/toggle-group@0.32.1:
-    resolution: {integrity: sha512-MM1XI4J45rRCZiDHcMtZWud0+bWMu6IcMnrbd9oig330YAF3RzcjTlxX93YRY35F04OUMBq5el9qe3qc2vyMuw==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/tooltip@0.32.1:
-    resolution: {integrity: sha512-+rsmDYTELFBHoYKg5iKShGfRD3H9FJDaZRq915Uc9YnyePMXCnWRgnVp+lk3zI+FDgysQm67SDLRJsR24Iioqg==}
-    dependencies:
-      '@zag-js/anatomy': 0.32.1
-      '@zag-js/core': 0.32.1
-      '@zag-js/dom-event': 0.32.1
-      '@zag-js/dom-query': 0.32.1
-      '@zag-js/popper': 0.32.1
-      '@zag-js/types': 0.32.1
-      '@zag-js/utils': 0.32.1
-    dev: false
-
-  /@zag-js/types@0.32.1:
-    resolution: {integrity: sha512-BLfqb+im4vtXXJqhd2ZUg/4LquEd1qPt9XN56XVjudGDTftN8n3EDpuail7VKxdL59W4jR7wW8lvl4sSgrQKWw==}
-    dependencies:
-      csstype: 3.1.3
-    dev: false
-
-  /@zag-js/utils@0.32.1:
-    resolution: {integrity: sha512-jrcmWYcA3L6TO4fZbPFvpSGEy2Z/mbWt6bPQbmcVgq/BltSS0YxxfPl+eD+S/rZI9aneszwsr04Z5TpladFiVA==}
-    dev: false
-
-  /@zag-js/visually-hidden@0.32.1:
-    resolution: {integrity: sha512-Vzieo4vNulzY/0zqmVfeYW/LcFJp5xtEoyUgR1FBctH8uBPBRhTIEXxKtoMablW6/vccOVo7zcu0UrR5Vx+eYQ==}
-    dev: false
-
   /accepts@1.3.8:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
@@ -7641,7 +7022,7 @@ packages:
     resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
     engines: {node: '>=10', npm: '>=6'}
     dependencies:
-      '@babel/runtime': 7.23.8
+      '@babel/runtime': 7.23.6
       cosmiconfig: 7.1.0
       resolve: 1.22.8
     dev: false
@@ -9693,12 +9074,6 @@ packages:
       tslib: 2.6.2
     dev: false
 
-  /focus-trap@7.5.4:
-    resolution: {integrity: sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==}
-    dependencies:
-      tabbable: 6.2.0
-    dev: false
-
   /for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
     dependencies:
@@ -11566,24 +10941,10 @@ packages:
       react: 18.2.0
     dev: false
 
-  /overlayscrollbars-react@0.5.4(overlayscrollbars@2.4.7)(react@18.2.0):
-    resolution: {integrity: sha512-FPKx9XnXovTnI4+2JXig5uEaTLSEJ6svOwPzIfBBXTHBRNsz2+WhYUmfM0K/BNYxjgDEwuPm+NQhEoOA0RoG1g==}
-    peerDependencies:
-      overlayscrollbars: ^2.0.0
-      react: '>=16.8.0'
-    dependencies:
-      overlayscrollbars: 2.4.7
-      react: 18.2.0
-    dev: false
-
   /overlayscrollbars@2.4.6:
     resolution: {integrity: sha512-C7tmhetwMv9frEvIT/RfkAVEgbjRNz/Gh2zE8BVmN+jl35GRaAnz73rlGQCMRoC2arpACAXyMNnJkzHb7GBrcA==}
     dev: false
 
-  /overlayscrollbars@2.4.7:
-    resolution: {integrity: sha512-02X2/nHno35dzebCx+EO2tRDaKAOltZqUKdUqvq3Pt8htCuhJbYi+mjr0CYerVeGRRoZ2Uo6/8XrNg//DJJ+GA==}
-    dev: false
-
   /p-limit@2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
@@ -11946,10 +11307,6 @@ packages:
       ipaddr.js: 1.9.1
     dev: true
 
-  /proxy-compare@2.5.1:
-    resolution: {integrity: sha512-oyfc0Tx87Cpwva5ZXezSp5V9vht1c7dZBhvuV/y3ctkgMVUmiAGDVeeB0dKhGSyT0v1ZTEQYpe/RXlBVBNuCLA==}
-    dev: false
-
   /proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
     dev: true
@@ -12078,7 +11435,7 @@ packages:
     peerDependencies:
       react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/runtime': 7.23.8
+      '@babel/runtime': 7.23.7
       react: 18.2.0
     dev: false
 
@@ -12173,7 +11530,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.23.8
+      '@babel/runtime': 7.23.7
       '@types/react': 18.2.48
       focus-lock: 1.0.0
       prop-types: 15.8.1
@@ -12222,26 +11579,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /react-i18next@14.0.1(i18next@23.7.16)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-TMV8hFismBmpMdIehoFHin/okfvgjFhp723RYgIqB4XyhDobVMyukyM3Z8wtTRmajyFMZrBl/OaaXF2P6WjUAw==}
-    peerDependencies:
-      i18next: '>= 23.2.3'
-      react: '>= 16.8.0'
-      react-dom: '*'
-      react-native: '*'
-    peerDependenciesMeta:
-      react-dom:
-        optional: true
-      react-native:
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.8
-      html-parse-stringify: 3.0.1
-      i18next: 23.7.16
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /react-icons@5.0.1(react@18.2.0):
     resolution: {integrity: sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==}
     peerDependencies:
@@ -13440,10 +12777,6 @@ packages:
     resolution: {integrity: sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==}
     dev: true
 
-  /tabbable@6.2.0:
-    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
-    dev: false
-
   /tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}

invokeai/frontend/web/public/locales/de.json

@@ -110,28 +110,7 @@
         "somethingWentWrong": "Etwas ist schief gelaufen",
         "copyError": "$t(gallery.copy) Fehler",
         "input": "Eingabe",
-        "notInstalled": "Nicht $t(common.installed)",
+        "notInstalled": "Nicht $t(common.installed)"
-        "advancedOptions": "Erweiterte Einstellungen",
-        "alpha": "Alpha",
-        "red": "Rot",
-        "green": "Grün",
-        "blue": "Blau",
-        "delete": "Löschen",
-        "or": "oder",
-        "direction": "Richtung",
-        "free": "Frei",
-        "save": "Speichern",
-        "preferencesLabel": "Präferenzen",
-        "created": "Erstellt",
-        "prevPage": "Vorherige Seite",
-        "nextPage": "Nächste Seite",
-        "unknownError": "Unbekannter Fehler",
-        "unsaved": "Nicht gespeichert",
-        "aboutDesc": "Verwenden Sie Invoke für die Arbeit? Dann siehe hier:",
-        "localSystem": "Lokales System",
-        "orderBy": "Ordnen nach",
-        "saveAs": "Speicher als",
-        "updated": "Aktualisiert"
     },
     "gallery": {
         "generations": "Erzeugungen",
@@ -722,8 +701,7 @@
         "invokeProgressBar": "Invoke Fortschrittsanzeige",
         "mode": "Modus",
         "resetUI": "$t(accessibility.reset) von UI",
-        "createIssue": "Ticket erstellen",
+        "createIssue": "Ticket erstellen"
-        "about": "Über"
     },
     "boards": {
         "autoAddBoard": "Automatisches Hinzufügen zum Ordner",
@@ -831,8 +809,7 @@
         "canny": "Canny",
         "hedDescription": "Ganzheitlich verschachtelte Kantenerkennung",
         "scribble": "Scribble",
-        "maxFaces": "Maximal Anzahl Gesichter",
+        "maxFaces": "Maximal Anzahl Gesichter"
-        "resizeSimple": "Größe ändern (einfach)"
     },
     "queue": {
         "status": "Status",
@@ -1022,27 +999,5 @@
         "selectLoRA": "Wählen ein LoRA aus",
         "esrganModel": "ESRGAN Modell",
         "addLora": "LoRA hinzufügen"
-    },
-    "accordions": {
-        "generation": {
-            "title": "Erstellung",
-            "modelTab": "Modell",
-            "conceptsTab": "Konzepte"
-        },
-        "image": {
-            "title": "Bild"
-        },
-        "advanced": {
-            "title": "Erweitert"
-        },
-        "control": {
-            "title": "Kontrolle",
-            "controlAdaptersTab": "Kontroll Adapter",
-            "ipTab": "Bild Beschreibung"
-        },
-        "compositing": {
-            "coherenceTab": "Kohärenzpass",
-            "infillTab": "Füllung"
-        }
     }
 }

invokeai/frontend/web/public/locales/en.json

@@ -224,7 +224,6 @@
         "amult": "a_mult",
         "autoConfigure": "Auto configure processor",
         "balanced": "Balanced",
-        "base": "Base",
         "beginEndStepPercent": "Begin / End Step Percentage",
         "bgth": "bg_th",
         "canny": "Canny",
@@ -238,8 +237,6 @@
         "controlMode": "Control Mode",
         "crop": "Crop",
         "delete": "Delete",
-        "depthAnything": "Depth Anything",
-        "depthAnythingDescription": "Depth map generation using the Depth Anything technique",
         "depthMidas": "Depth (Midas)",
         "depthMidasDescription": "Depth map generation using Midas",
         "depthZoe": "Depth (Zoe)",
@@ -259,7 +256,6 @@
         "colorMapTileSize": "Tile Size",
         "importImageFromCanvas": "Import Image From Canvas",
         "importMaskFromCanvas": "Import Mask From Canvas",
-        "large": "Large",
         "lineart": "Lineart",
         "lineartAnime": "Lineart Anime",
         "lineartAnimeDescription": "Anime-style lineart processing",
@@ -272,7 +268,6 @@
         "minConfidence": "Min Confidence",
         "mlsd": "M-LSD",
         "mlsdDescription": "Minimalist Line Segment Detector",
-        "modelSize": "Model Size",
         "none": "None",
         "noneDescription": "No processing applied",
         "normalBae": "Normal BAE",
@@ -293,7 +288,6 @@
         "selectModel": "Select a model",
         "setControlImageDimensions": "Set Control Image Dimensions To W/H",
         "showAdvanced": "Show Advanced",
-        "small": "Small",
         "toggleControlNet": "Toggle this ControlNet",
         "w": "W",
         "weight": "Weight",
@@ -606,10 +600,6 @@
             "desc": "Send current image to Image to Image",
             "title": "Send To Image To Image"
         },
-        "remixImage": {
-            "desc": "Use all parameters except seed from the current image",
-            "title": "Remix image"
-        },
         "setParameters": {
             "desc": "Use all parameters of the current image",
             "title": "Set Parameters"
@@ -1226,7 +1216,6 @@
         "useCpuNoise": "Use CPU Noise",
         "cpuNoise": "CPU Noise",
         "gpuNoise": "GPU Noise",
-        "remixImage": "Remix Image",
         "useInitImg": "Use Initial Image",
         "usePrompt": "Use Prompt",
         "useSeed": "Use Seed",
@@ -1708,7 +1697,6 @@
         "workflowLibrary": "Library",
         "userWorkflows": "My Workflows",
         "defaultWorkflows": "Default Workflows",
-        "projectWorkflows": "Project Workflows",
         "openWorkflow": "Open Workflow",
         "uploadWorkflow": "Load from File",
         "deleteWorkflow": "Delete Workflow",
@@ -1721,7 +1709,6 @@
         "workflowSaved": "Workflow Saved",
         "noRecentWorkflows": "No Recent Workflows",
         "noUserWorkflows": "No User Workflows",
-        "noWorkflows": "No Workflows",
         "noSystemWorkflows": "No System Workflows",
         "problemLoading": "Problem Loading Workflows",
         "loading": "Loading Workflows",

invokeai/frontend/web/public/locales/it.json

@@ -118,14 +118,7 @@
         "advancedOptions": "Opzioni avanzate",
         "free": "Libero",
         "or": "o",
-        "preferencesLabel": "Preferenze",
+        "preferencesLabel": "Preferenze"
-        "red": "Rosso",
-        "aboutHeading": "Possiedi il tuo potere creativo",
-        "aboutDesc": "Utilizzi Invoke per lavoro? Guarda qui:",
-        "localSystem": "Sistema locale",
-        "green": "Verde",
-        "blue": "Blu",
-        "alpha": "Alfa"
     },
     "gallery": {
         "generations": "Generazioni",
@@ -528,8 +521,7 @@
         "customConfigFileLocation": "Posizione del file di configurazione personalizzato",
         "vaePrecision": "Precisione VAE",
         "noModelSelected": "Nessun modello selezionato",
-        "conversionNotSupported": "Conversione non supportata",
+        "conversionNotSupported": "Conversione non supportata"
-        "configFile": "File di configurazione"
     },
     "parameters": {
         "images": "Immagini",
@@ -668,9 +660,7 @@
         "lockAspectRatio": "Blocca proporzioni",
         "swapDimensions": "Scambia dimensioni",
         "aspect": "Aspetto",
-        "setToOptimalSizeTooLarge": "$t(parameters.setToOptimalSize) (potrebbe essere troppo grande)",
+        "setToOptimalSizeTooLarge": "$t(parameters.setToOptimalSize) (potrebbe essere troppo grande)"
-        "boxBlur": "Box",
-        "gaussianBlur": "Gaussian"
     },
     "settings": {
         "models": "Modelli",
@@ -804,9 +794,7 @@
         "invalidUpload": "Caricamento non valido",
         "problemDeletingWorkflow": "Problema durante l'eliminazione del flusso di lavoro",
         "workflowDeleted": "Flusso di lavoro eliminato",
-        "problemRetrievingWorkflow": "Problema nel recupero del flusso di lavoro",
+        "problemRetrievingWorkflow": "Problema nel recupero del flusso di lavoro"
-        "resetInitialImage": "Reimposta l'immagine iniziale",
-        "uploadInitialImage": "Carica l'immagine iniziale"
     },
     "tooltip": {
         "feature": {
@@ -911,8 +899,7 @@
         "loadMore": "Carica altro",
         "mode": "Modalità",
         "resetUI": "$t(accessibility.reset) l'Interfaccia Utente",
-        "createIssue": "Segnala un problema",
+        "createIssue": "Segnala un problema"
-        "about": "Informazioni"
     },
     "ui": {
         "hideProgressImages": "Nascondi avanzamento immagini",

invokeai/frontend/web/src/app/components/App.tsx

@@ -1,4 +1,4 @@
-import { Box, useGlobalModifiersInit } from '@invoke-ai/ui-library';
+import { Box, useGlobalModifiersInit } from '@invoke-ai/ui';
 import { useSocketIO } from 'app/hooks/useSocketIO';
 import { useLogger } from 'app/logging/useLogger';
 import { appStarted } from 'app/store/middleware/listenerMiddleware/listeners/appStarted';

invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, Heading, Link, Text, useToast } from '@invoke-ai/ui-library';
+import { Button, Flex, Heading, Link, Text, useToast } from '@invoke-ai/ui';
 import newGithubIssueUrl from 'new-github-issue-url';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx

@@ -7,7 +7,7 @@ import {
   extendTheme,
   theme as _theme,
   TOAST_OPTIONS,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import type { ReactNode } from 'react';
 import { memo, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/app/components/Toaster.ts

@@ -1,4 +1,4 @@
-import { useToast } from '@invoke-ai/ui-library';
+import { useToast } from '@invoke-ai/ui';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { addToast, clearToastQueue } from 'features/system/store/systemSlice';
 import type { MakeToastArg } from 'features/system/util/makeToast';

invokeai/frontend/web/src/app/hooks/useSocketIO.ts

@@ -45,7 +45,7 @@ export const useSocketIO = () => {
   const socketOptions = useMemo(() => {
     const options: Partial<ManagerOptions & SocketOptions> = {
       timeout: 60000,
-      path: baseUrl ? '/ws/socket.io' : `${window.location.pathname}ws/socket.io`,
+      path: '/ws/socket.io',
       autoConnect: false, // achtung! removing this breaks the dynamic middleware
       forceNew: true,
     };
@@ -56,7 +56,7 @@ export const useSocketIO = () => {
     }
 
     return { ...options, ...addlSocketOptions };
-  }, [authToken, addlSocketOptions, baseUrl]);
+  }, [authToken, addlSocketOptions]);
 
   useEffect(() => {
     if ($isSocketInitialized.get()) {

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts

@@ -1,4 +1,4 @@
-import { createStandaloneToast, theme, TOAST_OPTIONS } from '@invoke-ai/ui-library';
+import { createStandaloneToast, theme, TOAST_OPTIONS } from '@invoke-ai/ui';
 import { logger } from 'app/logging/logger';
 import { parseify } from 'common/util/serialize';
 import { zPydanticValidationError } from 'features/system/store/zodSchemas';

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts

@@ -1,4 +1,4 @@
-import type { UseToastOptions } from '@invoke-ai/ui-library';
+import type { UseToastOptions } from '@invoke-ai/ui';
 import { logger } from 'app/logging/logger';
 import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
 import {

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/modelSelected.ts

@@ -36,9 +36,9 @@ export const addModelSelectedListener = () => {
 
       const newModel = result.data;
 
-      const newBaseModel = newModel.base_model;
+      const { base_model } = newModel;
       const didBaseModelChange =
-        state.generation.model?.base_model !== newBaseModel;
+        state.generation.model?.base_model !== base_model;
 
       if (didBaseModelChange) {
         // we may need to reset some incompatible submodels
@@ -46,7 +46,7 @@ export const addModelSelectedListener = () => {
 
         // handle incompatible loras
         forEach(state.lora.loras, (lora, id) => {
-          if (lora.base_model !== newBaseModel) {
+          if (lora.base_model !== base_model) {
             dispatch(loraRemoved(id));
             modelsCleared += 1;
           }
@@ -54,14 +54,14 @@ export const addModelSelectedListener = () => {
 
         // handle incompatible vae
         const { vae } = state.generation;
-        if (vae && vae.base_model !== newBaseModel) {
+        if (vae && vae.base_model !== base_model) {
           dispatch(vaeSelected(null));
           modelsCleared += 1;
         }
 
         // handle incompatible controlnets
         selectControlAdapterAll(state.controlAdapters).forEach((ca) => {
-          if (ca.model?.base_model !== newBaseModel) {
+          if (ca.model?.base_model !== base_model) {
             dispatch(
               controlAdapterIsEnabledChanged({ id: ca.id, isEnabled: false })
             );

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/promptChanged.ts

@@ -46,14 +46,14 @@ export const addDynamicPromptsListener = () => {
 
       if (cachedPrompts) {
         dispatch(promptsChanged(cachedPrompts.prompts));
-        dispatch(parsingErrorChanged(cachedPrompts.error));
         return;
       }
 
       if (!getShouldProcessPrompt(state.generation.positivePrompt)) {
+        if (state.dynamicPrompts.isLoading) {
+          dispatch(isLoadingChanged(false));
+        }
         dispatch(promptsChanged([state.generation.positivePrompt]));
-        dispatch(parsingErrorChanged(undefined));
-        dispatch(isErrorChanged(false));
         return;
       }
 
@@ -78,6 +78,7 @@ export const addDynamicPromptsListener = () => {
         dispatch(promptsChanged(res.prompts));
         dispatch(parsingErrorChanged(res.error));
         dispatch(isErrorChanged(false));
+        dispatch(isLoadingChanged(false));
       } catch {
         dispatch(isErrorChanged(true));
         dispatch(isLoadingChanged(false));

invokeai/frontend/web/src/app/store/nanostores/customStarUI.ts

@@ -1,4 +1,4 @@
-import type { MenuItemProps } from '@invoke-ai/ui-library';
+import type { MenuItemProps } from '@invoke-ai/ui';
 import { atom } from 'nanostores';
 
 export type CustomStarUi = {

invokeai/frontend/web/src/common/components/IAIColorPicker.tsx

@@ -1,10 +1,10 @@
-import type { ChakraProps } from '@invoke-ai/ui-library';
+import type { ChakraProps } from '@invoke-ai/ui';
 import {
   CompositeNumberInput,
   Flex,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import type { CSSProperties } from 'react';
 import { memo, useCallback } from 'react';
 import { RgbaColorPicker } from 'react-colorful';

invokeai/frontend/web/src/common/components/IAIDndImage.tsx

@@ -1,5 +1,5 @@
-import type { ChakraProps, FlexProps, SystemStyleObject } from '@invoke-ai/ui-library';
+import type { ChakraProps, FlexProps, SystemStyleObject } from '@invoke-ai/ui';
-import { Flex, Icon, Image } from '@invoke-ai/ui-library';
+import { Flex, Icon, Image } from '@invoke-ai/ui';
 import {
   IAILoadingImageFallback,
   IAINoContentFallback,

invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx

@@ -1,5 +1,5 @@
-import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import type { SystemStyleObject } from '@invoke-ai/ui';
-import { IconButton } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui';
 import type { MouseEvent, ReactElement } from 'react';
 import { memo, useMemo } from 'react';
 

invokeai/frontend/web/src/common/components/IAIDraggable.tsx

@@ -1,5 +1,5 @@
-import type { BoxProps } from '@invoke-ai/ui-library';
+import type { BoxProps } from '@invoke-ai/ui';
-import { Box } from '@invoke-ai/ui-library';
+import { Box } from '@invoke-ai/ui';
 import { useDraggableTypesafe } from 'features/dnd/hooks/typesafeHooks';
 import type { TypesafeDraggableData } from 'features/dnd/types';
 import { memo, useRef } from 'react';

invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex } from '@invoke-ai/ui-library';
+import { Box, Flex } from '@invoke-ai/ui';
 import type { AnimationProps } from 'framer-motion';
 import { motion } from 'framer-motion';
 import type { ReactNode } from 'react';

invokeai/frontend/web/src/common/components/IAIDroppable.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@invoke-ai/ui-library';
+import { Box } from '@invoke-ai/ui';
 import { useDroppableTypesafe } from 'features/dnd/hooks/typesafeHooks';
 import type { TypesafeDroppableData } from 'features/dnd/types';
 import { isValidDrop } from 'features/dnd/util/isValidDrop';

invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx

@@ -1,5 +1,5 @@
-import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import type { SystemStyleObject } from '@invoke-ai/ui';
-import { Box, Skeleton } from '@invoke-ai/ui-library';
+import { Box, Skeleton } from '@invoke-ai/ui';
 import { memo } from 'react';
 
 const skeletonStyles: SystemStyleObject = {

invokeai/frontend/web/src/common/components/IAIImageFallback.tsx

@@ -1,5 +1,5 @@
-import type { As, ChakraProps, FlexProps } from '@invoke-ai/ui-library';
+import type { As, ChakraProps, FlexProps } from '@invoke-ai/ui';
-import { Flex, Icon, Skeleton, Spinner, Text } from '@invoke-ai/ui-library';
+import { Flex, Icon, Skeleton, Spinner, Text } from '@invoke-ai/ui';
 import { memo, useMemo } from 'react';
 import { PiImageBold } from 'react-icons/pi';
 import type { ImageDTO } from 'services/api/types';

invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx

@@ -1,4 +1,4 @@
-import { Badge, Flex } from '@invoke-ai/ui-library';
+import { Badge, Flex } from '@invoke-ai/ui';
 import { memo } from 'react';
 import type { ImageDTO } from 'services/api/types';
 

invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Heading } from '@invoke-ai/ui-library';
+import { Box, Flex, Heading } from '@invoke-ai/ui';
 import type { AnimationProps } from 'framer-motion';
 import { motion } from 'framer-motion';
 import { memo } from 'react';

invokeai/frontend/web/src/common/components/InformationalPopover/InformationalPopover.tsx

@@ -11,7 +11,7 @@ import {
   PopoverTrigger,
   Portal,
   Text,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useAppSelector } from 'app/store/storeHooks';
 import { merge, omit } from 'lodash-es';
 import type { ReactElement } from 'react';

invokeai/frontend/web/src/common/components/InformationalPopover/constants.ts

@@ -1,4 +1,4 @@
-import type { PopoverProps } from '@invoke-ai/ui-library';
+import type { PopoverProps } from '@invoke-ai/ui';
 
 export type Feature =
   | 'clipSkip'

invokeai/frontend/web/src/common/components/Loading/Loading.tsx

@@ -1,4 +1,4 @@
-import { Flex, Image, Spinner } from '@invoke-ai/ui-library';
+import { Flex, Image, Spinner } from '@invoke-ai/ui';
 import InvokeLogoWhite from 'public/assets/images/invoke-symbol-wht-lrg.svg';
 import { memo } from 'react';
 

invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@invoke-ai/ui-library';
+import { Box } from '@invoke-ai/ui';
 import { memo, useMemo } from 'react';
 
 type Props = {

invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx

@@ -1,35 +1,24 @@
-import type { ChakraProps } from '@invoke-ai/ui-library';
+import type { ChakraProps } from '@invoke-ai/ui';
-import { Box, Flex } from '@invoke-ai/ui-library';
+import { Box, Flex } from '@invoke-ai/ui';
-import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
+import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties, PropsWithChildren } from 'react';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 
 type Props = PropsWithChildren & {
   maxHeight?: ChakraProps['maxHeight'];
-  overflowX?: 'hidden' | 'scroll';
-  overflowY?: 'hidden' | 'scroll';
 };
 
 const styles: CSSProperties = { height: '100%', width: '100%' };
 
-const ScrollableContent = ({
+const ScrollableContent = ({ children, maxHeight }: Props) => {
-  children,
-  maxHeight,
-  overflowX = 'hidden',
-  overflowY = 'scroll',
-}: Props) => {
-  const overlayscrollbarsOptions = useMemo(
-    () => getOverlayScrollbarsParams(overflowX, overflowY).options,
-    [overflowX, overflowY]
-  );
   return (
     <Flex w="full" h="full" maxHeight={maxHeight} position="relative">
       <Box position="absolute" top={0} left={0} right={0} bottom={0}>
         <OverlayScrollbarsComponent
           defer
           style={styles}
-          options={overlayscrollbarsOptions}
+          options={overlayScrollbarsParams.options}
         >
           {children}
         </OverlayScrollbarsComponent>

invokeai/frontend/web/src/common/components/OverlayScrollbars/constants.ts

@@ -1,4 +1,3 @@
-import { cloneDeep, merge } from 'lodash-es';
 import { ClickScrollPlugin, OverlayScrollbars } from 'overlayscrollbars';
 import type { UseOverlayScrollbarsParams } from 'overlayscrollbars-react';
 
@@ -17,12 +16,3 @@ export const overlayScrollbarsParams: UseOverlayScrollbarsParams = {
     overflow: { x: 'hidden' },
   },
 };
-
-export const getOverlayScrollbarsParams = (
-  overflowX: 'hidden' | 'scroll' = 'hidden',
-  overflowY: 'hidden' | 'scroll' = 'scroll'
-) => {
-  const params = cloneDeep(overlayScrollbarsParams);
-  merge(params, { options: { overflow: { y: overflowY, x: overflowX } } });
-  return params;
-};

invokeai/frontend/web/src/common/components/SelectionOverlay.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@invoke-ai/ui-library';
+import { Box } from '@invoke-ai/ui';
 import { memo, useMemo } from 'react';
 
 type Props = {

invokeai/frontend/web/src/common/hooks/useChakraThemeTokens.ts

@@ -1,4 +1,4 @@
-import { useToken } from '@invoke-ai/ui-library';
+import { useToken } from '@invoke-ai/ui';
 
 export const useChakraThemeTokens = () => {
   const [

invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts

@@ -1,4 +1,4 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
 import type { EntityState } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import type { GroupBase } from 'chakra-react-select';

invokeai/frontend/web/src/common/hooks/useModelCombobox.ts

@@ -1,4 +1,4 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
 import type { EntityState } from '@reduxjs/toolkit';
 import { map } from 'lodash-es';
 import { useCallback, useMemo } from 'react';

invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx

@@ -1,4 +1,4 @@
-import { Button, ConfirmationAlertDialog, useDisclosure } from '@invoke-ai/ui-library';
+import { Button, ConfirmationAlertDialog, useDisclosure } from '@invoke-ai/ui';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { clearCanvasHistory } from 'features/canvas/store/canvasSlice';

invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx

@@ -1,4 +1,4 @@
-import { Box, chakra, Flex } from '@invoke-ai/ui-library';
+import { Box, chakra, Flex } from '@invoke-ai/ui';
 import { useStore } from '@nanostores/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';

invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx

@@ -1,5 +1,5 @@
 // Grid drawing adapted from https://longviewcoder.com/2021/12/08/konva-a-better-grid/
-import { getArbitraryBaseColor } from '@invoke-ai/ui-library';
+import { getArbitraryBaseColor } from '@invoke-ai/ui';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';

invokeai/frontend/web/src/features/canvas/components/IAICanvasImageErrorFallback.tsx

@@ -1,4 +1,4 @@
-import { useToken } from '@invoke-ai/ui-library';
+import { useToken } from '@invoke-ai/ui';
 import type { CanvasImage } from 'features/canvas/store/canvasTypes';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonGroup, Flex, IconButton } from '@invoke-ai/ui-library';
+import { Button, ButtonGroup, Flex, IconButton } from '@invoke-ai/ui';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';

invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex } from '@invoke-ai/ui-library';
+import { Box, Flex } from '@invoke-ai/ui';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';

invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@invoke-ai/ui-library';
+import { Box } from '@invoke-ai/ui';
 import { useStore } from '@nanostores/react';
 import { $cursorPosition } from 'features/canvas/store/canvasNanostore';
 import roundToHundreth from 'features/canvas/util/roundToHundreth';

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx

@@ -1,4 +1,4 @@
-import { useShiftModifier } from '@invoke-ai/ui-library';
+import { useShiftModifier } from '@invoke-ai/ui';
 import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx

@@ -1,19 +1,16 @@
-import type { FormLabelProps } from '@invoke-ai/ui-library';
 import {
   Box,
   Button,
-  ButtonGroup,
   Checkbox,
   Flex,
   FormControl,
-  FormControlGroup,
   FormLabel,
   IconButton,
   Popover,
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIColorPicker from 'common/components/IAIColorPicker';
 import { canvasMaskSavedToGallery } from 'features/canvas/store/actions';
@@ -36,10 +33,6 @@ import {
   PiTrashSimpleFill,
 } from 'react-icons/pi';
 
-const formLabelProps: FormLabelProps = {
-  flexGrow: 1,
-};
-
 const IAICanvasMaskOptions = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -131,44 +124,40 @@ const IAICanvasMaskOptions = () => {
       <PopoverContent>
         <PopoverBody>
           <Flex direction="column" gap={2}>
-            <FormControlGroup formLabelProps={formLabelProps}>
+            <FormControl>
-              <FormControl>
+              <FormLabel>{`${t('unifiedCanvas.enableMask')} (H)`}</FormLabel>
-                <FormLabel>{`${t('unifiedCanvas.enableMask')} (H)`}</FormLabel>
+              <Checkbox
-                <Checkbox
+                isChecked={isMaskEnabled}
-                  isChecked={isMaskEnabled}
+                onChange={handleToggleEnableMask}
-                  onChange={handleToggleEnableMask}
+              />
-                />
+            </FormControl>
-              </FormControl>
+            <FormControl>
-              <FormControl>
+              <FormLabel>{t('unifiedCanvas.preserveMaskedArea')}</FormLabel>
-                <FormLabel>{t('unifiedCanvas.preserveMaskedArea')}</FormLabel>
+              <Checkbox
-                <Checkbox
+                isChecked={shouldPreserveMaskedArea}
-                  isChecked={shouldPreserveMaskedArea}
+                onChange={handleChangePreserveMaskedArea}
-                  onChange={handleChangePreserveMaskedArea}
+              />
-                />
+            </FormControl>
-              </FormControl>
-            </FormControlGroup>
             <Box pt={2} pb={2}>
               <IAIColorPicker
                 color={maskColor}
                 onChange={handleChangeMaskColor}
               />
             </Box>
-            <ButtonGroup isAttached={false}>
+            <Button
-              <Button
+              size="sm"
-                size="sm"
+              leftIcon={<PiFloppyDiskBackFill />}
-                leftIcon={<PiFloppyDiskBackFill />}
+              onClick={handleSaveMask}
-                onClick={handleSaveMask}
+            >
-              >
+              {t('unifiedCanvas.saveMask')}
-                {t('unifiedCanvas.saveMask')}
+            </Button>
-              </Button>
+            <Button
-              <Button
+              size="sm"
-                size="sm"
+              leftIcon={<PiTrashSimpleFill />}
-                leftIcon={<PiTrashSimpleFill />}
+              onClick={handleClearMask}
-                onClick={handleClearMask}
+            >
-              >
+              {t('unifiedCanvas.clearMask')}
-                {t('unifiedCanvas.clearMask')}
+            </Button>
-              </Button>
-            </ButtonGroup>
           </Flex>
         </PopoverBody>
       </PopoverContent>

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx

@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { redo } from 'features/canvas/store/canvasSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx

@@ -1,16 +1,14 @@
-import type { FormLabelProps } from '@invoke-ai/ui-library';
 import {
   Checkbox,
   Flex,
   FormControl,
-  FormControlGroup,
   FormLabel,
   IconButton,
   Popover,
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ClearCanvasHistoryButtonModal from 'features/canvas/components/ClearCanvasHistoryButtonModal';
 import {
@@ -30,10 +28,6 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiGearSixBold } from 'react-icons/pi';
 
-const formLabelProps: FormLabelProps = {
-  flexGrow: 1,
-};
-
 const IAICanvasSettingsButtonPopover = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -128,73 +122,69 @@ const IAICanvasSettingsButtonPopover = () => {
       <PopoverContent>
         <PopoverBody>
           <Flex direction="column" gap={2}>
-            <FormControlGroup formLabelProps={formLabelProps}>
+            <FormControl>
-              <FormControl>
+              <FormLabel>{t('unifiedCanvas.showIntermediates')}</FormLabel>
-                <FormLabel>{t('unifiedCanvas.showIntermediates')}</FormLabel>
+              <Checkbox
-                <Checkbox
+                isChecked={shouldShowIntermediates}
-                  isChecked={shouldShowIntermediates}
+                onChange={handleChangeShouldShowIntermediates}
-                  onChange={handleChangeShouldShowIntermediates}
+              />
-                />
+            </FormControl>
-              </FormControl>
+            <FormControl>
-              <FormControl>
+              <FormLabel>{t('unifiedCanvas.showGrid')}</FormLabel>
-                <FormLabel>{t('unifiedCanvas.showGrid')}</FormLabel>
+              <Checkbox
-                <Checkbox
+                isChecked={shouldShowGrid}
-                  isChecked={shouldShowGrid}
+                onChange={handleChangeShouldShowGrid}
-                  onChange={handleChangeShouldShowGrid}
+              />
-                />
+            </FormControl>
-              </FormControl>
+            <FormControl>
-              <FormControl>
+              <FormLabel>{t('unifiedCanvas.snapToGrid')}</FormLabel>
-                <FormLabel>{t('unifiedCanvas.snapToGrid')}</FormLabel>
+              <Checkbox
-                <Checkbox
+                isChecked={shouldSnapToGrid}
-                  isChecked={shouldSnapToGrid}
+                onChange={handleChangeShouldSnapToGrid}
-                  onChange={handleChangeShouldSnapToGrid}
+              />
-                />
+            </FormControl>
-              </FormControl>
+            <FormControl>
-              <FormControl>
+              <FormLabel>{t('unifiedCanvas.darkenOutsideSelection')}</FormLabel>
-                <FormLabel>
+              <Checkbox
-                  {t('unifiedCanvas.darkenOutsideSelection')}
+                isChecked={shouldDarkenOutsideBoundingBox}
-                </FormLabel>
+                onChange={handleChangeShouldDarkenOutsideBoundingBox}
-                <Checkbox
+              />
-                  isChecked={shouldDarkenOutsideBoundingBox}
+            </FormControl>
-                  onChange={handleChangeShouldDarkenOutsideBoundingBox}
+            <FormControl>
-                />
+              <FormLabel>{t('unifiedCanvas.autoSaveToGallery')}</FormLabel>
-              </FormControl>
+              <Checkbox
-              <FormControl>
+                isChecked={shouldAutoSave}
-                <FormLabel>{t('unifiedCanvas.autoSaveToGallery')}</FormLabel>
+                onChange={handleChangeShouldAutoSave}
-                <Checkbox
+              />
-                  isChecked={shouldAutoSave}
+            </FormControl>
-                  onChange={handleChangeShouldAutoSave}
+            <FormControl>
-                />
+              <FormLabel>{t('unifiedCanvas.saveBoxRegionOnly')}</FormLabel>
-              </FormControl>
+              <Checkbox
-              <FormControl>
+                isChecked={shouldCropToBoundingBoxOnSave}
-                <FormLabel>{t('unifiedCanvas.saveBoxRegionOnly')}</FormLabel>
+                onChange={handleChangeShouldCropToBoundingBoxOnSave}
-                <Checkbox
+              />
-                  isChecked={shouldCropToBoundingBoxOnSave}
+            </FormControl>
-                  onChange={handleChangeShouldCropToBoundingBoxOnSave}
+            <FormControl>
-                />
+              <FormLabel>{t('unifiedCanvas.limitStrokesToBox')}</FormLabel>
-              </FormControl>
+              <Checkbox
-              <FormControl>
+                isChecked={shouldRestrictStrokesToBox}
-                <FormLabel>{t('unifiedCanvas.limitStrokesToBox')}</FormLabel>
+                onChange={handleChangeShouldRestrictStrokesToBox}
-                <Checkbox
+              />
-                  isChecked={shouldRestrictStrokesToBox}
+            </FormControl>
-                  onChange={handleChangeShouldRestrictStrokesToBox}
+            <FormControl>
-                />
+              <FormLabel>{t('unifiedCanvas.showCanvasDebugInfo')}</FormLabel>
-              </FormControl>
+              <Checkbox
-              <FormControl>
+                isChecked={shouldShowCanvasDebugInfo}
-                <FormLabel>{t('unifiedCanvas.showCanvasDebugInfo')}</FormLabel>
+                onChange={handleChangeShouldShowCanvasDebugInfo}
-                <Checkbox
+              />
-                  isChecked={shouldShowCanvasDebugInfo}
+            </FormControl>
-                  onChange={handleChangeShouldShowCanvasDebugInfo}
+            <FormControl>
-                />
+              <FormLabel>{t('unifiedCanvas.antialiasing')}</FormLabel>
-              </FormControl>
+              <Checkbox
-              <FormControl>
+                isChecked={shouldAntialias}
-                <FormLabel>{t('unifiedCanvas.antialiasing')}</FormLabel>
+                onChange={handleChangeShouldAntialias}
-                <Checkbox
+              />
-                  isChecked={shouldAntialias}
+            </FormControl>
-                  onChange={handleChangeShouldAntialias}
-                />
-              </FormControl>
-            </FormControlGroup>
             <ClearCanvasHistoryButtonModal />
           </Flex>
         </PopoverBody>

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx

@@ -11,7 +11,7 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIColorPicker from 'common/components/IAIColorPicker';
@@ -276,9 +276,9 @@ const IAICanvasToolChooserOptions = () => {
               </Flex>
               <Box w="full" pt={2} pb={2}>
                 <IAIColorPicker
+                  withNumberInput={true}
                   color={brushColor}
                   onChange={handleChangeBrushColor}
-                  withNumberInput
                 />
               </Box>
             </Flex>

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx

@@ -1,4 +1,4 @@
-import type { ComboboxOnChange } from '@invoke-ai/ui-library';
+import type { ComboboxOnChange } from '@invoke-ai/ui';
 import {
   ButtonGroup,
   Combobox,
@@ -6,7 +6,7 @@ import {
   FormControl,
   IconButton,
   Tooltip,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard';

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx

@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { undo } from 'features/canvas/store/canvasSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';

invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx

@@ -1,11 +1,11 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
 import {
   Combobox,
   ConfirmationAlertDialog,
   Flex,
   FormControl,
   Text,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {

invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx

@@ -1,12 +1,12 @@
+import { ChevronUpIcon } from '@chakra-ui/icons';
 import {
   Box,
   Flex,
   FormControl,
   FormLabel,
-  Icon,
   IconButton,
   Switch,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
 import { useControlAdapterType } from 'features/controlAdapters/hooks/useControlAdapterType';
@@ -19,7 +19,7 @@ import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiCaretUpBold, PiCopyBold, PiTrashSimpleBold } from 'react-icons/pi';
+import { PiCopyBold, PiTrashSimpleBold } from 'react-icons/pi';
 import { useToggle } from 'react-use';
 
 import ControlAdapterImagePreview from './ControlAdapterImagePreview';
@@ -130,9 +130,7 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
           onClick={toggleIsExpanded}
           variant="ghost"
           icon={
-            <Icon
+            <ChevronUpIcon
-              boxSize={4}
-              as={PiCaretUpBold}
               transform={isExpanded ? 'rotate(0deg)' : 'rotate(180deg)'}
               transitionProperty="common"
               transitionDuration="normal"

invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx

@@ -1,5 +1,5 @@
-import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import type { SystemStyleObject } from '@invoke-ai/ui';
-import { Box, Flex, Spinner } from '@invoke-ai/ui-library';
+import { Box, Flex, Spinner } from '@invoke-ai/ui';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';

invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterProcessorComponent.tsx

@@ -5,7 +5,6 @@ import { memo } from 'react';
 import CannyProcessor from './processors/CannyProcessor';
 import ColorMapProcessor from './processors/ColorMapProcessor';
 import ContentShuffleProcessor from './processors/ContentShuffleProcessor';
-import DepthAnyThingProcessor from './processors/DepthAnyThingProcessor';
 import HedProcessor from './processors/HedProcessor';
 import LineartAnimeProcessor from './processors/LineartAnimeProcessor';
 import LineartProcessor from './processors/LineartProcessor';
@@ -49,16 +48,6 @@ const ControlAdapterProcessorComponent = ({ id }: Props) => {
     );
   }
 
-  if (processorNode.type === 'depth_anything_image_processor') {
-    return (
-      <DepthAnyThingProcessor
-        controlNetId={id}
-        processorNode={processorNode}
-        isEnabled={isEnabled}
-      />
-    );
-  }
-
   if (processorNode.type === 'hed_image_processor') {
     return (
       <HedProcessor

invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterShouldAutoConfig.tsx

@@ -1,4 +1,4 @@
-import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
+import { FormControl, FormLabel, Switch } from '@invoke-ai/ui';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
 import { useControlAdapterShouldAutoConfig } from 'features/controlAdapters/hooks/useControlAdapterShouldAutoConfig';

invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx

@@ -1,4 +1,4 @@
-import { Flex, IconButton } from '@invoke-ai/ui-library';
+import { Flex, IconButton } from '@invoke-ai/ui';
 import { useAppDispatch } from 'app/store/storeHooks';
 import {
   canvasImageToControlAdapter,

invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterBeginEnd.tsx

@@ -1,4 +1,4 @@
-import { CompositeRangeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { CompositeRangeSlider, FormControl, FormLabel } from '@invoke-ai/ui';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useControlAdapterBeginEndStepPct } from 'features/controlAdapters/hooks/useControlAdapterBeginEndStepPct';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';

invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx

@@ -1,5 +1,5 @@
-import type { ComboboxOnChange } from '@invoke-ai/ui-library';
+import type { ComboboxOnChange } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { useControlAdapterControlMode } from 'features/controlAdapters/hooks/useControlAdapterControlMode';

invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx

@@ -1,4 +1,4 @@
-import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, Tooltip } from '@invoke-ai/ui';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';

invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterProcessorSelect.tsx

@@ -1,5 +1,5 @@
-import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';

invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx

@@ -1,5 +1,5 @@
-import type { ComboboxOnChange } from '@invoke-ai/ui-library';
+import type { ComboboxOnChange } from '@invoke-ai/ui';
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';

invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx

@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';

invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx

@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredCannyImageProcessorInvocation } from 'features/controlAdapters/store/types';

invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx

@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredColorMapImageProcessorInvocation } from 'features/controlAdapters/store/types';

invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx

@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredContentShuffleImageProcessorInvocation } from 'features/controlAdapters/store/types';

invokeai/frontend/web/src/features/controlAdapters/components/processors/DepthAnyThingProcessor.tsx

@@ -1,110 +0,0 @@
-import type { ComboboxOnChange } from '@invoke-ai/ui-library';
-import {
-  Combobox,
-  CompositeNumberInput,
-  CompositeSlider,
-  FormControl,
-  FormLabel,
-} from '@invoke-ai/ui-library';
-import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
-import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
-import type {
-  DepthAnythingModelSize,
-  RequiredDepthAnythingImageProcessorInvocation,
-} from 'features/controlAdapters/store/types';
-import { isDepthAnythingModelSize } from 'features/controlAdapters/store/types';
-import { memo, useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import ProcessorWrapper from './common/ProcessorWrapper';
-
-const DEFAULTS = CONTROLNET_PROCESSORS.midas_depth_image_processor
-  .default as RequiredDepthAnythingImageProcessorInvocation;
-
-type Props = {
-  controlNetId: string;
-  processorNode: RequiredDepthAnythingImageProcessorInvocation;
-  isEnabled: boolean;
-};
-
-const DepthAnythingProcessor = (props: Props) => {
-  const { controlNetId, processorNode, isEnabled } = props;
-  const { model_size, resolution } = processorNode;
-  const processorChanged = useProcessorNodeChanged();
-
-  const { t } = useTranslation();
-
-  const handleModelSizeChange = useCallback<ComboboxOnChange>(
-    (v) => {
-      if (!isDepthAnythingModelSize(v?.value)) {
-        return;
-      }
-      processorChanged(controlNetId, {
-        model_size: v.value,
-      });
-    },
-    [controlNetId, processorChanged]
-  );
-
-  const options: { label: string; value: DepthAnythingModelSize }[] = useMemo(
-    () => [
-      { label: t('controlnet.small'), value: 'small' },
-      { label: t('controlnet.base'), value: 'base' },
-      { label: t('controlnet.large'), value: 'large' },
-    ],
-    [t]
-  );
-
-  const value = useMemo(
-    () => options.filter((o) => o.value === model_size)[0],
-    [options, model_size]
-  );
-
-  const handleResolutionChange = useCallback(
-    (v: number) => {
-      processorChanged(controlNetId, { resolution: v });
-    },
-    [controlNetId, processorChanged]
-  );
-
-  const handleResolutionDefaultChange = useCallback(() => {
-    processorChanged(controlNetId, { resolution: 512 });
-  }, [controlNetId, processorChanged]);
-
-  return (
-    <ProcessorWrapper>
-      <FormControl isDisabled={!isEnabled}>
-        <FormLabel>{t('controlnet.modelSize')}</FormLabel>
-        <Combobox
-          value={value}
-          defaultInputValue={DEFAULTS.model_size}
-          options={options}
-          onChange={handleModelSizeChange}
-        />
-      </FormControl>
-      <FormControl isDisabled={!isEnabled}>
-        <FormLabel>{t('controlnet.imageResolution')}</FormLabel>
-        <CompositeSlider
-          value={resolution}
-          onChange={handleResolutionChange}
-          defaultValue={DEFAULTS.resolution}
-          min={64}
-          max={4096}
-          step={64}
-          marks
-          onReset={handleResolutionDefaultChange}
-        />
-        <CompositeNumberInput
-          value={resolution}
-          onChange={handleResolutionChange}
-          defaultValue={DEFAULTS.resolution}
-          min={64}
-          max={4096}
-          step={64}
-        />
-      </FormControl>
-    </ProcessorWrapper>
-  );
-};
-
-export default memo(DepthAnythingProcessor);

invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx

@@ -4,7 +4,7 @@ import {
   FormControl,
   FormLabel,
   Switch,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredHedImageProcessorInvocation } from 'features/controlAdapters/store/types';

invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx

@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredLineartAnimeImageProcessorInvocation } from 'features/controlAdapters/store/types';

invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartProcessor.tsx

@@ -4,7 +4,7 @@ import {
   FormControl,
   FormLabel,
   Switch,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredLineartImageProcessorInvocation } from 'features/controlAdapters/store/types';

invokeai/frontend/web/src/features/controlAdapters/components/processors/MediapipeFaceProcessor.tsx

@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredMediapipeFaceProcessorInvocation } from 'features/controlAdapters/store/types';

invokeai/frontend/web/src/features/controlAdapters/components/processors/MidasDepthProcessor.tsx

@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredMidasDepthImageProcessorInvocation } from 'features/controlAdapters/store/types';

invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx

@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredMlsdImageProcessorInvocation } from 'features/controlAdapters/store/types';

invokeai/frontend/web/src/features/controlAdapters/components/processors/NormalBaeProcessor.tsx

@@ -3,7 +3,7 @@ import {
   CompositeSlider,
   FormControl,
   FormLabel,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredNormalbaeImageProcessorInvocation } from 'features/controlAdapters/store/types';

invokeai/frontend/web/src/features/controlAdapters/components/processors/OpenposeProcessor.tsx

@@ -4,7 +4,7 @@ import {
   FormControl,
   FormLabel,
   Switch,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredOpenposeImageProcessorInvocation } from 'features/controlAdapters/store/types';

invokeai/frontend/web/src/features/controlAdapters/components/processors/PidiProcessor.tsx

@@ -4,7 +4,7 @@ import {
   FormControl,
   FormLabel,
   Switch,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useProcessorNodeChanged } from 'features/controlAdapters/components/hooks/useProcessorNodeChanged';
 import { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { RequiredPidiImageProcessorInvocation } from 'features/controlAdapters/store/types';

invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx

@@ -1,4 +1,4 @@
-import { Flex } from '@invoke-ai/ui-library';
+import { Flex } from '@invoke-ai/ui';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
 

invokeai/frontend/web/src/features/controlAdapters/store/constants.ts

@@ -83,22 +83,6 @@ export const CONTROLNET_PROCESSORS: ControlNetProcessorsDict = {
       f: 256,
     },
   },
-  depth_anything_image_processor: {
-    type: 'depth_anything_image_processor',
-    get label() {
-      return i18n.t('controlnet.depthAnything');
-    },
-    get description() {
-      return i18n.t('controlnet.depthAnythingDescription');
-    },
-    default: {
-      id: 'depth_anything_image_processor',
-      type: 'depth_anything_image_processor',
-      model_size: 'small',
-      resolution: 512,
-      offload: false,
-    },
-  },
   hed_image_processor: {
     type: 'hed_image_processor',
     get label() {
@@ -261,7 +245,7 @@ export const CONTROLNET_MODEL_DEFAULT_PROCESSORS: {
 } = {
   canny: 'canny_image_processor',
   mlsd: 'mlsd_image_processor',
-  depth: 'depth_anything_image_processor',
+  depth: 'midas_depth_image_processor',
   bae: 'normalbae_image_processor',
   sketch: 'pidi_image_processor',
   scribble: 'lineart_image_processor',

invokeai/frontend/web/src/features/controlAdapters/store/types.ts

@@ -10,7 +10,6 @@ import type {
   CannyImageProcessorInvocation,
   ColorMapImageProcessorInvocation,
   ContentShuffleImageProcessorInvocation,
-  DepthAnythingImageProcessorInvocation,
   HedImageProcessorInvocation,
   LineartAnimeImageProcessorInvocation,
   LineartImageProcessorInvocation,
@@ -32,7 +31,6 @@ export type ControlAdapterProcessorNode =
   | CannyImageProcessorInvocation
   | ColorMapImageProcessorInvocation
   | ContentShuffleImageProcessorInvocation
-  | DepthAnythingImageProcessorInvocation
   | HedImageProcessorInvocation
   | LineartAnimeImageProcessorInvocation
   | LineartImageProcessorInvocation
@@ -75,20 +73,6 @@ export type RequiredContentShuffleImageProcessorInvocation = O.Required<
   'type' | 'detect_resolution' | 'image_resolution' | 'w' | 'h' | 'f'
 >;
 
-/**
- * The DepthAnything processor node, with parameters flagged as required
- */
-export type RequiredDepthAnythingImageProcessorInvocation = O.Required<
-  DepthAnythingImageProcessorInvocation,
-  'type' | 'model_size' | 'resolution' | 'offload'
->;
-
-export 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;
-
 /**
  * The HED processor node, with parameters flagged as required
  */
@@ -177,7 +161,6 @@ export type RequiredControlAdapterProcessorNode =
       | RequiredCannyImageProcessorInvocation
       | RequiredColorMapImageProcessorInvocation
       | RequiredContentShuffleImageProcessorInvocation
-      | RequiredDepthAnythingImageProcessorInvocation
       | RequiredHedImageProcessorInvocation
       | RequiredLineartAnimeImageProcessorInvocation
       | RequiredLineartImageProcessorInvocation
@@ -236,22 +219,6 @@ export const isContentShuffleImageProcessorInvocation = (
   return false;
 };
 
-/**
- * Type guard for DepthAnythingImageProcessorInvocation
- */
-export const isDepthAnythingImageProcessorInvocation = (
-  obj: unknown
-): obj is DepthAnythingImageProcessorInvocation => {
-  if (
-    isObject(obj) &&
-    'type' in obj &&
-    obj.type === 'depth_anything_image_processor'
-  ) {
-    return true;
-  }
-  return false;
-};
-
 /**
  * Type guard for HedImageprocessorInvocation
  */

invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx

@@ -1,5 +1,5 @@
-import type { IconButtonProps } from '@invoke-ai/ui-library';
+import type { IconButtonProps } from '@invoke-ai/ui';
-import { IconButton } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui';
 import { useAppSelector } from 'app/store/storeHooks';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx

@@ -6,7 +6,7 @@ import {
   FormLabel,
   Switch,
   Text,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';

invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx

@@ -1,4 +1,4 @@
-import { ListItem, Text, UnorderedList } from '@invoke-ai/ui-library';
+import { ListItem, Text, UnorderedList } from '@invoke-ai/ui';
 import type { ImageUsage } from 'features/deleteImageModal/store/types';
 import { some } from 'lodash-es';
 import { memo } from 'react';

invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx

@@ -1,5 +1,5 @@
-import type { ChakraProps } from '@invoke-ai/ui-library';
+import type { ChakraProps } from '@invoke-ai/ui';
-import { Box, Flex, Heading, Image, Text } from '@invoke-ai/ui-library';
+import { Box, Flex, Heading, Image, Text } from '@invoke-ai/ui';
 import { useAppSelector } from 'app/store/storeHooks';
 import type { TypesafeDraggableData } from 'features/dnd/types';
 import { memo } from 'react';

invokeai/frontend/web/src/features/dynamicPrompts/components/DynamicPromptsPreviewModal.tsx

@@ -6,7 +6,7 @@ import {
   ModalContent,
   ModalHeader,
   ModalOverlay,
-} from '@invoke-ai/ui-library';
+} from '@invoke-ai/ui';
 import { useDynamicPromptsModal } from 'features/dynamicPrompts/hooks/useDynamicPromptsModal';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx

@@ -1,4 +1,4 @@
-import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
+import { FormControl, FormLabel, Switch } from '@invoke-ai/ui';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { combinatorialToggled } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import { memo, useCallback } from 'react';